## 什么是arguments **「`arguments`」**是一個對應于傳遞給函數的參數的類數組對象。這是MDN上給出的解釋，我們仔細看這個解釋，可以圈出這個解釋的關鍵字就是`類數組對象`，類數組其實并不是數組對象，只是相似，我們通過下面的簡單例子可以更好的理解。 ~~~ function?printArgs()?{ ??console.log(arguments) } printArgs('herry',?'lee',?{?name:?'herry?lee'?})? ~~~ 執行結果：  ~~~ ["herry","lee",Object] ~~~ 從輸出結果我們可以看到這并不是真正的數據，只是和數組很像而已。而且我們從上圖可以更直觀的看出可以通過`arguments[0]`，`arguments[1]`來獲取相對應的傳入參數。 ## arguments操作 ### arguments.length 我們已經知道 arguments是一個類數組對象，包含了一個`length`屬性，因此可以用`arguments.length`來獲取傳入參數的長度，這一點在我們平時寫代碼中用處很多。 ### arguments轉數組 有兩種方法可以講arguments轉換成數組，其實原理是一樣的。 ~~~ Array.prototype.slice.call(arguments) [].slice.call(arguments) ~~~ 主要是使用了call，具體可以參考我上一篇文章，這里就不做過多的解釋了。 ### 修改arguments的值 在嚴格模式與非嚴格模式下，修改函數參數值表現的結果不一樣。看下面的兩個例子： ~~~ function?foo(a)?{ ????"use?strict"; ????console.log(a,?arguments[0]); ????a?=?10; ????console.log(a,?arguments[0]); ????arguments[0]?=?20; ????console.log(a,?arguments[0]); } foo(1); ~~~ 輸出： ~~~ 1?1 10?1 10?20 ~~~ 另一個非嚴格模式的例子： ~~~ function?foo(a)?{ ????console.log(a,?arguments[0]); ????a?=?10; ????console.log(a,?arguments[0]); ????arguments[0]?=?20; ????console.log(a,?arguments[0]); } foo(1); ~~~ 輸出結果為： ~~~ 1?1 10?10 20?20 ~~~ 從上面的兩個例子中可以看出，在嚴格模式下，函數中的參數與 arguments 對象沒有聯系，修改一個值不會改變另一個值。而在非嚴格模式下，兩個會互相影響。 ### 將參數從一個函數傳遞到另一個函數 下面是將參數從一個函數傳遞到另一個函數的推薦做法。 ~~~ function?foo()?{ ????bar.apply(this,?arguments); } function?bar(a,?b,?c)?{ ????//?logic } ~~~ ### arguments與重載 我們知道在JavaScript這個語言中，是不存在重載的，但是我們可以通過arguments實現重載，首先我們要看一下什么是重載。 ~~~ function?add(num1,?num2)?{ ????console.log(1); } function?add(num1,?num2,?num3)?{ ????console.log(2); } add(1,?2);?//2 add(1,?2,?3);//2 ~~~ 所以，JavaScript 中，函數并沒有根據參數的不同而產生不同的調用。 所以，JavaScript 中，函數并沒有根據參數的不同而產生不同的調用。 是不是 JavaScript 中就沒有重載了呢？并不是，我們可以利用 arguments 模擬重載。還是上面的例子。 ~~~ function?add(num1,?num2,?num3)?{ ????if?(arguments.length?===?2)?{ ????????console.log("Result?is?"?+?(num1?+?num2)); ????} ????else?if?(arguments.length?===?3)?{ ????????console.log("Result?is?"?+?(num1?+?num2?+?num3)); ????} } add(1,?2); add(1,?2,?3) ~~~ 執行結果如下： ~~~ Result?is?3 Result?is?6 ~~~ ## ES6 中的 arguments ### 擴展操作符 直接上栗子： ~~~ function?func()?{ ????console.log(...arguments); } func(1,?2,?3); ~~~ 執行結果是： ~~~ 1 2 3 ~~~ 簡潔地講，擴展操作符可以將 arguments 展開成獨立的參數。 ### Rest 參數 還是上栗子： ~~~ function?func(firstArg,?...restArgs)?{ ????console.log(Array.isArray(restArgs)); ????console.log(firstArg,?restArgs); } ? func(1,?2,?3); ~~~ 執行結果是： ~~~ true 1?[2,?3] ~~~ 從上面的結果可以看出，Rest 參數表示除了明確指定剩下的參數集合，類型是 Array。 默認參數 栗子： ~~~ function?func(firstArg?=?0,?secondArg?=?1)?{ ????console.log(arguments[0],?arguments[1]); ????console.log(firstArg,?secondArg); } func(99); ~~~ 執行結果是： ~~~ 99?undefined 99?1 ~~~ 可見，默認參數對 arguments 沒有影響，arguments 還是僅僅表示調用函數時所傳入的所有參數。 ### arguments 轉數組 `Array.from()`是個非常推薦的方法，其可以將所有類數組對象轉換成數組。 ## 數組與類數組對象 數組具有一個基本特征：索引。這是一般對象所沒有的。 ~~~ const?obj?=?{?0:?"a",?1:?"b"?}; const?arr?=?[?"a",?"b"?]; ~~~ 我們利用`obj[0]`、`arr[0]`都能取得自己想要的數據，但取得數據的方式確實不同的。`obj[0]`是利用對象的鍵值對存取數據，而`arr[0]`卻是利用數組的索引。事實上，Object 與 Array 的唯一區別就是 Object 的屬性是 string，而 Array 的索引是 number。 下面看看類數組對象。 偽數組的特性就是長得像數組，包含一組數據以及擁有一個 length 屬性，但是沒有任何 Array 的方法。再具體的說，length 屬性是個非負整數，上限是 JavaScript 中能精確表達的最大數字；另外，類數組對象的 length 值無法自動改變。 如何自己創建一個類數組對象？ ~~~ function?Foo()?{} Foo.prototype?=?Object.create(Array.prototype); const?foo?=?new?Foo(); foo.push('A'); console.log(foo,?foo.length); console.log("foo?is?an?array??"?+?Array.isArray(foo)); ~~~ 執行結果是： ~~~ ["A"]?1 foo?is?an?array??false ~~~ 也就是說 Foo 的實例擁有 Array 的所有方法，但類型不是 Array。 如果不需要 Array 的所有方法，只需要部分怎么辦呢？ ~~~ function?Bar()?{} Bar.prototype.push?=?Array.prototype.push; const?bar?=?new?Bar(); bar.push('A'); bar.push('B'); console.log(bar); ~~~ 執行結果是： ~~~ Bar?{0:?"A",?1:?"B",?length:?2} ~~~