Skip to main content

EDIT:

The first solution is the fastest only when there isare few items. When there isare over 400 items, the Set solution becomes the fastest. And when there isare 100,000 items, it is a thousand times faster than the first solution.

Considering that performance is important only when there is a lot of items, and that the Set solution is by far the most readable, it should be the right solution in most cases

The perf results below were computed with a small number of items


Based on jsperf, the fastest way (edit: if there isare less than 400 items) to merge two arrays in a new one is the following:

for (var i = 0; i < array2.length; i++)
    if (array1.indexOf(array2[i]) === -1)
      array1.push(array2[i]);

This one is 17% slower:

array2.forEach(v => array1.includes(v) ? null : array1.push(v));

This one is 45% slower (edit: when there is less than 100 items. It is a lot faster when there is a lot of items):

var a = [...new Set([...array1 ,...array2])];

And the accepted answersanswer's is 55% slower (and much longer to write) (edit: and it is several order of magnitude slower than any of the other methods when there isare 100 000,000 items)

var a = array1.concat(array2);
for (var i = 0; i < a.length; ++i) {
    for (var j = i + 1; j < a.length; ++j) {
        if (a[i] === a[j])
            a.splice(j--, 1);
    }
}

https://jsperf.com/merge-2-arrays-without-duplicatehttps://jsbench.me/lxlej18ydg

EDIT:

The first solution is the fastest only when there is few items. When there is over 400 items, the Set solution becomes the fastest. And when there is 100,000 items, it is a thousand times faster than the first solution.

Considering that performance is important only when there is a lot of items, and that the Set solution is by far the most readable, it should be the right solution in most cases

The perf results below were computed with a small number of items


Based on jsperf, the fastest way (edit: if there is less than 400 items) to merge two arrays in a new one is the following:

for (var i = 0; i < array2.length; i++)
    if (array1.indexOf(array2[i]) === -1)
      array1.push(array2[i]);

This one is 17% slower:

array2.forEach(v => array1.includes(v) ? null : array1.push(v));

This one is 45% slower (edit: when there is less than 100 items. It is a lot faster when there is a lot of items):

var a = [...new Set([...array1 ,...array2])];

And the accepted answers is 55% slower (and much longer to write) (edit: and it is several order of magnitude slower than any of the other methods when there is 100 000 items)

var a = array1.concat(array2);
for (var i = 0; i < a.length; ++i) {
    for (var j = i + 1; j < a.length; ++j) {
        if (a[i] === a[j])
            a.splice(j--, 1);
    }
}

https://jsperf.com/merge-2-arrays-without-duplicate

EDIT:

The first solution is the fastest only when there are few items. When there are over 400 items, the Set solution becomes the fastest. And when there are 100,000 items, it is a thousand times faster than the first solution.

Considering that performance is important only when there is a lot of items, and that the Set solution is by far the most readable, it should be the right solution in most cases

The perf results below were computed with a small number of items


Based on jsperf, the fastest way (edit: if there are less than 400 items) to merge two arrays in a new one is the following:

for (var i = 0; i < array2.length; i++)
    if (array1.indexOf(array2[i]) === -1)
      array1.push(array2[i]);

This one is 17% slower:

array2.forEach(v => array1.includes(v) ? null : array1.push(v));

This one is 45% slower (edit: when there is less than 100 items. It is a lot faster when there is a lot of items):

var a = [...new Set([...array1 ,...array2])];

And the accepted answer's is 55% slower (and much longer to write) (edit: and it is several order of magnitude slower than any of the other methods when there are 100,000 items)

var a = array1.concat(array2);
for (var i = 0; i < a.length; ++i) {
    for (var j = i + 1; j < a.length; ++j) {
        if (a[i] === a[j])
            a.splice(j--, 1);
    }
}

https://jsbench.me/lxlej18ydg

Improved readability
Source Link
Pitouli
  • 419
  • 1
  • 5
  • 14

Edit EDIT: the less items there

The first solution is, the fastest only when there is the first solution compared to otherfew items. ItWhen there is still true untilover 400 items, then the Set solution becomes the fastest. And when there is 100,000 items, it is 99.5% fastesta thousand times faster than the first solution. The performance below where computed for a small number of items.

Considering that performance is important only when there is a lot of items, and that in any case the Set solution is by far the most readable, it should be the right solution in most cases

The perf results below were computed with a small number of items


Based on jsperf, the fastest way (edit: if there is less than 400 items) to merge two arrays in a new one is the following:

for (var i = 0; i < array2.length; i++)
    if (array1.indexOf(array2[i]) === -1)
      array1.push(array2[i]);

This one is 17% slower:

array2.forEach(v => array1.includes(v) ? null : array1.push(v));

This one is 45% slower (edit: when there is less than 100 items. It is a lot faster when there is a lot of items):

var a = [...new Set([...array1 ,...array2])];

And the accepted answers is 55% slower (and much longer to write) (edit: and it is several order of magnitude slower than any of the other methods when there is 100 000 items)

var a = array1.concat(array2);
for (var i = 0; i < a.length; ++i) {
    for (var j = i + 1; j < a.length; ++j) {
        if (a[i] === a[j])
            a.splice(j--, 1);
    }
}

https://jsperf.com/merge-2-arrays-without-duplicate

Edit : the less items there is, the fastest is the first solution compared to other. It is still true until 400 items, then the Set solution becomes the fastest. And when there is 100,000 items, it is 99.5% fastest than the first solution. The performance below where computed for a small number of items.

Considering that performance is important only when there is a lot of items, and that in any case the Set solution is by far the most readable, it should be the right solution in most cases

Based on jsperf, the fastest way (edit: if there is less than 400 items) to merge two arrays in a new one is the following:

for (var i = 0; i < array2.length; i++)
    if (array1.indexOf(array2[i]) === -1)
      array1.push(array2[i]);

This one is 17% slower:

array2.forEach(v => array1.includes(v) ? null : array1.push(v));

This one is 45% slower (edit: when there is less than 100 items. It is a lot faster when there is a lot of items):

var a = [...new Set([...array1 ,...array2])];

And the accepted answers is 55% slower (and much longer to write) (edit: and it is several order of magnitude slower than any of the methods when there is 100 000 items)

var a = array1.concat(array2);
for (var i = 0; i < a.length; ++i) {
    for (var j = i + 1; j < a.length; ++j) {
        if (a[i] === a[j])
            a.splice(j--, 1);
    }
}

https://jsperf.com/merge-2-arrays-without-duplicate

EDIT:

The first solution is the fastest only when there is few items. When there is over 400 items, the Set solution becomes the fastest. And when there is 100,000 items, it is a thousand times faster than the first solution.

Considering that performance is important only when there is a lot of items, and that the Set solution is by far the most readable, it should be the right solution in most cases

The perf results below were computed with a small number of items


Based on jsperf, the fastest way (edit: if there is less than 400 items) to merge two arrays in a new one is the following:

for (var i = 0; i < array2.length; i++)
    if (array1.indexOf(array2[i]) === -1)
      array1.push(array2[i]);

This one is 17% slower:

array2.forEach(v => array1.includes(v) ? null : array1.push(v));

This one is 45% slower (edit: when there is less than 100 items. It is a lot faster when there is a lot of items):

var a = [...new Set([...array1 ,...array2])];

And the accepted answers is 55% slower (and much longer to write) (edit: and it is several order of magnitude slower than any of the other methods when there is 100 000 items)

var a = array1.concat(array2);
for (var i = 0; i < a.length; ++i) {
    for (var j = i + 1; j < a.length; ++j) {
        if (a[i] === a[j])
            a.splice(j--, 1);
    }
}

https://jsperf.com/merge-2-arrays-without-duplicate

added 42 characters in body
Source Link
Pitouli
  • 419
  • 1
  • 5
  • 14

Edit : the less items there is, the fastest is the first solution compared to other. It is still true until 400 items, then the Set solution becomes the fastest. And when there is 100,000 items, it is 99.5% fastest than the first solution. The performance below where computed for a small number of items.

Considering that performance is important only when there is a lot of items, and that in any case the Set solution is by far the most readable, it should be the right solution in most cases

Based on jsperf, the fastest way (edit: if there is less than 400 items) to merge two arrays in a new one is the following:

for (var i = 0; i < array2.length; i++)
    if (array1.indexOf(array2[i]) === -1)
      array1.push(array2[i]);

This one is 17% slower:

array2.forEach(v => array1.includes(v) ? null : array1.push(v));

This one is 45% slower (edit: when there is less than 100 items. It is a lot faster when there is a lot of items):

var a = [...new Set([...array1 ,...array2])];

And the accepted answers is 55% slower (and much longer to write) (edit: and it is several order of magnitude slower than any of the methods when there is 100 000 items)

var a = array1.concat(array2);
for (var i = 0; i < a.length; ++i) {
    for (var j = i + 1; j < a.length; ++j) {
        if (a[i] === a[j])
            a.splice(j--, 1);
    }
}

https://jsperf.com/merge-2-arrays-without-duplicate

Edit : the less items there is, the fastest is the first solution compared to other. It is still true until 400 items, then the Set solution becomes the fastest. And when there is 100,000 items, it is 99.5% fastest than the first solution. The performance below where computed for a small number of items.

Considering that performance is important only when there is a lot of items, and that in any case the Set solution is by far the most readable, it should be the right solution in most cases

Based on jsperf, the fastest way to merge two arrays in a new one is the following:

for (var i = 0; i < array2.length; i++)
    if (array1.indexOf(array2[i]) === -1)
      array1.push(array2[i]);

This one is 17% slower:

array2.forEach(v => array1.includes(v) ? null : array1.push(v));

This one is 45% slower (edit: when there is less than 100 items. It is a lot faster when there is a lot of items):

var a = [...new Set([...array1 ,...array2])];

And the accepted answers is 55% slower (and much longer to write) (edit: and it is several order of magnitude slower than any of the methods when there is 100 000 items)

var a = array1.concat(array2);
for (var i = 0; i < a.length; ++i) {
    for (var j = i + 1; j < a.length; ++j) {
        if (a[i] === a[j])
            a.splice(j--, 1);
    }
}

https://jsperf.com/merge-2-arrays-without-duplicate

Edit : the less items there is, the fastest is the first solution compared to other. It is still true until 400 items, then the Set solution becomes the fastest. And when there is 100,000 items, it is 99.5% fastest than the first solution. The performance below where computed for a small number of items.

Considering that performance is important only when there is a lot of items, and that in any case the Set solution is by far the most readable, it should be the right solution in most cases

Based on jsperf, the fastest way (edit: if there is less than 400 items) to merge two arrays in a new one is the following:

for (var i = 0; i < array2.length; i++)
    if (array1.indexOf(array2[i]) === -1)
      array1.push(array2[i]);

This one is 17% slower:

array2.forEach(v => array1.includes(v) ? null : array1.push(v));

This one is 45% slower (edit: when there is less than 100 items. It is a lot faster when there is a lot of items):

var a = [...new Set([...array1 ,...array2])];

And the accepted answers is 55% slower (and much longer to write) (edit: and it is several order of magnitude slower than any of the methods when there is 100 000 items)

var a = array1.concat(array2);
for (var i = 0; i < a.length; ++i) {
    for (var j = i + 1; j < a.length; ++j) {
        if (a[i] === a[j])
            a.splice(j--, 1);
    }
}

https://jsperf.com/merge-2-arrays-without-duplicate

fixed grammar
Source Link
Pitouli
  • 419
  • 1
  • 5
  • 14
Loading
The performance depends on the number of items. The Set method should be the one recommended.
Source Link
Pitouli
  • 419
  • 1
  • 5
  • 14
Loading
The Set method can be / is the fastest
Source Link
Pitouli
  • 419
  • 1
  • 5
  • 14
Loading
added 374 characters in body
Source Link
Pitouli
  • 419
  • 1
  • 5
  • 14
Loading
Source Link
Pitouli
  • 419
  • 1
  • 5
  • 14
Loading