对象的扩展运算符
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; // 句法错误