JS中...的用法

1. 什么是...?

...是扩展运算符，是ES6的新语法

2. 怎么使用？

作用在对象上，返回一个对象。取出对象所有可遍历属性，返回一个新的对象可以进行拷贝

2.1 基本用法

let person = { name:'张三'，age:18}
​
let someone = {...person}
​
console.log(someone) //返回 { name:'张三'，age:18}

2.2 作用于数组对象

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

说明：给数组的每个元素生成key,从0开始返回一个新的对象

2.3 用于合并对象

let name = { name:'张三'}
​
let age = { age:18}
​
let person ={...name,...age}
​
console.log(person) //{name:'张三'，age:18}

2.4 属性的合并

let person = {name: "Amy", age: 15};
​
let someone = { ...person, name: "Mike", age: 17};
​
console.log(someone); //{name: "Mike", age: 17}

说明：自定义属性和扩展属性相同的时候，将会被覆盖。自定义属性在前，扩展属性覆盖自定义属性。反之则是自定义属性覆盖拓展属性。

let person = {name: "Amy", age: 15};
​
let someone = {name: "Mike", age: 17, ...person};
​
console.log(someone);  //{name: "Amy", age: 15}

自定义的属性在拓展运算度前面，则变成设置新对象默认属性值。