JavaScript uses the Concat method to combine the array of methods _javascript tips

Source: Internet
Author: User
Tags instance method

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

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. That is, the empty array is merged with the outermost array of the passed-in 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], [

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

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

As you can see from the code, the first piece of code first calls the Concat method on an empty array, which is to add the members of the new array to the end of the original array. The Apply method is invoked, the first argument is passed, the scope where the object is executed is specified, and the second parameter is used to pass all members of the array as arguments at once, passing in the array at call time.

Therefore, when the Concat,apply method is used at the same time, the function of the two methods will be superimposed, and there will be different phenomena of using concat separately. Look at 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.apply ([],[[[1],[2],[3]]));//[[1], [2], [3]]
console.log ([]. Concat ([[[[[[[[[[]]]] [[[[[[[[[]]]], [2], [3]]]
console.log ([].concat.apply ([],[[[[1],[2],[3]]]);//[[[1], [2], [3]]]

In the code above, the Concat method merges the most arrays, and then merges the next-tier arrays on a consolidated basis.

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

 Summarize:

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

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

3. 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);
},[])
}

The above is a small set of JavaScript to introduce the use of concat method of the combination of pairs of methods, I hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.