ES6扩展/收集运算符--spread/rest

Posted 2020-11-02 诸葛不亮

ES6引入了一个新的运算符"..."，通常称为spread/rest(展开或收集运算符)，取决于在哪如何使用，这里先介绍此运算符的概念和基本使用，更多应用将在函数、数组部分学习

第一种：作为扩展运算符(spread)

　   场景：使用在数组之前。

　　作用：将一个数组转为用逗号分隔的参数序列

　　举例1：数组之前

function foo(x, y, z){
    console.log(x, y, z)
}
foo.appley(null, [1, 2, 3])　　//在ES6之前我们这样使用数组作为函数参数调用。
foo(...[1, 2, 3])　　//此处...[1, 2, 3]就被展开为用逗号隔开的1, 2, 3参数序列

　　当运算符"..."用在数组之前时，数组会被转为用逗号分隔的参数序列。

　　举例2：替代apply()方法

// ES5的 写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);　　//push方法参数不能为数组，ES5需要借助apply()方法实现。

// ES6 的写法
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);　　　　　　　　　　　　　　//ES6中借助扩展运算符直接将数组转为了参数序列。

　　举例3：替代数组的concat()方法

let a = [2, 3, 4]
let b = [1, ...a, 5]    //此处a数组被展开为2, 3, 4
console.log(b)          //结果为[1, 2, 3, 4, 5]

　　上面的用法基本上替代了concat(..)，这里的行为就像[1].concat(a, [5])

　　注意：扩展运算符后如果是空数组，不会产生任何效果

[...[], 1]
// [1]

 

第二种：作为收集运算符(rest)

　　作用：收集剩余的参数转为一个数组。

　　场景：在函数参数之前使用。

　　举例1：函数参数之前

function foo(x, y, ...z){   //z表示把剩余的参数收集到一起组成一个名叫z的数组。
    console.log(x, y, z)
}
foo(1, 2, 3, 4, 5)          //x赋值1，y赋值2，z中赋值[3, 4, 5]数组

　　上例中参数z之前的‘...‘作为rest使用。

　　举例2：解构赋值

const [first, ...rest] = [1, 2, 3, 4, 5];　　//此处‘...‘作为rest收集运算符使用
first // 1
rest  // [2, 3, 4, 5]

const [first, ...rest] = [];
first // undefined
rest  // []

const [first, ...rest] = ["foo"];
first  // "foo"
rest   // []

总结：如何判断ES6中的运算符是扩展运算符(spread)还是收集运算符(rest)，主要取决于其作用的位置。

　　　　1.数组之前，作为扩展运算符使用，将数组转为逗号分隔的参数序列。

　　　　2.函数形参中，收集传入的参数为数组。

　　　　3.解构赋值中，收集对应的数据为数组。