Ho due matrici JavaScript:

var array1 = ["Vijendra","Singh"];
var array2 = ["Singh", "Shakya"];

Voglio che l'output sia:

var array3 = ["Vijendra","Singh","Shakya"];

L'array di output dovrebbe avere parole ripetute rimosse.

Come unire due array in JavaScript in modo da ottenere solo gli elementi univoci da ciascun array nello stesso ordine in cui sono stati inseriti negli array originali?

Per unire le matrici (senza rimuovere i duplicati)

Uso della versione ES5 Array.concat:

var array1 = ["Vijendra", "Singh"];
var array2 = ["Singh", "Shakya"];

console.log(array1.concat(array2));

La versione ES6 usa la destrutturazione

const array1 = ["Vijendra","Singh"];
const array2 = ["Singh", "Shakya"];
const array3 = [...array1, ...array2];

Dal momento che non esiste un modo "integrato" per rimuovere i duplicati ( ECMA-262 ha effettivamente Array.forEachquale sarebbe fantastico per questo), dobbiamo farlo manualmente:

Array.prototype.unique = function() {
    var a = this.concat();
    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);
        }
    }

    return a;
};

Quindi, per usarlo:

var array1 = ["Vijendra","Singh"];
var array2 = ["Singh", "Shakya"];
// Merges both arrays and gets unique items
var array3 = array1.concat(array2).unique(); 

Ciò preserverà anche l'ordine delle matrici (ovvero, non è necessario alcun ordinamento).

Poiché molte persone sono infastidite dal potenziamento Array.prototypee dai for inloop dei prototipi , ecco un modo meno invasivo per usarlo:

function arrayUnique(array) {
    var a = array.concat();
    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);
        }
    }

    return a;
}

var array1 = ["Vijendra","Singh"];
var array2 = ["Singh", "Shakya"];
    // Merges both arrays and gets unique items
var array3 = arrayUnique(array1.concat(array2));

Per coloro che sono abbastanza fortunati da lavorare con i browser in cui è disponibile ES5, è possibile utilizzare in Object.definePropertyquesto modo:

Object.defineProperty(Array.prototype, 'unique', {
    enumerable: false,
    configurable: false,
    writable: false,
    value: function() {
        var a = this.concat();
        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);
            }
        }

        return a;
    }
});

Con Underscore.js o Lo-Dash puoi fare:

console.log(_.union([1, 2, 3], [101, 2, 1, 10], [2, 1]));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

http://underscorejs.org/#union

http://lodash.com/docs#union

Prima concatenare i due array, quindi filtrare solo gli elementi unici:

var a = [1, 2, 3], b = [101, 2, 1, 10]
var c = a.concat(b)
var d = c.filter((item, pos) => c.indexOf(item) === pos)

console.log(d) // d is [1, 2, 3, 101, 10]

modificare

Come suggerito, una soluzione più saggia in termini di prestazioni sarebbe quella di filtrare gli elementi unici bprima di concatenarli con a:

var a = [1, 2, 3], b = [101, 2, 1, 10]
var c = a.concat(b.filter((item) => a.indexOf(item) < 0))

console.log(c) // c is [1, 2, 3, 101, 10]

Questa è una soluzione ECMAScript 6 che utilizza operatore di diffusione e generici di array.

Attualmente funziona solo con Firefox e probabilmente con l'anteprima tecnica di Internet Explorer.

Ma se usi Babel , puoi averlo ora.

const input = [
  [1, 2, 3],
  [101, 2, 1, 10],
  [2, 1]
];
const mergeDedupe = (arr) => {
  return [...new Set([].concat(...arr))];
}

console.log('output', mergeDedupe(input));

ES6

array1.push(...array2) // => don't remove duplication 

O

[...array1,...array2] //   =>  don't remove duplication 

O

[...new Set([...array1 ,...array2])]; //   => remove duplication

Usando un Set (ECMAScript 2015), sarà semplice quanto segue:

const array1 = ["Vijendra", "Singh"];
const array2 = ["Singh", "Shakya"];
console.log(Array.from(new Set(array1.concat(array2))));

Ecco una versione leggermente diversa del ciclo. Con alcune delle ottimizzazioni dell'ultima versione di Chrome, è il metodo più veloce per risolvere l'unione dei due array (Chrome 38.0.2111).

http://jsperf.com/merge-two-arrays-keeping-only-unique-values

var array1 = ["Vijendra", "Singh"];
var array2 = ["Singh", "Shakya"];
var array3 = [];

var arr = array1.concat(array2),
  len = arr.length;

while (len--) {
  var itm = arr[len];
  if (array3.indexOf(itm) === -1) {
    array3.unshift(itm);
  }
}

while loop: ~ 589k ops / s
filtro: ~ 445k ops / s
lodash: 308k ops / s
per loop: 225k ops / s

Un commento ha sottolineato che una delle mie variabili di installazione stava facendo sì che il mio ciclo venisse portato avanti rispetto al resto, perché non era necessario inizializzare un array vuoto su cui scrivere. Sono d'accordo, quindi ho riscritto il test anche sul campo di gioco e ho incluso un'opzione ancora più veloce.

http://jsperf.com/merge-two-arrays-keeping-only-unique-values/52

let whileLoopAlt = function (array1, array2) {
    const array3 = array1.slice(0);
    let len1 = array1.length;
    let len2 = array2.length;
    const assoc = {};

    while (len1--) {
        assoc[array1[len1]] = null;
    }

    while (len2--) {
        let itm = array2[len2];

        if (assoc[itm] === undefined) { // Eliminate the indexOf call
            array3.push(itm);
            assoc[itm] = null;
        }
    }

    return array3;
};

In questa soluzione alternativa, ho combinato la soluzione di array associativo di una risposta per eliminare il file .indexOf() chiamata nel loop che rallentava molto le cose con un secondo loop e includevo anche alcune delle altre ottimizzazioni suggerite da altri utenti nelle loro risposte .

La risposta migliore qui con il doppio loop su ogni valore (i-1) è ancora significativamente più lenta. lodash sta ancora andando forte e lo consiglierei ancora a chiunque non si preoccupi di aggiungere una biblioteca al suo progetto. Per coloro che non vogliono, il mio ciclo while è ancora una buona risposta e la risposta del filtro ha una forte dimostrazione qui, battendo tutti i miei test con l'ultimo Canary Chrome (44.0.2360) al momento in cui scrivo.

Scopri la risposta di Mike e la risposta di Dan Stocker se si vuole fare un passo su una tacca in termini di velocità. Questi sono di gran lunga il più veloce di tutti i risultati dopo aver esaminato quasi tutte le risposte possibili.

Puoi farlo semplicemente con ECMAScript 6,

var array1 = ["Vijendra", "Singh"];
var array2 = ["Singh", "Shakya"];
var array3 = [...new Set([...array1 ,...array2])];
console.log(array3); // ["Vijendra", "Singh", "Shakya"];

• Utilizzare l' operatore spread per concatenare l'array.
• Utilizzare Set per creare un set distinto di elementi.
• Usa nuovamente l'operatore spread per convertire il Set in un array.

Array.prototype.merge = function(/* variable number of arrays */){
    for(var i = 0; i < arguments.length; i++){
        var array = arguments[i];
        for(var j = 0; j < array.length; j++){
            if(this.indexOf(array[j]) === -1) {
                this.push(array[j]);
            }
        }
    }
    return this;
};

Una funzione di unione di array molto migliore.

Sto solo gettando i miei due centesimi.

function mergeStringArrays(a, b){
    var hash = {};
    var ret = [];

    for(var i=0; i < a.length; i++){
        var e = a[i];
        if (!hash[e]){
            hash[e] = true;
            ret.push(e);
        }
    }

    for(var i=0; i < b.length; i++){
        var e = b[i];
        if (!hash[e]){
            hash[e] = true;
            ret.push(e);
        }
    }

    return ret;
}

Questo è un metodo che uso molto, utilizza un oggetto come tabella hashlookup per eseguire il controllo duplicato. Supponendo che l'hash sia O (1), allora questo corre in O (n) dove n è a.length + b.length. Onestamente non ho idea di come il browser esegua l'hash, ma funziona bene su molte migliaia di punti dati.

Evita gli anelli nidificati (O (n ^ 2)) e .indexOf()(+ O (n)).

function merge(a, b) {
    var hash = {}, i;
    for (i=0; i<a.length; i++) {
        hash[a[i]]=true;
    } 
    for (i=0; i<b.length; i++) {
        hash[b[i]]=true;
    } 
    return Object.keys(hash);
}

Meglio semplificato di questa risposta e trasformato in una bella funzione:

function mergeUnique(arr1, arr2){
    return arr1.concat(arr2.filter(function (item) {
        return arr1.indexOf(item) === -1;
    }));
}

Perché non usi un oggetto? Sembra che tu stia cercando di modellare un set. Questo non preserverà l'ordine, tuttavia.

var set1 = {"Vijendra":true, "Singh":true}
var set2 = {"Singh":true,  "Shakya":true}

// Merge second object into first
function merge(set1, set2){
  for (var key in set2){
    if (set2.hasOwnProperty(key))
      set1[key] = set2[key]
  }
  return set1
}

merge(set1, set2)

// Create set from array
function setify(array){
  var result = {}
  for (var item in array){
    if (array.hasOwnProperty(item))
      result[array[item]] = true
  }
  return result
}

La migliore soluzione...

Puoi controllare direttamente nella console del browser premendo ...

Senza duplicati

a = [1, 2, 3];
b = [3, 2, 1, "prince"];

a.concat(b.filter(function(el) {
    return a.indexOf(el) === -1;
}));

Con duplicato

["prince", "asish", 5].concat(["ravi", 4])

Se vuoi senza duplicati, puoi provare una soluzione migliore da qui: Gridare Codice .

[1, 2, 3].concat([3, 2, 1, "prince"].filter(function(el) {
    return [1, 2, 3].indexOf(el) === -1;
}));

Prova sulla console del browser Chrome

 f12 > console

Produzione:

["prince", "asish", 5, "ravi", 4]

[1, 2, 3, "prince"]

Il mio centesimo e mezzo:

Array.prototype.concat_n_dedupe = function(other_array) {
  return this
    .concat(other_array) // add second
    .reduce(function(uniques, item) { // dedupe all
      if (uniques.indexOf(item) == -1) {
        uniques.push(item);
      }
      return uniques;
    }, []);
};

var array1 = ["Vijendra","Singh"];
var array2 = ["Singh", "Shakya"];

var result = array1.concat_n_dedupe(array2);

console.log(result);

Puoi ottenerlo semplicemente usando Underscore.js = = uniq :

array3 = _.uniq(array1.concat(array2))

console.log(array3)

Stampa ["Vijendra", "Singh", "Shakya"] .

Per ES6, solo una riga:

a = [1, 2, 3, 4]
b = [4, 5]
[...new Set(a.concat(b))]  // [1, 2, 3, 4, 5]

So che questa domanda non riguarda l'array di oggetti, ma i ricercatori finiscono qui.

quindi vale la pena aggiungere per i futuri lettori un modo ES6 adeguato di unire e quindi rimuovere i duplicati

matrice di oggetti :

var arr1 = [ {a: 1}, {a: 2}, {a: 3} ];
var arr2 = [ {a: 1}, {a: 2}, {a: 4} ];

var arr3 = arr1.concat(arr2.filter( ({a}) => !arr1.find(f => f.a == a) ));

// [ {a: 1}, {a: 2}, {a: 3}, {a: 4} ]

//Array.indexOf was introduced in javascript 1.6 (ECMA-262) 
//We need to implement it explicitly for other browsers, 
if (!Array.prototype.indexOf)
{
  Array.prototype.indexOf = function(elt, from)
  {
    var len = this.length >>> 0;

    for (; from < len; from++)
    {
      if (from in this &&
          this[from] === elt)
        return from;
    }
    return -1;
  };
}
//now, on to the problem

var array1 = ["Vijendra","Singh"];
var array2 = ["Singh", "Shakya"];

var merged = array1.concat(array2);
var t;
for(i = 0; i < merged.length; i++)
  if((t = merged.indexOf(i + 1, merged[i])) != -1)
  {
    merged.splice(t, 1);
    i--;//in case of multiple occurrences
  }

L'implementazione del indexOfmetodo per altri browser è presa da MDC

Nuova soluzione (che utilizza Array.prototype.indexOfe Array.prototype.concat):

Array.prototype.uniqueMerge = function( a ) {
    for ( var nonDuplicates = [], i = 0, l = a.length; i<l; ++i ) {
        if ( this.indexOf( a[i] ) === -1 ) {
            nonDuplicates.push( a[i] );
        }
    }
    return this.concat( nonDuplicates )
};

Uso:

>>> ['Vijendra', 'Singh'].uniqueMerge(['Singh', 'Shakya'])
["Vijendra", "Singh", "Shakya"]

Array.prototype.indexOf (per Internet Explorer):

Array.prototype.indexOf = Array.prototype.indexOf || function(elt)
  {
    var len = this.length >>> 0;

    var from = Number(arguments[1]) || 0;
    from = (from < 0) ? Math.ceil(from): Math.floor(from); 
    if (from < 0)from += len;

    for (; from < len; from++)
    {
      if (from in this && this[from] === elt)return from;
    }
    return -1;
  };

Si può fare usando Set.

var array1 = ["Vijendra","Singh"];
var array2 = ["Singh", "Shakya"];

var array3 = array1.concat(array2);
var tempSet = new Set(array3);
array3 = Array.from(tempSet);

//show output
document.body.querySelector("div").innerHTML = JSON.stringify(array3);

<div style="width:100%;height:4rem;line-height:4rem;background-color:steelblue;color:#DDD;text-align:center;font-family:Calibri" > 
  temp text 
</div>

Esistono così tante soluzioni per unire due array. Possono essere divisi in due categorie principali (tranne l'uso di librerie di terze parti come lodash o underscore.js).

a) combinare due matrici e rimuovere gli oggetti duplicati.

b) filtrare gli oggetti prima di combinarli.

Combina due matrici e rimuovi gli elementi duplicati

combinando

// mutable operation(array1 is the combined array)
array1.push(...array2);
array1.unshift(...array2);

// immutable operation
const combined = array1.concat(array2);
const combined = [...array1, ...array2];    // ES6

Unifying

Esistono molti modi per unificare un array, suggerisco personalmente di seguito due metodi.

// a little bit tricky
const merged = combined.filter((item, index) => combined.indexOf(item) === index);
const merged = [...new Set(combined)];

Filtra gli oggetti prima di combinarli

Ci sono anche molti modi, ma personalmente suggerisco il codice qui sotto per la sua semplicità.

const merged = array1.concat(array2.filter(secItem => !array1.includes(secItem)));

Array.prototype.add = function(b){
    var a = this.concat();                // clone current object
    if(!b.push || !b.length) return a;    // if b is not an array, or empty, then return a unchanged
    if(!a.length) return b.concat();      // if original is empty, return b

    // go through all the elements of b
    for(var i = 0; i < b.length; i++){
        // if b's value is not in a, then add it
        if(a.indexOf(b[i]) == -1) a.push(b[i]);
    }
    return a;
}

// Example:
console.log([1,2,3].add([3, 4, 5])); // will output [1, 2, 3, 4, 5]

array1.concat(array2).filter((value, pos, arr)=>arr.indexOf(value)===pos)

La cosa bella di questo è la prestazione e che in generale, quando si lavora con gli array, si stanno concatenando metodi come filtro, mappa, ecc. In modo da poter aggiungere quella linea e si concatenerà e deduplicherà array2 con array1 senza bisogno di un riferimento al successivo uno (quando stai concatenando metodi che non hai), esempio:

someSource()
.reduce(...)
.filter(...)
.map(...) 
// and now you want to concat array2 and deduplicate:
.concat(array2).filter((value, pos, arr)=>arr.indexOf(value)===pos)
// and keep chaining stuff
.map(...)
.find(...)
// etc

(Non mi piace inquinare Array.prototype e sarebbe l'unico modo di rispettare la catena - la definizione di una nuova funzione la spezzerà - quindi penso che qualcosa del genere sia l'unico modo per farlo)

Puoi provare questo:

const union = (a, b) => Array.from(new Set([...a, ...b]));

console.log(union(["neymar","messi"], ["ronaldo","neymar"]));

Un approccio funzionale con ES2015

Seguire l'approccio funzionale a uniondi due Arrays è solo la composizione di concate filter. Al fine di fornire prestazioni ottimali ricorriamo al Settipo di dati nativo , che è ottimizzato per le ricerche di proprietà.

Comunque, la domanda chiave in combinazione con una unionfunzione è come trattare i duplicati. Sono possibili le seguenti permutazioni:

Array A      + Array B

[unique]     + [unique]
[duplicated] + [unique]
[unique]     + [duplicated]
[duplicated] + [duplicated]

Le prime due permutazioni sono facili da gestire con un'unica funzione. Tuttavia, gli ultimi due sono più complicati, dal momento che non è possibile elaborarli finché si fa affidamento sulle Setricerche. Poiché il passaggio a semplici Objectricerche di proprietà precedenti comporterebbe un grave calo delle prestazioni, l'implementazione seguente ignora solo la terza e la quarta permutazione. Dovresti creare una versione separata di unionsupportarli.

// small, reusable auxiliary functions

const comp = f => g => x => f(g(x));
const apply = f => a => f(a);
const flip = f => b => a => f(a) (b);
const concat = xs => y => xs.concat(y);
const afrom = apply(Array.from);
const createSet = xs => new Set(xs);
const filter = f => xs => xs.filter(apply(f));


// de-duplication

const dedupe = comp(afrom) (createSet);


// the actual union function

const union = xs => ys => {
  const zs = createSet(xs);  
  return concat(xs) (
    filter(x => zs.has(x)
     ? false
     : zs.add(x)
  ) (ys));
}


// mock data

const xs = [1,2,2,3,4,5];
const ys = [0,1,2,3,3,4,5,6,6];


// here we go

console.log( "unique/unique", union(dedupe(xs)) (ys) );
console.log( "duplicated/unique", union(xs) (ys) );

Da qui in poi diventa banale implementare una unionnfunzione, che accetta qualsiasi numero di array (ispirato ai commenti di naomik):

// small, reusable auxiliary functions

const uncurry = f => (a, b) => f(a) (b);
const foldl = f => acc => xs => xs.reduce(uncurry(f), acc);

const apply = f => a => f(a);
const flip = f => b => a => f(a) (b);
const concat = xs => y => xs.concat(y);
const createSet = xs => new Set(xs);
const filter = f => xs => xs.filter(apply(f));


// union and unionn

const union = xs => ys => {
  const zs = createSet(xs);  
  return concat(xs) (
    filter(x => zs.has(x)
     ? false
     : zs.add(x)
  ) (ys));
}

const unionn = (head, ...tail) => foldl(union) (head) (tail);


// mock data

const xs = [1,2,2,3,4,5];
const ys = [0,1,2,3,3,4,5,6,6];
const zs = [0,1,2,3,4,5,6,7,8,9];


// here we go

console.log( unionn(xs, ys, zs) );

Si scopre che unionnè solo foldl(aka Array.prototype.reduce), che prende unioncome riduttore. Nota: poiché l'implementazione non utilizza un accumulatore aggiuntivo, genererà un errore quando lo si applica senza argomenti.

per il gusto di farlo ... ecco una soluzione a linea singola:

const x = [...new Set([['C', 'B'],['B', 'A']].reduce( (a, e) => a.concat(e), []))].sort()
// ['A', 'B', 'C']

Non particolarmente leggibile ma può aiutare qualcuno:

1. Applica una funzione di riduzione con il valore iniziale dell'accumulatore impostato su un array vuoto.
2. La funzione di riduzione utilizza concat per aggiungere ciascun sotto-array all'array di accumulatori.
3. Il risultato è passato come parametro di costruzione per creare un nuovo Set.
4. L'operatore spread viene utilizzato per convertire il Setin un array.
5. La sort()funzione viene applicata al nuovo array.

DeDuplica input singoli o Unisci e DeDuplica array multipli. Esempio sotto.

usando ES6 - Set, for of, destructuring

Ho scritto questa semplice funzione che accetta più argomenti di array. Praticamente è uguale alla soluzione sopra ha solo un caso d'uso più pratico. Questa funzione non concatena i valori duplicati in un solo array in modo da poterli eliminare in un secondo momento.

DEFINIZIONE BREVE FUNZIONE (solo 9 righe)

/**
* This function merging only arrays unique values. It does not merges arrays in to array with duplicate values at any stage.
*
* @params ...args Function accept multiple array input (merges them to single array with no duplicates)
* it also can be used to filter duplicates in single array
*/
function arrayDeDuplicate(...args){
   let set = new Set(); // init Set object (available as of ES6)
   for(let arr of args){ // for of loops through values
      arr.map((value) => { // map adds each value to Set object
         set.add(value); // set.add method adds only unique values
      });
   }
   return [...set]; // destructuring set object back to array object
   // alternativly we culd use:  return Array.from(set);
}

USARE ESEMPIO CODICE :

// SCENARIO 
let a = [1,2,3,4,5,6];
let b = [4,5,6,7,8,9,10,10,10];
let c = [43,23,1,2,3];
let d = ['a','b','c','d'];
let e = ['b','c','d','e'];

// USEAGE
let uniqueArrayAll = arrayDeDuplicate(a, b, c, d, e);
let uniqueArraySingle = arrayDeDuplicate(b);

// OUTPUT
console.log(uniqueArrayAll); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 43, 23, "a", "b", "c", "d", "e"]
console.log(uniqueArraySingle); // [4, 5, 6, 7, 8, 9, 10]

var arr1 = [1, 3, 5, 6];
var arr2 = [3, 6, 10, 11, 12];
arr1.concat(arr2.filter(ele => !arr1.includes(ele)));
console.log(arr1);

output :- [1, 3, 5, 6, 10, 11, 12]