javascript - Array.prototype.slice.call() 和 wrapper.querySelectorAll() 有什么作用？

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() & 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?", …]