ES6展开运算符(...)

ES6展开运算符(...)

一月 09, 2022
该文章更新于 2022.01.09

在ES6中，我们有了一个新的运算符–展开运算符，它可以使我们的代码的数量有一定的减少，有时候甚至有很有用的作用，我们来举几个常用的例子，同时通过例子来了解展开运算符的使用。

展开运算符的作用：

1.展开数组/字符串/对象
2.拷贝数组/对象（浅拷贝）
3.合并数组/对象
4.把伪数组转换成真数组
5.收集函数的剩余参数

一、展开数组/字符串/对象

  1. 展开数组

    1
    2
    let arr = ['宝马', '奥迪', '奔驰', '红旗'];
    console.log(...arr);

    image-20220109224722222

  2. 展开字符串（因为字符串本身也是一个特殊的数组）

    1
    console.log(..."hello Riven,你好,世界");

    image-20220109224834582

  3. 展开对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    let obj={
            name:'张三',
            age:18,
            hobby:['唱','跳','rap'],
            family:{
                father:{
                    name:'张父',
                    age:38,
                    hobby:['洗脚']
                },
                mother:{
                    name:'张母',
                    age:37,
                    hobby:['打牌']
                }
            }
        }

    如果直接展开：

    1
    console.log(...obj);

    会报错：

    image-20220109225012006

    我们需要使用{}对展开进行包裹：

    1
    console.log({...obj})

    image-20220109225114470

  4. 求数组的最大最小值

    1
    2
    3
    4
    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

二、拷贝数组/对象（浅拷贝）

  1. 拷贝数组

    直接复制其实是复制的引用地址，将来任意一个数组变化了都会影响到另一个数组

    1
    2
    3
    4
    let arr = ['宝马', '奥迪', '奔驰', '红旗'];
    let arr1=arr;
    arr1.push('比亚迪');
    console.log(arr);

    image-20220109225807026

    所以我们需要使用…展开后进行拷贝

    1
    2
    3
    4
    let arr = ['宝马', '奥迪', '奔驰', '红旗'];
    let arr1=[...arr]
    arr1.push('比亚迪');
    console.log(arr);

    image-20220109225923435

  2. 拷贝对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    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

三、合并数组/对象

  1. 合并数组
1
2
3
4
let arr2 = ['王五', '赵六'];
let arr3 = ['王德发', '斯国一'];
let arr4 = [...arr2, ...arr3];
console.log(arr4);

image-20220109230812519

  1. 合并对象
1
2
3
4
5
6
7
8
9
10
11
let obj2={
    name:'王五',
    age:18,
    hobby: ['唱歌']
}
let obj3={
    hobby: ['跳舞'],
    father: '王五的父亲'
}
let obj4 = {...obj2, ...obj3};
console.log(obj4)

合并对象时，不同的属性会合并累加起来，相同属性名的前面的对象会被后面的对象覆盖，例如：hobby唱歌被跳舞覆盖了

image-20220109231040835

四、把伪数组转换成真数组

1
2
3
4
5
6
function add() {
       //arguments 是一个对应于传递给函数的参数的类数组对象。(是一个伪数组)
       console.log(arguments);
       console.log([...arguments]);
   }
   add(1, 2, 3, 4, 5);

image-20220109231657800

五、收集函数的剩余参数

1
2
3
4
function fn(...args) {
       console.log(args);
   }
   fn(1, 2, 3, 4, 5);

image-20220109231819282