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

JavaScript

A小胖

2020-03-09

我有两个JavaScript数组:

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

我希望输出为:

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

输出数组应删除重复的单词。

如何在JavaScript中合并两个数组,以使每个数组中的唯一项按插入原始数组中的相同顺序获得?

第282篇《如何在JavaScript中合并两个数组并删除重复项》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

18个回答
MandyJinJin 2020.03.09

合并两个数组有很多解决方案。它们可以分为两个主要类别(使用诸如lodash或underscore.js之类的第三方库除外)。

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

可以使用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>

樱泡芙 2020.03.09
//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

路在何方 2020.03.09

我的一个半便士:

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);
樱猪猪 2020.03.09

您只需使用Underscore.js的=> uniq即可实现

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

console.log(array3)

它将打印[“ Vijendra”,“ Singh”,“ Shakya”]

乐米亚 2020.03.09

对于ES6,只需一行:

a = [1, 2, 3, 4]
b = [4, 5]
[...new Set(a.concat(b))]  // [1, 2, 3, 4, 5]
伽罗卡卡西 2020.03.09

简化了simo的答案,并将其转变为一个不错的功能。

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

最好的解决方案...

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

无重复

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

如果您希望没有重复的内容,可以从此处尝试更好的解决方案- 喊代码

[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"]
小哥GO 2020.03.09
  • 实现此目的的现代方法是简单地使用散布运算符
  • 为了避免重复,我们可以有效地使用Sets默认情况下,集合不允许重复
  • 为了从Set返回数组的输出,我们可以使用Array.from()

因此,这是您的情况的演示-

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

null 2020.03.09

为什么不使用对象?您似乎正在尝试对集合建模。但是,这不会保留顺序。

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
}
逆天古一Mandy 2020.03.09

只是避免嵌套循环(O(n ^ 2))和.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);
}
樱古一 2020.03.09

合并两个数组并在es6中删除重复项

let arr1 = [3, 5, 2, 2, 5, 5];
let arr2 = [2, 1, 66, 5];
let unique = [...new Set([...arr1,...arr2])];
console.log(unique);
// [ 3, 5, 2, 1, 66 ]
逆天猿理查德 2020.03.09
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;
};

更好的数组合并功能。

泡芙Green 2020.03.09

只需投入我的两分钱。

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

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

GO前端 2020.03.09

您只需使用ECMAScript 6即可做到

var array1 = ["Vijendra", "Singh"];
var array2 = ["Singh", "Shakya"];
var array3 = [...new Set([...array1 ,...array2])];
console.log(array3); // ["Vijendra", "Singh", "Shakya"];
  • 使用散布运算符连接数组。
  • 使用Set创建一组独特的元素。
  • 再次使用散布运算符将Set转换为数组。
小小Near阳光 2020.03.09

使用Set(ECMAScript 2015),就这么简单:

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

JimAJim 2020.03.09

使用Underscore.js或Lo-Dash,您可以执行以下操作:

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

ItachiHarry 2020.03.09

首先连接两个数组,然后仅过滤出唯一项:

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]

编辑

如建议的那样,在性能上更明智的解决方案是在b与级联之前过滤掉其中的唯一项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]

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android