Detailed explanation of multiple methods of JavaScript array merging

This article mainly introduces in detail the various methods of merging JavaScript arrays. Interested friends can refer to it

This is a simple article about JavaScriptSome tips on using arrays. We will use different methods to combine/merge two JS arrays, as well as discuss the advantages/disadvantages of each method.

Let us first consider the following situation:

var a = [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ];
var b = [ "foo", "bar", "baz", "bam", "bun", "fun" ];

Obviously the simplest combination result should be:

[
  1, 2, 3, 4, 5, 6, 7, 8, 9,
  "foo", "bar", "baz", "bam" "bun", "fun"
]

concat(..)

This is the most common approach:

var c = a.concat( b );
a; // [1,2,3,4,5,6,7,8,9]
b; // ["foo","bar","baz","bam","bun","fun"]
c; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

As you can see, C is a brand new array, representing the combination of the two arrays a and b, and leaving A and B unchanged . Simple right?

But what if a has 10,000 elements and b also has 10,000 elements? C will have 20,000 elements, so the memory usage of a and b will double.

"No problem!", you said. Let them be garbage collected, set A and B to null, problem solved!

a = b = null; // 'a' and 'b' are recycled
Haha. For small arrays with only a few elements, this is no problem. But for large arrays, or in systems with limited memory that need to repeat this process frequently, it actually has a lot of room for improvement.

LoopInsert

Okay, let’s copy the contents of one array to another, using: Array#push(..)

// `b` onto `a`
for (var i=0; i < b.length; i++) {
  a.push( b[i] );
}
a; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]
b = null;

Now, array a has the contents of array b.

seems to have a better memory footprint.

But what if array a is relatively small? For memory and speed reasons, you may want to put the smaller a in front of b. No problem, just replace push(..) with unshift(..):

// `a` into `b`:
for (var i=a.length-1; i >= 0; i--) {
  b.unshift( a[i] );
}
b; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

Functional skills

Butfor loopIt is indeed ugly and difficult to maintain. Can we do better?

This is our first attempt, using Array#reduce:

// `b` onto `a`:
a = b.reduce( function(coll,item){
  coll.push( item );
  return coll;
}, a );

a; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

// or `a` into `b`:
b = a.reduceRight( function(coll,item){
  coll.unshift( item );
  return coll;
}, b );

b; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

Array#reduce(..) and Array#reduceRight(..) are nice, but they are a little clunky. ES6=>ArrowFunction will reduce the amount of code some, but it still requires a function that needs to be called once for each element, which is not perfect.

How about this one:

// `b` onto `a`:
a.push.apply( a, b );
a; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]
// or `a` into `b`:
b.unshift.apply( b, a );
b; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

This one is much better, right? Especially since the unshift(..) method doesn't need to worry about the previous reverse sorting here. ES6's span operation will be more beautiful: a.push(...b) or b.unshift(...a

Maximum length limit of array

The first major problem is, memory usage The amount is doubled (of course only temporarily!) The appended content is basically copied to the stack through function calls. In addition, different JS engines have limitations on the length of the copied data.

So, if the array has a million elements, you will definitely exceed the limit of the call stack allowed by push(...) or unshift(...). Alas, it will do well with a few thousand elements, but you have to. Be careful not to exceed the reasonable length limit

Note: You can try splice(...), which has the same problem as push(...) and unshift(...)

There is a way to avoid this maximum length limit.

function combineInto(a,b) {
  var len = a.length;
  for (var i=0; i < len; i=i+5000) {
    b.unshift.apply( b, a.slice( i, i+5000 ) );
  }
}

Wait a minute, our readability has gone backwards, it may get worse as we change it.

The above is the detailed content of Detailed explanation of multiple methods of JavaScript array merging. For more information, please follow other related articles on the PHP Chinese website!