ES6对象的扩展运算符

1、对象的扩展运算符(…)用于取出参数对象的所有可遍历属性，拷贝到当前对象之中

let z = {a:3,b:4};
let n = {...z};
console.log(n);//{a:3,b:4}

2、 由于数组是特殊的对象，所以对象的扩展运算符也可以用于数组

let foo = {...['a','b','c']}
console.log(foo);//{ '0': 'a', '1': 'b', '2': 'c' }

3、如果扩展运算符后面是一个空的对象，则没有任何效果

console.log({...{},a:1});//{a:1}

4、 如果扩展运算符后面是一个字符串，它会自动转成一个类数组对象，因此返回的不是空对象

console.log({...'hello'});//{ '0': 'h', '1': 'e', '2': 'l', '3': 'l', '4': 'o' }

5、如果扩展运算符后面不是对象，则会自动将其转为对象。由于该对象没有自身属性，所以返回一个空对象。

console.log({...1});//{}
console.log({...true});//{}
console.log({...undefined});//{}
console.log({...null});//{}

6、对象的扩展运算符等同于使用Object.assign()函数

let a = {
     name:'lisi',
     age:22
}
console.log({height:12,...a});//{ height: 12, name: 'lisi', age: 22 }
console.log(Object.assign({height:12},a));//{ height: 12, name: 'lisi', age: 22 }

7、 扩展运算符可以用于合并两个对象相当于Object.assign()函数

let a = {name:'lisi'}
let b = {age:23}
console.log({...a,...b});//{ name: 'lisi', age: 23 }
// 等同于
console.log(Object.assign({},a,b));//{ name: 'lisi', age: 23 }

8、如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉

let a = {x:3,y:4}
console.log({...a,x:1,y:2});//{ x: 1, y: 2 }
console.log({...a,...{x:1,y:2}});//{ x: 1, y: 2 }
let x = 1, y = 2
console.log({...a,x,y});//{ x: 1, y: 2 }
console.log(Object.assign({},a,{x:1,y:2}));//{ x: 1, y: 2 }

9、如果把用户自定义的属性放在扩展运算符前面，就变成了设置新对象的默认属性值

let a ={name:'lisi',age:12}
console.log({x:1,y:2,...a});//{ x: 1, y: 2, name: 'lisi', age: 12 }
console.log(Object.assign({},{x:1,y:2},a));//{ x: 1, y: 2, name: 'lisi', age: 12 }
console.log(Object.assign({x:1,y:2},a));//{ x: 1, y: 2, name: 'lisi', age: 12 }

10、对象的扩展运算符后面可以跟着表达式

const obj={
     ...(8>1?{a:1}:{}),
     b:2
}
console.log(obj);//{a:1,b:2}

11、扩展运算符的参数对象之中，如果有取值函数get，这个函数是会执行的

 let a = {
     get x() {
     //   throw new Error('not throw yet');
     console.log('hello');
    }
   }
  
let aWithXGetter = { ...a }; // 报错