javascript - Internet Explorer 11 上的数组过滤

Question

我有一个列表，该列表会根据某些部分是否可用而动态更新。

我正在根据数据属性创建两个数组并比较它们的差异。换句话说，在我的列表中，如果没有与部分字母匹配的数据字母，那么就给它一个背景。

它在 Internet Explorer 上运行良好。在 IE11 中，它们都是红色背景，我不知道为什么。您可以在此处查看实际效果:

$(function() {
	var attrFilterItemArray = new Array();
  $(".atoz li a").each(function() {
    var attrItem = $(this).data("letter");
    attrFilterItemArray.push(attrItem)
  });

  var attrTitleArray = new Array();
  $(".letter-list__authors-titles, .letter-grid__authors-titles").each(function() {
    var attrTitle = $(this).data("title");
    attrTitleArray.push(attrTitle)
  });

  var compareTitleFilter = attrFilterItemArray.filter(function(n) {
    return !this.has(n)
  }, new Set(attrTitleArray));

  for (var i = 0; i < compareTitleFilter.length; i++) {
    $(".atoz li a").each(function() {
      var letter = $(this).data("letter");
      if (letter == compareTitleFilter[i]) {
        $(this, "#filter li a").addClass("filter-item--disabled").parent().addClass("filter-item--disabled").addClass("title-unavailable");
      }
    });
  }
});

.filter-item--disabled {
  background-color: red;
}

.alphabet {
  font-size: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="filter" class="atoz letter-list__author-nav">
    <li><a data-letter="#" href="#" class="filter-item">#</a></li>
    <li><a data-letter="a" href="#" class="filter-item">a</a></li>
    <li><a data-letter="b" href="#" class="filter-item">b</a></li>
    <li><a data-letter="c" href="#" class="filter-item">c</a></li>
</ul>

<section data-type="title" data-title="#" class="letter-list__authors-titles">
<span class="alphabet">#</span>
</section>
<section data-type="title" data-title="a" class="letter-list__authors-titles">
<span class="alphabet">#</span>
</section>
<section data-type="title" data-title="c" class="letter-list__authors-titles">
<span class="alphabet">#</span>
</section>

在我的研究中，我发现 Set() is not supported in IE.我将那部分更改为:

  var compareTitleFilter = attrFilterItemArray.filter(function(n) {
    return !attrTitleArray.includes(n);
  });

但是禁用类永远不会被添加。

在 fiddle 中可以看到。但它仍然不适用于 IE。我找不到任何可行的替代品或 polyfill 来帮助完成这项工作。

如何让这个数组/数据属性过滤器在 IE 中工作？

Answer 1

Array.prototype.includes() 不受任何版本的 IE 支持。参见 compatibility table .您可以使用 indexOf 测试旧方法:

var compareTitleFilter = attrFilterItemArray.filter(function(n) {
    return attrTitleArray.indexOf(n) === -1;
});