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

…args剩余参数（展开运算符）

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

function sum(...args) {
  // 因为...args 将函数内的所有剩余实参（这里是所有实参），转换成一个数组
  // args --> [1, 2, 3]
  return args.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
复制代码

注意

如果函数的最后一个命名参数以 ... 为前缀，则它会将所有后面剩余的是实参个数包裹成一个数组。

// 例子

function test(a, b, ...args) {
  console.log(args)
}

test(1,2,3,4) // [3, 4]
复制代码

展开运算符

• 函数调用中使用展开运算符，多个参数的调用。

  function test(a,b,c) { }
  var args = [0,1,2];
  
  test(...args);
  复制代码

• 数组字面量中使用展开运算符

  var arr1=['a','b','c'];
  
  var arr2=[...arr1,'d','e']; //['a','b','c','d','e']
  
  // 可以用在push函数中
  var arr1=['a','b','c'];
  
  var arr2=['d','e'];
  
  arr1.push(...arr2); //['a','b','c','d','e']
  复制代码

• 用于解构赋值

  let [arg1,arg2,...arg3] = [1, 2, 3, 4];
  
  arg1 //1
  arg2 //2
  arg3 //['3','4']
  复制代码

• 类数组对象变成数组

  let a=new Set([1,2,3,4,5,2,1])  // a : Set(5) {1, 2, 3, 4, 5}
  
  let b=[...a]    //  (5) [1, 2, 3, 4, 5] 
  复制代码

arguments对象

在函数代码中，使用特殊对象 arguments，开发者无需明确指出参数名，就能访问它们。arguments对象并不是一个数组，是一个类数组对象，在调用时请注意。

function test(a, b, c) {
  console.log(arguments) // Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ] 
  console.log(test.length) // 3
  console.log(arguments.callee.length) // 3
}

test(1,2,3,4)
复制代码

• arguments 代表的是函数实参的个数
• fn.length 代表函数形参的个数
• arguments.callee 指向函数本身

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

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