ES6扩展：对象展开运算符-CFANZ编程社区

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
};

0 条评论