Explore how JavaScript uses the Concat method to merge an array

Recently in the bad to fill JS knowledge, always will because of JS strong grammar and feel shocked. Because the previous neglect of the front end, led to some understanding of the error. So repent, make up your mind, no matter what you do, have the spirit of special research.

Before the introduction, a question was thrown: how can I combine multiple arrays into an array?

The following sharing will be divided into the following subsections:

Basic introduction to the 1.concat method

2. Feel the Concat method from the instance

Basic introduction to the 1.concat method

The Concat method is used for merging multiple arrays. It adds the members of the new array to the end of the original array, and then returns a new array, unchanged from the original array.

Console.log ([].concat ([1],[2],[3]));    // [1, 2, 3]console.log ([].concat ([[1],[2],[3]]));    // [ 1], [2], [3]]console.log ([].concat (4,[[5,6],[7]));    // [4, [5, 6], [7]]

In the above code, the first return value merges an empty array with three arrays [1],[2],[3] into an array, and returns [1, 2, 3]. The second one is to merge an empty array with a two-dimensional array, the members of the two-dimensional array are [1],[2],[3], and therefore return [[1], [2], [3]], and Note that the two-dimensional array is returned. A third example is the same. It is important to understand the concept here, which is to add the members of the new array to the end of the original array.

　　In addition to accepting arrays as arguments, concat you can also accept other types of values as arguments. They add the tail of the array as new elements.

1 // [n/a]; 2 // equivalent to 3 // [n/a]; 4 Console.log ([].concat ([1],[2,3]));    // [n/a];

Although the content is less, it looks quite simple. But it's really not easy to really understand.

2. Feel the Concat method from the instance

　　After the basic knowledge, I will show you a topic I have recently encountered. This is the original question.

Look at the example to see what it means.

One of the solutions to this problem is:

var function (arr) {  return  [].concat.apply ([],arr);};

This simple function enables the merging of elements in an array. But when I understood the return value, there was a problem.

Question: Why is there a difference between using the Apply method and not using the Apply method?

Console.log ([].concat.apply ([],[[1],[2],[3]]));    // [1, 2, 3]console.log ([].concat ([[1],[2],[3]]));    // [ 1], [2], [3]]

In the above code, a new array is added to the tail in an empty array, and the first one returns [three-way]. The second one is a two-dimensional array.

After a period of tossing, finally understand the reasons for the difference.

First, when we call an instance method concat in an empty array, it is the parameter passed into the concat, at the end of the push to the array. In other words, an empty array is merged with the outermost array of the incoming array, and a new array is returned.

Console.log ([].concat ()];    // [1, 2, 3]console.log ([].concat ([1],[2],[3]));    // [1, 2, 3]console.log ([].concat ([[1],[2],[3]]));    // [[1], [2], [3]]console.log ([].concat ([[[[[1],[2],[3]]]);    // [[ 1], [2], [3] ]

The above code, from several arrays, to one-dimensional arrays, two-dimensional arrays, three-dimensional arrays are gradually changing.

In JavaScript, the Call,apply,bind method is described in detail and summarized in the article, apply the function of the method is call similar to the method, but also to change the this direction (the scope where the function executes), and then in the specified scope, Call the function. The function is also executed immediately. The only difference is that it takes an array as a parameter when the function executes.

　　applyThe first parameter of the method is also the this object to point to, and if set to null or undefined or this, it is equivalent to specifying the global object. The second argument is an array in which all the members, in turn, are arguments, passing in the original function upon invocation. The parameters of the original function call must be added to the method, but in the apply method, it must be added as an array.

Console.log ([].concat.apply ([],[[1],[2],[3]]));    // [1, 2, 3]console.log ([].concat ([[1],[2],[3]]));    // [ 1], [2], [3]]

As can be seen from the code, the first paragraph of code is first called the concat method on an empty array, the function of which is to add the members of the new array to the end of the original array. The Apply method is called, passing in the first argument, specifying the scope at which the object executes, and the second argument is to pass all the members of the array once as arguments, passing in the array when called .

therefore, when the Concat,apply method is used simultaneously, The effect of the two methods is superimposed, and there is a different phenomenon than using concat alone. Look at an example.

Console.log ([].concat ([+]));    // [1, 2, 3]console.log ([].concat.apply ([],[[1],[2],[3]])); // [1, 2, 3] Console.log ([].concat ([[1],[2],[3]])); // [ 1], [2], [3]]console.log ([].concat.apply ([],[[[1],[2],[3]])); // [ 1], [2], [3]] Console.log ([].concat ([[[[[1],[2],[3]]]); // [[ 1], [2], [3]]]console.log ([].concat.apply ([],[[[[1],[2],[3]]])); // [[ 1], [2], [3] ]

In the above code, the Concat method merges the most arrays and then merges the next layer of arrays on the basis of the merge.

Console.log ([].concat.apply ([],[[1],[2],[3]])); // [1, 2, 3] // equivalent to Console.log ([].concat ()];    // [A]

　　

Summarize:

1. When using the Concat method alone, the members of the new array are added to the end of the original array .

2. When you use the Apply method to specify this point of the concat method, the effect of the two methods is superimposed.

3. How to merge array elements:

var function (arr) {    return  [].concat.apply ([],arr);};

var function (array) {  return array.reduce (function(A, b    ) {return  A.concat (b);  },[])}

If you do not understand the Apply method, you can go to this article: JavaScript Call,apply,bind method of the detailed and summary

Finish.

Thank you for reading.

Explore how JavaScript uses the Concat method to merge an array