JavaScript クラス配列の詳細な理解

js 配列はどこでも使用されているため、おそらく誰もがよく知っているでしょうが、配列クラス (疑似配列とも呼ばれます) と呼ばれる「双子の兄弟」があります。これを知っている人もいれば、知らない人もいるでしょう。今日はこれについて見てみましょう。

配列のようなものとは何か

名前が示すように、これは配列のように見えるものですが、配列ではありません。それで、それは何でしょうか? 実際には、それはオブジェクトであり、配列のように見えるオブジェクトです。

配列との違い

クラス配列と配列の違いは何ですか?
1. すべて長さ属性を持つ
2. クラス配列はforループで走査することもでき、一部のクラス配列はfor ofで走査することもできる。
3. クラス配列には配列プロトタイプ メソッドがないため、クラス配列は関連する配列メソッド (push、slice、concat など) を呼び出すことができません。

配列の種類は何ですか?

共通クラス配列は

• 関数の引数
• getElementsByTagName、getElementsByClassName、getElementsByName などによって取得される DOM リスト (HTMLCollection とも呼ばれます)。
• querySelectorAll() メソッドによって取得された NodeList ノード リスト
  

次に、これら 3 種類の配列を見てみましょう。

議論

arguments は JavaScript のキーワードです。特に関数のパラメータ セットを指します。これには、関数のすべてのパラメータとその他のプロパティが含まれます。定義する必要はなく、関数本体で直接使用できます。

関数引数(a, b, c) {
	console.log(引数)
	console.log(引数の種類)
	console.log({}.toString.call(引数))
}

引数('a', 'b', 'c')

出力を見てみましょう

arguments にはすべてのパラメータが含まれており、長さ属性があることがわかります。また、その型はオブジェクトであり、文字列に変換されると、Arguments オブジェクトを表すオブジェクト Arguments になることもわかります。同時に、属性calleeも持っていることがわかります。この属性の値は、定義した関数本体のようですので、出力して確認してみましょう。

関数引数(a, b, c) {
	console.log(引数.呼び出し先)
}

引数('a', 'b', 'c')

ご覧のとおり、出力はまさに関数そのものです。このプロパティは自分自身を表すため、一度呼び出されると、スタックがオーバーフローするまで自分自身を呼び出し続け、無限ループに入るため、気軽に呼び出さないでください。このような

関数の引数 (a, b, c) {
 コンソールログ(123)
 引数.callee()
}

引数('a', 'b', 'c')

DOM リスト (HTMLCollection)

このカテゴリは、getElementsByTagName または getElementsByClassName または getElementsByName を通じて取得された DOM リストのコレクションを指します。

<div>今日は天気があまり良くありません</div>
<div>雨が降っているから</div>
<スクリプト>
 var domList = document.getElementsByTagName('div')
 コンソールログ(domList)
 console.log(domList のタイプ)
 コンソールログ({}.toString.call(domList))
</スクリプト>

domList にも length 属性があることがわかります。そして、文字列に変換された後は、HTMLCollection オブジェクトになります。 HTMLCollectionオブジェクトを表します

ノードリスト

document.querySelectorAll() を通じて取得されたノードのコレクション

<div class="abc">今日は天気があまり良くありません</div>
<div class="abc">雨が降るから</div>
<スクリプト>
 var ノードリスト = document.querySelectorAll('div')
 コンソール.log(ノードリスト)
 console.log(ノードリストのタイプ)
 コンソールログ({}.toString.call(nodeList))
</スクリプト>

nodeList にも length 属性があり、文字列に変換された後は NodeList オブジェクトを表すオブジェクト NodeList であることがわかります。このオブジェクトは Iterator インターフェース仕様に準拠したオブジェクトなので、for...of で走査できます (ここでは Iterator について説明しません。Iterator が何であるかは自分で調べてください)

特徴

配列にはプロトタイプメソッドはありませんが、配列が何らかの処理を行うために配列メソッドを呼び出す必要がある場合は、次のように実行できます。

• メソッドを借用するにはcallとapplyを使用し、配列のそれぞれのメソッドを借用します。
• 配列のようなオブジェクトを配列に変換します。次に配列メソッドを呼び出します

電話で借用申請する方法

実際、このメソッドはすでに上で使用しています。クラス配列を文字列に変換するときに、上記のオブジェクトの toString() メソッドを借用しましたか?

もう少し挙げてみましょう

関数引数(a, b, c) {
 Array.prototype.push.call(引数、'123')
 console.log(引数)
 Array.prototype.splice.call(引数, 0, 1)
 console.log(引数)
 Array.prototype.unshift.apply(引数、[1,2,3])
 console.log(引数)
}

引数('a', 'b', 'c')

配列のような配列

クラス配列を配列に変換した後は、それぞれの配列メソッドを自由に呼び出すことができます。では、クラス配列を配列に変換するにはどうすればよいでしょうか。

いくつかの配列メソッドを使用して新しい配列を生成することができます

関数引数(a, b, c) {
 arr = Array.prototype.slice.call(引数) とします。
 コンソールログ(arr)
 arr = Array.prototype.concat.apply([], 引数)
 コンソールログ(arr)
}

引数('a', 'b', 'c')

ES6の新しいメソッドを使用して配列に変換する

ES6 では、クラス配列を配列に変換できる新しい Array.from メソッドが追加されました。配列のようなオブジェクトを配列内で直接展開するためのスプレッド演算子も提供されています。

関数引数(a, b, c) {
 arr = Array.from(引数) とします。
 コンソールログ(arr)
 arr = [...引数]
 コンソールログ(arr)
}

引数('a', 'b', 'c')

さて、クラス配列については以上です。ぜひ一緒に議論しましょう。

要約する

これで、JavaScript クラス配列に関するこの記事は終了です。JavaScript クラス配列に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。