One, foreword

As we all know, the front-end knowledge system is multifarious, and the content to be mastered is endless. However, the process of learning and practice is very interesting, but I do not know why some knowledge points are easy to be ignored.

The Arguments object I share today is one of the things THAT I’ve neglected before. When I came across it again and found it interesting, I decided to write it down.

It is an array-like object corresponding to the parameters passed to the function. When will it be used? How does it work? Take your time. Let’s start with an interview question.

2. A seemingly simple interview question

2.1 a problem

The first time I realized I had overlooked it was when I asked an interview question.

var length = 10;
function fn() {
  console.log(this.length);
}
var obj = {
  length: 5.method: function (fn) {
    arguments[0] (); }}; obj.method(fn,1);
Copy the code

The main interference in this problem is the two declared length variables. When your first response is the global length variable or the length property of obj, you are further and further away from the correct answer. So let’s just print out the correct answer, which is 2.

2.2 An answer

This answer is not difficult for those who are familiar with it, but a little confusing for those who are not. The key to solving this problem is the Arguments object.

Arguments [0] is an array object that contains each argument passed to a function.

var length = 10;
function fn() {
  console.log(this.length);
}
var obj = {
  length: 5.method: function (fn) {
    console.log(arguments[0]); // [Function: fn]}}; obj.method(fn,1);
Copy the code

Arguments [0] print out as the first argument to the fn function (obj. Method). Arguments0 is equivalent to fn(), and the fn function executes the result of printing length. Whose length attribute is the global variable length? Or the length of obj?

Obviously neither, because 2 does not equal 10 and 2 does not equal 5. These two questions are also the interference points I mentioned earlier. This question is cleverly set up a fog, which makes it easy to miss the key points of the question.

2.3 A technique

We’ll print this and see that arguments is the same as printing arguments, so this points to the arguments object. We know that in functions this refers to the function that calls it, so arguments is called here.

var length = 10;
function fn() {
  console.log(this); // [Arguments] { '0': [Function: fn], '1': 1 }
  // console.log(this.length);
}
var obj = {
  length: 5.method: function (fn) {
    arguments[0] ();console.log(arguments); //[Arguments] { '0': [Function: fn], '1': 1 }}}; obj.method(fn,1);
Copy the code

The length property of Arguments points to the number of arguments passed to the current function. Method passes two arguments, so arguments.length prints out as 2.

Let’s look at this problem again. The problem seems simple, but you may not immediately know what the result is. At this time, don’t panic, try to decompose the problem, decompose the problem into knowledge points, ideas will be clear.

I have a good idea about arguments.

Arguments object

Now, let’s take a closer look at arguments objects. Most of the following comes from MDN (developer.mozilla.org/zh-CN/docs/…)

3.1 grammar

Arguments is an array-like object corresponding to the arguments passed to the function. It contains each argument passed to the function, which can be referenced based on index values, for example:

function fn() {
  console.log(arguments[0]); // arg1
  console.log(arguments[1]); // arg2
  console.log(arguments[2]); // arg3
}

fn('arg1'.'arg2'.'arg3');
Copy the code

3.2 attributes

3.2.1 the arguments. The callee

Points to the currently executing function to which the parameter belongs.

function fn() {
  console.log(arguments.callee); // [Function: fn]
}

fn('arg1'.'arg2'.'arg3');
Copy the code

3.2.2 the arguments. Length

The number of arguments passed to the function.

function fn() {
  console.log(arguments.length); / / 3
}

fn('arg1'.'arg2'.'arg3');
Copy the code

3.2.3 the arguments [@ @ iterator]

Returns a new Array iterator object that contains the value of each index in the argument.

function fn() {
  console.log(arguments[Symbol.iterator]); // [Function: values]
}

fn('arg1'.'arg2'.'arg3');
Copy the code

3.3 Practical Examples

It is useful to handle function input arguments via the arguments property, especially if the arguments are not timed. And we can control the default parameters and arguments to achieve the desired results.

3.3.1 Traversal parameter Summation

Arguments is an array-like object corresponding to the arguments passed to the function, so you can evaluate it by iterating through all of its values.

function add() {
  var sum = 0,
    len = arguments.length;
  for (var i = 0; i < len; i++) {
    sum += arguments[i];
  }
  return sum;
}
add(); / / 0
add(1); / / 1
add(1.2.3.4); / / 10
Copy the code

3.3.2 Functions to define connection strings

This example defines a function to concatenate strings. The only formally declared argument to this function is a string that specifies a character as a concatenation to the string.

You can pass any number of arguments to the function and use each argument as an item in the list to create a list.

function myConcat(separator) {
  var args = Array.prototype.slice.call(arguments.1);
  return args.join(separator);
}

// returns "red, orange, blue"
myConcat(', '.'red'.'orange'.'blue');

// returns "elephant; giraffe; lion; cheetah"
myConcat('; '.'elephant'.'giraffe'.'lion'.'cheetah');

// returns "sage. basil. oregano. pepper. parsley"
myConcat('. '.'sage'.'basil'.'oregano'.'pepper'.'parsley');
Copy the code

3.3.3 Residual parameters, default parameters, and deconstructed assignment parameters

The Arguments object can be used with residual arguments, default arguments, and destruct assignment arguments.

In strict mode, the presence of residual arguments, default arguments, and destructively assigned arguments does not change the behavior of the Arguments object, but in non-strict mode it does.

When a function in non-strict mode contains no residual arguments, default arguments, and destructed assignments, the values in the Arguments object track the values of the arguments (and vice versa).

Arguments [0]; // Arguments [0]; // Arguments [0]
function func(a) {
  arguments[0] = 99;
  console.log(a);
}
func(10); / / 99

Arguments [0]; // Arguments [0];
function func(a) {
  a = 99;
  console.log(arguments[0]);
}
func(10); / / 99

Arguments [0]; // Arguments [0]
function func(a = 55) {
  arguments[0] = 99;
  console.log(a);
}
func(10); / / 10

Arguments [0]; // Arguments [0]
function func(a = 55) {
  arguments[0] = 99; // updating arguments[0] does not also update a
  console.log(a);
}
func(10); / / 10
Copy the code

Four,

Whether it is in the interview question or in our daily work, we often have such confusion, the actual result is not the same as our expected result, so we go back to tease out what we have missed. In my past experience, more than half of these cases are due to my incomplete grasp of a piece of knowledge, resulting in the deviation of my code results.

A flower is a world, a leaf is a bodhi. I sorted out the development trend of the whole function through knowledge points one by one. Every time I solved the problem, I would complete the knowledge. Therefore, IN the follow-up work, whether it is development or daily problem solving, IT is fast and high-quality.

It’s not easy to keep doing things well, but the rewards are worth it. ヾ (◍ ° ∇ ° ◍) ノ ゙