There doesn't seem to be a way to extend an existing JavaScript array with another array, i.e. to emulate Python's extend method.
I want to achieve the following:
>>> a = [1, 2]
[1, 2]
>>> b = [3, 4, 5]
[3, 4, 5]
>>> SOMETHING HERE
>>> a
[1, 2, 3, 4, 5]
I know there's a a.concat(b) method, but it creates a new array instead of simply extending the first one. I'd like an algorithm that works efficiently when a is significantly larger than b (i.e. one that does not copy a).
Note: This is not a duplicate of How to append something to an array? -- the goal here is to add the whole contents of one array to the other, and to do it "in place", i.e. without copying all elements of the extended array.
This question is related to
javascript
arrays
concatenation
You can create a polyfill for extend as I have below. It will add to the array; in-place and return itself, so that you can chain other methods.
if (Array.prototype.extend === undefined) {_x000D_
Array.prototype.extend = function(other) {_x000D_
this.push.apply(this, arguments.length > 1 ? arguments : other);_x000D_
return this;_x000D_
};_x000D_
}_x000D_
_x000D_
function print() {_x000D_
document.body.innerHTML += [].map.call(arguments, function(item) {_x000D_
return typeof item === 'object' ? JSON.stringify(item) : item;_x000D_
}).join(' ') + '\n';_x000D_
}_x000D_
document.body.innerHTML = '';_x000D_
_x000D_
var a = [1, 2, 3];_x000D_
var b = [4, 5, 6];_x000D_
_x000D_
print('Concat');_x000D_
print('(1)', a.concat(b));_x000D_
print('(2)', a.concat(b));_x000D_
print('(3)', a.concat(4, 5, 6));_x000D_
_x000D_
print('\nExtend');_x000D_
print('(1)', a.extend(b));_x000D_
print('(2)', a.extend(b));_x000D_
print('(3)', a.extend(4, 5, 6));body {_x000D_
font-family: monospace;_x000D_
white-space: pre;_x000D_
}Combining the answers...
Array.prototype.extend = function(array) {
if (array.length < 150000) {
this.push.apply(this, array)
} else {
for (var i = 0, len = array.length; i < len; ++i) {
this.push(array[i]);
};
}
}
You should use a loop-based technique. Other answers on this page that are based on using .apply can fail for large arrays.
A fairly terse loop-based implementation is:
Array.prototype.extend = function (other_array) {
/* You should include a test to check whether other_array really is an array */
other_array.forEach(function(v) {this.push(v)}, this);
}
You can then do the following:
var a = [1,2,3];
var b = [5,4,3];
a.extend(b);
DzinX's answer (using push.apply) and other .apply based methods fail when the array that we are appending is large (tests show that for me large is > 150,000 entries approx in Chrome, and > 500,000 entries in Firefox). You can see this error occurring in this jsperf.
An error occurs because the call stack size is exceeded when 'Function.prototype.apply' is called with a large array as the second argument. (MDN has a note on the dangers of exceeding call stack size using Function.prototype.apply - see the section titled "apply and built-in functions".)
For a speed comparison with other answers on this page, check out this jsperf (thanks to EaterOfCode). The loop-based implementation is similar in speed to using Array.push.apply, but tends to be a little slower than Array.slice.apply.
Interestingly, if the array you are appending is sparse, the forEach based method above can take advantage of the sparsity and outperform the .apply based methods; check out this jsperf if you want to test this for yourself.
By the way, do not be tempted (as I was!) to further shorten the forEach implementation to:
Array.prototype.extend = function (array) {
array.forEach(this.push, this);
}
because this produces garbage results! Why? Because Array.prototype.forEach provides three arguments to the function it calls - these are: (element_value, element_index, source_array). All of these will be pushed onto your first array for every iteration of forEach if you use "forEach(this.push, this)"!
If you want to use jQuery, there is $.merge()
Example:
a = [1, 2];
b = [3, 4, 5];
$.merge(a,b);
Result: a = [1, 2, 3, 4, 5]
Super simple, does not count on spread operators or apply, if that's an issue.
b.map(x => a.push(x));
After running some performance tests on this, it's terribly slow, but answers the question in regards to not creating a new array. Concat is significantly faster, even jQuery's $.merge() whoops it.
Another solution to merge more than two arrays
var a = [1, 2],
b = [3, 4, 5],
c = [6, 7];
// Merge the contents of multiple arrays together into the first array
var mergeArrays = function() {
var i, len = arguments.length;
if (len > 1) {
for (i = 1; i < len; i++) {
arguments[0].push.apply(arguments[0], arguments[i]);
}
}
};
Then call and print as:
mergeArrays(a, b, c);
console.log(a)
Output will be: Array [1, 2, 3, 4, 5, 6, 7]
I feel the most elegant these days is:
arr1.push(...arr2);
The MDN article on the spread operator mentions this nice sugary way in ES2015 (ES6):
A better push
Example: push is often used to push an array to the end of an existing array. In ES5 this is often done as:
var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; // Append all items from arr2 onto arr1 Array.prototype.push.apply(arr1, arr2);In ES6 with spread this becomes:
var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; arr1.push(...arr2);
Do note that arr2 can't be huge (keep it under about 100 000 items), because the call stack overflows, as per jcdude's answer.
This solution works for me (using the spread operator of ECMAScript 6):
let array = ['my', 'solution', 'works'];_x000D_
let newArray = [];_x000D_
let newArray2 = [];_x000D_
newArray.push(...array); // Adding to same array_x000D_
newArray2.push([...array]); // Adding as child/leaf/sub-array_x000D_
console.log(newArray);_x000D_
console.log(newArray2);It is possible to do it using splice():
b.unshift(b.length)
b.unshift(a.length)
Array.prototype.splice.apply(a,b)
b.shift() // Restore b
b.shift() //
But despite being uglier it is not faster than push.apply, at least not in Firefox 3.0.
Use Array.extend instead of Array.push for > 150,000 records.
if (!Array.prototype.extend) {
Array.prototype.extend = function(arr) {
if (!Array.isArray(arr)) {
return this;
}
for (let record of arr) {
this.push(record);
}
return this;
};
}
I like the a.push.apply(a, b) method described above, and if you want you can always create a library function like this:
Array.prototype.append = function(array)
{
this.push.apply(this, array)
}
and use it like this
a = [1,2]
b = [3,4]
a.append(b)
The answer is super simple.
>>> a = [1, 2]
[1, 2]
>>> b = [3, 4, 5]
[3, 4, 5]
>>> SOMETHING HERE
(The following code will combine the two arrays.)
a = a.concat(b);
>>> a
[1, 2, 3, 4, 5]
Concat acts very similarly to JavaScript string concatenation. It will return a combination of the parameter you put into the concat function on the end of the array you call the function on. The crux is that you have to assign the returned value to a variable or it gets lost. So for example
a.concat(b); <--- This does absolutely nothing since it is just returning the combined arrays, but it doesn't do anything with it.
Update 2018: A better answer is a newer one of mine: a.push(...b). Don't upvote this one anymore, as it never really answered the question, but it was a 2015 hack around first-hit-on-Google :)
For those that simply searched for "JavaScript array extend" and got here, you can very well use Array.concat.
var a = [1, 2, 3];
a = a.concat([5, 4, 3]);
Concat will return a copy the new array, as thread starter didn't want. But you might not care (certainly for most kind of uses this will be fine).
There's also some nice ECMAScript 6 sugar for this in the form of the spread operator:
const a = [1, 2, 3];
const b = [...a, 5, 4, 3];
(It also copies.)
You can do that by simply adding new elements to the array with the help of the push() method.
let colors = ["Red", "Blue", "Orange"];
console.log('Array before push: ' + colors);
// append new value to the array
colors.push("Green");
console.log('Array after push : ' + colors);Another method is used for appending an element to the beginning of an array is the unshift() function, which adds and returns the new length. It accepts multiple arguments, attaches the indexes of existing elements, and finally returns the new length of an array:
let colors = ["Red", "Blue", "Orange"];
console.log('Array before unshift: ' + colors);
// append new value to the array
colors.unshift("Black", "Green");
console.log('Array after unshift : ' + colors);There are other methods too. You can check them out here.
First a few words about apply() in JavaScript to help understand why we use it:
The
apply()method calls a function with a giventhisvalue, and arguments provided as an array.
Push expects a list of items to add to the array. The apply() method, however, takes the expected arguments for the function call as an array. This allows us to easily push the elements of one array into another array with the builtin push() method.
Imagine you have these arrays:
var a = [1, 2, 3, 4];
var b = [5, 6, 7];
and simply do this:
Array.prototype.push.apply(a, b);
The result will be:
a = [1, 2, 3, 4, 5, 6, 7];
The same thing can be done in ES6 using the spread operator ("...") like this:
a.push(...b); //a = [1, 2, 3, 4, 5, 6, 7];
Shorter and better but not fully supported in all browsers at the moment.
Also if you want to move everything from array b to a, emptying b in the process, you can do this:
while(b.length) {
a.push(b.shift());
}
and the result will be as follows:
a = [1, 2, 3, 4, 5, 6, 7];
b = [];
Source: Stackoverflow.com