...args剩余参数(展开运算符)的用法及与arguments的区别

332 阅读2分钟

…args剩余参数(展开运算符)

允许一个表达式在某处展开。展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以使用。剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

console.log(sum(1, 2, 3));
// expected output: 6

console.log(sum(1, 2, 3, 4));
// expected output: 10

描述

如果函数的最后一个命名参数以…为前缀,则它将成为一个数组,其中从0(包括)到theArgs.length(排除)的元素由传递给函数的实际参数提供。

arguments 对象

在函数代码中,使用特殊对象 arguments,开发者无需明确指出参数名,就能访问它们。

例如,在函数 sayHi() 中,第一个参数是 message。用 arguments[0] 也可以访问这个值,即第一个参数的值(第一个参数位于位置 0,第二个参数位于位置 1,依此类推)。

因此,无需明确命名参数,就可以重写函数:

function sayHi(message) {
  alert(arguments[0]);   // 此处将打印message参数的值
}

检测参数个数

还可以用 arguments 对象检测函数的参数个数,引用属性 arguments.length 即可。

下面的代码将输出每次调用函数使用的参数个数:

function howManyArgs() {
  alert(arguments.length);
}

howManyArgs("string", 45);
howManyArgs();
howManyArgs(12);   //  上面这段代码将依次显示 "2"、"0" 和 "1"。

…args剩余参数和 arguments对象的区别

 1.剩余参数只包含那些没有对应形参的实参,而 arguments 对象包含了传给函数的所有实参。
 2.arguments对象不是一个真正的数组,而剩余参数是真正的 Array实例,也就是说你能够在它上面直接使用所有的数组方法,比如 sort,map,forEach或pop。
 3.arguments对象还有一些附加的属性 (如callee属性)。