Deep understanding of Concat methods in JavaScript _javascript skills

Recently in the bad fill JS knowledge, always because of JS strong grammar and feel shocked. Because of previous negligence on the front end, led to some understanding of the error. Therefore, the determination, no matter what things to do, should have the spirit of the special research.

Before you introduce, throw a question: how do you combine multiple arrays into an array?

The following sections are divided into:

The basic introduction of 1.concat method

2. Feel the Concat method from the case

The basic introduction of 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 with the original array 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, thus returning [1, 2, 3]. The second is to combine an empty array with a two-dimensional array whose members are [1],[2],[3], thus returning [[1], [2], [3]], noting 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 can also accept other types of values as parameters. They will add the tail of the array as a new element.

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

It looks very simple here, though it's less content. But it's really not easy to understand.

2. Feel the Concat method from the case

With the basics, let's look at a topic that I've met recently. The original question is this.

Look at the example to see what it means.

One of the solutions to this problem is:

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

This simple function enables you to combine the elements of an array into a single function. 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 code above, you add a new array 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, finally understand the different reasons.

First, when we invoke an instance method concat in an empty array, we are passing the arguments in the concat 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], [

The above code, from a single element, to a one-dimensional array, two-dimensional array, three-dimensional array of the gradual change.

In JavaScript in the Call,apply,bind method of the detailed and summary of the article, there is a reference to the application method is similar to the call method, but also to change a function in the this point (the scope of the function execution), and then in the specified scope, Call the function. The function is also executed immediately. The only difference is that it receives an array as an argument when the function executes.

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

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

In the code above, the upper section uses the Concat method directly to merge incoming arguments into an empty array. In the second segment, the instance method of the string object is invoked to point to [] within the concat (), and in the scope of the [], the arguments required by the call Concat are passed in as an array. Let's look at a few more 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 ([[[[[[[[[[]]]] ([[[[[[[[]]]], [2], [3]]]]
console.log ([].concat.apply ([],[[[[1],[2],[3]]]);//[[[1], [2 ], [3]]]

Summarize:

1. When using the Concat method alone, the members of the new array are added to the tail of the original array, and then a new array is returned, the original array is unchanged, and if other types of values are passed in, they are added to the end of the array as new elements.

2. Method of 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);
 },[])
}

If you don't understand the Apply method, you can go to this article: a detailed and summary of the Call,apply,bind method in JavaScript

The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring some help, but also hope that a lot of support cloud Habitat community!