Use different methods to combine/merge two JS arrays _ javascript skills

This is a simple article about how to use JavaScript arrays. We will combine different methods to merge two JS arrays and discuss the advantages and disadvantages of each method, tips for using JavaScript arrays. We will use different methods to combine/merge two JS arrays and discuss the advantages/disadvantages of each method.

Let's first consider the following situation:

The Code is as follows:

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:

The Code is as follows:

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

Concat (..)

This is the most common practice:

The Code is as follows:

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, indicating the combination of arrays A and B, and leaving a and B unchanged. Simple?

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

"No problem !", You said. Let them be recycled and set A and B to null. The problem is solved!

A = B = null; // 'A' and 'B' are recycled.

Haha. There is no problem with small arrays with only a few elements. But for large arrays or systems with limited memory, there are still many improvements to this process.
Loop insert

Okay, let's copy the content of one Array to another and use: Array # push (..)

The Code is as follows:

// '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 content of array B.

It seems that memory usage is better.

But if array a is small? For memory and speed reasons, you may need to put a smaller one in front of B ,. No problem. You only need to replace push (...) with unshift:

The Code is as follows:

// '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"]

Functions and skills

However, the for loop is ugly and difficult to maintain. Can we do better?

This is our first attempt to use Array # reduce:

The Code is as follows:

// 'B' onto 'A ':
A = B. reduce (function (coll, item ){
Coll. push (item );
Return coll;
}, );

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 good, but they are a little clumsy. ES6 => the arrow function reduces the amount of code, but it still requires a function, each element needs to be called once, not perfect.

How about this:

The Code is as follows:

// '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, );

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

Is it much better? This is especially because the unshift (...) method does not need to worry about reverse sorting. ES6 spead operations will be more beautiful: a. push (... B) or B. unshift (...

Maximum length of Array

The first major problem is that the memory usage doubles (of course, it's only temporary !) The appended content is basically copied to the stack through function calls. In addition, different JS engines have restrictions on the data copy length.

Therefore, if the array has 1 million elements, you will definitely exceed the limit that push (...) or unshift (...) can call the stack. Alas, processing thousands of elements will do well, but you must be careful not to exceed the reasonable length limit.

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

There is one way to avoid this maximum length limit.

The Code is as follows:

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, and our readability goes backwards. In this case, the change may be worse.