How to replace elements in array with elements of another array How to replace elements in array with elements of another array arrays arrays

How to replace elements in array with elements of another array


You can use the splice method to replace part of an array with items from another array, but you have to call it in a special way as it expects the items as parameters, not the array.

The splice method expects parameters like (0, anotherArr.Length, 1, 2, 3), so you need to create an array with the parameters and use the apply method to call the splice method with the parameters:

Array.prototype.splice.apply(arr, [0, anotherArr.length].concat(anotherArr));

Example:

var arr = [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];var anotherArr = [ 1, 2, 3 ];Array.prototype.splice.apply(arr, [0, anotherArr.length].concat(anotherArr));console.log(arr);

Output:

[ 1, 2, 3, 'd', 'e', 'f', 'g', 'h', 'i', 'j']

Demo: http://jsfiddle.net/Guffa/bB7Ey/


In ES6 with a single operation, you can do this to replace the first b.length elements of a with elements of b:

let a = [1,  2,  3,  4,  5]let b = [10, 20, 30]a.splice(0, b.length, ...b)console.log(a) // -> [10, 20, 30, 4, 5]

It could be also useful to replace the entire content of an array, using a.length (or Infinity) in the splice length:

let a = [1,  2,  3,  4,  5]let b = [10, 20, 30]a.splice(0, a.length, ...b)// or// a.splice(0, Infinity, ...b)console.log(a) // -> [10, 20, 30], which is the content of b

The a array's content will be entirely replaced by b content.

Note 1: in my opinion the array mutation should only be used in performance-critical applications, such as high FPS animations, to avoid creating new arrays. Normally I would create a new array maintaining immutability.

Note 2: if b is a very large array, this method is discouraged, because ...b is being spread in the arguments of splice, and there's a limit on the number of parameters a JS function can accept. In that case I encourage to use another method (or create a new array, if possible!).


In ES6, TypeScript, Babel or similar you can just do:

arr1.length = 0; // Clear your arrayarr1.push(...arr2); // Push the second array using the spread opperator

Simple.