ES6/ES7 三点式 —— 扩展运算符与剩余操作符

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了ES6/ES7 三点式 —— 扩展运算符与剩余操作符脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

ES6 标准提供给 JavaScript 开发者许多简化代码的新特性,今天要介绍的扩展运算符就是非常常用的一种。可以使你的代码更加简洁优雅。

扩展运算

扩展运算符以三个点的形式出现 ... 可以将数组或者对象里面的值展开。

const a = [1, 2, 3]

console.LOG(a) // 1 2 3

const b = {a: 1, b: 2}

console.log({c: 3, ...b}) // {a: 1, b: 2, c: 3}

扩展运算符的应用

接下来看看扩展运算符的常见应用。

1.复制数组和复制对象

const a = [1, 2, 3]
const b = [...a]

// 相当于 b = a.slice()

console.log(a) // [1, 2, 3]
console.log(b) // [1, 2, 3]
console.log(a === b) // false
const a = {a: 1, b: 2}
const b = {...a}

console.log(a) // {a: 1, b: 2}
console.log(b) // {a: 1, b: 2}
console.log(a === b) // false

// 相当于 const b = Object.assign({}, a)

要注意复制时候只会进行浅复制。

2.合并数组和合并对象

const a = [1, 2, 3]
const b = [4, 5]

console.log([...a, ...b]) // [1, 2, 3, 4, 5]

// 相当于 a.concat(b)
const a = {a: 1, b: 2}
const b = {b: 3, c: 4}

console.log({...a, ...b, c: 5}) // {a: 1, b: 3, c: 5}

// 相当于 Object.assign(a, b, {c: 5})

3.类数组对象数组化

前端开发当中经常会遇到一些类数组对象,如:functionarguments,@L_304_6@cument.querySelectorAll 等,通常会将这些类数组对象转换为数组的形式使其可以利用数组原型对象的方法。

const divs = document.querySelectorAll('divs')

// divs.push 会报错

// slice 方式

divs = [].slice.call(divs)

// 使用扩展运算符

divs = [...divs]

4.代替 apply 方法

function sum(x, y, z) {
  console.log(x + y + z)
}

const args = [1, 2, 3]
// apply 方式

fn.apply(null, args)

// 扩展运算符方式

fn(...args)

剩余操作符

另外一种以三个点 ... 形式出现的是剩余操作符,与扩展操作符相反,剩余操作符将多个值收集为一个变量,而扩展操作符是将一个数组扩展成多个值。

// 配合 ES6 解构的新特性
const [a, ...b] = [1, 2, 3]

console.log(a) // 1
console.log(b) // [2, 3]

最后再看一个例子,在日常开发当中非常常见,而且同时利用到扩展操作符和剩余操作符,在 React 开发当中常常会利用一些组件库,为了业务需要我们会将一些组件库提供的组件封装成业务组件方便开发。

import { Button } from 'antd'  // 组件库提供的组件

function MyButton({ isDanger, children, ...others }) {
  return (
    <div>
      {isDanger ? 
        <Button {...others} size="large" type="danger">{children}</Button> :
        <Button {...others} size="small" type="@R_777_813@">{children}</Button>
      }
    </div>
  )
}

本文同步于我的个人博客 http://blog.acwong.org/2017/09/23/es6-destructuring-assignment/

脚本宝典总结

以上是脚本宝典为你收集整理的ES6/ES7 三点式 —— 扩展运算符与剩余操作符全部内容,希望文章能够帮你解决ES6/ES7 三点式 —— 扩展运算符与剩余操作符所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。