Come ottenere valori univoci in un array


167

Come posso ottenere un elenco di valori univoci in un array? Devo sempre usare un secondo array o c'è qualcosa di simile all'hashmap di Java in JavaScript?

Ho intenzione di utilizzare JavaScript e jQuery solo. Non è possibile utilizzare librerie aggiuntive.


2
stackoverflow.com/questions/5381621/… - descrive esattamente cosa vuoi, penso?
SpaceBison,

1
sei aperto all'utilizzo della underscore.jsbiblioteca?
Jakee,

una hashmap java è sostanzialmente la stessa di un oggetto javascript. la sintassi è {"chiave": "valore", "chiave2": "valore2"}
Ian

Le API della raccolta JavaScript / TypeScript sono terribili rispetto a Scala,list.toSet
Jordan Stewart

Risposte:


120

Da quando ne ho parlato nei commenti per la risposta di @ Rocket, posso anche fornire un esempio che non utilizza librerie. Ciò richiede due nuove funzioni prototipo containseunique

Array.prototype.contains = function(v) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] === v) return true;
  }
  return false;
};

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

var duplicates = [1, 3, 4, 2, 1, 2, 3, 8];
var uniques = duplicates.unique(); // result = [1,3,4,2,8]

console.log(uniques);

Per una maggiore affidabilità, è possibile sostituire containscon lo indexOfspessore di MDN e verificare se ciascun elemento indexOfè uguale a -1: documentazione


1
~a.indexOf(b) === (a.indexOf(b) == -1)
Orwellophile,

1
@Lexynux: questo era il tipo di risposta jeek JavaScript-nerd geniale che dovrebbe essere usata solo da qualcuno che capisca cosa significhi, e forse nemmeno allora. Quello che sta dicendo è che scrivere if (~a.indexOf(b)) ...è identico a scrivere più a lungo if (a.indexOf(b) == -1) ....
Orwellophile,

4
questo ha un'elevata complessità del tempo di esecuzione (caso peggiore: O (n ^ 2))
Rahul Arora,

1
questa è un'implementazione davvero inefficiente. controllare la matrice dei risultati per vedere se contiene già un oggetto è orribile. un approccio migliore sarebbe quello di utilizzare un oggetto che tiene traccia dei conteggi o, se non si desidera utilizzare l'archiviazione aux, ordinarlo prima in O (n log n), quindi in uno sweep lineare e confrontare elementi affiancati
Isaiah Lee

1
Abbiamo davvero bisogno della funzione "contiene"?
Animesh Kumar,

206

O per chi cerca un one-liner (semplice e funzionale), compatibile con i browser attuali :

let a = ["1", "1", "2", "3", "3", "1"];
let unique = a.filter((item, i, ar) => ar.indexOf(item) === i);
console.log(unique);

Aggiornamento 18-04-2017

Sembra che 'Array.prototype.includes' abbia ora un supporto diffuso nelle ultime versioni dei browser mainline ( compatibilità )

Aggiornamento 29-07-2015:

Ci sono piani in corso per i browser per supportare un metodo standardizzato "Array.prototype.includes", che sebbene non risponda direttamente a questa domanda; è spesso correlato.

Uso:

["1", "1", "2", "3", "3", "1"].includes("2");     // true

Pollyfill ( supporto browser , fonte di Mozilla ):

// https://tc39.github.io/ecma262/#sec-array.prototype.includes
if (!Array.prototype.includes) {
  Object.defineProperty(Array.prototype, 'includes', {
    value: function(searchElement, fromIndex) {

      // 1. Let O be ? ToObject(this value).
      if (this == null) {
        throw new TypeError('"this" is null or not defined');
      }

      var o = Object(this);

      // 2. Let len be ? ToLength(? Get(O, "length")).
      var len = o.length >>> 0;

      // 3. If len is 0, return false.
      if (len === 0) {
        return false;
      }

      // 4. Let n be ? ToInteger(fromIndex).
      //    (If fromIndex is undefined, this step produces the value 0.)
      var n = fromIndex | 0;

      // 5. If n ≥ 0, then
      //  a. Let k be n.
      // 6. Else n < 0,
      //  a. Let k be len + n.
      //  b. If k < 0, let k be 0.
      var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

      // 7. Repeat, while k < len
      while (k < len) {
        // a. Let elementK be the result of ? Get(O, ! ToString(k)).
        // b. If SameValueZero(searchElement, elementK) is true, return true.
        // c. Increase k by 1.
        // NOTE: === provides the correct "SameValueZero" comparison needed here.
        if (o[k] === searchElement) {
          return true;
        }
        k++;
      }

      // 8. Return false
      return false;
    }
  });
}

È quasi copia incolla da Kennebec, ma è certo che passare l'array come parametro anziché utilizzare la chiusura migliorerà probabilmente le prestazioni.

- Devo dire che non ho collegato i punti, ho semplicemente scansionato un solo liner, sembrava un grande post così saltato, sono andato e ho trovato una fonte alternativa e ripubblicato per altri da trovare rapidamente. Detto questo, il tuo diritto; praticamente lo stesso di Kennebec.
Josh Mc

Bello - Non avevo capito che il filtro aveva inviato l'array come parametro e non volevo lavorare su un oggetto esterno. Questo è esattamente ciò di cui ho bisogno: la mia versione di javascript (versione precedente di xerces) non avrà i nuovi gadget per un po '.
Gerard ONeill,

1
@GerardONeill sì, alcune situazioni sono molto vitali, ad esempio se è funzionalmente incatenato e si desidera accedere a un array a cui non è stata assegnata una variabile come .map (...). Filter (...)
Josh Mc

@Josh Mc, potresti in qualche modo usare "include" nel metodo "unico"?
vkelman,

143

Ecco una soluzione molto più pulita per ES6 che vedo non è inclusa qui. Utilizza il Set e l' operatore spread :...

var a = [1, 1, 2];

[... new Set(a)]

Che ritorna [1, 2]


1
È così intelligente!
Josh Mc,

1
Ora, QUESTO è un one-liner!
Mac,

11
In Typescript devi usare Array.from(... new Set(a))poiché Set non può essere convertito implicitamente in un tipo di array. Solo un avviso!
Zachscs,

4
@Zachscs, ho avuto un errore di compilazione quando l'ho provato. Intendevi solo Array.from(new Set(a))? Sembra funzionare.
adam0101,

72

One Liner, JavaScript puro

Con sintassi ES6

list = list.filter((x, i, a) => a.indexOf(x) === i)

x --> item in array
i --> index of item
a --> array reference, (in this case "list")

inserisci qui la descrizione dell'immagine

Con sintassi ES5

list = list.filter(function (x, i, a) { 
    return a.indexOf(x) === i; 
});

Compatibilità del browser : IE9 +


4
non sono sicuro del perché questo sia stato votato in giù All'inizio può essere poco oscuro, e forse classificato come 'intelligente' e non pragmatico da leggere, ma è dichiarativo, non distruttivo e conciso, dove manca la maggior parte delle altre risposte.
Larry,

1
@Larry questo è stato votato in negativo perché esattamente la stessa risposta è stata fornita anni prima di questo.
Alex Okrushko,

@AlexOkrushko abbastanza equo - ho perso quella risposta a causa del modo in cui è stata formattata
Larry

7
Tutto è una fodera se metti tutto su una linea :-)
Gary McGill

Potrebbe essere utile rafforzare la a.indexOf(x) === inota di uguaglianza con i tre segni uguali.
treejanitor,

20

Utilizzando EcmaScript 2016 puoi semplicemente farlo in questo modo.

 var arr = ["a", "a", "b"];
 var uniqueArray = Array.from(new Set(arr)); // Unique Array ['a', 'b'];

Gli insiemi sono sempre univoci e utilizzando Array.from()è possibile convertire un insieme in un array. Per riferimento dare un'occhiata alle documentazioni.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects /Impostato


1
Questa è la risposta che dovresti usare. indexOf()le risposte sono terribili perché sono O (N ^ 2). Le risposte alla diffusione sono ok ma non funzioneranno per array di grandi dimensioni. Questo è l'approccio migliore.
Timmmm,

20

Ora in ES6 possiamo usare la funzione ES6 appena introdotta

let items = [1,1,1,1,3,4,5,2,23,1,4,4,4,2,2,2]
let uniqueItems = Array.from(new Set(items))

OR by Array diffonde la sintassi su iterables

let items = [1,1,1,1,3,4,5,2,23,1,4,4,4,2,2,2]; 
let uniqueItems = [...new Set(items)];

Restituirà il risultato unico.

[1, 3, 4, 5, 2, 23]

1
La soluzione più pulita!
Dimitris Filippou,

Questa è la strada da percorrere, quando ci si trova in un ambiente JS che supporta in new Setquesto modo (come il moderno Angular / TypeScript)
Don Cheadle,

1
Vale la pena notare che è anche possibile utilizzare la sintassi di diffusione dell'array su iterabili come Set e Mappa: let items = [1,1,1,1,3,4,5,2,23,1,4,4,4,2,2,2]; let uniqueItems = [...new Set(items)];
jacobedawson,

Adoro queste risposte ES6!
Glen Thompson,

1
Questo è identico alla risposta di @Adeel Imran. Si prega di non fare risposte esattamente uguali a quelle esistenti.
Timmmm,

16

Se si desidera lasciare intatto l'array originale,

è necessario un secondo array per contenere gli elementi uniqe del primo-

La maggior parte dei browser ha Array.prototype.filter:

var unique= array1.filter(function(itm, i){
    return array1.indexOf(itm)== i; 
    // returns true for only the first instance of itm
});


//if you need a 'shim':
Array.prototype.filter= Array.prototype.filter || function(fun, scope){
    var T= this, A= [], i= 0, itm, L= T.length;
    if(typeof fun== 'function'){
        while(i<L){
            if(i in T){
                itm= T[i];
                if(fun.call(scope, itm, i, T)) A[A.length]= itm;
            }
            ++i;
        }
    }
    return A;
}
 Array.prototype.indexOf= Array.prototype.indexOf || function(what, i){
        if(!i || typeof i!= 'number') i= 0;
        var L= this.length;
        while(i<L){
            if(this[i]=== what) return i;
            ++i;
        }
        return -1;
    }

14

In questi giorni, è possibile utilizzare il tipo di dati Set di ES6 per convertire l'array in un set unico. Quindi, se è necessario utilizzare i metodi dell'array, è possibile trasformarlo nuovamente in un array:

var arr = ["a", "a", "b"];
var uniqueSet = new Set(arr); // {"a", "b"}
var uniqueArr = Array.from(uniqueSet); // ["a", "b"]
//Then continue to use array methods:
uniqueArr.join(", "); // "a, b"

1
Bene, sarebbe bello vedere alcuni numeri di perfomance, penso che la conversione di questi set in particolare se sono molto dinamici e di grandi dimensioni potrebbe essere un grosso problema di prestazioni, l'unico modo per dirlo è testare :)
Astronaut

2
Se stai usando un transpiler o ti trovi in ​​un ambiente che lo supporta, puoi fare la stessa cosa in modo più conciso di:var uniqueArr = [...new Set(arr)]; // ["a", "b"]
Stenerson

Ehi, @Astronaut ha fatto alcuni test sulle prestazioni come hai detto?
alexventuraio,

8

Non nativo in Javascript, ma molte librerie hanno questo metodo.

Underscore.js _.uniq(array)( link ) funziona abbastanza bene ( fonte ).


Grazie per la condivisione! Questa funzione prende iteratore e contesto insieme all'array come elenco di argomenti da v1.4.3.
Kunj

6

Usando jQuery, ecco una funzione unica dell'array che ho creato:

Array.prototype.unique = function () {
    var arr = this;
    return $.grep(arr, function (v, i) {
        return $.inArray(v, arr) === i;
    });
}

console.log([1,2,3,1,2,3].unique()); // [1,2,3]

5
se hai intenzione di utilizzare jQuery all'interno del prototipo di un oggetto javascript di base, potrebbe non essere meglio scrivere una funzione jQuery, come $.uniqueArray(arr)? Incorporare riferimenti a jQuery all'interno Arraydel prototipo sembra discutibile
jackwanders,

1
@jackwanders: cosa c'è di così discutibile al riguardo? Se hai jQuery sulla pagina, usiamolo.
Rocket Hazmat,

Solo che la nuova funzione unica che hai scritto ora dipende da jQuery; non puoi spostarlo su un nuovo sito o app senza assicurarti che jQuery sia in uso lì.
jackwanders,

2
quello era il mio punto; se hai intenzione di usare jQuery, rendi la funzione stessa parte di jQuery. Se avessi intenzione di estendere il prototipo di un oggetto core, mi limiterei a javascript core, solo per mantenere le cose riutilizzabili. Se qualcun altro sta guardando il tuo codice, è ovvio che $.uniqueArraydipende da jQuery; anche meno ovvio Array.prototype.unique.
jackwanders,

1
@jackwanders: credo. Lo uso nel mio codice, in quanto utilizzo sempre jQuery e mi piace semplicemente estendere prototypes. Ma capisco il tuo punto adesso. Lascio questo qui comunque.
Rocket Hazmat,

6

Soluzione breve e dolce che utilizza il secondo array;

var axes2=[1,4,5,2,3,1,2,3,4,5,1,3,4];

    var distinct_axes2=[];

    for(var i=0;i<axes2.length;i++)
        {
        var str=axes2[i];
        if(distinct_axes2.indexOf(str)==-1)
            {
            distinct_axes2.push(str);
            }
        }
    console.log("distinct_axes2 : "+distinct_axes2); // distinct_axes2 : 1,4,5,2,3

Corto? e dolce? Hai esaminato le migliori soluzioni?
Alex Okrushko,

5

Veloce, compatto, senza loop nidificati, funziona con qualsiasi oggetto non solo stringhe e numeri, accetta un predicato e solo 5 righe di codice !!

function findUnique(arr, predicate) {
  var found = {};
  arr.forEach(d => {
    found[predicate(d)] = d;
  });
  return Object.keys(found).map(key => found[key]); 
}

Esempio: per trovare elementi unici per tipo:

var things = [
  { name: 'charm', type: 'quark'},
  { name: 'strange', type: 'quark'},
  { name: 'proton', type: 'boson'},
];

var result = findUnique(things, d => d.type);
//  [
//    { name: 'charm', type: 'quark'},
//    { name: 'proton', type: 'boson'}
//  ] 

Se vuoi che trovi il primo elemento univoco invece dell'ultimo aggiungi un found.hasOwnPropery () fai il check-in.


4

Hai solo bisogno di JS alla vaniglia per trovare elementi unici con Array.some e Array.reduce. Con la sintassi ES2015 sono solo 62 caratteri.

a.reduce((c, v) => b.some(w => w === v) ? c : c.concat(v)), b)

Array.some e Array.reduce sono supportati in IE9 + e altri browser. Basta cambiare le funzioni fat fat arrow affinché le normali funzioni supportino nei browser che non supportano la sintassi ES2015.

var a = [1,2,3];
var b = [4,5,6];
// .reduce can return a subset or superset
var uniques = a.reduce(function(c, v){
    // .some stops on the first time the function returns true                
    return (b.some(function(w){ return w === v; }) ?  
      // if there's a match, return the array "c"
      c :     
      // if there's no match, then add to the end and return the entire array                                        
      c.concat(v)}),                                  
  // the second param in .reduce is the starting variable. This is will be "c" the first time it runs.
  b);                                                 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects / Array / Riduzione


4

La maggior parte delle soluzioni sopra ha un'elevata complessità del tempo di esecuzione.

Ecco la soluzione che utilizza reducee può fare il lavoro in O (n) tempo.

Array.prototype.unique = Array.prototype.unique || function() {
        var arr = [];
	this.reduce(function (hash, num) {
		if(typeof hash[num] === 'undefined') {
			hash[num] = 1; 
			arr.push(num);
		}
		return hash;
	}, {});
	return arr;
}
    
var myArr = [3,1,2,3,3,3];
console.log(myArr.unique()); //[3,1,2];

Nota:

Questa soluzione non dipende dalla riduzione. L'idea è quella di creare una mappa di oggetti e inserire quelli univoci nell'array.


1

Modo ES6:

const uniq = (arr) => (arr.filter((item, index, arry) => (arry.indexOf(item) === index)));

1

Puoi usare,

let arr1 = [1,2,1,3];
let arr2 = [2,3,4,5,1,2,3];

let arr3 = [...new Set([...arr1,...arr2])];

ti darà elementi unici,

**> ma c'è un problema,

per questo "1" e 1 e sono elementi diff, **

la seconda opzione è utilizzare il metodo di filtro sull'array.


1

È possibile immettere un array con duplicati e il metodo seguente restituirà un array con elementi unici.

function getUniqueArray(array){
    var uniqueArray = [];
    if (array.length > 0) {
       uniqueArray[0] = array[0];
    }
    for(var i = 0; i < array.length; i++){
        var isExist = false;
        for(var j = 0; j < uniqueArray.length; j++){
            if(array[i] == uniqueArray[j]){
                isExist = true;
                break;
            }
            else{
                isExist = false;
            }
        }
        if(isExist == false){
            uniqueArray[uniqueArray.length] = array[i];
        }
    }
    return uniqueArray;
}

0

L'unico problema con le soluzioni fornite finora è l'efficienza. Se sei preoccupato (e probabilmente dovresti) devi evitare i cicli annidati: per * for, filter * indexOf, grep * inArray, ripetono l'array più volte. Puoi implementare un singolo loop con soluzioni come questa o questa


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

0

Ho provato questo problema in puro JS. Ho seguito i seguenti passaggi 1. Ordinare l'array specificato, 2. scorrere l'array ordinato, 3. Verificare il valore precedente e il valore successivo con il valore corrente

// JS
var inpArr = [1, 5, 5, 4, 3, 3, 2, 2, 2,2, 100, 100, -1];

//sort the given array
inpArr.sort(function(a, b){
    return a-b;
});

var finalArr = [];
//loop through the inpArr
for(var i=0; i<inpArr.length; i++){
    //check previous and next value 
  if(inpArr[i-1]!=inpArr[i] && inpArr[i] != inpArr[i+1]){
        finalArr.push(inpArr[i]);
  }
}
console.log(finalArr);

dimostrazione


0
function findUniques(arr){
  let uniques = []
  arr.forEach(n => {
    if(!uniques.includes(n)){
      uniques.push(n)
    }       
  })
  return uniques
}

let arr = ["3", "3", "4", "4", "4", "5", "7", "9", "b", "d", "e", "f", "h", "q", "r", "t", "t"]

findUniques(arr)
// ["3", "4", "5", "7", "9", "b", "d", "e", "f", "h", "q", "r", "t"]

0

Tenendo presente che indexOfrestituirà la prima occorrenza di un elemento, puoi fare qualcosa del genere:

Array.prototype.unique = function(){
        var self = this;
        return this.filter(function(elem, index){
            return self.indexOf(elem) === index;
        })
    }


0

Un altro pensiero di questa domanda. Ecco cosa ho fatto per raggiungere questo obiettivo con meno codice.

var distinctMap = {};
var testArray = ['John', 'John', 'Jason', 'Jason'];
for (var i = 0; i < testArray.length; i++) {
  var value = testArray[i];
  distinctMap[value] = '';
};
var unique_values = Object.keys(distinctMap);

console.log(unique_values);


0

function findUnique(arr) {
  var result = [];
  arr.forEach(function(d) {
    if (result.indexOf(d) === -1)
      result.push(d);
  });
  return result;
}

var unique = findUnique([1, 2, 3, 1, 2, 1, 4]); // [1,2,3,4]
console.log(unique);


0

Ecco un approccio con equalsfunzione personalizzabile che può essere utilizzato per primitive e per oggetti personalizzati:

Array.prototype.pushUnique = function(element, equalsPredicate = (l, r) => l == r) {
    let res = !this.find(item => equalsPredicate(item, element))
    if(res){
        this.push(element)
    }
    return res
}

utilizzo:

//with custom equals for objects
myArrayWithObjects.pushUnique(myObject, (left, right) => left.id == right.id)

//with default equals for primitives
myArrayWithPrimitives.pushUnique(somePrimitive)

0

La mia risposta usa Array.filtere Array.indexOfmetodi per ottenere valori univoci

array.filter((value, index, self)=>self.indexOf(value)===index)

Ho visto questo approccio in un sito Web ma il loro codice è diverso da come appare qui. Ho semplificato il codice su una riga e pubblicandolo qui in modo che qualcuno ne trarrà beneficio

Nota: il mio approccio è simile o uguale a quello indicato da Josh. Lo lascio qui perché i nomi delle variabili sono autoesplicativi nel mio codice.


-1

Stavo solo pensando se possiamo usare la ricerca lineare per eliminare i duplicati:

JavaScript:
function getUniqueRadios() {

var x=document.getElementById("QnA");
var ansArray = new Array();
var prev;


for (var i=0;i<x.length;i++)
  {
    // Check for unique radio button group
    if (x.elements[i].type == "radio")
    {
            // For the first element prev will be null, hence push it into array and set the prev var.
            if (prev == null)
            {
                prev = x.elements[i].name;
                ansArray.push(x.elements[i].name);
            } else {
                   // We will only push the next radio element if its not identical to previous.
                   if (prev != x.elements[i].name)
                   {
                       prev = x.elements[i].name;
                       ansArray.push(x.elements[i].name);
                   }
            }
    }

  }

   alert(ansArray);

}

HTML:

<body>

<form name="QnA" action="" method='post' ">

<input type="radio"  name="g1" value="ANSTYPE1"> good </input>
<input type="radio" name="g1" value="ANSTYPE2"> avg </input>

<input type="radio"  name="g2" value="ANSTYPE3"> Type1 </input>
<input type="radio" name="g2" value="ANSTYPE2"> Type2 </input>


<input type="submit" value='SUBMIT' onClick="javascript:getUniqueRadios()"></input>


</form>
</body>

-1

Ecco la soluzione unica al problema:

var seriesValues = [120, 120, 120, 120];
seriesValues = seriesValues.filter((value, index, seriesValues) => (seriesValues.slice(0, index)).indexOf(value) === -1);
console.log(seriesValues);

Copia incollalo sulla console dei browser e ottieni i risultati, yo :-)


-2

ho integrato la funzione JQuery Unique .

uniqueValues= jQuery.unique( duplicateValues );

Per ulteriori informazioni, consultare la documentazione API di jquery.

http://api.jquery.com/jquery.unique/


8
Si noti che questo funziona solo su array di elementi DOM, non su stringhe o numeri. - citazione dalla documentazione.
mco
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.