我无意中发现了这个将DOM节点列表转换为常规数组的简洁快捷方式,但我必须承认,我并不完全理解它是如何工作的:
[].slice.call(document.querySelectorAll('a'), 0)
所以它以一个空数组[]开始,然后slice用于将调用的结果转换为一个新数组?
我不明白的是电话。如何将document.querySelectorAll('a')从节点列表转换为常规数组?
我无意中发现了这个将DOM节点列表转换为常规数组的简洁快捷方式,但我必须承认,我并不完全理解它是如何工作的:
[].slice.call(document.querySelectorAll('a'), 0)
所以它以一个空数组[]开始,然后slice用于将调用的结果转换为一个新数组?
我不明白的是电话。如何将document.querySelectorAll('a')从节点列表转换为常规数组?
当前回答
使用array . From (element.children)或array . From ({length: 5})创建数组
其他回答
它是一种将类数组对象转换为实际数组的技术。
这些对象包括:
函数中的参数 NodeList(记住它们的内容可以在获取后更改!所以将它们转换为数组是一种冻结它们的方法) jQuery集合,又名jQuery对象(一些文档:API,类型,学习)
这有很多用途,例如对象是通过引用传递的,而数组是通过值传递的。
另外,注意第一个参数0可以省略,详细解释在这里。
为了完整起见,还有jQuery.makeArray()。
它从Array中检索slice函数。然后调用该函数,但是使用document的结果。将querySelectorAll作为this对象,而不是实际的数组。
在21世纪20年代我们使用
[...document.querySelectorAll('.slide')]
当你想要使用map或filter,但不再需要使用forEach时,它很有用,因为forEach现在工作在document.querySelectorAll('.slide')返回的集合上
这里发生的事情是,您调用slice(),就好像它是使用call()的NodeList函数一样。在本例中,slice()所做的是创建一个空数组,然后遍历它所运行的对象(最初是一个数组,现在是一个NodeList),并不断将该对象的元素追加到它所创建的空数组中,最终返回该空数组。这里有一篇关于这个的文章。
编辑:
所以它以一个空数组[]开始,然后slice被用于 将调用结果转换为一个新数组?
这是不对的。[]。Slice返回一个函数对象。函数对象有一个函数call(),该函数调用将call()的第一个参数赋值给this的函数;换句话说,使函数认为它是从参数(由document.querySelectorAll('a')返回的NodeList)而不是从数组中调用的。
[].slice.call(document.querySelectorAll('.slide'));
querySelectorAll()方法返回文档中与指定选择器匹配的所有元素。 call()方法使用给定的值和单独提供的参数调用函数。 slice()方法将数组中选定的元素作为一个新的数组对象返回。
所以这一行返回数组[object HTMLDivElement]。这里有六个div,类名为“slide”,因此数组长度将为6。
var arraylist = [].slice.call(document.querySelectorAll('.slide')); console.log (arraylist); < div class = "幻灯片”> < div class = "幻灯片”> 第一个slider1 < / div > < div class = "幻灯片”> 第一个slider2 < / div > < div class = "幻灯片”> 第一个slider3 < / div > < div class = "幻灯片”> 第一个slider4 < / div > < div class = "幻灯片”> 第一个slider5 < / div > < div class = "幻灯片”> 第一个slider6 < / div > < / div >