【ES6复习】扩展运算和剩余操作符

ES6语法糖,使用 ... 操作符对数组或对象进行展开或者收集,他可以使你的代码更加简洁优雅。

扩展运算符的使用

扩展运算也叫做展开操作,它能够把一个数组或者对象里面的值展开。

  • 数组或对象的复制,类似Object.assign都是浅拷贝

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // 数组
    let arr = [1, 2, 3],
    // 展开操作
    newArr = [...arr];

    arr !== newArr;

    // 对象
    let obj = {foo: 1},
    newObj = {...obj};

    obj !== newObj;
  • 数组或对象的合并

    1
    2
    3
    4
    let a1 = [1,2,3],
    a2 = [4,5,6];

    let a = [...a1, ...a2];
  • 类数组转换成数组

    1
    2
    3
    4
    5
    6
    7
    8

    function fn() {
    // 把arguments对象转换成一个数组, 也可以用后面的剩余操作符直接产生一个数组
    let arr = [...arguments];
    console.log(arr)
    }

    fn(1,2,3)
  • 更好的apply解决方案

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function add(a, b, c) {
    console.log(a + b + c)
    }

    const arr = [1, 2, 3]

    // 使用 apply
    fn.apply(null, arr)

    // 使用 扩展运算
    fn(...arr)

剩余操作符的使用

同样是使用 ... ,和扩展运算符不同的是,它能够把多个值进行收集,并保存到一个变量。

  • 对多余参数进行接收

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    let [a1, ...last] = [1, 2, 3];
    // a1 = 1
    // last = [2, 3]


    let {a, ...last} = { a: 1, b: 2, c: 3 };
    // a = 1
    // last = {b:2, c:3}

    // 在函数中使用 替代argument的使用
    function fn(..arr) {
    console.log(arr)
    }

    fn(1,2,3)
  • 结合解构复制,可以更好的使用变量复制,以及参数的默认值操作

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // z 会接收函数第一个参数初x、y属性以外的属性作为一个对象
    // others 会接收foo函数以外的其他参数左右一个数组
    function foo({x, y = 5, ...z} = {}, ...others) {
    console.log(x, y, z, others);
    }

    foo({x: 0}); // x=0 y=5 z={} others=[]
    foo({x: 0, y: 1, m: 2, n: 3}); // x=0 y=1 z={m:2,n:3} others=[]
    foo({x: 0, y: 1, m: 2, n: 3}, 7, 8); // x=0 y=1 z={m:2,n:3} others=[7, 8]
  • 注意事项
    ⚠️进行剩余操作之后不能在继续解构赋值,如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    let arr = [1, 2, 3, 4];

    // 正确
    let [a, ...b] = arr;

    // 错误 Rest element must be last element
    let [a, ...b, c] = arr;

    // 错误(在函数中使用) Rest element must be last element
    ((a, ...b, c)=>{
    // ...
    })(...arr)