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

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

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

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

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

---

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

引自proposal

The web has classes like DOMStringList and DOMTokenList which are array-like, and have methods named contains with the same semantics as our includes. Unfortunately, meshing with those is not web-compatible.