为什么.includes（）不能与.classList一起使用？

Question

element.classList返回一个类数组，我的understanding .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

引用

  

网络上有DOMStringList和DOMTokenList等课程   它们是类似数组的，并且具有名为contains的方法   与includes相同的语义。不幸的是，与那些啮合   与网络兼容。

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

  

包含（字符串）

     

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

Answer 3

element.classList 返回 DOMTokenList。这是来自 Firefox 控制台的示例。

并且 .includes() 作为 Array.prototype 中定义的方法仅适用于数组对象。

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