4

js プラグインで次のコーンを見つけました

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' )見たことがないので、実際に何をしているのか知りたいです。

4

2 に答える 2

4

querySelectorAllNodeListCSS セレクターを受け入れ、一致する要素の静的を返す DOM 要素のメソッドです。

Array.prototype.slice.callNodeListこれ (配列のように動作しますが、 のメソッドはありませんArray.prototype) を実際の配列に変換する1 つの方法です。

ブラウザのコンソールのこのページで試してみてください!

> 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?", …]
于 2013-09-30T16:29:46.257 に答える
2

配列のようなものから配列を作成します (たとえば、 、 などの名前を持つおよびlengthプロパティを持つもの)。ライブインスタンスを返すなどでよく見られます。もちろん、 のすべての機能が必要でない限り、それはライブではないリストを返すため、 では実際には必要ありません。01getElementsByTagNameNodeListquerySelectorAllArray

少し難しそうArray.prototype.slice.call(...)に見えるかもしれませんが、実際には非常に単純です。配列は object からメソッドを取得しますArray.prototype。それらの 1 つはslice、配列の一部のコピーを返すメソッドです。引数を指定しないsliceと、配列全体のコピーが返されます。しかし、トリッキーな点は、 を呼び出すときsliceに、配列のように見えるものだけで、配列で呼び出す必要がないことです。Function#callJavaScript で使用するthisと、呼び出し内にあるものを設定できます。そのため、の結果であるとArray.prototype.slice.call(resultFromQuerySelectorAll)呼び出します。次に、それらのエントリを含む配列を提供します。slicethisquerySelectorAllslice

于 2013-09-30T16:30:02.180 に答える