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