我无意中发现了这个将DOM节点列表转换为常规数组的简洁快捷方式,但我必须承认,我并不完全理解它是如何工作的:
[].slice.call(document.querySelectorAll('a'), 0)
所以它以一个空数组[]开始,然后slice用于将调用的结果转换为一个新数组?
我不明白的是电话。如何将document.querySelectorAll('a')从节点列表转换为常规数组?
我无意中发现了这个将DOM节点列表转换为常规数组的简洁快捷方式,但我必须承认,我并不完全理解它是如何工作的:
[].slice.call(document.querySelectorAll('a'), 0)
所以它以一个空数组[]开始,然后slice用于将调用的结果转换为一个新数组?
我不明白的是电话。如何将document.querySelectorAll('a')从节点列表转换为常规数组?
当前回答
[].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 >
其他回答
[].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 >
这也可能有所帮助。
片的方法
描述:
slice does not alter the original array. It returns a shallow copy of elements from the original array. Elements of the original array are copied into the returned array.slice()方法将数组部分的浅拷贝返回到从开始到结束(不包括end)选择的新数组对象中,其中start和end表示该数组中项目的索引。原始数组将不会被修改。 参见Reference/Global_Objects/Array/slice
调用方法
描述:
call()允许为不同的对象赋值和调用属于一个对象的函数/方法。
call()方法使用给定的值和单独提供的参数调用函数。 Call()将this的新值提供给函数/方法。使用call(),您可以只编写一次方法,然后在另一个对象中继承它,而不必为新对象重写方法。
参见:Reference/Global_Objects/Function/call
在21世纪20年代我们使用
[...document.querySelectorAll('.slide')]
当你想要使用map或filter,但不再需要使用forEach时,它很有用,因为forEach现在工作在document.querySelectorAll('.slide')返回的集合上
在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()将返回另一个数组作为其结果,该数组将成为您可以使用的“转换”数组。
它从Array中检索slice函数。然后调用该函数,但是使用document的结果。将querySelectorAll作为this对象,而不是实际的数组。