ES6扩展:对象展开运算符
1、展开对象
对象不能直接展开,必须在 {} 中展开
const apple = {
color: '红色',
shape: '球形',
taste: '甜'
};
console.log(...apple); //{color: '红色', shape: '球形', taste: '甜'}
console.log({ ...apple } === apple); // false
对象的展开:把属性罗列出来,用逗号分隔,放到一个 {} 中,构成新对象
2、 合并对象
const apple = {
color: '红色',
shape: '球形',
taste: '甜'
};
const pen = {
color: '黑色',
shape: '圆柱形',
use: '写字'
};
console.log({ ...apple, ...pen });
// {color: '黑色', shape: '圆柱形', taste: '甜', use: '写字'}
新对象拥有全部属性,相同属性,后者覆盖前者
3、对象展开运算符的注意事项
1)空对象的展开
如果展开一个空对象,则没有任何效果
console.log({ ...{} }); //{}
console.log({ ...{}, a: 1 }); //{a: 1}
2)非对象的展开
如果展开的不是对象,则会自动将其转为对象,再将其属性罗列出来
console.log({ ...1 }); //{}
console.log(new Object(1)); //{}
console.log({ ...undefined }); //{}
console.log({ ...null }); //{}
console.log({ ...true }); //{}
如果展开运算符后面是字符串,它会自动转成一个类似数组的对象,因此返回的不是空对象
console.log({ ...'alex' }); //{0: 'a', 1: 'l', 2: 'e', 3: 'x'}
console.log([...'alex']); //['a', 'l', 'e', 'x']
console.log(...'alex'); //a l e x
3)对象中对象属性的展开:不会展开对象中的对象属性
const apple = {
feature: {
taste: '甜'
}
};
console.log({ ...apple }); // feature不会展开
4、对象展开运算符的应用
1)复制对象
const a = { x: 1, y: 2 };
const c = { ...a }; //进行复制
console.log(c, c === a); //{x: 1, y: 2} false
2)用户参数和默认参数
const logUser = userParam => { //用户参数
const defaultParam = { //默认参数
username: 'ZhangSan',
age: 0,
sex: 'male'
};
const param = { ...defaultParam, ...userParam };
console.log(param.username); //ZhangSan
};