如何從JavaScript數組中刪除重復項

Question

以下兩行出現在頁面的不同位置：

Line 1: <span class="specLink"><a title="Part A" href="/page1.aspx">Part A</a></span>
Line 2: <span class="specLink"><a title="Part A" href="/page1.aspx">Part A</a></span>

我當前正在做的是為每個specLink類錨添加並將其添加到另一個DIV：

<div class="addSpecialties">
    //add those links in this DIV
</div>

因此，現在有了Javascript，結果如下：

<div class="addSpecialties">
    <a title="Part A" href="/page1.aspx">Part A</a>
    <a title="Part A" href="/page1.aspx">Part A</a>
</div>

但是，我想顯示的是（只是其中之一，因為它們具有重復性）：

<div class="addSpecialties">
    <a title="Part A" href="/page1.aspx">Part A</a>
</div>

如何修改代碼，使其僅出現一次.specLink a 。

Answer 1

問題從JavaScript數組中刪除重復項包含從數組中刪除重復項的完整方法列表。 例如，一種簡單但幼稚的方法是

function removeDuplicateElements(array) {
  return array.filter(function (item, index) {
    return array.indexOf(item) === index;
  });
}

但是， 它對您不起作用 。 該功能不會刪除您的任何元素。

這是因為對象是通過引用進行比較的，即使您的元素看起來相同，它們實際上也是不同的實體。 因此，上面的代碼將不會檢測到任何重復項。

您想要的是對象之間的某種“松散”相等性。 一般來說，這並不簡單 。

但是由於您只處理節點 ，所以有一個完美的解決方案： isEqualNode

function removeDuplicateNodes(array) {
  return array.filter(function (item, index) {
    for(var i=0; i<index; ++i)
      if(item.isEqualNode(array[i]))
        return false;
    return true;
  });
}

看到不同：

var el1 = document.createElement('div'),
    el2 = el1.cloneNode(true);
removeDuplicateElements([el1, el2]); // [el1, el2], because el1 !== el2
removeDuplicateNodes([el1, el2]); // [el1], because el1.isEqualNode(el2)

Answer 2

如果您熟悉lodash，則uniq函數聽起來像您要找的東西。

_.uniq([2, 1, 2]);
// → [2, 1]

// isSorted = true
_.uniq([1, 1, 2], true);
// → [1, 2]

https://lodash.com/docs#uniq

Answer 3

您必須返回'true'保留元素，並返回'false'除去元素。 您的“ removeDuplicateElements”函數返回false，因此在執行時，它將刪除數組中的每個元素。 按照@gnerkus的建議，修改您的removeDuplicateElements（）函數以返回以下內容：

return array.indexOf(item) === index;

Answer 4

這是一個功能，女巫從您的div中刪除重復a元素

function removeDuplicateLinks() {
    var div                 = document.getElementsByClassName('addSpecialties')[0];
    var specialities        =  div.children;
    var uniqueSpecialities  = [];

    for (var i = 0; i < specialities.length; i++) {
        var elem = specialities[i];

        if (elem.nodeName === 'A') {
            var title = specialities[i].title;

            if (uniqueSpecialities.indexOf(title) === -1) {
                uniqueSpecialities.push(title);
            } else {
                div.removeChild(elem);
                i--;
            }
        }
    }
}

 function removeDuplicateLinks() { var div = document.getElementsByClassName('addSpecialties')[0]; var specialities = div.children; var uniqueSpecialities = []; for (var i = 0; i < specialities.length; i++) { var elem = specialities[i]; if (elem.nodeName === 'A') { var title = specialities[i].title; if (uniqueSpecialities.indexOf(title) === -1) { uniqueSpecialities.push(title); } else { div.removeChild(elem); i--; } } } } 

 .addSpecialties a { display: block; } 

 <button onclick="removeDuplicateLinks()">Remove duplicate links</button> <div class="addSpecialties"> <a title="Part A" href="#">Part A</a> <a title="Part A" href="#">Part A</a> <a title="Part A" href="#">Part A</a> <a title="Part A" href="#">Part A</a> <a title="Part B" href="#">Part B</a> <a title="Part A" href="#">Part A</a> <a title="Part B" href="#">Part B</a> <a title="Part A" href="#">Part A</a> <a title="Part B" href="#">Part B</a> <a title="Part A" href="#">Part A</a> <a title="Part C" href="#">Part C</a> <a title="Part C" href="#">Part C</a> </div> 

Answer 5

您需要返回過濾器的結果：

function removeDuplicateElements(array) {
        return array.filter(function (item, index) {
            return array.indexOf(item) === index;
        });
    }