Mam dwie tablice JavaScript:

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

Chcę, aby wynik był:

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

Tablica wyjściowa powinna mieć powtarzane słowa usunięte.

Jak scalić dwie tablice w JavaScript, aby uzyskać tylko unikalne elementy z każdej tablicy w tej samej kolejności, w jakiej zostały wstawione do oryginalnych tablic?

Aby po prostu scalić tablice (bez usuwania duplikatów)

Zastosowanie wersji ES5 Array.concat:

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

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

Wersja ES6 używa destrukcji

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

Ponieważ nie ma „wbudowanego” sposobu usuwania duplikatów ( ECMA-262 faktycznie ma, Array.forEachco byłoby do tego świetne), musimy to zrobić ręcznie:

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;
};

Następnie, aby go użyć:

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

Pozwoli to również zachować kolejność tablic (tzn. Nie trzeba sortować).

Ponieważ wiele osób denerwuje się powiększaniem prototypów Array.prototypei for inpętlami, oto mniej inwazyjny sposób ich użycia:

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));

Dla tych, którzy mają szczęście pracować z przeglądarkami, w których dostępny jest ES5, możesz użyć Object.definePropertytego w następujący sposób:

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;
    }
});

Za pomocą Underscore.js lub Lo-Dash możesz:

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

Najpierw połącz dwie tablice, następnie odfiltruj tylko unikalne elementy:

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]

Edytować

Zgodnie z sugestią, bardziej rozsądnym rozwiązaniem byłoby odfiltrowanie unikalnych elementów bprzed połączeniem z 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]

Jest to rozwiązanie ECMAScript 6 wykorzystujące operator spread i generyczne tablice.

Obecnie działa tylko z przeglądarką Firefox i ewentualnie przeglądarką techniczną przeglądarki Internet Explorer.

Ale jeśli używasz Babel , możesz go mieć teraz.

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 

LUB

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

LUB

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

Za pomocą zestawu (ECMAScript 2015) będzie to tak proste:

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

Oto nieco inne podejście do pętli. Dzięki niektórym optymalizacjom w najnowszej wersji Chrome jest to najszybsza metoda rozwiązania połączenia dwóch tablic (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
filtr: ~ 445k ops / s
lodash: 308k ops / s
dla pętli: 225k ops / s

Komentarz wskazywał, że jedna z moich zmiennych konfiguracyjnych powodowała, że ​​moja pętla wyprzedzała resztę, ponieważ nie musiała inicjować pustej tablicy, aby pisać. Zgadzam się z tym, więc przepisałem test, aby wyrównać szanse, i dodałem jeszcze szybszą opcję.

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;
};

W tym alternatywnym rozwiązaniu połączyłem macierz asocjacyjny jednej odpowiedzi, aby wyeliminować .indexOf() wywołanie w pętli, która spowalniała wiele rzeczy w drugiej pętli, i uwzględniłem niektóre inne optymalizacje, które inni użytkownicy sugerowali również w swoich odpowiedziach .

Najlepsza odpowiedź tutaj z podwójną pętlą dla każdej wartości (i-1) jest nadal znacznie wolniejsza. lodash wciąż ma się dobrze i nadal polecam go każdemu, kto nie ma nic przeciwko dodaniu biblioteki do swojego projektu. Dla tych, którzy nie chcą, moja pętla while jest nadal dobrą odpowiedzią, a odpowiedź filtra ma tutaj bardzo mocne wyniki, bijąc wszystko na moich testach z najnowszym Canary Chrome (44.0.2360) od tego pisania.

Sprawdź odpowiedź Mike'a i odpowiedzi Dan Stocker jeśli chcesz krok to wycięcie w prędkości. To zdecydowanie najszybszy ze wszystkich wyników po przejściu prawie wszystkich realnych odpowiedzi.

Możesz to zrobić po prostu za pomocą ECMAScript 6,

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

• Użyj operatora rozkładania do konkatenacji tablicy.
• Użyj Zestawu, aby utworzyć odrębny zestaw elementów.
• Ponownie użyj operatora rozkładania, aby przekonwertować zestaw na tablicę.

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;
};

Znacznie lepsza funkcja scalania tablic.

Wrzucam tylko dwa centy.

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;
}

Jest to metoda, której często używam, wykorzystuje obiekt jako tabelę haszowania do sprawdzania duplikatów. Zakładając, że skrót to O (1), to działa on w O (n), gdzie n oznacza a. Długość + b. Długość. Szczerze mówiąc, nie mam pojęcia, w jaki sposób przeglądarka wykonuje skrót, ale działa dobrze na wielu tysiącach punktów danych.

Wystarczy omijać zagnieżdżone pętle (O (n ^ 2)) i .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);
}

Uproszczona najlepsza z tej odpowiedzi i zamieniła ją w przyjemną funkcję:

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

Dlaczego nie używasz przedmiotu? Wygląda na to, że próbujesz wymodelować zestaw. Nie zachowa to jednak porządku.

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
}

Najlepszym rozwiązaniem...

Możesz sprawdzić bezpośrednio w konsoli przeglądarki, naciskając ...

Bez duplikatu

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

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

Z duplikatem

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

Jeśli chcesz bez duplikatu, możesz wypróbować lepsze rozwiązanie stąd - kod krzyku .

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

Wypróbuj konsolę przeglądarki Chrome

 f12 > console

Wynik:

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

[1, 2, 3, "prince"]

Mój półtora grosza:

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);

Możesz to osiągnąć po prostu używając Underscore.js's>> uniq :

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

console.log(array3)

Wydrukuje [„Vijendra”, „Singh”, „Shakya”] .

W przypadku ES6 tylko jedna linia:

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

Wiem, że to pytanie nie dotyczy szeregu obiektów, ale tutaj szukają.

dlatego warto dodać przyszłym czytelnikom właściwy sposób łączenia, a następnie usuwania duplikatów

tablica obiektów :

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
  }

Implementacja indexOfmetody dla innych przeglądarek pochodzi z MDC

Nowe rozwiązanie (które wykorzystuje Array.prototype.indexOfi 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 )
};

Stosowanie:

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

Array.prototype.indexOf (dla przeglądarki 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;
  };

Można to zrobić za pomocą Ustaw.

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>

Jest tak wiele rozwiązań łączenia dwóch tablic. Można je podzielić na dwie główne kategorie (z wyjątkiem korzystania z bibliotek stron trzecich, takich jak lodash lub underscore.js).

a) połącz dwie tablice i usuń zduplikowane elementy.

b) odfiltruj elementy przed ich połączeniem.

Połącz dwie tablice i usuń zduplikowane elementy

Łączenie

// 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

Zjednoczenie

Istnieje wiele sposobów ujednolicenia tablicy, osobiście sugeruję poniżej dwie metody.

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

Filtruj elementy przed ich połączeniem

Istnieje również wiele sposobów, ale osobiście sugeruję poniższy kod ze względu na jego prostotę.

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)

Zaletą tego jest wydajność i że ogólnie rzecz biorąc, pracując z tablicami, łączysz metody takie jak filtr, mapa itp., Więc możesz dodać tę linię, a ona połączy i deduplikuje tablicę2 z tablicą1 bez potrzeby odwoływania się do późniejszych jeden (gdy łączysz metody, których nie masz), przykład:

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

(Nie lubię zanieczyszczać prototypu Array.prototype i to byłby jedyny sposób na respektowanie łańcucha - zdefiniowanie nowej funkcji go zepsuje - więc myślę, że coś takiego jest jedynym sposobem na osiągnięcie tego)

Możesz spróbować:

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

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

Funkcjonalne podejście z ES2015

Zgodnie z podejściem funkcjonalnym a uniondwóch Arrays jest tylko kompozycją concati filter. Aby zapewnić optymalną wydajność, korzystamy z rodzimego Settypu danych, który jest zoptymalizowany do wyszukiwania właściwości.

W każdym razie kluczowym pytaniem w połączeniu z unionfunkcją jest sposób traktowania duplikatów. Możliwe są następujące permutacje:

Array A      + Array B

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

Dwie pierwsze kombinacje są łatwe w obsłudze dzięki jednej funkcji. Jednak dwa ostatnie są bardziej skomplikowane, ponieważ nie można ich przetwarzać, o ile polegają na Setwyszukiwaniu. Ponieważ przejście na zwykłe Objectwyszukiwanie starych właściwości pociągnęłoby za sobą poważny spadek wydajności, następująca implementacja ignoruje trzecią i czwartą permutację. Trzeba będzie zbudować osobną wersję uniondo ich obsługi.

// 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) );

Odtąd implementacja unionnfunkcji, która akceptuje dowolną liczbę tablic (zainspirowana komentarzami naomika), staje się trywialna :

// 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) );

Okazuje się, że unionnjest to po prostu foldl(aka Array.prototype.reduce), które przyjmuje unionza swój reduktor. Uwaga: Ponieważ implementacja nie korzysta z dodatkowego akumulatora, zgłosi błąd, gdy zastosujesz go bez argumentów.

ze względu na to ... oto rozwiązanie z jedną linią:

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

Nie jest szczególnie czytelny, ale może pomóc komuś:

1. Stosuje funkcję redukcji z początkową wartością akumulatora ustawioną na pustą tablicę.
2. Funkcja zmniejszania używa concat do dołączania każdej pod-macierzy do tablicy akumulatorów.
3. Wynik jest przekazywany jako parametr konstruktora, aby utworzyć nowy Set .
4. Operator rozkładania służy do konwersji Settablicy na tablicę.
5. sort()Funkcja jest stosowana do nowej tablicy.

DeDuplicate single lub Scal i DeDuplicate wiele tablic wejściowych. Przykład poniżej.

using ES6 - Ustaw, dla destrukcji

Napisałem tę prostą funkcję, która przyjmuje wiele argumentów tablicowych. Robi się prawie tak samo jak powyższe rozwiązanie, ma tylko bardziej praktyczny przypadek użycia. Ta funkcja nie łączy zduplikowanych wartości tylko w jednej tablicy, dzięki czemu może je usunąć na późniejszym etapie.

DEFINICJA KRÓTKIEJ FUNKCJI (tylko 9 linii)

/**
* 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);
}

UŻYJ PRZYKŁADU CODEPEN :

// 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]