随着 ECMAScript 的发展，JavaScript 语言的功能越来越强大。ES6 中引入的箭头函数、解构赋值、类等新特性已经得到广泛的应用。而在 ES7 中，则引入了更为方便的可变参数和 rest 参数。但是在使用锐利这些新特性时，也要注意一些常见的错误，其中最常见的就是 arguments VS ...args 错误。本文将详细介绍这个问题，并提供一些指导意义。
什么是 arguments 和 ...args？
arguments 是 JavaScript 中用于访问函数参数的对象，它可以用来获取到函数中传入的所有参数，甚至包括那些没有被声明的参数。而在 ES6 开始，JavaScript 中引入了 rest 参数，表示一个函数可以接受任意个数的参数。...args 就是 rest 参数的一种语法，它可以将所有传入的参数保存到一个数组中。
function func(a, ...args) {
console.log(a); // 1
console.log(args); // [2, 3, 4]
}
func(1, 2, 3, 4);arguments VS ...args
在 ES7 中，我们可以使用 ...args 来代替 arguments，从而使代码更加简洁、易读。但是在处理函数调用的参数时，有时候我们会把 arguments 和 ...args 搞混，导致程序出错。下面是一个例子：
-- -------------------- ---- -------
-------- ------- -- -------- -
--------------- -- -
--------------- -- -
--- --- - --
--- ---- - - -- - - ----------------- ---- -
--- -- -------------
-
----------------- -- --
------------------ -- --- -- --
-
------- -- -- -- ---在这个例子中，我们定义了一个函数，它有两个必选参数 a 和 b，和一个 rest 参数 args。当我们传入 5 个参数时，函数会打印出 a、b 和 args 的值，以及所有参数的和。但是请注意，我们在计算所有参数的和时，使用了 arguments，而不是 rest 参数 args。这是因为 arguments 包括了所有的参数，而 ...args 只包括了多余的参数。如果我们把该段代码改为使用 args，就会得到错误的结果：
let sum = 0;
for (let i = 0; i < args.length; i++) {
sum += args[i];
}
console.log(sum); // 12如何避免 arguments VS ...args 错误？
为了避免 arguments VS ...args 错误，我们应该在函数定义的时候决定使用哪种方式来获取函数参数。如果我们使用了 rest 参数，就应该在函数内部使用 ...args 来访问参数。如果我们使用了 arguments，就应该使用 arguments 来访问参数。下面是一个修改后的例子：
-- -------------------- ---- -------
-------- ------- -- -------- -
--------------- -- -
--------------- -- -
--- --- - --
--- ---- - - -- - - ------------ ---- -
--- -- --------
-
----------------- -- --
-
------- -- -- -- ---在这个例子中，我们修改了获取参数的方式。当我们使用 rest 参数时，就使用 ...args 访问参数，而不是 arguments。
总结
在 ES7 中使用 arguments 和 ...args 已经成为一种常见的错误。为了避免这种错误，我们应该明确自己要使用哪种方式来获取函数参数，并在实现时严格按照规范来编写代码。同时，我们也可以使用 ESLint 工具来检查代码中的错误，从而让我们更加自信地编写 JavaScript 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646d8176968c7c53b0c2d045