如何从 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

问题Remove Duplicates from JavaScript Array 包含从数组中删除重复项的完整方法列表。例如，一个简单但幼稚的方法是

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

但是，它对您不起作用。该函数不会删除您的任何元素。

这是因为对象是通过引用进行比较的，即使您的元素看起来相同，它们实际上也是不同的实体。所以上面的代码不会检测到任何重复。

您想要的是对象之间的某种“松散”平等。 That is not simple in general.

但既然你只是dealing with nodes，有一个完美的解决方案：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;
        });
    }