Question

我在js插件中找到了以下的cone

var container = document.getElementById( 'vs-container' ),
wrapper = container.querySelector( 'div.vs-wrapper' ),
sections = Array.prototype.slice.call( wrapper.querySelectorAll( 'section' ) ),
links = Array.prototype.slice.call( container.querySelectorAll( 'header.vs-header > ul.vs-nav > li' ) );

我无法理解Array.prototype.slice.call()＆amp; wrapper.querySelectorAll( 'section' )在上面的代码中执行。我以前没见过它们，所以我想知道它们到底做了什么。

Answer 1

querySelectorAll是DOM元素上的一个方法，它接受一个CSS选择器并返回匹配元素的静态NodeList。

Array.prototype.slice.call是将NodeList（其作用类似于数组，但没有Array.prototype中的方法）转换为实数数组的一种方法。

在浏览器的控制台中尝试使用此页面！

> var headers = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
undefined
> headers.map(function(el) { return el.textContent; })
TypeError: Object #<NodeList> has no method 'map'
> headers = Array.prototype.slice.call(headers);
…
> headers.map(function(el) { return el.textContent; })
["What does Array.prototype.slice.call() & wrapper.querySelectorAll() do?", …]

Answer 2

它从任何类似数组创建一个数组（例如，具有length的数组和名称为0，1等的属性。你会看到很多getElementsByTagName等等，它会返回实时NodeList个实例。使用querySelectorAll并不是必需的，因为它会返回非实时列表，除非您想要Array的所有功能。

Array.prototype.slice.call(...)看起来有点令人生畏，但实际上很简单：数组从对象Array.prototype获取方法。其中之一是slice方法，它返回数组的一部分副本。如果您没有给slice任何参数，它将返回整个数组的副本。但棘手的是，当你调用slice时，你不必在数组上调用它，只是看起来像数组的东西。在JavaScript中使用Function#call时，您可以设置调用中的this。因此，Array.prototype.slice.call(resultFromQuerySelectorAll)调用slice，this为querySelectorAll的结果; slice然后故意给你一个包含这些条目的数组。

Array.prototype.slice.call（）＆amp;是什么wrapper.querySelectorAll（）呢？

2 个答案: