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入门教程。
如果有新的心得、经验欢迎大家在评论区一起交流。