我无意中发现了这个将DOM节点列表转换为常规数组的简洁快捷方式,但我必须承认,我并不完全理解它是如何工作的:
[].slice.call(document.querySelectorAll('a'), 0)
所以它以一个空数组[]开始,然后slice用于将调用的结果转换为一个新数组?
我不明白的是电话。如何将document.querySelectorAll('a')从节点列表转换为常规数组?
我无意中发现了这个将DOM节点列表转换为常规数组的简洁快捷方式,但我必须承认,我并不完全理解它是如何工作的:
[].slice.call(document.querySelectorAll('a'), 0)
所以它以一个空数组[]开始,然后slice用于将调用的结果转换为一个新数组?
我不明白的是电话。如何将document.querySelectorAll('a')从节点列表转换为常规数组?
当前回答
它是一种将类数组对象转换为实际数组的技术。
这些对象包括:
函数中的参数 NodeList(记住它们的内容可以在获取后更改!所以将它们转换为数组是一种冻结它们的方法) jQuery集合,又名jQuery对象(一些文档:API,类型,学习)
这有很多用途,例如对象是通过引用传递的,而数组是通过值传递的。
另外,注意第一个参数0可以省略,详细解释在这里。
为了完整起见,还有jQuery.makeArray()。
其他回答
使用array . From (element.children)或array . From ({length: 5})创建数组
[].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将作为结果返回。
注:为了更好地理解我们的场景,在最初的调用和切片算法中忽略了我们上下文所必需的一些步骤。
它是一种将类数组对象转换为实际数组的技术。
这些对象包括:
函数中的参数 NodeList(记住它们的内容可以在获取后更改!所以将它们转换为数组是一种冻结它们的方法) jQuery集合,又名jQuery对象(一些文档:API,类型,学习)
这有很多用途,例如对象是通过引用传递的,而数组是通过值传递的。
另外,注意第一个参数0可以省略,详细解释在这里。
为了完整起见,还有jQuery.makeArray()。
在JavaScript中,一个对象的方法可以在运行时绑定到另一个对象。简而言之,javascript允许一个对象“借用”另一个对象的方法:
object1 = {
name: 'Frank',
greet() {
alert(`Hello ${this.name}`);
}
};
object2 = {
name: 'Andy'
};
// Note that object2 has no greet method,
// but we may "borrow" from object1:
object1.greet.call(object2); // Will show an alert with 'Hello Andy'
函数对象的调用和应用方法(在JavaScript中,函数也是对象)允许您这样做。因此,在您的代码中,您可以说NodeList正在借用数组的slice方法。.slice()将返回另一个数组作为其结果,该数组将成为您可以使用的“转换”数组。