如何在 JavaScript 中合并两个数组并删除重复项

仅合并数组（不删除重复项）

ES5 版本使用 Array.concat：

var array1 = [“维金德拉”，“辛格”]； var array2 = ["Singh", "Shakya"]; array1 = array1.concat(array2);控制台.log(array1);

ES6 版本使用解构

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

由于没有“内置”方法来删除重复项（ECMA-262 实际上有 Array.forEach，这对这个非常有用），我们必须手动完成：

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

然后，使用它：

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

这也将保留数组的顺序（即，不需要排序）。

由于许多人对 Array.prototype 和 for in 循环的原型增强感到恼火，因此这里有一种侵入性较小的使用方式：

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

对于那些有幸使用支持 ES5 的浏览器的人，您可以像这样使用 Object.defineProperty：

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

---

使用 Underscore.js 或 Lo-Dash 你可以：

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

http://underscorejs.org/#union

http://lodash.com/docs#union

---

首先连接两个数组，然后只过滤掉唯一的项目：

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 是 [1, 2, 3, 101, 10]

编辑

正如所建议的那样，更明智的性能解决方案是在与 a 连接之前过滤掉 b 中的唯一项目：

var a = [1, 2, 3], b = [101, 2, 1, 10] var c = a.concat(b.filter((item) => a.indexOf(item) < 0)) 控制台。 log(c) // c 是 [1, 2, 3, 101, 10]

---

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

或者

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

---

这是一个使用 spread operator 和数组泛型的 ECMAScript 6 解决方案。

目前它只适用于 Firefox，可能还有 Internet Explorer Technical Preview。

但如果您使用 Babel，您现在就可以拥有它。

常量输入 = [ [1, 2, 3], [101, 2, 1, 10], [2, 1] ]; const mergeDedupe = (arr) => { return [...new Set([].concat(...arr))]; } console.log('输出'，mergeDedupe(输入));

---

使用 Set (ECMAScript 2015)，就这么简单：

const array1 = [“维金德拉”，“辛格”]； const array2 = ["Singh", "Shakya"]; console.log(Array.from(new Set(array1.concat(array2))));

---

你可以用 ECMAScript 6 简单地做到这一点，

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

使用扩展运算符连接数组。

使用 Set 创建一组不同的元素。

再次使用扩展运算符将 Set 转换为数组。

---

这是对循环的稍微不同的看法。借助最新版 Chrome 中的一些优化，它是解决两个数组并集的最快方法（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 循环：~589k ops/s 过滤器：~445k ops/s lodash：308k ops/s for 循环：225k ops/s

一条评论指出，我的一个设置变量导致我的循环领先于其他循环，因为它不必初始化要写入的空数组。我同意这一点，所以我重写了测试以适应竞争环境，并包括一个更快的选项。

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

在这个替代解决方案中，我结合了一个答案的关联数组解决方案来消除循环中的 .indexOf() 调用，这会通过第二个循环大大减慢速度，并包括其他用户在他们的答案也是如此。

每个值（i-1）上的双循环的最佳答案仍然明显慢。 lodash 仍然很强大，我仍然会将它推荐给任何不介意在他们的项目中添加库的人。对于那些不想这样做的人来说，我的 while 循环仍然是一个很好的答案，并且过滤器的答案在这里表现得非常好，在撰写本文时，我使用最新的 Canary Chrome (44.0.2360) 击败了我的所有测试。

如果您想加快速度，请查看 Mike's answer 和 Dan Stocker's answer。在经历了几乎所有可行的答案之后，这些是迄今为止最快的结果。

---

我简化了 this answer 中最好的部分，并将其变成了一个不错的函数：

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

---

ES6 提供了一种单行解决方案，通过使用解构和集合来合并多个数组而不重复。

const array1 = ['a','b','c'];
const array2 = ['c','c','d','e'];
const array3 = [...new Set([...array1,...array2])];
console.log(array3); // ["a", "b", "c", "d", "e"]

---

只需避开嵌套循环 (O(n^2)) 和 .indexOf() (+O(n))。

函数合并（a，b）{ var hash = {};变量我; for (i = 0; i < a.length; i++) { hash[a[i]] = true; } for (i = 0; i < b.length; i++) { hash[b[i]] = true; } 返回 Object.keys(hash); } var array1 = ["Vijendra", "Singh"]; var array2 = ["Singh", "Shakya"]; var 数组 3 = 合并（数组 1，数组 2）；控制台.log(array3);

---

只需投入我的两分钱。

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

这是我经常使用的一种方法，它使用一个对象作为哈希表来进行重复检查。假设哈希是 O(1)，那么它在 O(n) 中运行，其中 n 是 a.length + b.length。老实说，我不知道浏览器如何进行哈希处理，但它在数千个数据点上表现良好。

---

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

一个更好的数组合并功能。

---

编辑：

只有在项目较少时，第一种解决方案才是最快的。当有超过 400 个项目时，Set 解决方案变得最快。当有 100,000 个项目时，它比第一个解决方案快一千倍。

考虑到只有在项目很多时性能才重要，并且 Set 解决方案是迄今为止最具可读性的解决方案，因此在大多数情况下它应该是正确的解决方案

下面的性能结果是用少量项目计算的

基于 jsperf，将两个数组合并到一个新数组中的最快方法（编辑：如果少于 400 项）如下：

for (var i = 0; i < array2.length; i++)
    if (array1.indexOf(array2[i]) === -1)
      array1.push(array2[i]);

这个慢了 17%：

array2.forEach(v => array1.includes(v) ? null : array1.push(v));

这个慢了 45%（编辑：当少于 100 个项目时。当有很多项目时要快很多）：

var a = [...new Set([...array1 ,...array2])];

并且接受的答案要慢 55%（并且要写更长的时间）（编辑：当有 100 000 个项目时，它比任何其他方法慢几个数量级）

var a = array1.concat(array2);
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);
    }
}

https://jsperf.com/merge-2-arrays-without-duplicate

---

我知道这个问题与对象数组无关，但搜索者确实会在这里结束。

所以值得为未来的读者添加一个合适的 ES6 合并然后删除重复项的方法

对象数组：

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

---

为什么不使用对象？看起来您正在尝试建模一个集合。但是，这不会保留订单。

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
}

---

表现

今天 2020.10.15，我在 Chrome v86、Safari v13.1.2 和 Firefox v81 上对 MacOs HighSierra 10.13.6 进行测试，以选择解决方案。

结果

适用于所有浏览器

解决方案 H 最快/最快

解决方案 L 很快

解决方案 D 在大型阵列的 chrome 上最快

解决方案 G 在小型阵列上速度很快

对于小型阵列，解决方案 M 最慢

解决方案 E 对于大阵列来说是最慢的

https://i.stack.imgur.com/1K2Fn.png

细节

我执行 2 个测试用例：

对于 2 个元素的数组 - 你可以在这里运行它

对于 10000 个元素的数组 - 你可以在这里运行它

关于解决方案 A、B、C、D、E、G、H、J、L、M，如下代码段所示

// https://stackoverflow.com/a/10499519/860099 函数 A(arr1,arr2) { return _.union(arr1,arr2) } // https://stackoverflow.com/a/53149853/860099 函数 B (arr1,arr2) { return _.unionWith(arr1, arr2, _.isEqual); } // https://stackoverflow.com/a/27664971/860099 函数 C(arr1,arr2) { return [...new Set([...arr1,...arr2])] } // https: //stackoverflow.com/a/48130841/860099 function D(arr1,arr2) { return Array.from(new Set(arr1.concat(arr2))) } // https://stackoverflow.com/a/23080662/ 860099 函数 E(arr1,arr2) { return arr1.concat(arr2.filter((item) => arr1.indexOf(item) < 0)) } // https://stackoverflow.com/a/28631880/860099 函数G(arr1,arr2) { var hash = {};变量我; for (i = 0; i < arr1.length; i++) { hash[arr1[i]] = true; } for (i = 0; i < arr2.length; i++) { hash[arr2[i]] = true; } 返回 Object.keys(hash); } // https://stackoverflow.com/a/13847481/860099 函数 H(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); } } 返回 ret; } // https://stackoverflow.com/a/1584377/860099 函数 J(arr1,arr2) { function arrayUnique(array) { var a = array.concat(); for(var i=0; i g => x => f(g(x));常量应用 = f => a => f(a);常量翻转 = f => b => a => f(a) (b); const concat = xs => y => xs.concat(y);常量 afrom = apply(Array.from); const createSet = xs => new Set(xs);常量过滤器 = f => xs => xs.filter(apply(f)); const dedupe = comp(afrom) (createSet); const union = xs => ys => { const zs = createSet(xs);返回 concat(xs) ( filter(x => zs.has(x) ? false : zs.add(x) ) (ys)); } return union(dedupe(arr1)) (arr2) } // ------------- // 测试 // ------------- var array1 = [ "维金德拉","辛格"]; var array2 = ["Singh", "Shakya"]; [A,B,C,D,E,G,H,J,L,M].forEach(f=> { console.log(`${f.name} [${f([...array1] ,[...array2])}]`); }) 这个片段只展示了在性能测试中使用的函数——它本身并不执行测试！

这是 chrome 的示例测试运行

https://i.stack.imgur.com/khxL8.png

更新

我删除了案例 F、I、K，因为它们修改了输入数组并且基准测试给出了错误的结果

---

对于 ES6，只有一行：

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

---

最好的解决方案...

您可以通过点击直接在浏览器控制台中检查...

无重复

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

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

有重复

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

如果您想要不重复，您可以从这里尝试更好的解决方案 - Shouting Code。

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

在 Chrome 浏览器控制台上尝试

 f12 > console

输出：

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

[1, 2, 3, "prince"]

---

我的一分钱：

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

---

合并两个数组有很多解决方案。它们可以分为两大类（除了使用 lodash 或 underscore.js 等 3rd 方库）。

a) 合并两个数组并删除重复项。

b）在组合之前过滤掉项目。

合并两个数组并删除重复项

结合

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

统一

统一数组的方法有很多，我个人推荐以下两种方法。

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

在组合之前过滤掉项目

方法也有很多，但我个人建议使用下面的代码，因为它很简单。

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

---

你可以简单地使用 Underscore.js 的 => uniq 来实现它：

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

console.log(array3)

它将打印 ["Vijendra", "Singh", "Shakya"]。

---

新解决方案（使用 Array.prototype.indexOf 和 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 )
};

用法：

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

Array.prototype.indexOf（用于 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;
  };

---

可以使用 Set 来完成。

var array1 = ["Vijendra","Singh"]; var array2 = ["Singh", "Shakya"]; var array3 = array1.concat(array2); var tempSet = new Set(array3); array3 = Array.from(tempSet); //显示输出 document.body.querySelector("div").innerHTML = JSON.stringify(array3);

---

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

其他浏览器的 indexOf 方法的实现取自 MDC

---

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)

这个的好处是性能，一般来说，在使用数组时，您会链接过滤器、映射等方法，因此您可以添加该行，它会将数组 2 与数组 1 连接和重复数据删除，而无需对后面的引用一个（当你链接你没有的方法时），例如：

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

（我不喜欢污染 Array.prototype，这将是尊重链的唯一方法——定义一个新函数会破坏它——所以我认为这样的事情是实现这一目标的唯一方法）

---

ES2015 的函数式方法

遵循函数式方法，两个 Array 的 union 只是 concat 和 filter 的组合。为了提供最佳性能，我们采用原生 Set 数据类型，该数据类型针对属性查找进行了优化。

无论如何，与 union 函数相关的关键问题是如何处理重复项。以下排列是可能的：

Array A      + Array B

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

前两个排列很容易用一个函数处理。但是，最后两个更复杂，因为只要您依赖 Set 查找，您就无法处理它们。由于切换到普通的旧 Object 属性查找会严重影响性能，因此以下实现只是忽略了第三和第四排列。您必须构建一个单独的 union 版本来支持它们。

// 小的、可重用的辅助函数 const comp = f => g => x => f(g(x));常量应用 = f => a => f(a);常量翻转 = f => b => a => f(a) (b); const concat = xs => y => xs.concat(y);常量 afrom = apply(Array.from); const createSet = xs => new Set(xs);常量过滤器 = f => xs => xs.filter(apply(f)); // 去重 const dedupe = comp(afrom) (createSet); // 实际的联合函数 const union = xs => ys => { const zs = createSet(xs);返回 concat(xs) ( filter(x => zs.has(x) ? false : zs.add(x) ) (ys)); } // 模拟数据 const xs = [1,2,2,3,4,5];常量 ys = [0,1,2,3,3,4,5,6,6]; // 这里我们去 console.log( "unique/unique", union(dedupe(xs)) (ys) ); console.log("重复/唯一", union(xs) (ys) );

从这里开始，实现一个 unionn 函数变得微不足道，它接受任意数量的数组（受 naomik 评论的启发）：

// 小的、可重用的辅助函数 const uncurry = f => (a, b) => f(a) (b); const foldl = f => acc => xs => xs.reduce(uncurry(f), acc);常量应用 = f => a => f(a);常量翻转 = f => b => a => f(a) (b); const concat = xs => y => xs.concat(y); const createSet = xs => new Set(xs);常量过滤器 = f => xs => xs.filter(apply(f)); // union 和 unionn const union = xs => ys => { const zs = createSet(xs);返回 concat(xs) ( filter(x => zs.has(x) ? false : zs.add(x) ) (ys)); } const unionn = (head, ...tail) => foldl(union) (head) (tail); // 模拟数据 const xs = [1,2,2,3,4,5];常量 ys = [0,1,2,3,3,4,5,6,6];常量 zs = [0,1,2,3,4,5,6,7,8,9]; // 这里我们去 console.log( unionn(xs, ys, zs) );

原来 unionn 只是 foldl（又名 Array.prototype.reduce），它将 union 作为它的 reducer。注意：由于该实现不使用额外的累加器，因此当您在不带参数的情况下应用它时会引发错误。

---

DeDuplicate 单个或 Merge and DeDuplicate 多个数组输入。下面的例子。

使用 ES6 - Set, for of, destructuring

我写了这个简单的函数，它接受多个数组参数。与上面的解决方案几乎相同，只是有更实际的用例。此函数不会仅将重复值连接到一个数组中，以便它可以在以后的某个阶段删除它们。

SHORT FUNCTION DEFINITION（只有9行）

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

使用示例 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 array1 = [“一”，“二”]； var array2 = [“二”，“三”]； var collectionOfTwoArrays = [...array1, ...array2]; var uniqueList = array => [...new Set(array)]; console.log('收藏：'); console.log(collectionOfTwoArrays); console.log('没有重复的集合:'); console.log(uniqueList(collectionOfTwoArrays));

---