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

おすすめ

転載: blog.csdn.net/qq_38987146/article/details/121397613