ES6展开运算符(...)
在ES6中，我们有了一个新的运算符–展开运算符，它可以使我们的代码的数量有一定的减少，有时候甚至有很有用的作用，我们来举几个常用的例子，同时通过例子来了解展开运算符的使用。
展开运算符的作用：
1.展开数组/字符串/对象 2.拷贝数组/对象（浅拷贝） 3.合并数组/对象 4.把伪数组转换成真数组 5.收集函数的剩余参数
一、展开数组/字符串/对象
展开数组
let arr = ['宝马', '奥迪', '奔驰', '红旗'];
console.log(...arr);
image-20220109224722222
展开字符串（因为字符串本身也是一个特殊的数组）
console.log(..."hello Riven,你好,世界");
image-20220109224834582
展开对象
let obj={
name:'张三',
age:18,
hobby:['唱','跳','rap'],
family:{
father:{
name:'张父',
age:38,
hobby:['洗脚']
},
mother:{
name:'张母',
age:37,
hobby:['打牌']
}
}
}如果直接展开：
console.log(...obj);会报错：
image-20220109225012006
我们需要使用{}对展开进行包裹：
console.log({...obj})
image-20220109225114470
求数组的最大最小值
let nums=[123,12,4564,23,125];
console.log(Math.max(nums));//NaN直接传入nums会报错，我们需要把数组展开
console.log(Math.max(...nums));
console.log(Math.min(...nums));
image-20220109225417748
二、拷贝数组/对象（浅拷贝）
拷贝数组
直接复制其实是复制的引用地址，将来任意一个数组变化了都会影响到另一个数组
let arr = ['宝马', '奥迪', '奔驰', '红旗'];
let arr1=arr;
arr1.push('比亚迪');
console.log(arr);
image-20220109225807026
所以我们需要使用…展开后进行拷贝
let arr = ['宝马', '奥迪', '奔驰', '红旗'];
let arr1=[...arr]
arr1.push('比亚迪');
console.log(arr);
image-20220109225923435
拷贝对象
let obj={
name:'张三',
age:18,
hobby:['唱','跳','rap'],
family:{
father:{
name:'张父',
age:38,
hobby:['洗脚']
},
mother:{
name:'张母',
age:37,
hobby:['打牌']
}
}
}
let obj1 = {...obj};
obj1.family.father.age=8;//修改嵌套多层的属性值
console.log(obj.family.father.age);可以看到我们是使用的…来拷贝对象，但是修改obj1的father.age后， obj的father.age的值也变了，这说明…只是浅拷贝，除了第一层，其他的还是拷贝的引用地址
image-20220109230410644
三、合并数组/对象
- 合并数组
let arr2 = ['王五', '赵六'];
let arr3 = ['王德发', '斯国一'];
let arr4 = [...arr2, ...arr3];
console.log(arr4);
image-20220109230812519
- 合并对象
let obj2={
name:'王五',
age:18,
hobby: ['唱歌']
}
let obj3={
hobby: ['跳舞'],
father: '王五的父亲'
}
let obj4 = {...obj2, ...obj3};
console.log(obj4)合并对象时，不同的属性会合并累加起来，相同属性名的前面的对象会被后面的对象覆盖，例如：hobby唱歌被跳舞覆盖了
image-20220109231040835
四、把伪数组转换成真数组
function add() {
//arguments 是一个对应于传递给函数的参数的类数组对象。(是一个伪数组)
console.log(arguments);
console.log([...arguments]);
}
add(1, 2, 3, 4, 5);
image-20220109231657800
五、收集函数的剩余参数
function fn(...args) {
console.log(args);
}
fn(1, 2, 3, 4, 5);
image-20220109231819282
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录