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

Question

element.classList 返回一个类数组，我的 understanding .includes() 与数组一起使用，所以我不明白为什么这不起作用，我知道我可以使用 .contains() with 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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Element.classList 是一个 DOMTokenList 对象，尽管它在控制台中打印类似数组。但是，如果您尝试使用 Firefox，它会返回 DOMTokenList["main-nav"]

并且， includes 是 Array 而不是 DOMTokenList 的 方法。

这就是为什么在您的情况下预计会遇到 li.classList.includes is not a function 。

您可以使用 ES2015 扩展运算符 将其转换为数组。

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

或者，您可以使用 DOMTokenList.contains 方法。

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

---

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

引用 提案

Web 有类似数组的 DOMStringList 和 DOMTokenList 类，并且有名为 contains 的方法，其语义与我们的 includes 相同。不幸的是，与它们的啮合与网络不兼容。

原文由 choz 发布，翻译遵循 CC BY-SA 4.0 许可协议

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')

包含（字符串）

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

原文由 evolutionxbox 发布，翻译遵循 CC BY-SA 3.0 许可协议