跳到主要内容

1 篇博文 含有标签「扩展运算符」

查看所有标签

· 阅读需 3 分钟

之前写的一篇数组去重的方法，这样写的。

const array = [1,1,2,3,4,5,5,6,6,7,8,8];
function distinct(){
    let arr = [].concat.apply([], arguments);
    console.log(arr);
    return Array.from(new Set(arr));
}
const a = [1,2,3,5],b = [2,5,8,6],c = [7,8,9];
console.log(distinct(a,b,c));//[1, 2, 3, 5, 8, 6, 7, 9]

后来我一想，既然都用ES6了，不如都用ES6语法吧。然后我就把代码改成这样了。

distinct = () => {
    let arr = [].concat.apply([], arguments);
    return Array.from(new Set(arr));
}
console.log(distinct(array));//Uncaught ReferenceError: arguments is not defined

报错了，让后查找了一下原因，使用为箭头函数没有arguments，怎么办，这就需要用rest参数了。

const a = [1,2,3,5],b = [2,5,8,6],c = [7,8,9];
distinct = (...theArgs) => {
    let arr = [].concat.apply([], theArgs);
    return Array.from(new Set(arr));
}
console.log(distinct(a,b,c));//[1, 2, 3, 5, 8, 6, 7, 9]

这个...theArgs就是rest参数了，theArgs是自定义的命名，可以随便起名字。

rest参数(...变量名)

最主要用于不定参数，用于获取函数多余的参数，将多余的逗号分隔的参数序列转换为数组参数

rest参数的语法

function f(a, b, ...theArgs) {
  // ...
}

看一个小例子

fun1 = (...theArgs) => {
    console.log(theArgs);
}
fun1(1, 2, 3, 4, 5, 6);//[1, 2, 3, 4, 5, 6]

fun2 = (a, b, ...theArgs) => {
    console.log(theArgs);//[3, 4, 5, 6]
}
fun2(1, 2, 3, 4, 5, 6);

注意：rest参数只能是最后一个参数，他代表除a,b以外的所有参数，如果后面在添加别参数，例如

fun2 = (a, b, ...theArgs, c) => {
    console.log(theArgs);
}
fun2(1, 2, 3, 4, 5, 6);Uncaught SyntaxError: Rest parameter must be last formal parameter

这样是会报错的。

说到这里这个...还有一个作用就是作为扩展运算符

扩展运算符(...)

扩展运算符可以理解为rest参数的逆运算，将数组转换为逗号分隔的参数序列

const nums = [1, 2, 3];
fun = (a, b, c) => {
    console.log(`${a} ${b} ${c}`)
}
fun(...nums);//1 2 3

ES5的话我们还需要这样调用

fun.apply(null,nums);

扩展运算符应用

合并数组​

const arr1 = [1, 2, 3]
const arr2 = [5, 6]
ES5
console.log(arr1.concat(arr2));//[1, 2, 3, 5, 6]
ES6
console.log([...arr1, ...arr2]);//[1, 2, 3, 5, 6]

判断最大值最小值​

const array = [1,1,2,3,4,5,5,6,6,7,8,8];
ES5
console.log( Math.max.apply(null, array));//8
console.log( Math.min.apply(null, array));//1
ES6
console.log( Math.max(...array));//8
console.log( Math.min(...array));//1

数组去重​

const array = [1,1,2,3,4,5,5,6,6,7,8,8];
const distinct = arr => [...new Set(arr)];
console.log(distinct(array));//[1, 2, 3, 4, 5, 6, 7, 8]