JS でオブジェクトプロパティを簡単にトラバースするいくつかの方法

1. 自己列挙可能なプロパティ

Object.keys()メソッドは、指定されたオブジェクトの列挙可能なプロパティの配列を返します。配列内のプロパティ名の順序はfor...inループを使用してオブジェクトを反復処理するときに返される順序と同じです。オブジェクトのキーと値のペアが列挙可能でない場合は、キーの配列が返されます。

これは合理的です。なぜなら、ほとんどの場合、オブジェクト自体のプロパティのみを気にする必要があるからです。

オブジェクトに独自のプロパティと継承されたプロパティの両方があり、 Object.keys()独自のプロパティキーのみを返す例を見てみましょう。

simpleColors = {とする
  色A: '白'、
  色B: '黒'
};
natureColors = {とします
  colorC: '緑'、
  色D: '黄色'
};
Object.setPrototypeOf(natureColors、simpleColors);
Object.keys(natureColors); // => ['colorC', 'colorD']
natureColors['colorA']; // => 'white'
natureColors['colorB']; // => '黒'

Object.setPrototypeOf()メソッドは、指定されたオブジェクトのプロトタイプ (つまり、内部の [[ Prototype ]] プロパティ) を別のオブジェクトまたは null に設定します。

Object.keys (natureColors) はnatureColorsオブジェクト自身の列挙可能なプロパティキー [‘colorC’, ‘colorD’] を返します。

natureColorsにはsimpleColorsプロトタイプオブジェクトから継承されたプロパティが含まれていますが、Object.keys() 関数はそれらをスキップします。

Object.values()とObject.entries()も、指定されたオブジェクトの列挙可能なプロパティのキーと値のペアの配列を返します。

// ...
オブジェクト。値(natureColors)。 
// => ['緑', '黄']
オブジェクト.entries(natureColors);
// => [ ['colorC', '緑'], ['colorD', '黄'] ]

ここで、 for..inステートメントとの違いに注意してください。 for..in 、自身のプロパティをループできるだけでなく、プロトタイプチェーン内のプロパティを列挙することもできます。

// ...
enumerableKeys = [] とします。
for (let key in natureColors) {
  enumerableKeys.push(キー);
}
enumerableKeys; // => ['colorC', 'colorD', 'colorA', 'colorB']

enumerableKeys配列には、 natureColors独自のプロパティキー「colorC」と「colorD」が含まれています。

さらに、for..inはsimpleColorsプロトタイプオブジェクトから継承されたプロパティも走査します。

2. Object.values()はプロパティ値を返します

**Object.values()**メソッドはfor...inループを使用する場合と同じ順序で、指定されたオブジェクトのすべての列挙可能なプロパティ値の配列を返します (違いは、for-in ループがプロトタイプチェーン内のプロパティを列挙することです)。

たとえば、Object.keys() を使用してキーを収集し、そのキーを使用してオブジェクトから対応する値を取得します。

食事 = {
  食事A:「朝食」
  食事B: 「ランチ」
  食事C:「夕食」
};
for (let key of Object.keys(meals)) {
  mealName = 食事[キー]とします。
  // ... mealName を使って何かする
  console.log(食事名);
}
// 「朝食」「昼食」「夕食」

食事は単純な物体です。 Object.keys(meals)と列挙型の for..of ループを使用して、オブジェクトキーの値を取得します。

コードは単純に見えますが、 let mealName = meals[key]必要ではなく、次のようにさらに最適化できます。

食事 = {
  食事A:「朝食」
  食事B: 「ランチ」
  食事C:「夕食」
};
for (let mealName of Object.values(meals)) {
  console.log(食事名);
}
// 「朝食」「昼食」「夕食」

Object.values(meals)オブジェクトのプロパティ値を配列で返すため、 for..ofで直接簡略化できます。 mealNameループ内で直接割り当てられます。

3. オブジェクト.entries()

Object.entries()メソッドは、指定されたオブジェクト自身の列挙可能なプロパティのキーと値のペアの配列を返します。この配列は、for...in ループを使用してオブジェクトを走査するときに返されるのと同じ順序で並べられます (違いは、for-in ループではプロトタイプチェーン内のプロパティも列挙されることです)。

Object.entries() 、[ [key1, value1], [key2, value2], ..., [keyN, valueN] ] のようなキーと値のペアの配列を返します。

これらのキーと値のペアを直接使用するのはあまり便利ではないかもしれませんが、次に示すように、配列の構造化代入を通じてキーと値にアクセスするのは非常に簡単になります。

食事 = {
  食事A:「朝食」
  食事B: 「ランチ」
  食事C:「夕食」
};
for (let [キー, 値] of Object.entries(食事)) {
  console.log(キー + ':' + 値);
}
// '食事A:朝食' '食事B:昼食' '食事C:夕食'

上記のように、為Object.entries() 、代入や宣言のために余分な行を追加する必要はありません。

bject.entries() 、通常のオブジェクトを Map に変換するときに便利です。これObject.entries()によって返される形式が、Map コンストラクターによって受け入れられる形式 (キー、値) とまったく同じであるためです。

キーと値のペアの 2 次元配列は、通常の Map コンストラクターを使用して Map オブジェクトに変換できます。

ペースを遅くする例を以下に示します。

挨拶をしましょう = {
  朝：「おはようございます」
  正午：「こんにちは」
  夕方：「こんばんは」
};
greetingsMap を新しい Map(Object.entries(greetings)) とします。
greetingsMap.get('morning'); // => 'おはようございます'
greetingsMap.get('midday'); // => 'こんにちは'
greetingsMap.get('evening'); // => 'こんばんは'

マップオブジェクトはキーと値のペアを格納します。任意の値 (オブジェクトまたはプリミティブ) をキーまたは値として使用できます。

興味深いことに、Map は、Map インスタンスのプロパティ値またはキーと値のペアを抽出するために、 Object.values()およびObject.entries()と同等のメソッド (Iterator を返す点を除く) を提供します。

Map.prototype.values() Object.values()と同等です。
Map.prototype.entries() Object.entries()と同等です。

mapは通常のオブジェクトの改良版です。マップのサイズを取得したり (通常のオブジェクトの場合は手動で取得する必要があります)、任意のオブジェクトタイプをキーとして使用したりできます (通常のオブジェクトは文字列プリミティブタイプをキーとして使用します)。

.values() と .entries() のマップを返すメソッドを見てみましょう。

// ...
[...greetingsMap.values()];
// => ['おはようございます', 'こんにちは', 'こんばんは']
[...greetingsMap.entries()];
// => [ ['朝', 'おはよう'], ['正午', 'こんにちは'], 
// ['こんばんは', 'こんばんは'] ]

注: reetingsMap.values()とgreetingsMap.entries()はイテレータオブジェクトを返します。結果を配列に入れるには、スプレッド演算子 ... が必要です。

4. オブジェクトプロパティの順序

JS オブジェクトは単純なキーと値のマッピングであるため、オブジェクト内のプロパティの順序は重要ではなく、ほとんどの場合、依存する必要はありません。

ES5 およびそれ以前の標準では、プロパティの順序はまったく指定されていませんでした。

ただし、ES6 以降では、時間が明示的に指定されていない限り、プロパティの順序は特定のルールセットに基づきます。このプロパティのソート規則を説明する例を記述するために、2 つの新しいメソッドObject.getOwnPropertyNames和Reflect.ownKeysを使用します。

数値:属性タイプが数値型の場合、降順で並べ替えられます。
文字列:属性タイプが文字列の場合、時系列順に並べ替えられます。
シンボル:属性タイプがシンボルの場合、時系列順に並べ替えられます。

順序付けられたコレクションが必要な場合は、データを配列またはセットに保存することをお勧めします。

要約:

Object.values()とObject.entries()は、JS 開発者向けに新しい標準化されたヘルパー関数を提供するためのもう 1 つの改善ステップです。

Object.entries() は、キーと値を異なる変数に簡単に割り当てることができるように配列を構造化する場合に最適です。この関数を使用すると、プレーンな JS オブジェクトのプロパティを Map オブジェクトに簡単にマッピングすることもできます。、

注意: Object.values()とObject.entries()データを返す順序は定義されていないため、それに依存しないでください。

コードがデプロイされた後にBUG存在するかをリアルタイムで知る方法はありません。後からこれらのバグを解決するために、ログのデバッグに多くの時間を費やしていました。ここで、便利なバグ監視ツールFundebugお勧めしたいと思います。

これで、JS でオブジェクトプロパティを簡単にトラバースするいくつかの方法についての記事は終了です。JS でオブジェクトプロパティを簡単にトラバースするいくつかの方法の詳細については、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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