ES6 学习之展开运算符和收集运算符

Question

作用

简化书写长度，提升开发效率

功能

写：起收集作用，收集之后的结果为一个数组。 例：

function test (...arg){};
test(1,2,3);

读：起展开作用，将聚合的值展开成散开的值 例：

var arg = [1,2,3];
console.log(...arg);

写场景案例

例：写一个参数排序并求和函数，参数个数不固定

不使用 ... 案例

function sum () {
    let sumNumber = 0;
    let arg = [].slice.call(arguments,0);
    arg.sort();
    for(let i = 0; i < arg.length; i ++) {
        sumNumber += arg[i]
    }
    return [arg,sumNumber];
}
sum(3,5,2,4);
sum(2,3,4,5,6,7)

使用 ... 案例

function sum (...arg) {
    let sumNumber = 0;
    arg.sort();
    arg.forEach(function(ele) {
        sumNumber += ele;
    })
    return [arg,sumNumber];
}
sum(3,5,2,4);

对比结果可以看出使用 ... 运算符的函数会更简单方便，这里的 ... 使用的是写的功能，及把参数写进 arg 里。

扩展1

function test (a, b, ...arg) {
    console.log(a, b, arg)
}
test(10, 20, 'a', 'b', 'c')

上述案例允许参数 a, b 赋值为 10， 20，剩下的由 ... 收集

扩展 2

function test1 (a, b, ...arg, c) {
    console.log(a, b, arg, c)
}
test1(10, 20, 'a', 'b', 'c')

该案例会报错，提示 rest 参数必须是最后一个，也就是说 ... 运算符只能作为参数的最后一位。

个人小练习

要求，一组数据除去最大值和最小值后的值，求平均数

function average (...arg) {
    arg.sort(function(a, b) {
        return a - b;
    });
    arg.pop();
    arg.shift();
    return computedScore.apply(this, arg)
}
function computedScore(...arg) {
    let sum = 0;
    arg.forEach(function(ele) {
        sum += ele;
    })
    return sum / arg.length;
}
average(99,85,93,81,94,97)  // 输出92.25

读场景案例

上述个人练习案例看起来完美，实际上还可以在简便，那就是使用 ... 读运算符，将 return computedScore.apply(this, arg) 改为 return computedScore(...arg)，此时的 ...arg 就是读的作用了，下面来具体学习读场景下的 ... 运算符。

例: 将 [1, 2, 3, 4] 和 [6, 7, 8] 两个数组拼接

不使用 ... 运算符

let arr1 = [1, 2, 3, 4];
let arr2 = [6, 7, 8];
let newArr = [].concat(arr1, arr2);
console.log(newArr);  //输出[1, 2, 3, 4, 6, 7, 8]

使用 ... 运算符

let arr1 = [1, 2, 3, 4];
let arr2 = [6, 7, 8];
let newArr = [...arr1, ...arr2];
console.log(newArr);  //输出[1, 2, 3, 4, 6, 7, 8]

这里的 ... 运算符就是读的作用，将 arr1 和 arr2 都展开了，然后在合到一起去。当我们用命令将 ... 运算符进行降级的时候，会发现其实它就是 concat 的一个语法糖，本质代码就是 concat。

结尾

... 运算符主要是对数组的操作，在 es7 中还会将 ... 运算符基于对象中展开，有兴趣的小伙伴可以与我交流，这里我就不对 es7 进行讲述啦。