我有两个JavaScript数组:
var array1 = ["Vijendra","Singh"];
var array2 = ["Singh", "Shakya"];
我希望输出为:
var array3 = ["Vijendra","Singh","Shakya"];
输出数组应删除重复的单词。
如何在JavaScript中合并两个数组,以便从每个数组中只获得唯一的项目,其顺序与它们插入原始数组的顺序相同?
我有两个JavaScript数组:
var array1 = ["Vijendra","Singh"];
var array2 = ["Singh", "Shakya"];
我希望输出为:
var array3 = ["Vijendra","Singh","Shakya"];
输出数组应删除重复的单词。
如何在JavaScript中合并两个数组,以便从每个数组中只获得唯一的项目,其顺序与它们插入原始数组的顺序相同?
当前回答
构建一个测试人员来检查一些面向性能的答案的速度。请随意添加更多内容。到目前为止,Set是最简单和最快的选项(随着记录数量的增加,它的边距会更大),至少对于简单的number类型来说是如此。
常量记录=10000,//每个阵列的最大记录数max_int=100,//每个数组的最大整数值dup_rate=.5//复制率让perf={},//性能记录器,ts=0,te=0,array1=[],//初始化数组array2=[],array1b=[],array2b=[],a=[];//填充随机化数组for(设i=0;i<记录;i++){设r=Math.random(),n=r*max_int;如果(Math.random()<.5){array1.push(n);r<dup_rate&&array2.push(n);}其他{阵列2.push(n);r<dup_rate&&array1.push(n);}}//缺少rfdc的简单深度副本,以防有人想要使用更复杂的数据类型进行测试array1b=JSON.parse(JSON.stringify(array1));array2b=JSON.parse(JSON.stringfy(array2));console.log('数组1中的记录:',array1.length,array1b.length);console.log('数组2中的记录:',array2.length,array2b.length);//试验方法1(jsperf per@Pitouli)ts=performance.now();for(设i=0;i<array2.length;i++)如果(array1.indexOf(array2[i])==-1)array1.push(array2[i])//修改数组1te=performance.now();perf.m1=te-ts;console.log('方法1合并',array1.length,'记录在:',perf.m1);array1=JSON.parse(JSON.stringify(array1b))//重置阵列1//测试方法2(经典的Each)ts=performance.now();array2.forEach(v=>array1.includes(v)?null:array1.push(v))//修改数组1te=performance.now();perf.m2=te-ts;console.log('方法2合并',array1.length,'记录在:',perf.m2中);//测试方法3(最简单的本机选项)ts=performance.now();a=[…新集合([…array1,…array2])]//不修改源阵列te=performance.now();perf.m3=te-ts;console.log('方法3合并',a.length,'记录在:',perf.m3);//测试方法4(选定答案)ts=performance.now();a=阵列1.concat(阵列2)//不修改源阵列for(设i=0;i<a.length;++i){for(设j=i+1;j<a.length;++j){如果(a[i]===a[j])a.接头(j-,1);}}te=performance.now();perf.m4=te-ts;console.log('Method 4 merged',a.length,'records in:',perf.m4);//试验方法5(@Kamil Kielczewski)ts=performance.now();函数K(arr1,arr2){设r=[],h={};而(arr1.length){设e=arr1.shift()//修改数组1如果(!h[e])h[e]=1&&r.push(e);}而(arr2.长度){设e=arr2.shift()//修改数组2如果(!h[e])h[e]=1&&r.push(e);}返回r;}a=K(阵列1,阵列2);te=performance.now();perf.m5=te-ts;console.log('Method 5 merged',a.length,'records in:',perf.m4);array1=JSON.parse(JSON.stringify(array1b))//重置阵列1array2=JSON.parse(JSON.stringfy(array2b))//重置阵列2for(设i=1;i<6;i++){console.log('方法:',i,'速度为',(perf[m'+i]/perf.m1*100).toFixed(2),'方法1的%');}
其他回答
新解决方案(使用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;
};
我简化了这个答案的最佳部分,并将其转化为一个很好的函数:
function mergeUnique(arr1, arr2){
return arr1.concat(arr2.filter(function (item) {
return arr1.indexOf(item) === -1;
}));
}
表演
今天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,因为它们修改了输入数组,基准测试给出了错误的结果
ES2015的功能方法
按照函数方法,两个数组的联合只是concat和filter的组合。为了提供最佳性能,我们使用本机Set数据类型,该类型针对属性查找进行了优化。
无论如何,结合联合函数的关键问题是如何处理重复项。以下排列是可能的:
Array A + Array B
[unique] + [unique]
[duplicated] + [unique]
[unique] + [duplicated]
[duplicated] + [duplicated]
前两种排列很容易用一个函数处理。然而,后两个更复杂,因为只要依赖Set查找,就无法处理它们。由于切换到普通的旧Object属性查找会严重影响性能,因此下面的实现只会忽略第三个和第四个排列。你必须构建一个单独的union版本来支持它们。
//小型、可重复使用的辅助功能常量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));}//模拟数据常量xs=[1,2,2,3,4,5];常量=[0,1,2,3,3,4,5,6,6];//我们来了console.log(“unique/unique”,union(重复数据消除(xs))(ys));console.log(“重复/唯一”,union(xs)(ys));
从这里开始,实现unionn函数变得很简单,它接受任意数量的数组(灵感来自naomik的评论):
//小型、可重复使用的辅助功能常量未修正=f=>(a,b)=>f(a)(b);常量foldl=f=>acc=>xs=>xs.reduce(uncurry(f),acc);常量应用=f=>a=>f(a);常量flip=f=>b=>a=>f(a)(b);常量concat=xs=>y=>xs.contat(y);const createSet=xs=>新集合(xs);常量过滤器=f=>xs=>xs.filter(apply(f));//工会和工会常量并集=xs=>ys=>{const zs=创建集(xs);返回凹面(xs)(滤波器(x=>zs.has(x)? 假的:zs.add(x))(ys));}常量unionn=(头,…尾)=>foldl(联合)(头)(尾);//模拟数据常量xs=[1,2,2,3,4,5];常量=[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.protocol.reduce),它将union作为其缩减器。注意:由于实现没有使用额外的累加器,所以当您在没有参数的情况下应用它时,它会抛出错误。
//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
*/