Saya punya dua array JavaScript:

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

Saya ingin hasilnya:

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

Keluaran array seharusnya kata-kata yang berulang dihapus.

Bagaimana cara menggabungkan dua array dalam JavaScript sehingga saya hanya mendapatkan item unik dari setiap array dalam urutan yang sama ketika mereka dimasukkan ke dalam array asli?

Untuk hanya menggabungkan array (tanpa menghapus duplikat)

Penggunaan versi ES5 Array.concat:

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

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

Versi ES6 menggunakan destrukturisasi

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

Karena tidak ada cara 'bawaan' untuk menghapus duplikat ( ECMA-262 sebenarnya memiliki Array.forEachyang akan bagus untuk ini), kita harus melakukannya secara manual:

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

Kemudian, untuk menggunakannya:

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

Ini juga akan mempertahankan urutan array (yaitu, tidak diperlukan penyortiran).

Karena banyak orang merasa terganggu dengan augmentasi Array.prototypedan for inloop prototipe , berikut ini cara yang kurang invasif untuk menggunakannya:

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

Bagi mereka yang cukup beruntung untuk bekerja dengan browser di mana ES5 tersedia, Anda dapat menggunakan Object.definePropertyseperti ini:

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

Dengan Underscore.js atau Lo-Dash Anda dapat melakukannya:

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

Pertama menggabungkan dua array, berikutnya hanya menyaring item unik:

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]

Edit

Seperti yang disarankan, solusi yang lebih berkinerja baik adalah menyaring item-item unik bsebelum bergabung dengan 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]

Ini adalah solusi ECMAScript 6 menggunakan spread operator dan array generics.

Saat ini hanya berfungsi dengan Firefox, dan mungkin Pratinjau Teknis Internet Explorer.

Tetapi jika Anda menggunakan Babel , Anda dapat memilikinya sekarang.

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 

ATAU

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

ATAU

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

Menggunakan Set (ECMAScript 2015), maka akan sesederhana itu:

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

Ini adalah pandangan yang sedikit berbeda pada loop. Dengan beberapa optimasi dalam versi terbaru Chrome, ini adalah metode tercepat untuk menyelesaikan penyatuan dua 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);
  }
}

sementara loop: ~ 589k ops / s
filter: ~ 445k ops / s
lodash: 308k ops / s
untuk loop: 225k ops / s

Sebuah komentar menunjukkan bahwa salah satu variabel setup saya menyebabkan loop saya untuk menarik sisanya, karena tidak perlu menginisialisasi array kosong untuk menulis. Saya setuju dengan itu, jadi saya menulis ulang tes bahkan untuk bidang bermain, dan termasuk pilihan yang lebih cepat.

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

Dalam solusi alternatif ini, saya telah menggabungkan solusi array asosiatif satu jawaban untuk menghilangkan .indexOf()panggilan dalam loop yang banyak memperlambatnya dengan loop kedua, dan menyertakan beberapa optimasi lain yang disarankan pengguna lain dalam jawaban mereka juga. .

Jawaban teratas di sini dengan loop ganda pada setiap nilai (i-1) masih jauh lebih lambat. lodash masih melakukan yang kuat, dan saya masih akan merekomendasikan hal ini kepada siapa pun yang tidak keberatan menambahkan perpustakaan ke proyek mereka. Bagi mereka yang tidak mau, loop sementara saya masih merupakan jawaban yang baik dan jawaban filter memiliki tampilan yang sangat kuat di sini, mengalahkan semua tes saya dengan Canary Chrome terbaru (44.0.2360) pada tulisan ini.

Periksa jawaban Mike dan jawaban Dan Stocker jika Anda ingin meningkatkannya dengan cepat. Itu adalah yang tercepat dari semua hasil setelah melewati hampir semua jawaban yang layak.

Anda dapat melakukannya hanya dengan ECMAScript 6,

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

• Gunakan operator spread untuk menggabungkan array.
• Gunakan Set untuk membuat set elemen yang berbeda.
• Sekali lagi gunakan operator spread untuk mengubah Set menjadi 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;
};

Fungsi gabungan array yang jauh lebih baik.

Hanya melempar dua sen saya.

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

Ini adalah metode yang saya gunakan banyak, menggunakan objek sebagai tabel hashlookup untuk melakukan pemeriksaan duplikat. Dengan asumsi bahwa hash adalah O (1), maka ini berjalan di O (n) di mana n adalah a.length + b.length. Jujur saya tidak tahu bagaimana browser melakukan hash, tetapi berkinerja baik pada ribuan titik data.

Hanya menghindari loop bersarang (O (n ^ 2)), dan .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);
}

Jawaban terbaik yang disederhanakan dan mengubahnya menjadi fungsi yang menyenangkan:

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

Mengapa Anda tidak menggunakan objek? Sepertinya Anda mencoba memodelkan set. Namun, ini tidak akan mempertahankan pesanan.

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
}

Solusi terbaik...

Anda dapat memeriksa langsung di konsol peramban dengan menekan ...

Tanpa duplikat

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

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

Dengan duplikat

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

Jika Anda ingin tanpa duplikat, Anda dapat mencoba solusi yang lebih baik dari sini - Kode Shouting .

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

Coba di konsol browser Chrome

 f12 > console

Keluaran:

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

[1, 2, 3, "prince"]

Satu setengah dolar saya:

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

Anda dapat mencapainya hanya menggunakan Underscore.js's => uniq :

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

console.log(array3)

Ini akan mencetak ["Vijendra", "Singh", "Shakya"] .

Untuk ES6, hanya satu baris:

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

Saya tahu pertanyaan ini bukan tentang berbagai objek, tetapi pencari berakhir di sini.

jadi ada baiknya menambahkan bagi pembaca di masa depan cara penggabungan ES6 yang tepat dan kemudian menghapus duplikat

berbagai objek :

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
  }

Implementasi indexOfmetode untuk browser lain diambil dari MDC

Solusi baru (yang menggunakan Array.prototype.indexOfdan 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 )
};

Pemakaian:

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

Array.prototype.indexOf (untuk penjelajah internet):

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

Itu bisa dilakukan menggunakan 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>

Ada begitu banyak solusi untuk menggabungkan dua array. Mereka dapat dibagi menjadi dua kategori utama (kecuali penggunaan perpustakaan pihak ke-3 seperti lodash atau underscore.js).

a) menggabungkan dua array dan menghapus item yang digandakan.

b) memfilter item sebelum menggabungkannya.

Gabungkan dua array dan hapus item yang digandakan

Menggabungkan

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

Menyatukan

Ada banyak cara untuk menyatukan array, saya pribadi menyarankan di bawah dua metode.

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

Saring item sebelum menggabungkannya

Ada juga banyak cara, tetapi saya pribadi menyarankan kode di bawah ini karena kesederhanaannya.

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)

Yang menyenangkan tentang yang satu ini adalah kinerja dan bahwa Anda secara umum, ketika bekerja dengan array, adalah metode chaining seperti filter, peta, dll sehingga Anda dapat menambahkan baris itu dan itu akan menggabungkan dan menduplikat array2 dengan array1 tanpa perlu referensi ke nanti satu (ketika Anda menggunakan metode chaining yang tidak Anda miliki), contoh:

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

(Saya tidak suka mencemari Array.prototype dan itu akan menjadi satu-satunya cara untuk menghormati rantai - mendefinisikan fungsi baru akan merusaknya - jadi saya pikir sesuatu seperti ini adalah satu-satunya cara untuk mencapainya)

Anda dapat mencoba ini:

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

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

Pendekatan fungsional dengan ES2015

Mengikuti pendekatan fungsional a uniondari dua Arrays hanya komposisi concatdan filter. Untuk memberikan kinerja yang optimal, kami menggunakan Settipe data asli , yang dioptimalkan untuk pencarian properti.

Lagi pula, pertanyaan utama dalam hubungannya dengan unionfungsi adalah bagaimana memperlakukan duplikat. Permutasi berikut dimungkinkan:

Array A      + Array B

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

Dua permutasi pertama mudah ditangani dengan satu fungsi. Namun, dua yang terakhir lebih rumit, karena Anda tidak dapat memprosesnya selama Anda mengandalkan Setpencarian. Karena beralih ke Objectpencarian properti lama biasa akan memerlukan kinerja yang serius, implementasi berikut ini hanya mengabaikan permutasi ketiga dan keempat. Anda harus membuat versi terpisah unionuntuk mendukung mereka.

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

Dari sini, sepele untuk mengimplementasikan suatu unionnfungsi, yang menerima sejumlah array (terinspirasi oleh komentar 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) );

Ternyata unionnhanya foldl(alias Array.prototype.reduce), yang uniondianggap sebagai peredamnya. Catatan: Karena implementasi tidak menggunakan akumulator tambahan, itu akan menimbulkan kesalahan ketika Anda menerapkannya tanpa argumen.

untuk itu ... berikut ini adalah solusi jalur tunggal:

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

Tidak terlalu mudah dibaca tetapi dapat membantu seseorang:

1. Menerapkan fungsi perkecil dengan nilai akumulator awal diatur ke array kosong.
2. Fungsi pengurangan menggunakan concat untuk menambahkan setiap sub-array ke array akumulator.
3. Hasil ini dilewatkan sebagai parameter konstruktor untuk membuat yang baru Set.
4. Operator spread digunakan untuk mengubah Setarray.
5. The sort()Fungsi diterapkan ke array baru.

DeDuplicate single atau Gabungkan dan DeDuplicate input larik ganda. Contoh di bawah ini.

menggunakan ES6 - Set, untuk, perusakan

Saya menulis fungsi sederhana ini yang mengambil beberapa argumen array. Apakah hampir sama dengan solusi di atas itu hanya memiliki kasus penggunaan yang lebih praktis. Fungsi ini tidak menggabungkan nilai duplikat ke satu array saja sehingga dapat menghapusnya di beberapa tahap kemudian.

DEFINISI FUNGSI SINGKAT (hanya 9 baris)

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

GUNAKAN CONTOH 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]