前言
众所周知，前端知识体系繁杂，需要掌握的内容瀚如星海。然而星河璀璨，学习和实践的过程很有趣，但是我自身体会，不知道为何有些知识点比较容易被忽略。
今日分享的arguments对象，就是曾经被我忽略的内容之一，当我再次遇见它，发现它的有趣之处时，我决定把它写下来。
它是一个对应于传递给函数的参数的类数组对象。什么情况下会用到它？怎么用？不着急，我们先从一道面试题说起。
一道看似简单的面试题
一道题
最早发现我忽略了它，是从一道面试题开始的。
varlength=10functionfn() { console.log(this.length) } varobj= { length: 5, method: function(fn) { arguments[0](); } } obj.method(fn,1);
这道题的主要干扰是两处声明的length的变量，当你第一反应是全局的length变量，还是obj的属性length时，你已经离正确答案越来越远了。我们不妨先把正确答案打印出来，答案是2。
一个答案
这个答案，熟悉的人不难，不熟的人会有点困惑。解题的关键点在于arguments对象。
arguments是一个类数组对象，它包含传递给函数的每个参数，可以通过索引取出函数的每一个参数，比如上面的题目我们打印一下arguments[0]。
varlength=10; functionfn() { console.log(this.length); } varobj= { length: 5, method: function (fn) { console.log(arguments[0]); // [Function: fn] }, }; obj.method(fn, 1);
arguments[0]打印出来是fn函数，也就是obj.method的第一个参数。arguments[0]()也就相当于fn()，而fn函数执行的结果是打印length，是谁的length属性，是全局变量length？还是obj的length？
很显然都不是，因为2≠10并且2≠5。这两个问句也正是我前面提到的干扰点，这题很巧妙的设置了一个迷雾阵，让人很容易忽略解题的关键点。
一种技巧
我们先打印一下this,会发现结果和直接打印arguments是一致的，所以此处的this指向的是arguments对象。我们知道，在函数中，this指向的是调用它的函数，所以此处调用的正是arguments。
varlength=10; functionfn() { console.log(this); // [Arguments] { '0': [Function: fn], '1': 1 }// console.log(this.length);} varobj= { length: 5, method: function (fn) { arguments[0](); console.log(arguments); //[Arguments] { '0': [Function: fn], '1': 1 } }, }; obj.method(fn, 1);
arguments的length属性指向传递给当前函数的参数数量。obj.method传递的参数有两个，所以arguments.length打印出来是2。
我们重新看这道题目，题目看似简单，但是可能没办法立刻想到结果是什么。这个时候，莫慌，试着将问题分解，将问题分解成知识点，思路也就清晰了。
面试题分析完，也就大致了解了arguments是什么以及怎么用了。
arguments对象
下面，我们来详细的了解一下arguments对象。以下内容大部分来自MDN。
语法
arguments 是一个对应于传递给函数的参数的类数组对象。它包含传递给函数的每个参数，可以根据索引值引用需要的参数，例如：
functionfn () { console.log(arguments[0]) // arg1console.log(arguments[1]) // arg2console.log(arguments[2]) // arg3} fn('arg1','arg2','arg3')
属性
arguments.callee
指向参数所属的当前执行的函数。
functionfn () { console.log(arguments.callee) // [Function: fn]} fn('arg1','arg2','arg3')
arguments.length
传递给函数的参数数量。
functionfn () { console.log(arguments.length); // 3} fn('arg1','arg2','arg3');
arguments[@@iterator]
返回一个新的Array 迭代器 对象，该对象包含参数中每个索引的值。
functionfn () { console.log(arguments[Symbol.iterator]); // [Function: values]} fn('arg1','arg2','arg3');
实用例子
通过arguments的属性，处理函数入参，尤其参数不定时，是很好用的。且可以通过控制默认参数和实参，达到我们想要的结果。
遍历参数求和
arguments是一个对应于传递给函数的参数的类数组对象，所以可以通过遍历它的所有值，进行求值操作。
functionadd() { varsum=0, len=arguments.length; for (vari=0; i<len; i++) { sum+=arguments[i]; } returnsum; } add(); // 0add(1); // 1add(1, 2, 3, 4); // 10
定义连接字符串的函数
这个例子定义了一个函数来连接字符串。这个函数唯一正式声明了的参数是一个字符串，该参数指定一个字符作为衔接点来连接字符串。
可以传递任意数量的参数到该函数，并使用每个参数作为列表中的项创建列表。
functionmyConcat(separator) { varargs=Array.prototype.slice.call(arguments, 1); returnargs.join(separator); } // returns "red, orange, blue"myConcat(", ", "red", "orange", "blue"); // returns "elephant; giraffe; lion; cheetah"myConcat("; ", "elephant", "giraffe", "lion", "cheetah"); // returns "sage. basil. oregano. pepper. parsley"myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");
剩余参数、默认参数和解构赋值参数
arguments对象可以与剩余参数、默认参数和解构赋值参数结合使用。
在严格模式下，剩余参数、默认参数和解构赋值参数的存在不会改变 arguments对象的行为，但是在非严格模式下就有所不同了。
当非严格模式中的函数没有包含剩余参数、默认参数和解构赋值，那么arguments对象中的值会跟踪参数的值（反之亦然）。
// 没有包含剩余参数、默认参数和解构赋值,更新了arguments[0],同样更新了afunctionfunc(a) { arguments[0] =99; console.log(a); } func(10); // 99// 没有包含剩余参数、默认参数和解构赋值,更新了a,同样更新了arguments[0]functionfunc(a) { a=99; console.log(arguments[0]); } func(10); // 99// 包含解构赋值参数，更新了arguments[0],没有更新afunctionfunc(a=55) { arguments[0] =99; console.log(a); } func(10); // 10// 包含默认参数，更新了a的值，没有改变arguments[0]的值functionfunc(a=55) { arguments[0] =99; // updating arguments[0] does not also update aconsole.log(a); } func(10); // 10
总结
无论是面试题，还是日常工作中，我们时常会有这样的困惑，实际的结果和我们预想的结果不一致，于是我们回过头来梳理，我们到底遗漏了什么。在我过往的经验中，半数以上的此类情况，皆因我对某块知识的掌握的不全面，导致自己的代码结果出现偏差。
一花一世界，一叶一菩提。通过一个个知识点去梳理整个功能开发走向，每次将问题解决，我都会把知识点补全。因而也让我在后续的工作中，无论是开发还是日常解决问题，都是快速且高质的。
坚持做好一件事不容易，但是最终得到的收获却是超值的。
