Understanding the concat method in javascript

This article mainly introduces the concat method in javascript, which is divided into two sections: 1. Basic Introduction of the concat method; 2. Feeling the concat method from the instance. Let's take a look at it. Before the introduction, we threw out a question: how to combine multiple numbers into an array?

The following sections will be divided into the following parts:

1. Basic Introduction to The concat Method

2. Feel the concat method from the instance

1. Basic Introduction to The concat Method

The concat method is used to merge multiple arrays. It adds the members of the new array to the end of the original array and returns a new array. The original array remains unchanged.

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 code above, the first return value is to combine an empty array with three arrays [1], [2], [3] into an array. Therefore, [1, 2, 3]. The second is to merge an empty array with a two-dimensional array. The members of the two-dimensional array are [1], [2], [3], so [[1], [2], [3]. Note that two-dimensional arrays are returned. The third example is the same. The concept is very important here, that is, adding the members of the new array to the end of the original array.

In addition to accepting arrays as parameters, concat can also accept other types of values as parameters. They are used as new elements to add the end of the array.

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

Although there is little content here, it looks quite simple. But it is really not easy to understand.

2. Feel the concat method from the instance

After finishing the basic knowledge, let's take a look at one of my recent questions. The original question is like this.

You can see what the example means.

In this question, one solution is:

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

This simple function can merge elements in the array. However, when I understand the returned value, a problem occurs.

Q: Why is the 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 code above, a new array is added to the end of an empty array. The first one returns [1, 2, 3]. The second is a two-dimensional array.

After a period of hard work, I finally understood the different reasons.

First, when we call the instance method concat in an empty array, we pass in the concat parameter and push it to the end of the array.

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]]console.log([].concat([[[1],[2],[3]]])); // [[[1], [2], [3]]]

In the code above, from a single element to a one-dimensional array, two-dimensional array, three-dimensional array gradually changed.

In the call, apply, and bind methods in Javascript, the role of the apply method is similar to that of the call method, it also changes this point in a function (the scope of the function to be executed), and then calls the function in the specified scope. The function is also executed immediately. The only difference is that it receives an array as a parameter for function execution.

The first parameter of the apply method is also the object to which this points. If it is set to null, undefined, or this, it is equivalent to specifying a global object. The second parameter is an array. All the members of the array are used as parameters in sequence and the original function is input during the call. Parameters of the original function must be added one by one in the call method, but must be added as an array in the apply method.

console.log([].concat([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 code above, the upper half directly uses the concat method to merge the passed parameters into an empty array. In the lower half, the instance method of the String object is called apply, this inside the concat () function is directed to [], and the parameters required to call concat are passed in under the scope, and passed in as an array. Let's look at several examples.

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]]console.log([].concat([[[1],[2],[3]]]));//[[[[1], [2], [3]]]]console.log([].concat.apply([],[[[[1],[2],[3]]]]));//[[[1], [2], [3]]]

Summary:

1. when the concat method is used separately, the members of the new array are added to the end of the original array, and a new array is returned. The original array remains unchanged. If other types of values are input, they are added to the end of the array as new elements.

2. How to merge array elements:

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

var flatten = 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: call, apply, and bind methods in Javascript.