我有两个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中合并两个数组,以便从每个数组中只获得唯一的项目,其顺序与它们插入原始数组的顺序相同?
当前回答
这里有一个稍微不同的循环。通过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滤波器:~44k ops/slodash:30.8万次/秒对于循环:225k操作/秒
一条评论指出,我的一个设置变量导致我的循环领先于其他循环,因为它不需要初始化一个空数组来写入。我同意这一点,所以我已经将测试重写为公平的环境,并包含了一个更快的选项。
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)。
如果你想加快速度,看看迈克和丹·斯托克的答案。在经历了几乎所有可行的答案之后,这些是迄今为止所有结果中最快的。
其他回答
构建一个测试人员来检查一些面向性能的答案的速度。请随意添加更多内容。到目前为止,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的%');}
您可以合并结果并过滤重复项:
let combinedItems = [];
// items is an Array of arrays: [[1,2,3],[1,5,6],...]
items.forEach(currItems => {
if (currItems && currItems.length > 0) {
combinedItems = combinedItems.concat(currItems);
}
});
let noDuplicateItems = combinedItems.filter((item, index) => {
return !combinedItems.includes(item, index + 1);
});
可以使用新的“集”删除重复
[...new Set([...array1 ,...array2])]
编辑:
只有在项目很少的情况下,第一种解决方案才是最快的。当项目超过400项时,Set解决方案将变得最快。当有100000个项目时,它比第一个解决方案快一千倍。
考虑到只有当有很多项时,性能才是重要的,而且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%(而且写起来要长得多)(编辑:当有10万个项目时,它比任何其他方法都慢几个数量级)
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
在当今时代,使用现有的图书馆提供更简单、更优雅的内容:
import {pipe, concat, distinct} from 'iter-ops';
// our inputs:
const array1 = ['Vijendra', 'Singh'];
const array2 = ['Singh', 'Shakya'];
const i = pipe(
array1,
concat(array2), // adding array
distinct() // making it unique
);
console.log([...i]); //=> ['Vijendra', 'Singh', 'Shakya']
这两者都是高性能的,因为我们只迭代一次,而且代码非常容易阅读。
注:我是iter ops的作者。