对象的扩展(…)
const obj = { x: 1, y: 2 , z: 3 };
const { x, ...newObj } = obj;
const result={
...newObj,
newX: x
};
//打印结果
result
{y: 2, z: 3, newX: 1}
这样我们就可以把 x
改成 newX
了
一般在用于前端(组件)+(传参数)的时候 && 后端要的参数不一致的时候
扩展
注意,解构赋值的拷贝是浅拷贝,即如果一个键的值是复合类型的值(数组、对象、函数)、那么解构赋值拷贝的是这个值的引用,而不是这个值的副本
let obj = { a: { b: 1 } };
let { ...x } = obj;
obj.a.b = 2;
x.a.b // 2
上面代码中,x
是解构赋值所在的对象,拷贝了对象obj
的a
属性。a
属性引用了一个对象,修改这个对象的值,会影响到解构赋值对它的引用。
另外,扩展运算符的解构赋值,不能复制继承自原型对象的属性。
let o1 = { a: 1 };
let o2 = { b: 2 };
o2.__proto__ = o1;
let { ...o3 } = o2;
o3 // { b: 2 }
o3.a // undefined
上面代码中,对象 o3
复制了 o2
,但是只复制了 o2
自身的属性,没有复制它的原型对象 o1
的属性。
下面是另一个例子。
const o = Object.create({ x: 1, y: 2 });
o.z = 3;
let { x, ...newObj } = o;
let { y, z } = newObj;
x // 1
y // undefined
z // 3
上面代码中,变量x是单纯的解构赋值,所以可以读取对象 o
继承的属性;变量 y
和 z
是扩展运算符的解构赋值,只能读取对象 o
自身的属性,所以变量 z
可以赋值成功,变量y取不到值。ES6 规定,变量声明语句之中,如果使用解构赋值,扩展运算符后面必须是一个变量名,而不能是一个解构赋值表达式,所以上面代码引入了中间变量 newObj
详情资料:请查看ES6对象的扩展