我有两个JavaScript数组:

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

我希望输出为:

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

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

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


当前回答

这很快,可以整理任意数量的数组,并且可以处理数字和字符串。

function collate(a){ // Pass an array of arrays to collate into one array
    var h = { n: {}, s: {} };
    for (var i=0; i < a.length; i++) for (var j=0; j < a[i].length; j++)
        (typeof a[i][j] === "number" ? h.n[a[i][j]] = true : h.s[a[i][j]] = true);
    var b = Object.keys(h.n);
    for (var i=0; i< b.length; i++)
        b[i]=Number(b[i]);
    return b.concat(Object.keys(h.s));
}

> a = [ [1,2,3], [3,4,5], [1,5,6], ["spoon", "fork", "5"] ]
> collate( a )

[1, 2, 3, 4, 5, 6, "5", "spoon", "fork"]

如果你不需要区分5和“5”,那么

function collate(a){
    var h = {};
    for (i=0; i < a.length; i++) for (var j=0; j < a[i].length; j++)
        h[a[i][j]] = typeof a[i][j] === "number";
    for (i=0, b=Object.keys(h); i< b.length; i++)
        if (h[b[i]])
            b[i]=Number(b[i]);
    return b;
}
[1, 2, 3, 4, "5", 6, "spoon", "fork"]

可以。

如果你不介意(或者更愿意)所有值都以字符串结尾,那么就这样:

function collate(a){
    var h = {};
    for (var i=0; i < a.length; i++)
        for (var j=0; j < a[i].length; j++)
            h[a[i][j]] = true;
    return Object.keys(h)
}
["1", "2", "3", "4", "5", "6", "spoon", "fork"]

如果您实际上不需要数组,但只想收集唯一值并对其进行迭代,那么(在大多数浏览器(和node.js)中):

h = new Map();
for (i=0; i < a.length; i++)
    for (var j=0; j < a[i].length; j++)
        h.set(a[i][j]);

这可能更好。

其他回答

在Dojo 1.6中+

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

dojo.forEach(array3, function(item) {
    if (dojo.indexOf(unique, item) > -1) return;
    unique.push(item); 
});

使现代化

参见工作代码。

http://jsfiddle.net/UAxJa/1/

使用Lodash

我发现@GijsjanB的答案很有用,但我的数组包含具有许多属性的对象,因此我不得不使用其中一个属性来消除它们的重复。

这是我使用lodash的解决方案

userList1 = [{ id: 1 }, { id: 2 }, { id: 3 }]
userList2 = [{ id: 3 }, { id: 4 }, { id: 5 }]
// id 3 is repeated in both arrays

users = _.unionWith(userList1, userList2, function(a, b){ return a.id == b.id });

// users = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }]

作为第三个参数传递的函数有两个参数(两个元素),如果它们相等,则必须返回true。

使用Undercore.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

array1.concat(array2).filter((value, pos, arr)=>arr.indexOf(value)===pos)

这一行的优点在于性能,而且在使用数组时,通常都是链接方法,如filter、map等,因此您可以添加这一行,它将使用array1对array2进行合并和重复数据消除,而无需引用后面的一行(当您链接没有的方法时),例如:

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,这将是尊重链的唯一方式——定义一个新函数将打破它——所以我认为这样做是实现这一点的唯一方式)

这里有一个稍微不同的循环。通过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)。

如果你想加快速度,看看迈克和丹·斯托克的答案。在经历了几乎所有可行的答案之后,这些是迄今为止所有结果中最快的。