How to remove duplicates in a JavaScript array?
In JavaScript 1.6 / ECMAScript 5, you can use the native filter
method of an array to get an array with unique values. Here’s how you can do it:
function onlyUnique(value, index, array) {
return array.indexOf(value) === index;
}
// usage example:
var a = ['a', 1, 'a', 2, '1'];
var unique = a.filter(onlyUnique);
console.log(unique); // ['a', 1, 2, '1']
The filter
method loops through the array and keeps only those entries that pass the given callback function onlyUnique
. The onlyUnique
function checks if the given value is the first occurrence. If not, it must be a duplicate and will not be copied.
This solution works without any extra libraries like jQuery or prototype.js and handles arrays with mixed value types.
For old browsers (<IE9) that do not support the native filter
and indexOf
methods, you can find workarounds in the MDN documentation for filter
and indexOf
.
If you want to keep the last occurrence of a value, simply replace indexOf
with lastIndexOf
.
With ES6, this can be shortened to:
// usage example:
var myArray = ['a', 1, 'a', 2, '1'];
var unique = myArray.filter((value, index, array) => array.indexOf(value) === index);
console.log(unique); // unique is ['a', 1, 2, '1']
ES6 introduces a native Set
object to store unique values. To get an array with unique values, you can do this:
var myArray = ['a', 1, 'a', 2, '1'];
let unique = [...new Set(myArray)];
console.log(unique); // unique is ['a', 1, 2, '1']
The constructor of Set
takes an iterable object, like an array, and the spread operator ...
transforms the set back into an array.
In ES6/ES2015, you can achieve a one-liner solution using Set
and the spread operator, which is more efficient than the previous method:
let uniqueItems = [...new Set(items)];
This creates a new Set
from the items
array, which automatically removes duplicates because Set
only allows unique values. Then, the spread operator ...
is used to convert the Set
back into an array, resulting in uniqueItems
containing only unique values from the items
array.
Using ES6 syntax, you can achieve a one-liner solution in pure JavaScript:
list = list.filter((x, i, a) => a.indexOf(x) == i);
In this code snippet, list
is filtered to keep only the elements for which the index of the first occurrence (a.indexOf(x)
) is equal to the current index (i
), effectively removing duplicate values.
For compatibility with older browsers that do not support ES6, you can use the following ES5 syntax:
list = list.filter(function (x, i, a) {
return a.indexOf(x) == i;
});
This accomplishes the same result as the ES6 version but is compatible with IE9 and newer browsers.
Hello
To remove duplicates from a JavaScript array, here are three common methods:
- Using Set :
const uniqueArray = […new Set(arrayWithDuplicates)];
Converts the array to a Set (which removes duplicates) and then back to an array.
- Using filter and indexOf :
const uniqueArray = arrayWithDuplicates.filter((value, index, self) => self.indexOf(value) === index);
Filters the array to include only the first occurrence of each value.
- Using reduce :
const uniqueArray = arrayWithDuplicates.reduce((acc, value) => {
if (!acc.includes(value)) acc.push(value);
return acc;
}, []);
Uses reduce to accumulate unique values into a new array.
Hope it helps !
Thank you stevediaz