扩展运算符

... 是 ES6 新出来的符号，称为扩展运算符。它在不同情况下有不同的作用，下文我们将对之进行梳理。

对象中的扩展运算符

1. ... 当作对象扩展符使用时可以用来浅拷贝目标对象的自有属性中的可枚举属性。

对象中的扩展运算符的作用等同于 Object.assign()。

下面举例证明上述结论：

• 验证对象扩展符只能 copy 自有属性，原型链上的属性不能 copy

class Demo {
  constructor() {
    this.name = 'Lily'
  }
  testFn() {}
}
const test = new Demo()
const cpObj = { ...test }
cpObj.name === 'Lily' // true
cpObj.testFn()        // Uncaught TypeError: cpTest.testFn is not a function

• 验证只能 copy 可枚举属性

const obj = Object.defineProperty({ a: 1 }, 'b', {
  enumerable: false,
  value: 2
})
const cpObj = { ...obj }
obj.a   // 1
obj.b   // 2
cpObj.a // 1
cpObj.b // undefined

1. 解构赋值

const obj = { a: 1, b: 2, c: 3 }
const { a, ...x } = obj
const { a: data } = obj // 重命名
a // 1
x // { b: 2, c: 3 }
data // 1

数组中的扩展运算符

1. 浅拷贝

const arr = [1, 2, 3]
const cpArr = [...arr]
cpArr // [1, 2, 3]

下面这种写法也是浅拷贝的变种：

const arr = [1, 2, 3]
const cpArr = []
cpArr.push(...arr)
cpArr // [1, 2, 3]

因为这个特性，我们还可以合并数组，如下所示：

const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const mergeArr = [...arr1, ...arr2]
mergeArr // [1, 2, 3, 4, 5, 6]

1. 解构赋值

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

扩展运算符用来做解构赋值时，只能放在最后一位

1. 传参中使用，将所传的参数变为数组

function Demo(...args) {
  console.log(args)
}
Demo(1, 2, 3) // [1, 2, 3]

相关链接

• 对象扩展符简易指南