ES2018(ES9)新增特性

1 对象的扩展运算符

我们知道 ES6 扩展运算符(...)可以把数组或可遍历对象转为用逗号分隔的参数序列。

ES2018 将扩展运算符引入了对象,可以把对象转为用逗号分隔的键值对序列。

1.1 用于对象克隆

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

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

1.2 用于合并对象

var obj1 = {
  name: 'caocao',
  age: 100,
  say() {
    console.log('My Name is '+this.name);
  },
  getInfo: function(){}
};
var obj2 = {
  width:100, 
  height:200, 
  name: '孙权'
};

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

注意: 如果对象的属性名有重复的,后面的会覆盖前面的

1.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; // 句法错误

results matching ""

    No results matching ""