轻松学习 JavaScript——第 4 部分：函数中的 arguments 对象

前端

2019/10/21/09:28:11 阅读：2200 来源：谷歌SEO算法标签：谷歌CEO

本文由码农网– 小峰原创翻译，转载请看清文末的转载要求，欢迎参与我们的付费投稿计划！

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对象数组中设置特定的项。首先，你可以使用索引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。

正如我们在这篇文章中介绍的那样，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对象需要谨记的一些重要事情有：

简单地说，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 中的类