arguments对象用于访问或引用传递给函数的所有参

4. 数组与类数组对象

数组具有一个基本特征:索引。这是一般对象所没有的。

JavaScript

const obj = { 0: "a", 1: "b" }; const arr = [ "a", "b" ];

1
2
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 值无法自动改变。

如何自己创建一个类数组对象?

JavaScript

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));

1
2
3
4
5
6
7
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));

执行结果是:

JavaScript

["A"] 1 foo is an array? false

1
2
["A"] 1
foo is an array? false

也就是说 Foo 的示例拥有 Array 的所有方法,但类型不是 Array。

如果不需要 Array 的所有方法,只需要部分怎么办呢?

JavaScript

function Bar() {} Bar.prototype.push = Array.prototype.push; const bar = new Bar(); bar.push('A'); bar.push('B'); console.log(bar);

1
2
3
4
5
6
7
function Bar() {}
Bar.prototype.push = Array.prototype.push;
 
const bar = new Bar();
bar.push('A');
bar.push('B');
console.log(bar);

执行结果是:

JavaScript

Bar {0: "A", 1: "B", length: 2}

1
Bar {0: "A", 1: "B", length: 2}

参考:

  1. JavaScript中的数组与伪数组的区别
  2. MDN arguments
  3. Avoid modifying or passing arguments into other functions — it kills optimization
  4. Optimization killers
  5. Why isn’t a function’s arguments object an array in Javascript?
  6. arguments 对象
  7. Advanced Javascript: Objects, Arrays, and Array-Like objects
  8. JavaScript 特殊对象 Array-Like Objects 详解
  9. What is a good way create a Javascript array-like object?

    1 赞 3 收藏 评论

必威 1

正如我们在这篇文章中介绍的那样,JavaScript函数arguments对象不是纯数组。除了长度属性外,它没有任何其他属性。但是,你可以使用Array.prototype.slice.call将arguments对象转换为数组,如下所示:

结论

总而言之,关于arguments对象需要谨记的一些重要事情有:

  • arguments对象的长度等于传递给函数的参数的数量。
  • arguments对象是类似数组的对象,但不是JavaScript数组。
  • 你不能对arguments对象使用其他JavaScript数组方法,例如push,pop,slice等等。
  • JavaScript arguments对象索引从零开始。所以第一个参数将被arguments[0]引用,第二个参数将被arguments[1]引用,等等。

简单地说,JavaScript arguments对象是一个类似数组的对象,它引用传递给函数的参数。在ECMAScript 6中,引入的rest参数现已被广泛用来替代函数中的arguments对象用于变量数或参数。

在这个“轻松JavaScript”系列的下一篇文章中,我们将介绍JavaScript函数中的类。

1 赞 收藏 评论

必威 2

3.  数组与类数组对象

  数组具有一个基本特征:索引。这是一般对象所没有的。

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 值无法自动改变。

  必威 3

arguments 和对应参数的绑定

function foo(name, age, sex, hobbit) { console.log(name, arguments[0]); // name name // 改变形参 name = 'new name'; console.log(name, arguments[0]); // new name new name // 改变arguments arguments[1] = 'new age'; console.log(age, arguments[1]); // new age new age // 测试未传入的是否会绑定 console.log(sex); // undefined sex = 'new sex'; console.log(sex, arguments[2]); // new sex undefined arguments[3] = 'new hobbit'; console.log(hobbit, arguments[3]); // undefined new hobbit } foo('name', 'age')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function foo(name, age, sex, hobbit) {
 
    console.log(name, arguments[0]); // name name
 
    // 改变形参
    name = 'new name';
 
    console.log(name, arguments[0]); // new name new name
 
    // 改变arguments
    arguments[1] = 'new age';
 
    console.log(age, arguments[1]); // new age new age
 
    // 测试未传入的是否会绑定
    console.log(sex); // undefined
 
    sex = 'new sex';
 
    console.log(sex, arguments[2]); // new sex undefined
 
    arguments[3] = 'new hobbit';
 
    console.log(hobbit, arguments[3]); // undefined new hobbit
 
}
 
foo('name', 'age')

传入的参数,实参和 arguments 的值会共享,当没有传入时,实参与 arguments 值不会共享

除此之外,以上是在非严格模式下,如果是在严格模式下,实参和 arguments 是不会共享的。

JavaScript arguments 对象详解

2016/10/24 · JavaScript · arguments

原文出处: CompileYouth   

 

arguments对象不是纯数组

JavaScript的arguments对象不是纯粹的JavaScript数组。你不能对arguments对象执行诸如push,pop,slice等操作。正如你将在下面列出的代码中所看到的那样,执行push操作会引发异常,因为arguments.push不是函数。

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

1
2
3
4
5
function add(num1, num2) {
    arguments.push(78);
    var res = num1 + num2;
    return res;
}

2. arguments 的操作

 arguments.length

    arguments 是个类数组对象,其包含一个 length 属性,可以用 arguments.length 来获得传入函数的参数个数。

   arguments 转数组

    Array.prototype.silce.call(arguments);  // 或者使用  [].slice.call(arguments);

   修改 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 对象没有联系,修改一个值不会改变另一个值。而在非严格模式下,两个会互相影响。

 

传递参数

将参数从一个函数传递到另一个函数

// 使用 apply 将 foo 的参数传递给 bar function foo() { bar.apply(this, arguments); } function bar(a, b, c) { console.log(a, b, c); } foo(1, 2, 3)

1
2
3
4
5
6
7
8
9
// 使用 apply 将 foo 的参数传递给 bar
function foo() {
    bar.apply(this, arguments);
}
function bar(a, b, c) {
   console.log(a, b, c);
}
 
foo(1, 2, 3)

3.1 扩展操作符

直接上栗子:

JavaScript

function func() { console.log(...arguments); } func(1, 2, 3);

1
2
3
4
5
function func() {
    console.log(...arguments);
}
 
func(1, 2, 3);

执行结果是:

JavaScript

1 2 3

1
1 2 3

简洁地讲,扩展操作符可以将 arguments 展开成独立的参数。

  • arguments对象的长度等于传递给函数的参数的数量。

  • arguments对象是类似数组的对象,但不是JavaScript数组。

  • 你不能对arguments对象使用其他JavaScript数组方法,例如push,pop,slice等等。

  • JavaScript arguments对象索引从零开始。所以第一个参数将被arguments[0]引用,第二个参数将被arguments[1]引用,等等。

轻松学习 JavaScript (4):函数中的 arguments 对象

2017/11/11 · JavaScript · arguments

原文出处: Dhananjay Kumar   译文出处:码农网 – 小峰   

JavaScript函数具有像数组一样的对象,这些对象称为arguments,与传递给函数的参数相对应。传递给JavaScript函数的所有参数都可以使用arguments对象来引用。

现在我们开始学习,仔细看下面列出的代码:

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

1
2
3
4
5
6
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);

1
2
3
4
5
6
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);

1
2
3
4
5
6
function add(num1, num2) {
    var res = arguments.length;
    return res;
}
var r = add(7, 8);
console.log(r);

1. 什么是类数组

  arguments 是一个类数组对象。代表传给一个function的参数列表。

   我们来传一个实例。

 function printArgs() {

     console.log(arguments);

   }

   printArgs("A", "a", 0, { foo: "Hello, arguments" });

 // ["A", "a", 0, Object]

 再看看 arguments 表示的内容,其表示了函数执行时传入函数的所有参数。在上面的例子中,代表了传入 printArgs 函数中的四个参数,可以分别用 arguments[0]、 arguments[1]… 来获取单个的参数

 

长度

console.log(array.length); // 3 console.log(arrayLike.length); // 3

1
2
console.log(array.length); // 3
console.log(arrayLike.length); // 3

3.3 默认参数

栗子:

JavaScript

function func(firstArg = 0, secondArg = 1) { console.log(arguments[0], arguments[1]); console.log(firstArg, secondArg); } func(99);

1
2
3
4
5
6
function func(firstArg = 0, secondArg = 1) {
    console.log(arguments[0], arguments[1]);
    console.log(firstArg, secondArg);
}
 
func(99);

执行结果是:

JavaScript

99 undefined 99 1

1
2
99 undefined
99 1

可见,默认参数对 arguments 没有影响,arguments 还是仅仅表示调用函数时所传入的所有参数。

 

将arguments对象转换为数组

正如我们在这篇文章中介绍的那样,JavaScript函数arguments对象不是纯数组。除了长度属性外,它没有任何其他属性。但是,你可以使用Array.prototype.slice.call将arguments对象转换为数组,如下所示:

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

1
2
3
4
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()); }

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

遍历

for(var i = 0, len = array.length; i len; i++) { …… } for(var i = 0, len = arrayLike.length; i len; i++) { …… }

1
2
3
4
5
6
for(var i = 0, len = array.length; i  len; i++) {
   ……
}
for(var i = 0, len = arrayLike.length; i  len; i++) {
    ……
}

是不是很像?

那类数组对象可以使用数组的方法吗?比如:

arrayLike.push('4');

1
arrayLike.push('4');

然而上述代码会报错: arrayLike.push is not a function

所以终归还是类数组呐……

2.1 arguments length

arguments 是个类数组对象,其包含一个 length 属性,可以用 arguments.length 来获得传入函数的参数个数。

JavaScript

function func() { console.log("The number of parameters is " + arguments.length); } func(); func(1, 2); func(1, 2, 3);

1
2
3
4
5
6
7
function func() {
    console.log("The number of parameters is " + arguments.length);
}
 
func();
func(1, 2);
func(1, 2, 3);

执行结果如下:

JavaScript

The number of parameters is 0 The number of parameters is 2 The number of parameters is 3

1
2
3
The number of parameters is 0
The number of parameters is 2
The number of parameters is 3

JavaScript的arguments对象不是纯粹的JavaScript数组。你不能对arguments对象执行诸如push,pop,slice等操作。正如你将在下面列出的代码中所看到的那样,执行push操作会引发异常,因为arguments.push不是函数。

可以设置arguments对象

你可以在arguments对象数组中设置特定的项。首先,你可以使用索引0设置数组的第一个项,如下所示:

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

1
2
3
4
5
6
7
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。

类数组转对象

在上面的例子中已经提到了一种类数组转数组的方法,再补充三个:

var arrayLike = {0: 'name', 1: 'age', 2: 'sex', length: 3 } // 1. slice Array.prototype.slice.call(arrayLike); // ["name", "age", "sex"] // 2. splice Array.prototype.splice.call(arrayLike, 0); // ["name", "age", "sex"] // 3. ES6 Array.from Array.from(arrayLike); // ["name", "age", "sex"] // 4. apply Array.prototype.concat.apply([], arrayLike)

1
2
3
4
5
6
7
8
9
var arrayLike = {0: 'name', 1: 'age', 2: 'sex', length: 3 }
// 1. slice
Array.prototype.slice.call(arrayLike); // ["name", "age", "sex"]
// 2. splice
Array.prototype.splice.call(arrayLike, 0); // ["name", "age", "sex"]
// 3. ES6 Array.from
Array.from(arrayLike); // ["name", "age", "sex"]
// 4. apply
Array.prototype.concat.apply([], arrayLike)

那么为什么会讲到类数组对象呢?以及类数组有什么应用吗?

要说到类数组对象,Arguments 对象就是一个类数组对象。在客户端 JavaScript 中,一些 DOM 方法(document.getElementsByTagName()等)也返回类数组对象。

3. ES6 中的 arguments

总而言之,关于arguments对象需要谨记的一些重要事情有:

调用数组方法

如果类数组就是任性的想用数组的方法怎么办呢?

既然无法直接调用,我们可以用 Function.call 间接调用:

var arrayLike = {0: 'name', 1: 'age', 2: 'sex', length: 3 } Array.prototype.join.call(arrayLike, '&'); // name&age&sex Array.prototype.slice.call(arrayLike, 0); // ["name", "age", "sex"] // slice可以做到类数组转数组 Array.prototype.map.call(arrayLike, function(item){ return item.toUpperCase(); }); // ["NAME", "AGE", "SEX"]

1
2
3
4
5
6
7
8
9
10
11
var arrayLike = {0: 'name', 1: 'age', 2: 'sex', length: 3 }
 
Array.prototype.join.call(arrayLike, '&'); // name&age&sex
 
Array.prototype.slice.call(arrayLike, 0); // ["name", "age", "sex"]
// slice可以做到类数组转数组
 
Array.prototype.map.call(arrayLike, function(item){
    return item.toUpperCase();
});
// ["NAME", "AGE", "SEX"]

2. arguments 操作

现在我们开始学习,仔细看下面列出的代码:

JavaScript 深入之类数组对象与 arguments

2017/05/27 · JavaScript · arguments

原文出处: 冴羽   

3.2 Rest 参数

还是上栗子:

JavaScript

function func(firstArg, ...restArgs) { console.log(Array.isArray(restArgs)); console.log(firstArg, restArgs); } func(1, 2, 3);

1
2
3
4
5
6
function func(firstArg, ...restArgs) {
    console.log(Array.isArray(restArgs));
    console.log(firstArg, restArgs);
}
 
func(1, 2, 3);

执行结果是:

JavaScript

true 1 [2, 3]

1
2
true
1 [2, 3]

从上面的结果可以看出,Rest 参数表示除了明确指定剩下的参数集合,类型是 Array。

 

callee属性

Arguments 对象的 callee 属性,通过它可以调用函数自身。

讲个闭包经典面试题使用 callee 的解决方法:

var data = []; for (var i = 0; i 3; i++) { (data[i] = function () { console.log(arguments.callee.i) }).i = i; } data[0](); data[1](); data[2](); // 0 // 1 // 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var data = [];
 
for (var i = 0; i  3; i++) {
    (data[i] = function () {
       console.log(arguments.callee.i)
    }).i = i;
}
 
data[0]();
data[1]();
data[2]();
 
// 0
// 1
// 2

接下来讲讲 arguments 对象的几个注意要点:

2.5 arguments 与重载

很多语言中都有重载,但 JavaScript 中没有。先看个例子:

JavaScript

function add(num1, num2) { console.log("Method one"); return num1 + num2; } function add(num1, num2, num3) { console.log("Method two"); return num1 + num2 + num3; } add(1, 2); add(1, 2, 3);

1
2
3
4
5
6
7
8
9
10
11
12
function add(num1, num2) {
    console.log("Method one");
    return num1 + num2;
}
 
function add(num1, num2, num3) {
    console.log("Method two");
    return num1 + num2 + num3;
}
 
add(1, 2);
add(1, 2, 3);

执行结果为:

JavaScript

Method two Method two

1
2
Method two
Method two

所以,JavaScript 中,函数并没有根据参数的不同而产生不同的调用。

是不是 JavaScript 中就没有重载了呢?并不是,我们可以利用 arguments 模拟重载。还是上面的例子。

JavaScript

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)

1
2
3
4
5
6
7
8
9
10
11
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)

执行结果如下:

JavaScript

Result is 3 Result is 6

1
2
Result is 3
Result is 6

 

深入系列

JavaScript深入系列目录地址:。

JavaScript深入系列预计写十五篇左右,旨在帮大家捋顺JavaScript底层知识,重点讲解如原型、作用域、执行上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、继承等难点概念。

如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者有所启发,欢迎star,对作者也是一种鼓励。

  1. JavaScirpt 深入之从原型到原型链
  2. JavaScript 深入之词法作用域和动态作用域
  3. JavaScript 深入之执行上下文栈
  4. JavaScript 深入之变量对象
  5. JavaScript 深入之作用域链
  6. JavaScript 深入之从 ECMAScript 规范解读 this
  7. JavaScript 深入之执行上下文
  8. JavaScript 深入之闭包
  9. JavaScript 深入之参数按值传递
  10. JavaScript 深入之call和apply的模拟实现
  11. JavaScript 深入之bind的模拟实现
  12. JavaScript 深入之new的模拟实现

    1 赞 2 收藏 评论

必威 4

2.4 将参数从一个函数传递到另一个函数

下面是将参数从一个函数传递到另一个函数的推荐做法。

JavaScript

function foo() { bar.apply(this, arguments); } function bar(a, b, c) { // logic }

1
2
3
4
5
6
function foo() {
    bar.apply(this, arguments);
}
function bar(a, b, c) {
    // logic
}

在上面的函数中,num1和num2是两个参数。你可以使用名为num1和num2的arguments来引用这些参数。除了arguments名称之外,你还可以使用JavaScript数组,如对象arguments来引用它们。所以,上面的函数可以重写,如下所示:

强大的ES6

使用ES6的 … 运算符,我们可以轻松转成数组。

function func(...arguments) { console.log(arguments); // [1, 2, 3] } func(1, 2, 3);

1
2
3
4
5
function func(...arguments) {
    console.log(arguments); // [1, 2, 3]
}
 
func(1, 2, 3);

本文由必威发布于必威-前端,转载请注明出处:arguments对象用于访问或引用传递给函数的所有参

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。