为什么.classList不能与.includes()一起使用？

Question

element.classList 返回一个类数组，据我所知 .includes() 用于数组操作，因此我不明白为什么这样不起作用，我知道可以使用 .contains() 操作 classList，但我很好奇为什么 .includes() 不起作用。

两者都是数组，例如如果我键入以下内容，则无法正常工作：

var li=document.createElement('li');
li.classList.add('main-nav');
li.classList.includes('main-nav');

但这将会

var ary=['a','b','c'];
ary.includes('a');                               

- Brandon

---

你正在寻找 包含。 - evolutionxbox

Answer 1

Element.classList 是一个 DOMTokenList 对象，但在控制台中打印出来的是类似于数组的形式。但如果你在 Firefox 上尝试，它会返回 DOMTokenList["main-nav"]

而 includes 是 Array 的一个方法，而不是 DOMTokenList。

这就是为什么你会遇到 li.classList.includes is not a function 的情况。

你可以使用 ES2015 spread operator 将其转换为数组。

[...li.classList].includes('main-nav')

或者，您也可以使用Array.from将其转换为数组。

Array.from(li.classList).includes('main-nav')

或者，您可以使用DOMTokenList.contains方法，这是一个无需麻烦的替代方案。

li.classList.contains('main-nav')

---

为什么它被声明为includes而不是has或contains？（感谢@akinuri）

引用自proposal

网络中有像DOMStringList和DOMTokenList这样的类，它们类似于数组，并且具有命名为contains的方法，其语义与我们的includes相同。不幸的是，与它们融合不兼容。

- choz

---

空格分隔的字符串？不是 DOM Token List 吗？ - evolutionxbox

@evolutionxbox 是的，没错。我只是事后加了更多的解释。不过，感谢你指出这一点 :)。 - choz

但是它们（include和contain）不是意思差不多吗？那么在DOMTokenList上使用contains，在Array上使用includes的理由是什么？这有点令人困惑。我有时会忘记哪个是哪个，然后不得不查一下。 - akinuri

@akinuri，谢谢你让我对此产生了好奇心。我找到了相关的参考资料并更新了我的答案。 - choz

Answer 2

使用 includes 方法无法正常工作是因为 classList 不是一个数组，而是一个类似数组的对象。在这种情况下，它是一个DOM Token List。

您可以通过以下方法将类似数组的对象转换为数组：

var liClasses = [].slice.apply(li.classList);

或者

var liClasses = [...li.classList]; // es2015 syntax

---

否则，.includes() 应该是 .contains()。请参见https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

li.classList.contains('main-nav')

contains( String )

检查元素的class属性中是否存在指定的类值。

- evolutionxbox

---

@cashwrap，那是不可能的。这个答案被编辑的时间正是另一个答案最初发布的时间。--- 他们的答案：“2016年6月1日10:59回答”，我的答案：“2016年6月1日10:59编辑”。 - evolutionxbox

你说得对，确实有很多相似之处。另一个答案更全面，但这个答案绝不是抄袭。此外，后来的编辑距离这个答案已经超过两年了。-- 无论如何，感谢你的道歉。 - evolutionxbox

Answer 3

element.classList 返回一个 DOMTokenList。这里有一个来自 Firefox 控制台的例子。

.includes() 是在 Array.prototype 中定义的方法，只能用于数组对象。

DOMTokenList有.contains()方法来执行该功能。

- finiteEffort

---

此答案有效。 - Aurovrata