javascript - 合并两个不重复的节点列表

Question

我尝试将两个节点列表合并为一个，但是当我在一个数组中连接时，同一节点有两次。 Concat 不搜索要插入的节点是否已存在于数组中...

var firstNodelist = document.querySelectorAll("#outter, #inner");
var finalArray = new Array();

for (var i = 0; i < firstNodelist.length; i++) {

    var secondNodelist = firstNodelist[i].querySelectorAll("div");

    var firstArray = new Array();

    for (var x = 0; x < secondNodelist.length; x++) {

        firstArray.push(secondNodelist[x]);

    }

    finalArray = finalArray.concat(firstArray)

}

console.log("FINAL", finalArray);

The jsfiddle exemple

Answer 1

与其在循环中构建第二个不必要的数组，不如使用该内部循环来检查该节点是否已经在数组中(Array#indexOf 在所有现代浏览器中)并且只添加它如果不是。

var firstNodelist = document.querySelectorAll("#outter, #inner");
var finalArray = []; // `[]` rather than `new Array()`

for (var i = 0; i < firstNodelist.length; i++) {

    var secondNodelist = firstNodelist[i].querySelectorAll("div");

    for (var x = 0; x < secondNodelist.length; x++) {

        // Get this node
        var node = secondNodeList[x];

        // Is it in the array already?
        if (finalArray.indexOf(node) === -1) {
            // No, put it there
            finalArray.push(node);
        }

    }
}

console.log("FINAL", finalArray);

请务必测试您的目标环境，以确保它们具有 Array#indexOf。

---

话虽如此，但对于特定情况，有一个更好的方法:Live Example | Live Source

var finalArray = Array.prototype.slice.call(
    document.querySelectorAll("#outter div, #inner div")
);

...因为 querySelectorAll 不会多次包含同一节点，即使 #inner 在 #outter 内(或反之亦然)。 (Array.prototype.slice.call(someObject) 是从任何类似数组的对象中获取真正数组的技巧。)