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 をよろしくお願いいたします。

以下もご興味があるかもしれません: