[].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 >

它从Array中检索slice函数。然后调用该函数，但是使用document的结果。将querySelectorAll作为this对象，而不是实际的数组。

这里发生的事情是，您调用slice()，就好像它是使用call()的NodeList函数一样。在本例中，slice()所做的是创建一个空数组，然后遍历它所运行的对象(最初是一个数组，现在是一个NodeList)，并不断将该对象的元素追加到它所创建的空数组中，最终返回该空数组。这里有一篇关于这个的文章。

编辑:

所以它以一个空数组[]开始，然后slice被用于 将调用结果转换为一个新数组?

这是不对的。[]。Slice返回一个函数对象。函数对象有一个函数call()，该函数调用将call()的第一个参数赋值给this的函数;换句话说，使函数认为它是从参数(由document.querySelectorAll('a')返回的NodeList)而不是从数组中调用的。

在21世纪20年代我们使用

[...document.querySelectorAll('.slide')]

当你想要使用map或filter，但不再需要使用forEach时，它很有用，因为forEach现在工作在document.querySelectorAll('.slide')返回的集合上

[].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 >

如何转换document.querySelectorAll('a')从一个 节点列表到常规数组?

这是我们的密码，

[].slice.call(document.querySelectorAll('a'), 0)

我们先把它拆了，

  []    // Array object
.slice // Accessing the function 'slice' present in the prototype of Array
.call // Accessing the function 'call' present in the prototype of function object(slice)
(document.querySelectorAll('a'),0) 
    // 'call' can have arguments like, (thisArg, arg1,arg2...n). 
   // So here we are passing the 'thisArg' as an array like object,
  // that is a 'nodeList'. It will be served as 'this' object inside of slice function.
 // And finally setting 'start' argument of slice as '0' and leaving the 'end' 
// argument as 'undefined'

步骤:1调用函数的执行

在内部调用，除了thisArg，其余的参数 将被追加到参数列表中。 现在函数slice将通过将其this值绑定为来调用 thisArg(类似于object的数组来自document.querySelector)和参数列表。参数start包含0

步骤:2在调用内部调用slice函数的执行

Start将赋值给变量s为0 由于end是未定义的，这个。长度将存储在e中 空数组将存储在变量a中 在做出上述设置后，将发生以下迭代 While (s < e) { a.push(这[s]); s + +; ｝ 已填满的数组a将作为结果返回。

注:为了更好地理解我们的场景，在最初的调用和切片算法中忽略了我们上下文所必需的一些步骤。