◆
ES6 对象扩展运算符用法详解
对象的扩展运算符
对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中。
let z = { a: 3, b: 4 };
let n = { ...z };
n; // { a: 3, b: 4 }
数组是特殊的对象,所以对象的扩展运算符也可以用于数组
let foo = { ...['a', 'b', 'c'] };
foo;
// {0: "a", 1: "b", 2: "c"}
扩展运算符后面是一个空对象,则没有任何效果。
{...
{}
,
a: 1
}
// { a: 1 }
扩展运算符后面不是对象,则会自动将其转为对象。
扩展运算符后面是整数 1,会自动转为数值的包装对象 Number{1},由于该对象没有自身属性,所以返回一个空对象。
// 等同于 {...Object(1)}
{...
1
} // {}
// 等同于 {...Object(true)}
{...
true
} // {}
// 等同于 {...Object(undefined)}
{...
undefined
} // {}
// 等同于 {...Object(null)}
{...
null
} // {}
如果扩展运算符后面是字符串,它会自动转成一个类似数组的对象,因此返回的不是空对象。
{...
'hello'
}
// {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}
对象的扩展运算符,只会返回参数对象自身的、可枚举的属性
class C {
p = 12;
m() {}
}
let c = new C();
let clone = { ...c };
clone.p; // ok
clone.m(); // 报错
上面示例中,c 是 C 类的实例对象,对其进行扩展运算时,只会返回 c 自身的属性 c.p,而不会返回 c 的方法 c.m(),因为这个方法定义在 C 的原型对象上
对象的扩展运算符等同于使用 Object.assign() 方法。
let aClone = { ...a };
// 等同于
let aClone = Object.assign({}, a);
合并两个对象
let ab = { ...a, ...b };
// 等同于
let ab = Object.assign({}, a, b);
如果用户自定义的属性,放在扩展运算符后面,则扩展运算符内部的同名属性会被覆盖掉
let aWithOverrides = { ...a, x: 1, y: 2 };
// 等同于
let aWithOverrides = { ...a, ...{ x: 1, y: 2 } };
// 等同于
let x = 1,
y = 2,
aWithOverrides = { ...a, x, y };
// 等同于
let aWithOverrides = Object.assign({}, a, { x: 1, y: 2 });
对象的扩展运算符后面可以跟表达式
const obj = {
...(x > 1 ? { a: 1 } : {}),
b: 2,
};
扩展运算符的参数对象之中,如果有取值函数 get,这个函数是会执行的。
let a = {
get x() {
throw new Error('not throw yet');
},
};
let aWithXGetter = { ...a }; // 报错

还没有留言,来发表第一条吧~