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 サービスをインストールして設定する方法

推薦する

MySQL 5.7.20 無料インストールバージョンの設定方法グラフィックチュートリアル

インターネット上で多くの関連チュートリアルを見てきましたが、インストール プロセスにはまだいくつかの...

MySQL: データの整合性

データ整合性は、エンティティ整合性、ドメイン整合性、参照整合性に分けられます。参照整合性:参照整合性...

Linux での MySQL 5.7.19 (tar.gz) インストール グラフィック チュートリアル

Linux で MySQL-5.7.19 バージョンをインストールするための最初のチュートリアル。す...

iframeをカプセル化するvueコンポーネントを開発する

目次1. コンポーネントの紹介2. コンポーネントの内部構造とロジック1. コード組織構造2. マッ...

VueのRender関数

目次1. ノード、ツリー、仮想DOM 2. 仮想DOM 2.1 データオブジェクトの詳細2.2 制約...

Reactのようなフレームワークをゼロから作成する

最近、インターネットで「Build your own React」という記事を見ました。著者は、シン...

Mysql 5.7.19 無料インストール バージョンで遭遇した落とし穴 (コレクション)

1. 公式ウェブサイトから 64 ビットの zip ファイルをダウンロードします。 2. インスト...

jwtを使用してノードによって生成されたトークンをどこに保存するかについての簡単な説明

A: 通常はクライアントに保存されます。 jwt または JSON Web Token は、リクエス...

MySQL スロークエリログの設定と使用方法のチュートリアル

序文MySQL スロー クエリ ログは、日常業務でよく遭遇する機能です。MySQL スロー クエリ ...

Vue の el-table は自動天井効果を実現します (固定をサポート)

目次序文実装のアイデア効果:使用:メインソースコード:序文多くのケースを見た結果、単純な観点からは、...

JavaScriptの擬似配列と配列の使い方と違い

擬似配列と配列JavaScript では、5 つのプリミティブ データ型を除き、関数を含め、その他す...

js を使用して XML オンライン エディターを作成する例

目次序文オンラインXMLエディタの必要性テクノロジー事前調査ビジュアルプログラミングVSCODEプラ...

jQueryはアコーディオン効果を実装します

この記事では、アコーディオンを実装するためのjQueryの具体的なコードを参考までに紹介します。具体...

nginx を使用して同じドメイン名で複数の Vue プロジェクトをデプロイし、リバース プロキシを使用する方法

効果現在、プロジェクトは2つ(project1、project2)あり、nginxに付属するinde...