輕鬆學習 JavaScript——第 4 部分：函式中的 arguments 物件

本文由碼農網 – 小峰原創翻譯，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

JavaScript函式具有像陣列一樣的物件，這些物件稱為arguments，與傳遞給函式的引數相對應。傳遞給JavaScript函式的所有引數都可以使用arguments物件來引用。

現在我們開始學習，仔細看下面列出的程式碼：

function add(num1, num2) {
    var res = num1 + num2;
    return res;
}
var r = add(7, 8);
console.log(r);

在上面的函式中，num1和num2是兩個引數。你可以使用名為num1和num2的arguments來引用這些引數。除了arguments名稱之外，你還可以使用JavaScript陣列，如物件arguments來引用它們。所以，上面的函式可以重寫，如下所示：

function add(num1, num2) {
    var res = arguments[0] + arguments[1];
    return res;
}
var r = add(7, 8);
console.log(r);

在JavaScript函式中，arguments物件用於訪問或引用傳遞給函式的所有引數。arguments物件是可用於函式的區域性變數。arguments物件的長度相當於傳遞給函式的arguments數量。請看下面的程式碼，作為輸出將得到2，因為有兩個arguments傳遞給函式：

function add(num1, num2) {
    var res = arguments.length;
    return res;
}
var r = add(7, 8);
console.log(r);

arguments物件不是純陣列

JavaScript的arguments物件不是純粹的JavaScript陣列。你不能對arguments物件執行諸如push，pop，slice等操作。正如你將在下面列出的程式碼中所看到的那樣，執行push操作會引發異常，因為arguments.push不是函式。

function add(num1, num2) {
    arguments.push(78);
    var res = num1 + num2;
    return res;
}

可以設定arguments物件

你可以在arguments物件陣列中設定特定的項。首先，你可以使用索引0設定陣列的第一個項，如下所示：

function add(num1, num2) {
    arguments[0] = 15;
    var res = num1 + num2;
    return res;
}
var r = add(7, 8);
console.log(r);

在add函式中，num1和arguments[0]引用相同的值。所以，當你更新arguments[0]時，num1的值也會被更新。對於上面的程式碼，輸出將是23。

將arguments物件轉換為陣列

正如我們在這篇文章中介紹的那樣，JavaScript函式arguments物件不是純陣列。除了長度屬性外，它沒有任何其他屬性。但是，你可以使用Array.prototype.slice.call將arguments物件轉換為陣列，如下所示：

function add(num1, num2) {
    var arg = Array.prototype.slice.call(arguments);
    console.log(arg.pop());
}

在ECMAScript 6中，你可以將arguments物件轉換為一個陣列，如下所示：

function add(num1, num2) {
    var arg = Array.from(arguments);
    console.log(arg.pop());
}

結論

總而言之，關於arguments物件需要謹記的一些重要事情有：

• arguments物件的長度等於傳遞給函式的引數的數量。
• arguments物件是類似陣列的物件，但不是JavaScript陣列。
• 你不能對arguments物件使用其他JavaScript陣列方法，例如push，pop，slice等等。
• JavaScript arguments物件索引從零開始。所以第一個引數將被arguments[0]引用，第二個引數將被arguments[1]引用，等等。

簡單地說，JavaScript arguments物件是一個類似陣列的物件，它引用傳遞給函式的引數。在ECMAScript 6中，引入的rest引數現已被廣泛用來替代函式中的arguments物件用於變數數或引數。

在這個“輕鬆JavaScript”系列的下一篇文章中，我們將介紹JavaScript函式中的類。

系列目錄

輕鬆學習 JavaScript——第 1 部分：瞭解 let 語句

輕鬆學習 JavaScript——第 2 部分：函式中的 Rest 引數

輕鬆學習 JavaScript——第 3 部分：函式中的預設引數

輕鬆學習 JavaScript——第 4 部分：函式中的 arguments 物件

輕鬆學習 JavaScript——第 5 部分：簡化函式提升

輕鬆學習 JavaScript——第 6 部分：JavaScript 箭頭函式

輕鬆學習 JavaScript——第 7 部分：物件屬性描述符

輕鬆學習 JavaScript——第 8 部分：JavaScript 中的類