【ES2018】ES9新增特性-对象扩展运算符

对象的扩展运算符

ES2018 将ES6中数组扩展运算符（…）扩展运算符引入了对象，实现对象键值对的展开。这一方法的引入可以有以下几点应用：

1 对象克隆

var obj = {
  name: 'aaaa',
  age: 100,
  say() {
    console.log('age'+this.age);
  },
  getInfo: function(){}
};
// 克隆对象 obj
let obj2 = {...obj};

注意： 同 Object.assign() 相同，用扩展运算符实现对象克隆，会将源对象所有可枚举属性（可遍历属性）复制到目标对象。

2 对象合并

var obj1 = {
  name: 'aaaa',
  age: 100,
  say() {
    console.log('age'+this.age);
  },
  getInfo: function(){}
};
var obj2 = {
  width:100, 
  height:200, 
  name: 'bbb'
};

// 合并 Obj1 和 obj2
var obj3 = {...obj1, ...obj2};   // {name: "bbb", age: 100, width: 100, say: ƒ, getInfo: ƒ, …}

注意： 如果对象的属性名有重复的，后展开对象的属性会覆盖先展开队形的属性，依次类推。

3 解构赋值

对象的解构赋值用于从一个对象取值，相当于将目标对象自身的所有可遍历的（enumerable）、但尚未被读取的属性，分配到指定的对象上面。所有的键和它们的值，都会拷贝到新对象上面。

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

let {...obj5} = [10,20,30,40,40,50];
obj5;  // {0: 10, 1: 20, 2: 30, 3: 40, 4: 40, 5: 50}

let {...obj6} = 'hello world';
obj6; // {0: "h", 1: "e", 2: "l", 3: "l", 4: "o", 5: " ", 6: "w", 7: "o", 8: "r", 9: "l", 10: "d"}

进行解构赋值时，使用对象扩展运算符展开的对象必须是结构参数的最后一个，否则会报错。

let { ...x, y, z } = someObject; // 句法错误
let { x, ...y, ...z } = someObject; // 句法错误