我无意中发现了这个将DOM节点列表转换为常规数组的简洁快捷方式,但我必须承认,我并不完全理解它是如何工作的:

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

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

我不明白的是电话。如何将document.querySelectorAll('a')从节点列表转换为常规数组?


当前回答

在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()将返回另一个数组作为其结果,该数组将成为您可以使用的“转换”数组。

其他回答

它是一种将类数组对象转换为实际数组的技术。

这些对象包括:

函数中的参数 NodeList(记住它们的内容可以在获取后更改!所以将它们转换为数组是一种冻结它们的方法) jQuery集合,又名jQuery对象(一些文档:API,类型,学习)

这有很多用途,例如对象是通过引用传递的,而数组是通过值传递的。

另外,注意第一个参数0可以省略,详细解释在这里。

为了完整起见,还有jQuery.makeArray()。

这也可能有所帮助。

片的方法

描述:

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

使用array . From (element.children)或array . From ({length: 5})创建数组

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

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

编辑:

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

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