UseUnderscore.js

It's a library with a host of functions for manipulating arrays.

It's the tie to go along with jQuery's tux, and Backbone.js's suspenders.

_.uniq

_.uniq(array, [isSorted], [iterator])Alias:unique
Produces a duplicate-free version of thearray, using === to test object equality. If you know in advance that thearray is sorted, passingtrue forisSorted will run a much faster algorithm. If you want to compute unique items based on a transformation, pass aniterator function.

Example

var names = ["Mike","Matt","Nancy","Adam","Jenny","Nancy","Carl"];alert(_.uniq(names, false));

Note:Lo-Dash (anunderscore competitor) also offers a comparable.uniq implementation.

One line:

let names = ['Mike','Matt','Nancy','Adam','Jenny','Nancy','Carl', 'Nancy'];let dup = [...new Set(names)];console.log(dup);

You can simply do it in JavaScript, with the help of the second - index - parameter of thefilter method:

var a = [2,3,4,5,5,4];a.filter(function(value, index){ return a.indexOf(value) == index });

or in short hand

a.filter((v,i) => a.indexOf(v) == i)

UseArray.filter() like this:

var actualArr = ['Apple', 'Apple', 'Banana', 'Mango', 'Strawberry', 'Banana'];console.log('Actual Array: ' + actualArr);var filteredArr = actualArr.filter(function(item, index) {  if (actualArr.indexOf(item) == index)    return item;});console.log('Filtered Array: ' + filteredArr);

This can be made shorter inES6 to:

actualArr.filter((item,index,self) => self.indexOf(item)==index);

Here is a nice explanation ofArray.filter().

The top answers have complexity ofO(n²), but this can be done with justO(n) by using an object as a hash:

function getDistinctArray(arr) {    var dups = {};    return arr.filter(function(el) {        var hash = el.valueOf();        var isDup = dups[hash];        dups[hash] = true;        return !isDup;    });}

This will work for strings, numbers, and dates. If your array contains objects, the above solution won't work, because when coerced to a string, they will all have a value of"[object Object]" (or something similar) and that isn't suitable as a lookup value. You can get anO(n) implementation for objects by setting a flag on the object itself:

function getDistinctObjArray(arr) {    var distinctArr = arr.filter(function(el) {        var isDup = el.inArray;        el.inArray = true;        return !isDup;    });    distinctArr.forEach(function(el) {        delete el.inArray;    });    return distinctArr;}

Modern versions of JavaScript make this a much easier problem to solve. UsingSet will work, regardless of whether your array contains objects, strings, numbers, or any other type.

function getDistinctArray(arr) {    return [...new Set(arr)];}

The implementation is so simple that defining a function is no longer warranted.

The most concise way to remove duplicates from an array using native JavaScript functions is to use a sequence like below:

vals.sort().reduce(function(a, b){ if (b != a[0]) a.unshift(b); return a }, [])

there's no need forslice norindexOf within the reduce function, like I’ve seen in other examples! it makes sense to use it along with a filter function though:

vals.filter(function(v, i, a){ return i == a.indexOf(v) })

Yet anotherES6 (2015) way of doing this that already works on a few browsers is:

Array.from(new Set(vals))

Or even using thespread operator:

[...new Set(vals)]

Simplest One I've run into so far. In es6.

 var names = ["Mike","Matt","Nancy","Adam","Jenny","Nancy","Carl", "Mike", "Nancy"] var noDupe = Array.from(new Set(names))

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

Solution 1

Array.prototype.unique = function() {    var a = [];    for (i = 0; i < this.length; i++) {        var current = this[i];        if (a.indexOf(current) < 0) a.push(current);    }    return a;}

Solution 2 (using Set)

Array.prototype.unique = function() {    return Array.from(new Set(this));}

Test

var x=[1,2,3,3,2,1];x.unique() //[1,2,3]

Performance

When I tested both implementation (with and without Set) for performance in chrome, I found that the one with Set is much much faster!

Array.prototype.unique1 = function() {    var a = [];    for (i = 0; i < this.length; i++) {        var current = this[i];        if (a.indexOf(current) < 0) a.push(current);    }    return a;}Array.prototype.unique2 = function() {    return Array.from(new Set(this));}var x=[];for(var i=0;i<10000;i++){x.push("x"+i);x.push("x"+(i+1));}console.time("unique1");console.log(x.unique1());console.timeEnd("unique1");console.time("unique2");console.log(x.unique2());console.timeEnd("unique2");

In ECMAScript 6 (aka ECMAScript 2015),Set can be used to filter out duplicates. Then it can be converted back to an array using thespread operator.

var names = ["Mike","Matt","Nancy","Adam","Jenny","Nancy","Carl"],    unique = [...new Set(names)];

Go for this one:

var uniqueArray = duplicateArray.filter(function(elem, pos) {    return duplicateArray.indexOf(elem) == pos;});

Now uniqueArray contains no duplicates.

The following is more than 80% faster than the jQuery method listed (see the tests below).

It is an answer from a similar question a few years ago. If I come across the person who originally proposed it, I will post credit.It is pure JavaScript.

var temp = {};for (var i = 0; i < array.length; i++)  temp[array[i]] = true;var r = [];for (var k in temp)  r.push(k);return r;

My test case comparison:http://jsperf.com/remove-duplicate-array-tests

I had done a detailed comparison of dupes removal at some other question but having noticed that this is the real place i just wanted to share it here as well.

I believe this is the best way to do this

var myArray = [100, 200, 100, 200, 100, 100, 200, 200, 200, 200],    reduced = Object.keys(myArray.reduce((p,c) => (p[c] = true,p),{}));console.log(reduced);

OK .. even though this one is O(n) and the others are O(n^2) i was curious to see benchmark comparison between this reduce / look up table and filter/indexOf combo (I choose Jeetendras very nice implementationhttps://stackoverflow.com/a/37441144/4543207). I prepare a 100K item array filled with random positive integers in range 0-9999 and and it removes the duplicates. I repeat the test for 10 times and the average of the results show that they are no match in performance.

• In firefox v47 reduce & lut : 14.85ms vs filter & indexOf : 2836ms
• In chrome v51 reduce & lut : 23.90ms vs filter & indexOf : 1066ms

Well ok so far so good. But let's do it properly this time in the ES6 style. It looks so cool..! But as of now how it will perform against the powerful lut solution is a mystery to me. Lets first see the code and then benchmark it.

var myArray = [100, 200, 100, 200, 100, 100, 200, 200, 200, 200],    reduced = [...myArray.reduce((p,c) => p.set(c,true),new Map()).keys()];console.log(reduced);

Wow that was short..! But how about the performance..? It's beautiful... Since the heavy weight of the filter / indexOf lifted over our shoulders now i can test an array 1M random items of positive integers in range 0..99999 to get an average from 10 consecutive tests. I can say this time it's a real match. See the result for yourself :)

var ranar = [],     red1 = a => Object.keys(a.reduce((p,c) => (p[c] = true,p),{})),     red2 = a => reduced = [...a.reduce((p,c) => p.set(c,true),new Map()).keys()],     avg1 = [],     avg2 = [],       ts = 0,       te = 0,     res1 = [],     res2 = [],     count= 10;for (var i = 0; i<count; i++){  ranar = (new Array(1000000).fill(true)).map(e => Math.floor(Math.random()*100000));  ts = performance.now();  res1 = red1(ranar);  te = performance.now();  avg1.push(te-ts);  ts = performance.now();  res2 = red2(ranar);  te = performance.now();  avg2.push(te-ts);}avg1 = avg1.reduce((p,c) => p+c)/count;avg2 = avg2.reduce((p,c) => p+c)/count;console.log("reduce & lut took: " + avg1 + "msec");console.log("map & spread took: " + avg2 + "msec");

Which one would you use..? Well not so fast...! Don't be deceived. Map is at displacement. Now look... in all of the above cases we fill an array of size n with numbers of range < n. I mean we have an array of size 100 and we fill with random numbers 0..9 so there are definite duplicates and "almost" definitely each number has a duplicate. How about if we fill the array in size 100 with random numbers 0..9999. Let's now see Map playing at home. This time an Array of 100K items but random number range is 0..100M. We will do 100 consecutive tests to average the results. OK let's see the bets..! <- no typo

var ranar = [],     red1 = a => Object.keys(a.reduce((p,c) => (p[c] = true,p),{})),     red2 = a => reduced = [...a.reduce((p,c) => p.set(c,true),new Map()).keys()],     avg1 = [],     avg2 = [],       ts = 0,       te = 0,     res1 = [],     res2 = [],     count= 100;for (var i = 0; i<count; i++){  ranar = (new Array(100000).fill(true)).map(e => Math.floor(Math.random()*100000000));  ts = performance.now();  res1 = red1(ranar);  te = performance.now();  avg1.push(te-ts);  ts = performance.now();  res2 = red2(ranar);  te = performance.now();  avg2.push(te-ts);}avg1 = avg1.reduce((p,c) => p+c)/count;avg2 = avg2.reduce((p,c) => p+c)/count;console.log("reduce & lut took: " + avg1 + "msec");console.log("map & spread took: " + avg2 + "msec");

Now this is the spectacular comeback of Map()..! May be now you can make a better decision when you want to remove the dupes.

Well ok we are all happy now. But the lead role always comes last with some applause. I am sure some of you wonder what Set object would do. Now that since we are open to ES6 and we know Map is the winner of the previous games let us compare Map with Set as a final. A typical Real Madrid vs Barcelona game this time... or is it? Let's see who will win the el classico :)

var ranar = [],     red1 = a => reduced = [...a.reduce((p,c) => p.set(c,true),new Map()).keys()],     red2 = a => Array.from(new Set(a)),     avg1 = [],     avg2 = [],       ts = 0,       te = 0,     res1 = [],     res2 = [],     count= 100;for (var i = 0; i<count; i++){  ranar = (new Array(100000).fill(true)).map(e => Math.floor(Math.random()*10000000));  ts = performance.now();  res1 = red1(ranar);  te = performance.now();  avg1.push(te-ts);  ts = performance.now();  res2 = red2(ranar);  te = performance.now();  avg2.push(te-ts);}avg1 = avg1.reduce((p,c) => p+c)/count;avg2 = avg2.reduce((p,c) => p+c)/count;console.log("map & spread took: " + avg1 + "msec");console.log("set & A.from took: " + avg2 + "msec");

Wow.. man..! Well unexpectedly it didn't turn out to be an el classico at all. More like Barcelona FC against CA Osasuna :))

Here is a simple answer to the question.

var names = ["Alex","Tony","James","Suzane", "Marie", "Laurence", "Alex", "Suzane", "Marie", "Marie", "James", "Tony", "Alex"];var uniqueNames = [];    for(var i in names){        if(uniqueNames.indexOf(names[i]) === -1){            uniqueNames.push(names[i]);        }    }

Here is very simple for understanding and working anywhere (even in PhotoshopScript) code. Check it!

var peoplenames = new Array("Mike","Matt","Nancy","Adam","Jenny","Nancy","Carl");peoplenames = unique(peoplenames);alert(peoplenames);function unique(array){    var len = array.length;    for(var i = 0; i < len; i++) for(var j = i + 1; j < len; j++)         if(array[j] == array[i]){            array.splice(j,1);            j--;            len--;        }    return array;}//*result* peoplenames == ["Mike","Matt","Nancy","Adam","Jenny","Carl"]

A simple, but effective, technique, is to use thefilter method in combination with the filterfunction(value, index){ return this.indexOf(value) == index }.

Code example:

var data = [2,3,4,5,5,4];var filter = function(value, index){ return this.indexOf(value) == index };var filteredData = data.filter(filter, data );document.body.innerHTML = '<pre>' + JSON.stringify(filteredData, null, '\t') +  '</pre>';

See alsothis Fiddle.

Apart from being a simpler, more terse solution than the current answers (minus the future-lookingES6 ones), I performance tested this, and it was much faster as well:

var uniqueArray = dupeArray.filter(function(item, i, self){  return self.lastIndexOf(item) == i;});

One caveat: Array.lastIndexOf() was added inInternet Explorer 9, so if you need to go lower than that, you'll need to look elsewhere.

Generic Functional Approach

Here is a generic and strictly functional approach with ES2015:

// small, reusable auxiliary functionsconst apply = f => a => f(a);const flip = f => b => a => f(a) (b);const uncurry = f => (a, b) => f(a) (b);const push = x => xs => (xs.push(x), xs);const foldl = f => acc => xs => xs.reduce(uncurry(f), acc);const some = f => xs => xs.some(apply(f));// the actual de-duplicate functionconst uniqueBy = f => foldl(   acc => x => some(f(x)) (acc)    ? acc    : push(x) (acc) ) ([]);// comparatorsconst eq = y => x => x === y;// string equality case insensitive :Dconst seqCI = y => x => x.toLowerCase() === y.toLowerCase();// mock dataconst xs = [1,2,3,1,2,3,4];const ys = ["a", "b", "c", "A", "B", "C", "D"];console.log( uniqueBy(eq) (xs) );console.log( uniqueBy(seqCI) (ys) );

We can easily deriveunique fromunqiueBy or use the faster implementation utilizingSets:

const unqiue = uniqueBy(eq);// const unique = xs => Array.from(new Set(xs));

Benefits of this approach:

• generic solution by using a separate comparator function
• declarative and succinct implementation
• reuse of other small, generic functions

Performance Considerations

uniqueBy isn't as fast as an imperative implementation with loops, but it is way more expressive due to its genericity.

If you identifyuniqueBy as the cause of a concrete performance penalty in your app, replace it with optimized code. That is, write your code first in an functional, declarative way. Afterwards, provided that you encounter performance issues, try to optimize the code at the locations, which are the cause of the problem.

Memory Consumption and Garbage Collection

uniqueBy utilizes mutations (push(x) (acc)) hidden inside its body. It reuses the accumulator instead of throwing it away after each iteration. This reduces memory consumption and GC pressure. Since this side effect is wrapped inside the function, everything outside remains pure.

If by any chance you were using

D3.js

You could do

d3.set(["foo", "bar", "foo", "baz"]).values() ==> ["foo", "bar", "baz"]

https://github.com/mbostock/d3/wiki/Arrays#set_values

for (i=0; i<originalArray.length; i++) {      if (!newArray.includes(originalArray[i])) {        newArray.push(originalArray[i]);     }}

The following script returns a new array containing only unique values. It works on string and numbers. No requirement for additional libraries only vanilla JS.

Browser support:

Feature Chrome  Firefox (Gecko)     Internet Explorer   Opera   SafariBasic support   (Yes)   1.5 (1.8)   9                   (Yes)   (Yes)

https://jsfiddle.net/fzmcgcxv/3/

var duplicates = ["Mike","Matt","Nancy","Adam","Jenny","Nancy","Carl","Mike","Mike","Nancy","Carl"]; var unique = duplicates.filter(function(elem, pos) {    return duplicates.indexOf(elem) == pos;  }); alert(unique);

Use:

https://jsfiddle.net/2w0k5tz8/

function remove_duplicates(array_){    var ret_array = new Array();    for (var a = array_.length - 1; a >= 0; a--) {        for (var b = array_.length - 1; b >= 0; b--) {            if(array_[a] == array_[b] && a != b){                delete array_[b];            }        };        if(array_[a] != undefined)            ret_array.push(array_[a]);    };    return ret_array;}console.log(remove_duplicates(Array(1,1,1,2,2,2,3,3,3)));

Loop through, remove duplicates, and create a clone array place holder, because the array index will not be updated.

Loop backward for better performance (your loop won’t need to keep checking the length of your array).

A slight modification ofgeorg's excellent answer to use a custom comparator:

function contains(array, obj) {    for (var i = 0; i < array.length; i++) {        if (isEqual(array[i], obj)) return true;    }    return false;}//comparatorfunction isEqual(obj1, obj2) {    if (obj1.name == obj2.name) return true;    return false;}function removeDuplicates(ary) {    var arr = [];    return ary.filter(function(x) {        return !contains(arr, x) && arr.push(x);    });}

Although the ES6 solution is the best, I'm baffled as to how nobody has shown the following solution:

function removeDuplicates(arr){    o = {}    arr.forEach((e) => (o[e] = true))    return Object.keys(o)}

The thing to remember here is that objectsmust have unique keys. We are exploiting this to remove all the duplicates. I would have thought this would be the fastest solution (before ES6).

Bear in mind though that this also sorts the array.

$(document).ready(function() {    var arr1=["dog","dog","fish","cat","cat","fish","apple","orange"]    var arr2=["cat","fish","mango","apple"]    var uniquevalue=[];    var seconduniquevalue=[];    var finalarray=[];    $.each(arr1,function(key,value){       if($.inArray (value,uniquevalue) === -1)       {           uniquevalue.push(value)       }    });     $.each(arr2,function(key,value){       if($.inArray (value,seconduniquevalue) === -1)       {           seconduniquevalue.push(value)       }    });    $.each(uniquevalue,function(ikey,ivalue){        $.each(seconduniquevalue,function(ukey,uvalue){            if( ivalue == uvalue)            {                finalarray.push(ivalue);            }           });    });    alert(finalarray);});

Another method of doing this without writing much code is using the ES5Object.keys-method:

var arrayWithDuplicates = ['a','b','c','d','a','c'],    deduper = {};arrayWithDuplicates.forEach(function (item) {    deduper[item] = null;});var dedupedArray = Object.keys(deduper); // ["a", "b", "c", "d"]

Extracted in a function

function removeDuplicates (arr) {    var deduper = {}    arr.forEach(function (item) {        deduper[item] = null;    });    return Object.keys(deduper);}

• javascript
• jquery
• arrays
• duplicates
• unique