使用场景

这是一段 js代码，旨在让初学者更好地了解 argument。

js代码解读复制代码function add(){      if(arguments.length>2){          return arguments;      }     } console.log(add(1,2,3,4))  // 输出：[Arguments] { '0': 1, '1': 2, '2': 3, '3': 4 }

可见输出了一个类似于map的对象，实际前面的便是后面值的下标，可以像数组那样获取对应的值。

实现一个简单的求和方法

我们可以通过下标获取arguments中的值。

js代码解读复制代码function sum() {      let total = 0;      for (let i = 0; i < arguments.length; i++) {          total += arguments[i];         }         return total;          }          console.log(sum(1, 2, 3)); // 输出 6

在这个方法中我们可以传任意个number，不受参数个数的约束。

扩展

对于上面的方法我们也可以运用rest运算符 ...来实现

js代码解读复制代码const add = (...args) => {     return args.reduce((a,b) => a+b,0) } console.log(add(1,2,3));

只需要一句代码就能够完成。但看到这段代码可能就有掘友会问了， reduce()是什么方法。

reduce()

这是mdn上对 reduce()的解释，可见它是属于数组的一个方法，常用于数组内元素的求和，rest运算符就是将输入的实参放在数组中。也正因为有了es6提出的rest运算符 ...，argument就逐渐淡出我们的使用场景，它可以代替绝大多数argument的使用且更为简洁。

要注意的地方

arguments对象是一个非常特殊的内置对象，它与函数的执行密切相关，所以在使用它的时候也有很多我们需要注意的地方。

• 性能方面： 频繁访问 arguments可能会影响性能，尤其是在一些高性能要求的循环或密集计算场景中，因为访问 arguments比直接访问命名参数要慢。
• 函数嵌套： 当函数嵌套时该注意些什么呢？例如：

js代码解读复制代码function outerFunction() {      console.log(arguments); // 正常显示传入的参数 innerFunction(); function innerFunction() {     console.log(arguments); // 同样可以访问到外层的arguments      }  } outerFunction(1, 2, 3); // 输出两次相同的参数列表：[1, 2, 3]

arguments同其它变量一样，遵守作用域规矩， innerFunction被调用时，并没有直接向它传递任何参数。然而， innerFunction能够访问到其外部作用域中的变量和对象，包括 outerFunction的 arguments对象,所以这里实际上是访问并打印了外部函数 outerFunction的 arguments。

• 箭头函数：箭头函数不绑定自己的arguments，它会捕获其所在上下文的arguments。例如：

js代码解读复制代码function outerArrowFunction() {     console.log(arguments);      const innerArrowFunction = () => {       console.log(arguments);      };       innerArrowFunction(1,2,3);   }     outerArrowFunction(4,5,6); // 输出两次相同的参数列表：[4,5,6]

当调用 innerArrowFunction(1,2,3)时，尽管你传递了参数 1, 2, 3给 innerArrowFunction，但由于箭头函数没有自己的 arguments，它仍然访问的是外部 outerArrowFunction的 arguments。

结语

本文的精髓在于最后一部分“ 要注意的地方”，如有略过的掘友建议回去看一遍。虽然 rest运算符的出现让arguments的使用不如往昔那般频繁，但它依然是每位JavaScript开发者知识体系中不可或缺的一环。