为什么.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"]

并且,包括一个方法的阵列,而不是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的方法,其语义与我们的包含相同.不幸的是,与它们的网格划分不是网络兼容的.

Answer 2

原因includes不起作用的原因是不是classList数组,而是数组类对象.在这种情况下,它是一个DOM Token List.

您可以使用以下命令将类似数组的对象转换为数组:

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

要么

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

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

包含(字符串)

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