How to merge JavaScript arrays

This is a simple article about some tips on using JavaScript 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 two arrays a and b, 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'和'b'就被回收了

　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.

　Loop insertion

　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 better memory usage.

　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

　 However, the for loop 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=>'s arrow functions 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 array length limit

　The first major problem is that the memory usage has doubled ( Of course it's only temporary!) The appended content is basically copying the elements to the stack through a function call. In addition, different JS engines have limitations on the length of the copied data. So, if the array has one million elements, you It will definitely exceed the limit of the call stack allowed for push(...) or unshift(...) . Alas, it will do well with a few thousand elements, but you have to be careful not to exceed reasonable length limits. .

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 ) );
    }
}