232

DOM NodeList を通常の配列に変換するためのこの便利なショートカットに出くわしましたが、それがどのように機能するかを完全には理解していないことを認めなければなりません。

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

[]つまり、空の配列で始まり、結果を新しい配列sliceに変換するために使用されます。call

私が理解していないビットはcall. それはどのようdocument.querySelectorAll('a')に NodeList から通常の配列に変換されますか?

4

9 に答える 9

174

ここで起こっていることは、それがusingslice()の関数であるかのように呼び出すことです。この場合、空の配列を作成し、それが実行されているオブジェクト (元は配列、現在は) を反復処理し、そのオブジェクトの要素を作成した空の配列に追加し続けます。これは最終的に返されます。これに関する記事はこちらです。NodeListcall()slice()NodeList

編集：

つまり、空の配列 [] で始まり、スライスを使用して呼び出しの結果を新しい配列に変換します。

それは正しくありません。[].slice関数オブジェクトを返します。関数オブジェクトには、 tocall()の最初のパラメーターを割り当てる関数を呼び出す関数があります。つまり、配列からではなく、パラメーター (によって返される)から呼び出されていると関数に思わせます。call()thisNodeListdocument.querySelectorAll('a')

于 2010-01-24T03:00:46.730 に答える
147

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'

関数オブジェクトのcallandapplyメソッド（JavaScriptでは、関数もオブジェクトです）を使用すると、これを行うことができます。したがって、コードでは、NodeListが配列のsliceメソッドを借用していると言えます。.slice()結果として別の配列を返します。これは、使用できる「変換された」配列になります。

于 2010-01-24T04:01:11.370 に答える
32

sliceから関数を取得しますArray。次に、その関数を呼び出しますが、実際の配列ではなくオブジェクトdocument.querySelectorAllとしての結果を使用します。this

于 2010-01-24T03:01:30.940 に答える
21

配列のようなオブジェクトを実数の配列に変換する手法です。

これらのオブジェクトには次のものがあります。

  • arguments関数で
  • NodeList (コンテンツは取得後に変更される可能性があることに注意してください! したがって、それらを配列に変換することは、それらをフリーズする方法です)
  • jQuery コレクション、別名 jQuery オブジェクト (一部のドキュメント: API、type、learn )

これは多くの目的に役立ちます。たとえば、オブジェクトは参照によって渡されますが、配列は値によって渡されます。

また、最初の引数0は省略できることに注意してください。詳細については、こちらを参照してください。

完全を期すために、jQuery.makeArray()もあります。

于 2015-04-09T04:42:36.890 に答える
0

2020年代に使用する

[...document.querySelectorAll('.slide')]

マップまたはフィルターを使用したいが、 forEach が返されたコレクションで機能するようになったため、 forEach を使用する必要がなくなった場合に役立ちます。document.querySelectorAll('.slide')

于 2022-02-15T07:47:28.747 に答える