es6中‘...’扩展运算符的使用

es6中‘…’扩展运算符的使用

'…'在数组中的扩展运算符

1. 复制数组

let arr = [1, 2],
    arr1 = [...arr];
console.log(arr1); // [1, 2]
 
// 数组含空位
let arr2 = [2, , 3],
    arr3 = [...arr2];
console.log(arr3); // [2, undefined, 3]

2.合并数组

console.log([...[1, 2],...[3, 4]]); // [1, 2, 3, 4]

//复制并合并数组 
let arr4 = [1, 2],
    arr5 = [3, 4];
console.log([...arr4,...arr5]); // [1, 2, 3, 4]

扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中，这里参数对象是个数组，数组里面的所有对象都是基础数据类型，将所有基础数据类型重新拷贝到新的数组中。

对象的拓展运算符

拓展运算符（…）用于取出参数对象所有可遍历属性然后拷贝到当前对象！
拓展运算符（…）用于取出参数对象所有可遍历属性然后拷贝到当前对象！
拓展运算符（…）用于取出参数对象所有可遍历属性然后拷贝到当前对象！

重要的事说三遍，这句话对理解扩展运算符非常重要。

1. 基本用法

let person = {name: "Amyly", age: 17};
let someone = { ...person };
consle.log(someone);  //{name: "Amyly", age: 17}

2.可用于合并两个对象

let age = {age: 16};
let name = {name: "Amyly"};
let person = {...age, ...name};
consle.log(person);  //{age: 16, name: "Amyly"}

注意：
自定义的属性和拓展运算符对象里面属性的相同的时候：自定义的属性在拓展运算符后面，则拓展运算符对象内部同名的属性将被覆盖掉。

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

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

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

拓展运算符后面是空对象，没有任何效果也不会报错

let a = {...{}, a: 1, b: 2};
consle.log(a);  //{a: 1, b: 2}

拓展运算符后面是null或者undefined，没有效果也不会报错。

let b = {...null, ...undefined, a: 1, b: 2};
consle.log(b);  //{a: 1, b: 2}

这篇文章是在我想进行合并两个数组时，查询资料后的一些经验。‘…’扩展符的基本使用差不多是这些，如果想进一步学习的话可以参考阮一峰老师的ECMAScript 6入门教程。
如果有新的心得、经验欢迎大家在评论区一起交流。