JSオブジェクトの走査順序の詳細な説明

JSオブジェクトの走査順序の詳細な説明

JavaScript ではオブジェクトを走査する順序は固定されていないと聞いたことがある人もいるかもしれません。実際のところ、この記述は特に正確ではありません。

オブジェクトには、トラバーサル順序に関する独自のルール セットがあります。これらのルールでは、オブジェクトのトラバーサル順序は要素が挿入される順序によって影響を受けますが、要素が挿入される順序によって完全に影響を受けるわけではありません。要素が挿入される順序でトラバースする必要があるシナリオの場合は、Map の使用を検討してください。
オブジェクトをトラバースする方法は多数あります。よく for...in を使用します。さらに、次の方法もあります。

  • オブジェクト.キー
  • オブジェクト.エントリ
  • オブジェクト.getOwnerProPertyNames
  • 反映する.ownKeys
  • ......

上に挙げたメソッドはすべて、オブジェクトを走査するための同じルールに従います。実際のトラバーサル ルールは、キー値のタイプによって異なります。
オブジェクトでは、キー値が「1」や「200」のような正の整数形式の文字列である場合。 トラバーサル順序はキー値のサイズに従って配置されます。
たとえば、次のような例を見てみましょう。

定数オブジェクト = {}

obj['10'] = 'a';
obj['9'] = 'b';
obj[8] = 'c';
obj[7] = 'd';

console.log(Object.keys(obj)) // ["7", "8", "9", "10"]

最終的なトラバーサル順序は挿入順序を完全に無視します。また、オブジェクトでは、属性を追加するときのインデックス値が Number 型であっても、最終結果は暗黙的に文字列に変換されることに注意してください。

配列もオブジェクトの一種なので、上記のルールに従います。あるいは、配列との互換性のため、上記の動作になるのかもしれません。さらに、上記のルールを通じて、配列のようなオブジェクト(キー値が正の整数であり、長さ属性を持つ)のトラバースもインデックス順であると推測することもできます。
さらに、キー値が正の整数に変換できない文字列の場合、これには負の数に変換できる文字列 (「-1」など)、小数文字列 (「1.0」など)、およびその他の文字列が含まれます。それらのトラバース順序はより直感的であり、つまり、オブジェクトが挿入される順序です。

定数obj2 = {}

obj2['1.1'] = 'a';
obj2['1.0'] = 'b';
obj2['-1'] = 'c';
obj2['ジャック'] = 'd'

console.log(Object.keys(obj2)); // ["1.1", "1.0", "-1", "jack"]

実際、オブジェクトのインデックス値の型は、文字列だけでなく、シンボル型にもなります。シンボル タイプの場合、そのトラバーサル順序は、オブジェクトが挿入される順序に基づきます。

オブジェクトが上記の状況をすべて組み合わせる場合、つまり、すべてのタイプ (さまざまな形式の文字列、シンボル タイプ) がオブジェクトのインデックス値に表示される場合は、次のようになります。

  • まず、上で述べた正の整数に関する規則に従って、正の整数部分を走査します。
  • 残りの文字列を次に挿入される順序で走査します
  • 最後に、挿入順にシンボルタイプを走査します。

ここまでで、オブジェクトのトラバース順序について皆さんは十分に理解できたと思います。最後に、もう 1 つ注目すべき点があります。それは、for...in のトラバース順序です。

当初は、 for...in のトラバーサル順序に関する統一された標準はなく、ブラウザメーカーが独自の好みに応じて for...in のトラバーサル順序を設定していました。トラバーサル順序に要件があり、古いブラウザバージョンとの互換性を維持したい場合は、これを使用しないことをお勧めします。その後、ES 2019 の提案によりこの現象は標準化され、現在では for...in の順序も上記の規則に従うようになりました。

上記のルールに従いますが、for...in はプロトタイプのプロパティも反復処理します。したがって、for...in の変数要素のルールは、まず、上で説明したオブジェクト トラバーサル ルールに従って変数オブジェクト自体をトラバースし、次にこのルールに従ってオブジェクトのプロトタイプをトラバースし、トラバーサルが先頭に到達するまでこれを繰り返します。

for...in に関する最後の注記以外には何もありません。実際、内容はあまりありません。

JS オブジェクトのトラバーサルの順序に関する詳細な説明はこれで終わりです。JS オブジェクトのトラバーサルの順序に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • データページング効果を実現する js オブジェクト
  • JS オブジェクト配列の重複排除のための 3 つの方法の例と比較
  • プレーンな JS オブジェクトの代わりに Map を使用する場合
  • JS オブジェクトのコピー (ディープ コピーとシャロー コピー)
  • js オブジェクト属性名でキャメルケースを下線に変換するサンプルコード
  • jsオブジェクトの読み取り速度の詳細な例

<<:  MySQL 5.7 をバイナリモードでインストールし、Linux でシステムを最適化する手順

>>:  Ubuntu 18.04 で SSH サービスをインストールして設定する方法

推薦する

Docker 実行時にユーザーとグループを管理する方法

Docker はプロセスを中核としてシステムリソースを分離する管理ツールです。分離は、オペレーティン...

Linuxはデュアルネットワークカードボンドとドライバーインターフェースを使用する

債券とは何かNIC ボンドは、実稼働シナリオでよく使用されるテクノロジーです。複数の NIC を 1...

JavaScript 配列重複排除ソリューション

目次方法1: set: データ型ではなくデータ構造であり、メンバーは一意である方法2: オブジェクト...

Vueのフロントエンドとバックエンドのポートの不一致の問題を解決する

Vue のフロントエンドとバックエンドのポートが一致していませんconfig index.jsファイ...

Linux での syslogd および syslog.conf ファイルの解釈

1: syslog.conf の概要異なるタイプの Unix の場合、標準の UnixLog システ...

ova ファイルを VMware にインポートする際の落とし穴の概要

問題の原因ご存知のとおり、すべてのネットワーク動作は対応するネットワークトラフィックを生成し、すべて...

Vueでショッピングカートのすべての機能を実装する簡単な方法

主な機能は次のとおりです。製品情報を追加する製品情報を変更する単一の製品を削除する複数の製品を削除す...

ウェブサイトをIE6、7、8、9の古いバージョンに対応させるための3つのソリューション

Microsoft は後からブラウザの研究開発に力を入れてきましたが、実際のところ、最新の IE ブ...

Linux の vsftpd サービス構成の簡単な分析 (匿名、ユーザー、仮想ユーザー)

vsftpd の概要vsftpd は「very secure FTP daemon」の略称で、セキ...

JavaScriptのURLオブジェクトとは何かについて話しましょう

目次概要ハッシュプロパティホストプロパティホスト名属性Href属性起源のプロパティユーザー名とパスワ...

TypeScriptのインストールと使用方法と基本的なデータ型

最初のステップはTypeScriptをグローバルにインストールすることですnpmを使用してインストー...

EF (Entity Framework) の挿入または更新データ エラーの解決方法

エラー メッセージ:ストアの更新、挿入、または削除ステートメントが予期しない行数 (0) に影響を与...

CSS ピクセルとさまざまなモバイル画面適応の問題に対する解決策

ピクセル解決通常、モニター解像度と呼ばれるものは、実際にはモニターの物理的な解像度ではなく、デスクト...

CSS3 カスタムスクロールバースタイル::webkit-scrollbar サンプルコード詳細説明

Windows のデフォルトのスクロール バー スタイルは見苦しく、プロジェクト内でスクロール バー...

CSS スタイルの競合を解決するいくつかの方法 (要約)

1. セレクターを調整するコンビネータを使用すると、セレクターの説明をより正確に記述できます (C...