Get all unique values in a JavaScript array (remove duplicates)
With JavaScript 1.6 / ECMAScript 5 you can use the native filter method of an Array in the following way to get an array with unique values:
function onlyUnique(value, index, self) { return self.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 native method filter will loop through the array and leave only those entries that pass the given callback function onlyUnique.
onlyUnique checks, if the given value is the first occurring. If not, it must be a duplicate and will not be copied.
This solution works without any extra library like jQuery or prototype.js.
It works for arrays with mixed value types too.
For old Browsers (<ie9), that do not support the native methods filter and indexOf you can find work arounds in the MDN documentation for filter and indexOf.
If you want to keep the last occurrence of a value, simple replace indexOf by lastIndexOf.
With ES6 it could be shorten to this:
// usage example:var myArray = ['a', 1, 'a', 2, '1'];var unique = myArray.filter((v, i, a) => a.indexOf(v) === i);console.log(unique); // unique is ['a', 1, 2, '1']Thanks to Camilo Martin for hint in comment.
ES6 has a native object Set to store unique values. To get an array with unique values you could now 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 Array, and the spread operator ... transform the set back into an Array. Thanks to Lukas Liese for hint in comment.
multi array
var a = [[2,4],[2,3],[1,3],[1,3],[1,8]]var unique = (value, index, self) =>{ var findIndex = (element) => element[0] == value[0]; return self.findIndex(findIndex) === index;}console.log(a.filter(unique))
Updated answer for ES6/ES2015: Using the Set and the spread operator (thanks le-m), the single line solution is:
let uniqueItems = [...new Set(items)]Which returns
[4, 5, 6, 3, 2, 23, 1]
I split all answers to 4 possible solutions:
- Use object
{ }to prevent duplicates - Use helper array
[ ] - Use
filter + indexOf - Bonus! ES6
Setsmethod.
Here's sample codes found in answers:
Use object { } to prevent duplicates
function uniqueArray1( ar ) { var j = {}; ar.forEach( function(v) { j[v+ '::' + typeof v] = v; }); return Object.keys(j).map(function(v){ return j[v]; });} Use helper array [ ]
function uniqueArray2(arr) { var a = []; for (var i=0, l=arr.length; i<l; i++) if (a.indexOf(arr[i]) === -1 && arr[i] !== '') a.push(arr[i]); return a;}Use filter + indexOf
function uniqueArray3(a) { function onlyUnique(value, index, self) { return self.indexOf(value) === index; } // usage var unique = a.filter( onlyUnique ); // returns ['a', 1, 2, '1'] return unique;}Use ES6 [...new Set(a)]
function uniqueArray4(a) { return [...new Set(a)];}And I wondered which one is faster. I've made sample Google Sheet to test functions. Note: ECMA 6 is not avaliable in Google Sheets, so I can't test it.
Here's the result of tests:
I expected to see that code using object { } will win because it uses hash. So I'm glad that tests showed the best results for this algorithm in Chrome and IE. Thanks to @rab for the code.
Update 2020
Google Script enabled ES6 Engine. Now I tested the last code with Sets and it appeared faster than the object method.