Before the introduction, throw a question: How to combine multiple arrays into one array?
The following sharing sessions are divided into the following subsections:
1. Basic introduction to concat method
2. Feel the concat method from the example
1. Basic introduction to concat method
The concat method is used for merging multiple arrays. It adds the member of the new array to the end of the original array, and then 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 above code, the first return value is to merge an empty array with three arrays [1], [2], [3] into an array, thus returning [1, 2, 3]. The second is to combine an empty array with a two-dimensional number. The members of the two-dimensional array are [1], [2], [3], so [[1], [2], [3]] are returned. Note that the returned two-dimensional array. The third example is the same. The understanding of concepts is very important here, that is, to add members of the new array to the tail of the original array.
In addition to accepting arrays as parameters, concat can also accept other types of values as parameters. They will be used as new elements, adding the end of the array.
console.log([].concat(1,2,3)); //[1,2,3];//equivalent to console.log([].concat(1,[2,3])); //[1,2,3]; console.log([].concat([1],[2,3])); //[1,2,3];
Although there is less content here, it looks quite simple. But it is really not easy to understand.
2. Feel the concat method from the example
After talking about the basic knowledge, let me show you a question I have encountered recently. The original title is like this.
You can see what it means by looking at the examples.
One of the solutions to this question is:
var flatten = function (arr){return [].concat.apply([],arr);};This simple function can realize the function of merging elements in an array. But when I understand this return value, a problem arises.
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 also added to the tail in an empty array, and the first one returns [1,2,3]. The second one is a two-dimensional array.
After a period of tossing and chasing, I finally understood the different reasons.
First, when we call the instance method concat in an empty array, we pass the parameters in concat and push to the end of the array. That is, the empty array is merged with the outermost array of the passed array, and then a new array is returned.
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 above code, it gradually changes from several arrays to one-dimensional arrays, two-dimensional arrays, and three-dimensional arrays.
In the detailed explanation and summary article of call, apply, and bind methods in Javascript, it is mentioned that the function of the apply method is similar to the call method, and it also changes this point (the scope where the function is executed), and then calls the function in the specified scope. The function will also be executed immediately. The only difference is that it receives an array as an argument when the function is executed.
The first parameter of the apply method is also the object that this wants to point to. If set to null or undefined or this, it is equivalent to specifying a global object. The second parameter is an array, and all members of the array are used as parameters in turn, and the original function is passed in when called. The parameters of the original function must be added one by one in the call method, but in the apply method, they 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 piece of code calls the concat method first on the empty array. The function of this method is to add members of the new array to the end of the original array. The apply method is called again, and the first parameter is passed in, specifying the scope of the object being executed. The function of the second parameter is to pass all members of the array as parameters at one time and pass them into the array when called.
Therefore, when the concat and apply methods are used at the same time, the functions of the two methods will be superimposed, which is a different phenomenon than using concat alone. Let’s see an example.
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([[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.apply([],[[[[1],[2],[3]]]));//[[[1], [2], [3]]]]]);//[[1], [2], [3]]]
In the above code, the concat method combines the most numbers, and then merges the next layer array on the basis of the merge.
console.log([].concat.apply([],[[1],[2],[3]]));//[1, 2, 3]//equivalent to console.log([].concat(1,2,3)); //[1,2,3]
Summarize:
1. When using the concat method alone, members of the new array will be added to the end of the original array.
2. When using the apply method to specify this pointer of the concat method, the functions of the two methods will be superimposed.
3. Methods for merging array elements:
var flatten = function (arr){return [].concat.apply([],arr);}; var flatten = function (array){return array.reduce(function(a,b){return a.concat(b);},[])}The above is the method of merging arrays using concat method introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!