Storing arrays in ES6 Set and accessing them by value - javascript

Is there a simple way to verify that an ES6 Set contains a value that is a particular array? I'd like a solution that doesn't require me to use a reference:
var set = new Set();
var array = [1, 2];
set.add(array);
set.has(array); // true
set.add([3, 4]);
set.has([3, 4]); // false
So far my solution is to store everything as a string, but this is annoying:
set.add([3, 4].toString());
set.has([3, 4].toString()); // true

No there is not.
A Set works on objects and primitives and is useful for preventing identical primitives and re-adding the same object instance.
Each array is their own object, so you can actually add two different arrays with the same values.
var set = new Set();
set.add([3, 4]);
set.add([3, 4]);
console.log(set.size);//2
Additionally, there's nothing to prevent an object from being changed once in a set.
var set = new Set();
var a1 = [3, 4];
var a2 = [3, 4];
set.add(a1);
set.add(a2);
a2.push(5);
for (let a of set) {
console.log(a);
}
//Outputs:
// [3, 4]
// [3, 4, 5]
A set does not have a mechanism for checking the values of objects in a set. Since the value of an object could change at any time, it wouldn't be much more efficient than simply looping over them yourself.
The functionality you are looking has been kicked around in various ECMAScript proposals, however it does not appear to be coming anytime soon.

Too low rep, can't add comment so I'm adding it as an answer here.
In advance, apologies for the wall of text.
I like CTS_AE's answer, and wanted to take the same route.
However, there is one thing to note, and that is how are arrays put to String.
let memory = {};
memory[[1,2,3]] = "123";
console.log(memory[[1,2,3]]); // "123"
console.log([1,2,3].toString(); // "1,2,3"
console.log(memory["1,2,3"]); // "123"
Now this wouldn't be such an issue if you knew what you were putting in are exclusively arrays... or would it?
MDN about Array.prototype.toString() says
For Array objects, the toString method joins the array and returns one string containing each array element separated by commas.
Which brings 2 big issues:
indexing via array is the same as indexing via array.toSring()
since toString() is recursive, nested arrays end up being stringified into the same format as single-level arrays.
let memory = {};
memory[[1,2,3]] = "123";
console.log(memory[[1,2,3]]); // "123"
console.log(memory["1,2,3"]); // "123"
console.log(memory[[[1],[2],[3]]]); // "123"
console.log(memory[[[[1],2],3]]); // "123"
...and the list goes on. It's not hard to see when these issues can really break your project. I encountered such issue just a while ago when I tried memoizing
function doSomeStuff(string, sourceIdxs, targetIdxs) {
if (memo[[string, sourceIdxs, targetIdxs]])
return memo[[string, sourceIdxs, targetIdxs]];
// ...
}
In such case for example ["foo", [1, 3, 5], [6, 10]] and ["foo", [1, 3], [5, 6, 10]] point to the same value, and I ended up overwriting existing values, effectively corrupting the function memory.
Now, in the specific case of the ArraySet answer above, the issue persists. While you don't mind if you overwrite existing key with another "same" key, you can end up getting false positives.
So how to fix this?
Option 1. stringify
The easy way out is using JSON.stringify() to write the "exact" string representations of all the key data.
let memory = {};
memory[JSON.stringify([1,2,3])] = "123";
console.log(memory[JSON.stringify([1,2,3])]); // "123"
console.log(memory[JSON.stringify([[1],[2,3]])); // undefined
This helps with the false positives.... kind of. For one, you won't have issues with overlapping elements in the array. [[1,2],[3]] no longer points to where [[1],[2,3]] does.
However, [1,2,3] and "[1,2,3]" do. Also (in some bizarre cases), the array elements might contain [ or ] characters, which might complicate the issue further.
And you might not care for such cases. Your keys may still be restrained well enough for such things not to happen. And you might even want such behaviour. If you do, go for it.
Good:
Fixes most of issues of the ArraySet
Is easy to implement
Bad:
JSON.stringify()is fairly slow.
Option 2. separators
Much simpler and quicker, while still giving a bit of advantage over the old solution.
function toSepString(arr) { return arr.join("|") }
let memory = {};
memory[toSepString([[1,2],3])] = "123";
console.log(memory[toSepString([1,[2,3]])]); // undefined
Now of course this helps only with the "outer-most" layer.
console.log(toSepString([1,[2,[3]]])); // "1|2,3"
console.log(toSepString([1,[[2],[[3]]]]); // "1|2,3"
So should you use this, you need to make sure the specific elements of your key array can't become ambiguous when converted to string.
Of course, you could make the function recursive and add "[", "]" on each beginning and end, essentially copying a part of the functionality of JSON.stringify(). I would imagine this would be still more performant than calling JSON.stringify() directly, but that would require tests.
Good:
faster than its built-in counterpart
Bad:
issues with nested arrays
issues with separator not appearing in values

It's not using a Set, but may solve your problem.
If you want to make sure that an array can only exist in a collection once, and you want instant lookups you can use a hash by abusing its keys. They do not necessarily need a value. You can set them to undefined, to true, or something else if it makes you sleep better at night 😛.
Inspired by: javascript search array of arrays
It is halfway tempting to make a wrapper, but it is also simple enough to handle a small job.
const hash = {};
hash[[1, 2, 3]] = undefined;
hash[[3, 4]] = undefined;
hash[[3, 4]] = undefined;
console.log({hash});
console.log("hash has [3, 4]?", hash.hasOwnProperty([3, 4]));
For me, this will work fine, because I am checking if a coordinate exists in a collection. Unfortunately from this stackoverflow it seems that Set cannot be the answer to this problem.
Coincidentally it seems to implicitly solve your problem of not calling toString on the array which this seems to do under the hood. Personally I don't care for hash.hasOwnProperty.
A More Elegant Option
You could even write a wrapper to your code like:
class ArraySet extends Set {
add(arr) {
super.add(arr.toString());
}
has(arr) {
return super.has(arr.toString());
}
}
const arraySet = new ArraySet();
arraySet.add([1, 2]);
arraySet.add([3, 4]);
arraySet.add([3, 4]);
console.log("ArraySet has [3, 4]?", arraySet.has([3, 4]));

Apparently, it doesn't look like set.has() will check for Array Elements like that. They are added, however:
var set = new Set([1, 2]);
set.add([3, 4]);
console.log(Array.from(set));

Janky solution using Object Keys as a set:
let set = {};
set[[1,4]] = true;
set[[4,5]] = true;
set[[4,5]] = true; // Already added, won't make a difference
console.log(set); // "{ '1,4': true, '4,5': true }"
let setAsArr = (Object.keys(set).map(a => a.split(",")));
console.log(setAsArr) // [ [ '1', '4' ], [ '4', '5' ] ]
This will let you create a "set" that prevents duplicate array item entries and has easy item access.
Note: Does not work on arrays of strings that contain the "," character

Related

js - When pushing an array A into a multidimensional array B, it is overwriting the previous array already on A

Here's an example from the browser console
a=[[1,2,3],[3,2,1]]
b=[]
b.push(a)
a[0][0]=9
b.push(a)
In that case, I was expecting b to be
[[[1,2,3],[3,2,1]],[[9,2,3],[3,2,1]]]
But it will be
[[[9,2,3],[3,2,1]],[[9,2,3],[3,2,1]]]
I'm attaching a screenshot to better show the results in the browser:
browsers console with the same code as above and output
Any ideas on why this is happening and how to get to my expecting results?
For the language itself, there are no multidimentional arrays - there are another arrays inside an array. It doesn't matter if contains arrays, plain objects, functions, or primitives. For primitives, their values will be copied. Otherwise, the references to objects will be copied.
You can do it via pushing the copies of inner arrays of array a with the help of map and spread operator(...).
var a=[[1,2,3],[3,2,1]];
var b=[];
b.push(a.map(x=>[...x]));
a[0][0]=9;
b.push(a);
console.log(b);
Ok, based on all the comments here, specially #code 's one, and also another post (How do I pass the value instead of the reference of an array?) I was able to achieve the results by using this:
b.push([]);
for(line of a){
b[b.length-1].push(a.slice(0));
}
EDIT
Abhijeet's suggestion also works flawlessly:
b.push(a.map(x=>[...x]));
In JavaScript, objects are passed by reference, meaning "copies" of it aren't copies. They point to the same address in RAM, so mutating one reference mutates 'em all.
To apply to this case, if you didn't already know, arrays are special types of objects. To prove this you can run typeof [] in your browser console. That means that arrays inherit the "pass-by-reference" behavior, meaning if you do let c = a then run c[0] = 1, a will be changed as well and vice versa.
To solve this issue you can use Array.prototype.slice:
const a = [[1, 2, 3], [3, 2, 1]];
const b = [];
Array.prototype.pushWithoutReference = function(add) {
for(let i = 0; i < add.length; i++) {
this[this.length] = add[i].slice(0);
}
}
b.pushWithoutReference(a);
a[0][0] = 9;
b.pushWithoutReference(a);

How to update an array after splice in Svelte?

I'm learning Svelte, and read in the documentation that arrays need to be reassigned in order for a component or page to update it. For that they devised a more idiomatic solution. Instead of writing:
messages.push('hello');
messages = messages;
you can write instead:
messages = [...messages, 'hello'];
Alright, makes sense. But then the documentation says:
You can use similar patterns to replace pop, shift, unshift and splice.
But how? I cannot see how you can remove items from an array. More to the point, how could I write the following more idiomatically?
messages.splice(messages.indexOf('hello'), 1);
messages = messages;
You could e.g. use the filter array method to create a new array without the element 'hello':
messages = messages.filter(m => m !== 'hello');
As mentioned, Svelte's reactivity is triggered by assignments. The current Svelte tutorial uses JavaScript's (ES6) spread syntax (three dots) to add the next-higher number to an array, providing a more idiomatic solution than a redundant assignment using push:
function pushNumber() {
numbers = [...numbers, lastnumber]; // 1, 2, 3, 4, 5
}
You could use spread syntax to replace pop, shift, unshift and splicethough it might increase the time and complexity of the operation in some cases:
function unshiftNumber() {
numbers = [firstnumber, ...numbers]; // 0, 1, 2, 3, 4
}
function popNumber() {
numbers = [...numbers.slice(0,numbers.length - 1)]; // 1, 2, 3
}
function shiftNumber() {
numbers = [...numbers.slice(1,numbers.length)]; // 2, 3, 4
}
function spliceNumber() {
numbers = [firstnumber, ...numbers.slice(0,numbers.length-1)];// 0, 1, 2, 3
}
Spread is just one way to do it, though. The purpose behind not using pop/push etc is to encourage immutability. So any removal can just be a filter, for example.
There are several things to consider here.
Given this code:
messages.splice(messages.indexOf('hello'), 1);
messages = messages;
What's happening here is:
Looking for the first occurrence of the string "hello" in the array
Removing such element from the array, based on the index found.
The assumption here is that "hello" needs to exists, otherwise the could would remove the last item from the array (since indexOf returns -1).
The original array is therefore mutate: depends by the context, that sometimes can be preferable instead of copying the whole array into a new one; otherwise it's generally a better practice avoid such mutation.
So. If you want to have this behavior exactly, probably this is the best code you can have. For example, takes the filter example:
messages = messages.filter(message => message !== "hello")
What's happening here is:
Filter out any element equals to "hello"
Returns a new array without such element
So it's quite different from the original code: first of all, it always loop the whole array. If you have thousands of element, even if you have only one "hello" at the second index, it would always iterate all of them. Maybe it's what you want, maybe not. If the element is unique, such as an id, maybe you want to stop once you find it.
Second, it returns a new array. Again, that usually a better practice than mutate the array, but in some context it's preferable mutate it instead of create a new one.
So, if you want to mutate the original array, it's probably better to stick to your original code.
If, instead, you don't care (such as the example of push), I believe that in the intention of svelte's developers, your code would be roughly translate to:
let i = messages.indexOf("hello");
messages = [...messages.slice(0, i), ...messages.slice(i + 1)];
(Still assuming there is a "hello" message and you're interested only in the first occurrence).
It's unfortunate that JS doesn't have a better syntax to handles slices.
In case you're wandering, filter can also be used to remove elements using a given index:
let elements = ['a','b', 'c'];
let idx = 1;
elements = elements.filter( (e,i) => i !== idx );
// => ['a', 'c']
You can perform the usual push and pop or `splice on your Array
But because Svelte's reactivity is triggered by assignments, using array methods like push and splice won't automatically cause updates.
According to All about Immutable Arrays and Objects in JavaScript you can do it this way...
let messages = ['something', 'another', 'hello', 'word', 'another', 'again'];
const indexOfHello = messages.indexOf('hello');
messages = [...messages.slice(0, indexOfHello), ...messages.slice(indexOfHello + 1)];
Note the difference between splice and slice
The splice() method adds/removes items to/from an array, and returns
the removed item(s). Note: This method changes the original array.
Syntax: array.splice(start, deleteCount, itemstoAdd, addThisToo);
But
The slice() method returns the selected elements in an array, as a new array object. The slice() method selects the elements starting at the given start argument, and ends at, but does not include, the given end argument.
Note: The original array will not be changed.
In order words
It return a shallow copy of a portion of an array into a new array
object selected from begin to end (end not included). The original
array will not be modified.
Syntax: array.slice(start, end);
You can try this: https://svelte.dev/repl/0dedb37665014ba99e05415a6107bc21?version=3.53.1
use a library called svelox. It allows you to use the Array native api(push/splice...etc.) without reassignment statements.
Spread the spliced array to reassign it to itself ;)
messages = [...messages.splice(messages.indexOf('hello'), 1)];
The goal is to make Svelte detecting that array messages (a property of your component or a variable in the Svelte store) has changed. This is why the array messages must be declared with let or var keyword, not const. This way you're allowed to reassign it. And the reassign operation itself is sufficient to make Svelte detecting that the array has changed.
Perhaps even, simply by doing so works too:
messages = messages.splice(messages.indexOf('hello'), 1);

Access last element of a TypeScript array

Is there a notation to access the last element of an array in TypeScript? In Ruby I can say: array[-1]. Is there something similar?
You can access the array elements by it's index. The index for the last element in the array will be the length of the array-1 ( as indexes are zero based).
This should work.
var items: String[] = ["tom", "jeff", "sam"];
alert(items[items.length-1])
Here is a working sample.
If you don't need the array afterwards, you could use
array.pop()
But that removes the element from the array!
The pop returns T | undefined so you need to take care of that in your implementation.
If you are sure there will be always a value you can use non-null assertion operator (!):
var poped = array.pop()
array.push(poped!);
Here is another way which has not yet been mentioned:
items.slice(-1)[0]
As of July 2021, browsers are starting to support the at() method for Arrays which allows for the following syntax:
const arr: number[] = [1, 2, 3];
// shows 3
alert(arr.at(-1));
It's not clear to me at what point TypeScript will start to support this (it's not working for me just yet) but it should be available soon I would guess.
Edit: This is available as of typescript#4.5.4
Here are a the options summarized together, for anyone finding this question late like me.
var myArray = [1,2,3,4,5,6];
// Fastest method, requires the array is in a variable
myArray[myArray.length - 1];
// Also very fast but it will remove the element from the array also, this may or may
// not matter in your case.
myArray.pop();
// Slowest but very readable and doesn't require a variable
myArray.slice(-1)[0]
If you need this call more often it's possible to declare it globally:
interface Array<T> {
last(): T | undefined;
}
if (!Array.prototype.last) {
Array.prototype.last = function () {
if (!this.length) {
return undefined;
}
return this[this.length - 1];
};
}
then you can just call
items.last()
I'm going with this one as my first contribution to stackoverflow:
var items: String[] = ["tom", "jeff", "sam"];
const lastOne = [...items].pop();
NOTE: Unlike the use of pop() without the spread operator, this approach doesn't remove the last element from the original array.
const arr = [1, 3, 6, 2];
console.log(...arr.slice(-1)); // 2

Is there a reason JavaScript developers don't use Array.push()?

I commonly see developers use an expression like the following in JavaScript:
arr = []
arr[arr.length] = "Something"
arr[arr.length] = "Another thing"
Wouldn't push be more appropriate?
arr = []
arr.push("Something")
arr.push("Another thing")
I actually asked myself the same question at the start of this year. UPDATED with new test cases http://jsperf.com/array-push-vs-unshift-vs-direct-assignment/2
It appears that push is much faster in chrome, and about equal in FF. Also direct is faster in IE9, but I would be interested to see how it performs in IE10.
I would say that most developers would assume setting the length of the array, and then using direct assignment is faster, as is the case with most programming languages. But JavaScript is different. Javascript arrays aren't really arrays, they're just key/value maps just like all other JavaScript objects. So the pre-allocation is essentially falling on deaf ears.
Personally I prefer push (:
I believe that it's mostly habit.
Some developers use it simply because it's the way they are used to do it, and haven't considered that push would be an alternative.
Some developers have learned once upon a time that one method is much faster than another, and haven't reviewed this in light of the recent performance improvements of the Javascript engines.
Personally I use push frequently. Most of the time readability and maintainability is more important than performance, at least when the performance impact is small enough. The performance tests posted in the answers here show that the performance difference between various methods isn't very big.
Very often when I'm pushing an object into an array, I want the reference to that object to be returned to me. For example:
// Returns object
function createAndAdd(arr) {
return arr[arr.length] = { id: 1 };
}
var obj = createAndAdd(arr);
Now I have the new object and I've added it to an array. If I'd used push then I would have been returned the length of the array. It would look like the following:
function createAndAdd(arr) {
var obj = { id: 1 };
arr.push(obj);
return obj;
}
or even uglier, especially if the object gets big:
function createAndAdd(arr) {
return arr[arr.push({ id: 1 }) -1];
}
Personally, I love functions with immediate return statements. Keeps it simple and easy to look at. Love the question. Thanks for asking it.
It's a way to limit nested braclets. If you have enough of them you cant see howmany there are or howmany you need (when later looking at the code). I would use a var, one should only have to count things one time.
bar = foo.length;
foo[ bar++ ] = "new item 0";
foo[ bar++ ] = "new item 1";
foo[ bar++ ] = "new item 2";
foo[ bar++ ] = "new item 3";
http://jsfiddle.net/vEUU3/
I think its not about performance, or at least is not such a big deal... what really matters here is declarative way vs imperative way.
Array.prototype.push method returns the updated array's length while the direct declaration returns the value that is being assigned. That's the only difference I see, but I usually read some best-practices recommendations about the push method being a better way to assign new values to an array.
Some coders don't recommend to use array.push() cause it modify the principal object. Instead of push(), you could use the spread operator:
let arrayOne = [1, 2, 3, 4];
let arrayTwo = arrayOne;
arrayTwo.push(5);
console.log(arrayOne);
console.log(arrayTwo);
// equals to arrayOne before the push()
let arrayOneAux = [1, 2, 3, 4];
// spread operator
let arrayThree = [...arrayOneAux, 5];
console.log(arrayOneAux);
console.log(arrayThree);

How to extend an existing JavaScript array with another array, without creating a new array

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.
The .push method can take multiple arguments. You can use the spread operator to pass all the elements of the second array as arguments to .push:
>>> a.push(...b)
If your browser does not support ECMAScript 6, you can use .apply instead:
>>> a.push.apply(a, b)
Or perhaps, if you think it's clearer:
>>> Array.prototype.push.apply(a,b)
Please note that all these solutions will fail with a stack overflow error if array b is too long (trouble starts at about 100,000 elements, depending on the browser).
If you cannot guarantee that b is short enough, you should use a standard loop-based technique described in the other answer.
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 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)"!
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.
Overview
a.push(...b) - limited, fast, modern syntax
a.push.apply(a, b) - limited, fast
a = a.concat(b) unlimited, slow if a is large
for (let i in b) { a.push(b[i]); } - unlimited, slow if b is large
Each snippet modifies a to be extended with b.
The "limited" snippets pass each array element as an argument, and the maximum number of arguments you can pass to a function is limited. From that link, it seems that a.push(...b) is reliable until there are about 32k elements in b (the size of a does not matter).
Relevant MDN documentation: spread syntax, .apply(), .concat(), .push()
Speed considerations
Every method is fast if both a and b are small, so in most web applications you'll want to use push(...b) and be done with it.
If you're handling more than a few thousand elements, what you want to do depends on the situation:
you're adding a few elements to a large array
→ push(...b) is very fast
you're adding many elements to a large array
→ concat is slightly faster than a loop
you're adding many elements to a small array
→ concat is much faster than a loop
you're usually adding only a few elements to any size array
→ loops are about as fast as the limited methods for small additions, but will never throw an exception even if it is not the most performant when you add many elements
you're writing a wrapper function to always get the maximum performance
→ you'll need to check the lengths of the inputs dynamically and choose the right method, perhaps calling push(...b_part) (with slices of the big b) in a loop.
This surprised me: I thought a=a.concat(b) would be able to do a nice memcpy of b onto a without bothering to do individual extend operations as a.push(...b) would have to do, thus always being the fastest. Instead, a.push(...b) is much, much faster especially when a is large.
The speed of different methods was measured in Firefox 88 on Linux using:
a = [];
for (let i = 0; i < Asize; i++){
a.push(i);
}
b = [];
for (let i = 0; i < Bsize; i++){
b.push({something: i});
}
t=performance.now();
// Code to test
console.log(performance.now() - t);
Parameters and results:
ms | Asize | Bsize | code
----+-------+-------+------------------------------
~0 | any | any | a.push(...b)
~0 | any | any | a.push.apply(a, b)
480 | 10M | 50 | a = a.concat(b)
0 | 10M | 50 | for (let i in b) a.push(b[i])
506 | 10M | 500k | a = a.concat(b)
882 | 10M | 500k | for (let i in b) a.push(b[i])
11 | 10 | 500k | a = a.concat(b)
851 | 10 | 500k | for (let i in b) a.push(b[i])
Note that a Bsize of 500 000 is the largest value accepted by all methods on my system, that's why it is smaller than Asize.
All tests were run multiple times to see if the results are outliers or representative. The fast methods are almost immeasurable in just one run using performance.now(), of course, but since the slow methods are so obvious and the two fast methods both work on the same principle, we needn't bother repeating it a bunch of times to split hairs.
The concat method is always slow if either array is large, but the loop is only slow if it has to do a lot of function calls and doesn't care how large a is. A loop is thus similar to push(...b) or push.apply for small bs but without breaking if it does get large; however, when you approach the limit, concat is a bit faster again.
First a few words about apply() in JavaScript to help understand why we use it:
The apply() method calls a function with a given this value, 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 = [];
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]
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)
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.
as the top voted answer says, a.push(...b) is probably the correct answer taking into account the size limit issue.
On the other hand, some of the answers on performance seem out of date.
These numbers below are for 2022-05-20
from here
At appears that push is fastest across the board in 2022. That may change in the future.
Answers ignoring the question (generating a new array) are missing the point. Lots of code might need/want to modify an array in place given there can be other references to the same array
let a = [1, 2, 3];
let b = [4, 5, 6];
let c = a;
a = a.concat(b); // a and c are no longer referencing the same array
Those other references could be deep in some object, something that was captured in a closure, etc...
As a probably bad design but as an illustration, imagine you had
const carts = [
{ userId: 123, cart: [item1, item2], },
{ userId: 456, cart: [item1, item2, item3], },
];
and a function
function getCartForUser(userId) {
return customers.find(c => c.userId === userId);
}
Then you want to add items to the cart
const cart = getCartForUser(userId);
if (cart) {
cart.concat(newItems); // FAIL 😢
cart.push(...newItems); // Success! 🤩
}
As an aside, the answers suggesting modifying Array.prototype are arguably bad adivce. Changing the native prototypes is bascially a landmine in your code. Another implementation maybe be different than yours and so it will break your code or you'll break their code expecting the other behavior. This includes if/when a native implmentation gets added that clashes with yours. You might say "I know what I'm using so no issue" and that might be true at the moment and you're a single dev but add a second dev and they can't read your mind. And, you are that second dev in a few years when you've forgotten and then graft some other library (analytics?, logging?, ...) on to your page and forget the landmind you left in the code.
This is not just theory. There are countless stories on the net of people running into these landmines.
Arguably there are just a few safe uses for modifying a native object's prototype. One is to polyfill an existing and specified implementation in an old browser. In that case, the spec is defined, the spec is implemented is shipping in new browsers, you just want to get the same behavior in old browsers. That's pretty safe. Pre-patching (spec in progress but not shipping) is arguably not safe. Specs change before shipping.
This solution works for me (using the spread operator of ECMAScript 6):
let array = ['my', 'solution', 'works'];
let newArray = [];
let newArray2 = [];
newArray.push(...array); // Adding to same array
newArray2.push([...array]); // Adding as child/leaf/sub-array
console.log(newArray);
console.log(newArray2);
I'm adding this answer, because despite the question stating clearly without creating a new array, pretty much every answer just ignores it.
Modern JavaScript works well with arrays and alike as iterable objects. This makes it possible to implement a version of concat that builds upon that, and spans the array data across its parameters logically.
The example below makes use of iter-ops library that features such logic:
import {pipe, concat} from 'iter-ops';
const i = pipe(
originalArray,
concat(array2, array3, array4, ...)
); //=> Iterable
for(const a of i) {
console.log(a); // iterate over values from all arrays
}
Above, no new array is created. Operator concat will iterate through the original array, then will automatically continue into array2, then array3, and so on, in the specified order.
This is the most efficient way of joining arrays in terms of memory usage.
And if, at the end, you decide to convert it into an actual physical array, you can do so via the spread operator or Array.from:
const fullArray1 = [...i]; // pulls all values from iterable, into a new array
const fullArray2 = Array.from(i); // does the same
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 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) {
Array.prototype.extend = function(other) {
this.push.apply(this, arguments.length > 1 ? arguments : other);
return this;
};
}
function print() {
document.body.innerHTML += [].map.call(arguments, function(item) {
return typeof item === 'object' ? JSON.stringify(item) : item;
}).join(' ') + '\n';
}
document.body.innerHTML = '';
var a = [1, 2, 3];
var b = [4, 5, 6];
print('Concat');
print('(1)', a.concat(b));
print('(2)', a.concat(b));
print('(3)', a.concat(4, 5, 6));
print('\nExtend');
print('(1)', a.extend(b));
print('(2)', a.extend(b));
print('(3)', a.extend(4, 5, 6));
body {
font-family: monospace;
white-space: pre;
}
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]
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.
Another option, if you have lodash installed:
import { merge } from 'lodash';
var arr1 = merge(arr1, arr2);
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;
};
}
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.
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.
https://jsperf.com/merge-arrays19b/1

Categories