Javascript - insert an array inside another array

What is the more efficient way to insert an array inside another array.

a1 = [1,2,3,4,5];
a2 = [21,22];

newArray - a1.insertAt(2,a2) -> [1,2, 21,22, 3,4,5];

Iterating a2 using splice looks a bit awfull from a performance point of view if a2 array is large.

Thanks.

Solution 1:

You can use splice combined with some apply trickery:

a1 = [1,2,3,4,5];
a2 = [21,22];

a1.splice.apply(a1, [2, 0].concat(a2));

console.log(a1); // [1, 2, 21, 22, 3, 4, 5];

In ES2015+, you could use the spread operator instead to make this a bit nicer

a1.splice(2, 0, ...a2);

Solution 2:

You can now do this if using ES2015 or later:

var a1 = [1,2,3,4,5];
var a2 = [21,22];
a1.splice(2, 0, ...a2);
console.log(a1) // => [1,2,21,22,3,4,5]

Refer to this for documenation on the spread (...) operator https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator

Solution 3:

Had it wrong at first. Should have used concat() instead.

var a1 = [1,2,3,4,5],
    a2 = [21,22],
    startIndex = 0,
    insertionIndex = 2,
    result;    

result = a1.slice(startIndex, insertionIndex).concat(a2).concat(a1.slice(insertionIndex));

Example: http://jsfiddle.net/f3cae/1/

This expression uses slice(0, 2)^[docs] to return the first two elements of a1 (where 0 is the starting index, and 2 is the element deleteCount, though a1 is not altered).

Intermediate result: [1,2]

It then uses concat(a2)^[docs] to append a2 to the end of the [1,2].

Intermediate result:[1,2,21,22].

Next, a1.slice(2) is called within a trailing .concat() at the tail end of this expression, which amounts to [1,2,21,22].concat(a1.slice(2)).

A call to slice(2), having a positive integer argument, will return all elements after the 2nd element, counting by natural numbers (as in, there are five elements, so [3,4,5] will be returned from a1). Another way to say this is that the singular integer index argument tells a1.slice() at which position in the array to start returning elements from (index 2 is the third element).

Intermediate result: [1,2,21,22].concat([3,4,5])

Finally, the second .concat() adds [3,4,5] to the the end of [1,2,21,22].

Result: [1,2,21,22,3,4,5]

It may be tempting to alter Array.prototype, but one can simply extend the Array object using prototypal inheritance and inject said new object into your projects.

However, for those living on the edge ...

Example: http://jsfiddle.net/f3cae/2/

Array.prototype.injectArray = function( idx, arr ) {
    return this.slice( 0, idx ).concat( arr ).concat( this.slice( idx ) );
};

var a1 = [1,2,3,4,5];
var a2 = [21,22];

var result = a1.injectArray( 2, a2 );

Solution 4:

The spread operator allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.

a2 = [21,22];
a1 = [1,2,...a2,3,4,5];//...a2 is use of spread operator
console.log(a1);

Solution 5:

There are some truly creative answers to this question here. Here is a simple solution for those just starting out with arrays. It can be made to work all the way down to ECMAScript 3 compliant browsers, if desired.

Know something about splice before getting started.

Mozilla Developer Network: Array.prototype.splice()

First, understand two important forms of .splice().

let a1 = [1,2,3,4],
    a2 = [1,2];

Method 1) Remove x (deleteCount) elements, starting from a desired index.

let startIndex = 0, 
    deleteCount = 2;

a1.splice(startIndex, deleteCount); // returns [1,2], a1 would be [3,4]

Method 2) Remove elements after a desired start index to the end of the array.

a1.splice(2); // returns [3,4], a1 would be [1,2]

Using .splice(), a goal could be to split a1 into head and tail arrays by using one of the two forms above.

Using method #1, the return value would become the head, and a1 the tail.

let head = a1.splice(startIndex, deleteCount); // returns [1,2], a1 would be [3,4]

Now, in one fell swoop, concatenate the head, body (a2), and tail

[].concat(head, a2, a1);

Thus, this solution is more like the real world than any other presented thus far. Is this not what you would do with Legos? ;-) Here is a function, done using method #2.

/**
*@param target Array The array to be split up into a head and tail.
*@param body Array The array to be inserted between the head and tail.
*@param startIndex Integer Where to split the target array.
*/
function insertArray(target, body, startIndex)
{
    let tail = target.splice(startIndex); // target is now [1,2] and the head
    return [].concat(target, body, tail);
}

let newArray = insertArray([1, 2, 3, 4], ["a", "b"], 2); // [1, 2, "a", "b", 3, 4]

Shorter:

/**
*@param target Array The array to be split up into a head and tail.
*@param body Array The array to be inserted between the head and tail.
*@param startIndex Integer Where to split the target array.
*/
function insertArray(target, body, startIndex)
{
    return [].concat(target, body, target.splice(startIndex));
}

Safer:

/**
*@param target Array The array to be split up into a head and tail.
*@param body Array The array to be inserted between the head and tail.
*@param startIndex Integer Where to split the target array.
*@throws Error The value for startIndex must fall between the first and last index, exclusive.
*/
function insertArray(target, body, startIndex)
{
    const ARRAY_START = 0,
          ARRAY_END = target.length - 1,
          ARRAY_NEG_END = -1,
          START_INDEX_MAGNITUDE = Math.abs(startIndex);

    if (startIndex === ARRAY_START) {
        throw new Error("The value for startIndex cannot be zero (0).");
    }

    if (startIndex === ARRAY_END || startIndex === ARRAY_NEG_END) {
        throw new Error("The startIndex cannot be equal to the last index in target, or -1.");
    }

    if (START_INDEX_MAGNITUDE >= ARRAY_END) {
        throw new Error("The absolute value of startIndex must be less than the last index.");
    }

    return [].concat(target, body, target.splice(startIndex));
}

The advantages of this solution include:

1) A simple premise dominates the solution--fill an empty array.

2) Head, body, and tail nomenclature feels natural.

3) No double call to .slice(). No slicing at all.

4) No .apply(). Highly unnecessary.

5) Method chaining is avoided.

6) Works in ECMAScript 3 and 5 simply by using var instead of let or const.

**7) Ensures that there will be a head and tail to slap on to the body, unlike many other solutions presented. If you are adding an array before, or after, the bounds, you should at least be using .concat()!!!!

Note: Use of the spread opearator ... makes all of this much easier to accomplish.