扩展运算符

... 是 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

解构赋值

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

2、数组中的扩展运算符
　　
浅拷贝

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

cpArr // [1, 2, 3]

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

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

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

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

function Demo(...args) {
  console.log(args)
}

Demo(1, 2, 3) // [1, 2, 3]

相关链接：对象扩展符简易指南