作用

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

功能

  • 写:起收集作用,收集之后的结果为一个数组。 例:
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进行讲述啦。

0 条评论
作者
状态
二维码
目录