Comprehensive introduction to JavaScriptarguments objects

Arguments is a class array object. Indicates the list of parameters passed to a function. Let's use an example to intuitively understand what arguments looks like in JavaScript. 1. What is arguments?

MDN:

Arguments is a class array object. Indicates the list of parameters passed to a function.

Let's use an example to intuitively understand what arguments looks like in JavaScript.

function printArgs() {  console.log(arguments);  }  printArgs("A", "a", 0, { foo: "Hello, arguments" });

The execution result is:

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

At first glance, the result is an array, but it is not a real array, so arguments is an object of A Class array (to learn the difference between a real array and a class array object, you can continue to the end ).

Let's take a look at the content in arguments, which indicates all the parameters passed into the function during function execution. In the preceding example, four parameters in the printArgs function are introduced. You can use arguments [0] and arguments [1]... to obtain a single parameter.

2. arguments operation

2.1 arguments length

Arguments is an array object of classes. It contains a length attribute. You can use arguments. length to obtain the number of parameters of the input function.

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

The execution result is as follows:

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

2.2 convert arguments to array

The following method is usually used to convert arguments into an array:

Array.prototype.slice.call(arguments);

There is also a simpler Syntax:

[].slice.call(arguments);

Here, we simply call the slice Method of an empty Array instead of the Array prototype.

Why can the above two methods be converted?

First, the slice method returns an array and the parameter is arguments. In fact, all objects that meet certain conditions can be converted into arrays by the slice method. Let's look at an example:

const obj = { 0: "A", 1: "B", length: 2 };  const result = [].slice.call(obj);  console.log(Array.isArray(result), result);

The execution result is:

true ["A", "B"]

From the example above, we can see that the condition is: 1) the attribute is 0, 1, 2...; 2) It has the length attribute;

In addition, you must note that the arguments of the function cannot be disclosed or passed out. What does it mean? Let's take a look at several examples of arguments leakage:

// Leaking arguments example1:  function getArgs() {      return arguments;  }  // Leaking arguments example2:  function getArgs() {      const args = [].slice.call(arguments);      return args;  }  // Leaking arguments example3:  function getArgs() {      const args = arguments;      return function() {      return args;      };  }

The above method directly exposes the arguments object of the function. The final result is that the V8 engine will skip the optimization and cause considerable performance loss.

You can do this:

function getArgs() {      const args = new Array(arguments.length);      for(let i = 0; i < args.length; ++i) {      args[i] = arguments[i];      }      return args;  }

That's curious. Every time we use arguments, the first step will usually convert it into an array. At the same time, improper use of arguments may also lead to performance loss, so why not directly design arguments as an array object?

This should start with the language. Arguments was introduced in the early days of the language. At that time, the Array object had four methods: toString, join, reverse, and sort. The main reason why arguments inherits from objects is that these four methods are not required. Now, Array has added many powerful methods, such as forEach, map, and filter. So why not re-inherit arguments from Array in the new version? In fact, this is included in the ES5 draft, but it was finally rejected by the committee for forward compatibility.

2.3 modify the arguments Value

In the strict mode and non-strict mode, modifying the function parameter value has different results. Let's look at the two examples below:

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

Output:

1 1  10 1  10 20

Another example of non-strict mode:

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

Output result:

1 1  10 10  20 20

From the two examples above, we can see that in strict mode, the parameters in the function are not associated with the arguments object, and modifying a value does not change the other value. In non-strict mode, the two will affect each other.

2.4 PASS Parameters from one function to another

The following is a recommended method to pass parameters from one function to another.

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

2.5 arguments and overload

In many languages, there are heavy loads, but not in JavaScript. Let's take a look at an example:

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

The execution result is:

Method two  Method two

Therefore, in JavaScript, functions do not produce different calls based on different parameters.

Is there no heavy load in JavaScript? No. We can use arguments to simulate overloading. Or the above example.

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)

The execution result is as follows:

Result is 3  Result is 6

3. arguments in ES6

3.1 extension operators

Directly add Chestnuts:

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

The execution result is:

1 2 3

In short, the extension operator can expand arguments into independent parameters.

3.2 Rest Parameters

For example:

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

The execution result is:

true  1 [2, 3]

From the above results, we can see that the Rest parameter indicates that, apart from explicitly specifying the remaining parameter sets, the type is Array.

3.3 default parameters

Chestnuts:

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

The execution result is:

99 undefined  99 1

It can be seen that the default parameter does not affect arguments. arguments only indicates all parameters passed in when the function is called.

3.4 convert arguments to array

Array. from () is a highly recommended method. It can convert all class Array objects into arrays.

4. arrays and class array objects

An array has a basic feature: Index. This is not common.

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

We can use obj [0] and arr [0] to retrieve the desired data, but the data acquisition method is indeed different. Obj [0] uses the key-value pair of the object to access data, while arr [0] uses the array index. In fact, the only difference between an Object and an Array is that the attribute of an Object is string, and the index of an Array is number.

Next let's take a look at the class array object.

A pseudo Array is an Array that contains a set of data and has a length attribute, but does not have any Array method. Specifically, the length attribute is a non-negative integer, and the upper limit is the maximum number accurately expressed in JavaScript. In addition, the length value of the class array object cannot be changed automatically.

How do I create an array object?

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

The execution result is:

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

That is to say, the Foo example has all the methods of Array, but the type is not Array.

What if I don't need all the methods of Array?

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

The execution result is:

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

Refer:

Differences between arrays and pseudo arrays in JavaScript

MDN arguments

Avoid modifying or passing arguments into other functions-it kills optimization

Optimization killers

Why isn't a function's arguments object an array in Javascript?

Arguments object

Advanced Javascript: Objects, Arrays, and Array-Like objects

Detailed description of special JavaScript Object Array-Like Objects

What is a good way create a Javascript array-like object?