ES6之扩展运算符（...）关于数组和对象的常见用法

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、对象合并