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

我有两个JavaScript数组：

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

我希望输出为：

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

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

如何在JavaScript中合并两个数组，以便从每个数组中只获得唯一的项目，其顺序与它们插入原始数组的顺序相同？

当前回答

看起来接受的答案是我测试中最慢的；

注意，我正在按Key合并2个对象数组

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<button type='button' onclick='doit()'>do it</button>
<script>
function doit(){
    var items = [];
    var items2 = [];
    var itemskeys = {};
    for(var i = 0; i < 10000; i++){
        items.push({K:i, C:"123"});
        itemskeys[i] = i;
    }

    for(var i = 9000; i < 11000; i++){
        items2.push({K:i, C:"123"});
    }

    console.time('merge');
    var res = items.slice(0);

    //method1();
    method0();
    //method2();

    console.log(res.length);
    console.timeEnd('merge');

    function method0(){
        for(var i = 0; i < items2.length; i++){
            var isok = 1;
            var k = items2[i].K;
            if(itemskeys[k] == null){
                itemskeys[i] = res.length;
                res.push(items2[i]);
            }
        }
    }

    function method1(){
        for(var i = 0; i < items2.length; i++){
            var isok = 1;
            var k = items2[i].K;

            for(var j = 0; j < items.length; j++){
                if(items[j].K == k){
                    isok = 0;
                    break;
                }
            }

            if(isok) res.push(items2[i]);
        }  
    }

    function method2(){
        res = res.concat(items2);
        for(var i = 0; i < res.length; ++i) {
            for(var j = i+1; j < res.length; ++j) {
                if(res[i].K === res[j].K)
                    res.splice(j--, 1);
            }
        }
    }
}
</script>
</body>
</html>

2016-04-15 19:22:17

其他回答

新解决方案（使用Array.prototype.indexOf和Array.prototype.cocat）：

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

2009-10-18 08:42:01

   //1.merge two array into one array

   var arr1 = [0, 1, 2, 4];
   var arr2 = [4, 5, 6];

   //for merge array we use "Array.concat"

   let combineArray = arr1.concat(arr2); //output

   alert(combineArray); //now out put is 0,1,2,4,4,5,6 but 4 reapeat

   //2.same thing with "Spread Syntex"

   let spreadArray = [...arr1, ...arr2];

   alert(spreadArray);  //now out put is 0,1,2,4,4,5,6 but 4 reapete


   /*
       if we need remove duplicate element method use are
       1.Using set
       2.using .filter
       3.using .reduce
   */

2019-11-24 15:01:54

表演

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

后果

适用于所有浏览器

解决方案H快速/最快解决方案L很快解决方案D在大型阵列的chrome上速度最快解决方案G在小阵列上速度很快解决方案M对于小型阵列来说是最慢的解决方案E对于大型阵列来说是最慢的

细节

我执行两个测试用例：

对于2元素数组-您可以在此处运行对于10000个元素数组-您可以在这里运行

关于解决方案A.BCDEGHJLM在下面的片段中显示

// https://stackoverflow.com/a/10499519/860099函数A（arr1，arr2）{返回_并集（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函数D（arr1，arr2）{return Array.from（新集合（arr1.concat（arr2）））}// https://stackoverflow.com/a/23080662/860099函数E（arr1，arr2）{return arr1.concat（arr2.filter（（项）=>arr1.indexOf（项）<0））}// https://stackoverflow.com/a/28631880/860099函数G（arr1，arr2）{var哈希＝｛｝；变量i；对于（i=0；i<arr1.length；i++）{hash[arr1[i]=真；}对于（i=0；i<arr2.length；i++）{hash[ar2[i]=真；}return Object.keys（哈希）；}// https://stackoverflow.com/a/13847481/860099函数H（a，b）{var哈希＝｛｝；var ret=[]；对于（var i=0；i<a.length；i++）{变量e=a[i]；if（！hash[e]）{hash[e]=真；ret.push（e）；}}对于（var i=0；i<b.length；i++）{变量e=b[i]；if（！hash[e]）{hash[e]=真；ret.push（e）；}}返回ret；}// https://stackoverflow.com/a/1584377/860099函数J（arr1，arr2）{函数arrayUnique（数组）{var a=array.contat（）；对于（var i=0；i<a.length；++i）{对于（var j=i+1；j<a.length；++j）{如果（a[i]===a[j]）a.接头（j-，1）；}}返回a；}return arrayUnique（arr1.concat（arr2））；}// https://stackoverflow.com/a/25120770/860099函数L（array1，array2）{常量数组3=数组1.slice（0）；设len1=阵列长度；设len2=阵列2.length；常量assoc＝｛｝；而（len1--）{assoc[array1[len1]]=空；}而（len2--）{设itm=array2[len2]；if（assoc[itm]==未定义）｛//消除indexOf调用array3.push（itm）；assoc[itm]=空；}}返回数组3；}// https://stackoverflow.com/a/39336712/860099函数M（arr1，arr2）{常量comp=f=>g=>x=>f（g（x））；常量应用=f=>a=>f（a）；常量flip=f=>b=>a=>f（a）（b）；常量concat=xs=>y=>xs.contat（y）；const afrom=应用（Array.from）；const createSet=xs=>新集合（xs）；常量过滤器=f=>xs=>xs.filter（apply（f））；常量重复数据删除=comp（afrom）（createSet）；常量并集=xs=>ys=>{const zs=创建集（xs）；返回凹面（xs）(滤波器（x=>zs.has（x）? 假的：zs.add（x）)（ys））；}返回联合（重复数据消除（arr1））（arr2）}// -------------//测试// -------------var array1=[“Vijendra”，“Singh”]；var array2=[“Singh”，“Shakya”]；[A、B、C、D、E、G、H、J、L、M]。对于每个（f=>{console.log（`${f.name}[${f（[…array1]，[…array2]）}]`）；})<script src=“https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js“integrity=”sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww==“crossrorigin=”匿名“></script>此代码段仅显示性能测试中使用的函数-它本身不执行测试！

下面是chrome的示例测试运行

更新

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

2020-10-15 11:21:49

function set(a, b) {
  return a.concat(b).filter(function(x,i,c) { return c.indexOf(x) == i; });
}

2014-06-06 01:40:29

如果不希望复制特定属性（例如ID）

let noDuplicate = array1.filter ( i => array2.findIndex(a => i.id==a.id)==-1 );
let result = [...noDuplicate, ...array2];

2018-11-14 15:07:06

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

推荐文章

最新文章

标签