ES6之扩展运算符(…)关于数组和对象的常见用法
扩展运算符的定义
扩展运算符是ES6引入的一种新的语法特性,用于展开一个数组或对象,将其展开成独立的值。在函数调用、数组字面量、对象字面量等场景中,扩展运算符都可以发挥重要的作用。
数组的扩展运算符
1、遍历数组
var arr = [1, 2, 3, 4]
console.log(...arr);//1,2,3,4
2、当作数组中的元素
var arr_1 = [0, ...arr]
console.log(arr_1);//[0,1,2,3,4]
3、数组深拷贝
var arr_2 = [...arr_1]
arr_1.unshift(1)
console.log(arr_1);//[1,0,1,2,3,4]
console.log(arr_2);//[0,1,2,3,4]
4、将伪数组转换成真正的数组
var str = '我们是web31'
console.log(Array.from(str));//['我','们','是','w','e','b','3','1']
console.log([...str]);//['我','们','是','w','e','b','3','1']
5、与解构赋值连用
var arr = [1, 2, 3, 4]
var [x, y, z] = [...arr]
console.log(x, y, z);//1,2,3,
6、函数的调用
var arr = [1, 2, 3, 4]
function fn(a, b, c) {
console.log(a, b, c);//1,2,3
}
fn(...arr)
对象的扩展运算符
1、遍历对象
var obj = {
name: "zs",
age: 18
}
console.log({ ...obj });//{name:"zs",age:18}
2、对象深拷贝
var obj = {
name: "zs",
age: 18
}
var obj_1 = { ...obj }
delete obj.age
console.log(obj);//{name:"zs"}
console.log(obj_1);//{name:"zs",age:18}
3、对象合并
var a = {
a: 1,
b: 3
}
var b = {
c: 2,
...a,
}
console.log(b);//{c: 2, a: 1, b: 3}
注意合并时如果出现属性名相同,后面的会覆盖前面,例如:
var a = {
a: 1,
b: 3
}
var b = {
b: 2,
...a,
}
console.log(b);//{b:3,a:1}
总结
在ES6中扩展运算符在数组和对象中的常见用法有:
数组中:
1、遍历数组
2、当做数组中的元素
3、数组深拷贝
4、将伪数组转换成真正的数组
5、与解构赋值连用
6、函数的调用
对象中:
1、遍历对象
2、对象深拷贝
3、对象合并