Tôi có hai mảng JavaScript:

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

Tôi muốn đầu ra là:

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

Các mảng đầu ra nên có từ lặp đi lặp lại loại bỏ.

Làm cách nào để hợp nhất hai mảng trong JavaScript để tôi chỉ nhận được các mục duy nhất từ ​​mỗi mảng theo cùng thứ tự chúng được chèn vào mảng ban đầu?

Để chỉ hợp nhất các mảng (mà không loại bỏ trùng lặp)

Sử dụng phiên bản ES5 Array.concat:

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

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

Phiên bản ES6 sử dụng phá hủy

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

Vì không có cách nào được xây dựng để loại bỏ các bản sao ( ECMA-262 thực sự có Array.forEachích cho việc này), chúng tôi phải thực hiện thủ công:

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

Sau đó, để sử dụng nó:

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

Điều này cũng sẽ duy trì thứ tự của các mảng (nghĩa là không cần sắp xếp).

Vì nhiều người cảm thấy khó chịu về việc tăng nguyên mẫu Array.prototypevà for incác vòng lặp, nên đây là một cách ít xâm lấn hơn để sử dụng nó:

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

Đối với những người may mắn làm việc với các trình duyệt có sẵn ES5, bạn có thể sử dụng Object.definePropertynhư thế này:

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

Với Underscore.js hoặc Lo-Dash, bạn có thể làm:

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

Đầu tiên nối hai mảng, tiếp theo chỉ lọc các mục duy nhất:

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]

Biên tập

Theo đề xuất, một giải pháp khôn ngoan hơn về hiệu suất sẽ là lọc ra các mục duy nhất btrước khi nối với 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]

Đây là giải pháp ECMAScript 6 sử dụng toán tử trải và tổng quát mảng.

Hiện tại nó chỉ hoạt động với Firefox và có thể là Internet Explorer Technical Preview.

Nhưng nếu bạn sử dụng Babel , bạn có thể có nó ngay bây giờ.

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 

HOẶC LÀ

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

HOẶC LÀ

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

Sử dụng một bộ (ECMAScript 2015), nó sẽ đơn giản như sau:

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

Đây là một chút khác nhau về vòng lặp. Với một số tối ưu hóa trong phiên bản Chrome mới nhất, đây là phương pháp nhanh nhất để giải quyết sự kết hợp của hai mảng (Chrome 38.0.2111).

http://jsperf.com/merge-two-arrays-keep-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);
  }
}

vòng lặp while: ~ 589k ops / s
bộ lọc: ~ 445k ops / s
lodash: 308k ops / s
cho các vòng lặp: 225k ops / s

Một bình luận chỉ ra rằng một trong các biến thiết lập của tôi đã khiến vòng lặp của tôi vượt lên trên phần còn lại, bởi vì nó không phải khởi tạo một mảng trống để ghi vào. Tôi đồng ý với điều đó, vì vậy tôi đã viết lại bài kiểm tra cho cả sân chơi và bao gồm một tùy chọn thậm chí còn nhanh hơn.

http://jsperf.com/merge-two-arrays-keep-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;
};

Trong giải pháp thay thế này, tôi đã kết hợp một giải pháp mảng kết hợp để loại bỏ .indexOf() cuộc gọi trong vòng lặp làm chậm mọi thứ với vòng lặp thứ hai và bao gồm một số tối ưu hóa khác mà người dùng khác đã đề xuất trong câu trả lời của họ. .

Câu trả lời hàng đầu ở đây với vòng lặp kép trên mỗi giá trị (i-1) vẫn chậm hơn đáng kể. lodash vẫn đang hoạt động mạnh mẽ và tôi vẫn muốn giới thiệu nó cho bất cứ ai không ngại thêm thư viện vào dự án của họ. Đối với những người không muốn, vòng lặp while của tôi vẫn là một câu trả lời hay và câu trả lời của bộ lọc đã thể hiện rất mạnh ở đây, đánh bại tất cả các bài kiểm tra của tôi với Canary Chrome mới nhất (44.0.2360) khi viết bài này.

Kiểm tra câu trả lời của Mike và câu trả lời của Dan Stocker nếu bạn muốn tăng tốc độ lên. Đó là những kết quả nhanh nhất trong tất cả các kết quả sau khi trải qua gần như tất cả các câu trả lời khả thi.

Bạn có thể làm điều đó một cách đơn giản với ECMAScript 6,

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

• Sử dụng toán tử trải để ghép mảng.
• Sử dụng Set để tạo một bộ phần tử riêng biệt.
• Một lần nữa sử dụng toán tử trải rộng để chuyển đổi Set thành một mảng.

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

Một chức năng hợp nhất mảng tốt hơn nhiều.

Chỉ cần ném vào hai xu của tôi.

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

Đây là một phương pháp tôi sử dụng rất nhiều, nó sử dụng một đối tượng làm bảng hashlookup để thực hiện kiểm tra trùng lặp. Giả sử rằng hàm băm là O (1), thì hàm này chạy trong O (n) trong đó n là a.length + b.length. Tôi thực sự không biết làm thế nào trình duyệt thực hiện băm, nhưng nó hoạt động tốt trên nhiều ngàn điểm dữ liệu.

Chỉ cần tránh xa các vòng lặp lồng nhau (O (n ^ 2)) và .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);
}

Đơn giản hóa tốt nhất câu trả lời này và biến nó thành một chức năng hay:

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

Tại sao bạn không sử dụng một đối tượng? Có vẻ như bạn đang cố gắng mô hình hóa một bộ. Điều này sẽ không bảo vệ trật tự, tuy nhiên.

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
}

Giải pháp tốt nhất...

Bạn có thể kiểm tra trực tiếp trong bảng điều khiển trình duyệt bằng cách nhấn ...

Không trùng lặp

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

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

Với bản sao

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

Nếu bạn muốn mà không bị trùng lặp, bạn có thể thử một giải pháp tốt hơn từ đây - Mã Shouting .

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

Thử trên bảng điều khiển trình duyệt Chrome

 f12 > console

Đầu ra:

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

[1, 2, 3, "prince"]

Một xu rưỡi của tôi:

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

Bạn có thể đạt được nó chỉ bằng cách sử dụng Underscore.js's => uniq :

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

console.log(array3)

Nó sẽ in ["Vijendra", "Singh", "Shakya"] .

Đối với ES6, chỉ một dòng:

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

Tôi biết câu hỏi này không phải là về mảng các đối tượng, nhưng người tìm kiếm cuối cùng ở đây.

vì vậy, đáng để thêm cho độc giả tương lai một cách hợp nhất ES6 và sau đó loại bỏ trùng lặp

mảng đối tượng :

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
  }

Việc thực hiện indexOfphương pháp cho các trình duyệt khác được lấy từ MDC

Giải pháp mới (sử dụng Array.prototype.indexOfvà 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 )
};

Sử dụng:

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

Array.prototype.indexOf (dành cho trình thám hiểm 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;
  };

Nó có thể được thực hiện bằng cách sử dụng 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>

Có rất nhiều giải pháp để hợp nhất hai mảng. Chúng có thể được chia thành hai loại chính (ngoại trừ việc sử dụng các thư viện của bên thứ 3 như lodash hoặc underscore.js).

a) kết hợp hai mảng và loại bỏ các mục trùng lặp.

b) lọc các mục trước khi kết hợp chúng.

Kết hợp hai mảng và loại bỏ các mục trùng lặp

Kết hợp

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

Thống nhất

Có nhiều cách để thống nhất một mảng, cá nhân tôi đề xuất dưới đây hai phương pháp.

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

Lọc ra các mục trước khi kết hợp chúng

Cũng có nhiều cách, nhưng cá nhân tôi đề xuất mã dưới đây do tính đơn giản của nó.

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)

Điểm hay của cái này là hiệu năng và nói chung, khi bạn làm việc với mảng, là các phương thức xâu chuỗi như bộ lọc, bản đồ, v.v. để bạn có thể thêm dòng đó và nó sẽ nối và sao chép mảng2 với mảng1 mà không cần tham chiếu đến phần sau một (khi bạn đang xâu chuỗi các phương thức bạn không có), ví dụ:

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

(Tôi không muốn làm ô nhiễm Array.prototype và đó sẽ là cách duy nhất để tôn trọng chuỗi - xác định một hàm mới sẽ phá vỡ nó - vì vậy tôi nghĩ rằng một cái gì đó như thế này là cách duy nhất để thực hiện điều đó)

Bạn có thể thử điều này:

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

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

Một cách tiếp cận chức năng với ES2015

Theo cách tiếp cận chức năng, một uniontrong hai Arrays chỉ là thành phần của concatvà filter. Để cung cấp hiệu suất tối ưu, chúng tôi sử dụng Setkiểu dữ liệu gốc , được tối ưu hóa cho tra cứu thuộc tính.

Dù sao, câu hỏi quan trọng kết hợp với một unionchức năng là làm thế nào để điều trị trùng lặp. Các hoán vị sau đây là có thể:

Array A      + Array B

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

Hai hoán vị đầu tiên rất dễ xử lý với một chức năng duy nhất. Tuy nhiên, hai cái cuối phức tạp hơn, vì bạn không thể xử lý chúng miễn là bạn dựa vào Settra cứu. Kể từ khi chuyển sang Objecttra cứu tài sản cũ đơn giản sẽ đòi hỏi một hiệu suất nghiêm trọng đạt được việc thực hiện sau đây chỉ cần bỏ qua hoán vị thứ ba và thứ tư. Bạn sẽ phải xây dựng một phiên bản riêng unionđể hỗ trợ họ.

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

Từ đây trở đi tầm thường để thực hiện một unionnhàm, chấp nhận bất kỳ số lượng mảng nào (lấy cảm hứng từ các bình luận của 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) );

Hóa ra unionnchỉ là foldl(aka Array.prototype.reduce), lấy unionlàm giảm tốc của nó. Lưu ý: Vì việc triển khai không sử dụng bộ tích lũy bổ sung, nó sẽ gây ra lỗi khi bạn áp dụng nó mà không có đối số.

vì lợi ích của nó ... đây là một giải pháp dòng duy nhất:

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

Không đặc biệt dễ đọc nhưng nó có thể giúp ai đó:

1. Áp dụng hàm giảm với giá trị bộ tích lũy ban đầu được đặt thành một mảng trống.
2. Hàm less sử dụng concat để nối từng mảng con vào mảng tích lũy.
3. Kết quả của điều này được thông qua dưới dạng tham số constructor để tạo mới Set.
4. Toán tử trải được sử dụng để chuyển đổi Setthành một mảng.
5. Các sort() chức năng được áp dụng cho mảng mới.

Khử trùng lặp đơn hoặc Hợp nhất và Hủy lặp lại nhiều đầu vào mảng. Ví dụ dưới đây.

sử dụng ES6 - Đặt, cho, phá hủy

Tôi đã viết hàm đơn giản này có nhiều đối số mảng. Có khá nhiều giống như giải pháp ở trên nó chỉ có trường hợp sử dụng thực tế hơn. Hàm này không nối các giá trị trùng lặp thành một mảng để nó có thể xóa chúng ở giai đoạn sau.

ĐỊNH NGH DEA CHỨC NĂNG NGẮN HẠN (chỉ có 9 dòng)

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

SỬ DỤNG VÍ DỤ 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]