JavaScript オブジェクトのプロパティをループする

JavaScript オブジェクトの反復を調べる

JavaScript オブジェクトのプロパティのループ処理は、開発者が遭遇する一般的なタスクです。キー、値、またはその両方にアクセスする必要がある場合でも、オブジェクトのプロパティを効果的に列挙する方法を理解することが重要です。

この記事では、オブジェクトの要素を反復処理するさまざまな方法を検討します。最終的には、オブジェクトの列挙を簡単に処理できる知識が身につき、JavaScript コードが効率的で読みやすいものになるでしょう。

JavaScript オブジェクトの反復手法を理解する

の for...in ループは、オブジェクトの列挙可能なプロパティを反復処理するために使用される基本的な JavaScript 構造です。サンプルスクリプトでは、 for...in オブジェクトの各プロパティをループするために使用されます p。ループ内では、 hasOwnProperty() プロパティがオブジェクトの直接プロパティであり、そのプロトタイプ チェーンから継承されていないことを確認するために使用されます。これは、オブジェクトがプロパティを継承するときに予期しない結果を避けるために非常に重要です。次に、ループは次を使用して各プロパティのキーと値をログに記録します。 console.log、オブジェクトのプロパティを効果的に列挙します。

実証された別の方法は、 Object.entries()、オブジェクト独自の列挙可能なプロパティ [キー、値] ペアの配列を返します。この配列は次を使用して反復されます。 forEach()、配列要素ごとに提供された関数を 1 回実行する便利な配列メソッドです。このメソッドは、各反復でキーと値の両方に直接アクセスすることでコードを簡素化し、列挙プロセスを単純かつ読みやすくします。の Object.keys() メソッドは同様に機能しますが、キーのみを返します。キーは、その後、ファイル内の対応する値にアクセスするために使用されます。 forEach() ループ。

加えて、 Object.values() これも、オブジェクトの値の配列を返す便利なメソッドです。この配列を反復処理すると、 forEach()、各値に直接アクセスしてログを記録できます。これらの方法—for...in、 Object.entries()、 Object.keys()、 そして Object.values()- JavaScript でオブジェクトを処理するための強力なツールです。これらにより、オブジェクトのプロパティにアクセスして操作する方法が柔軟になり、さまざまなニーズや好みに対応できます。各方法には利点があり、それらを理解することで、開発者は特定のユースケースに最適な方法を選択して、効率的かつ効果的なコード実行を保証できます。

for...in ループを使用したオブジェクト プロパティの反復処理

JavaScript - for...in ループ

var p = {"p1":"value1","p2":"value2","p3":"value3"};
for (var key in p) {
  if (p.hasOwnProperty(key)) {
    console.log(key + " -> " + p[key]);
  }
}
// Output:
// p1 -> value1
// p2 -> value2
// p3 -> value3

Object.entries() を使用したオブジェクトのキーと値のループ

JavaScript - Object.entries()

var p = {"p1":"value1","p2":"value2","p3":"value3"};
Object.entries(p).forEach(([key, value]) => {
  console.log(key + " -> " + value);
});
// Output:
// p1 -> value1
// p2 -> value2
// p3 -> value3

Object.keys() を使用したオブジェクトのプロパティの列挙

JavaScript - Object.keys()

var p = {"p1":"value1","p2":"value2","p3":"value3"};
Object.keys(p).forEach(key => {
  console.log(key + " -> " + p[key]);
});
// Output:
// p1 -> value1
// p2 -> value2
// p3 -> value3

Object.values() を使用したオブジェクト値の反復処理

JavaScript - Object.values()

var p = {"p1":"value1","p2":"value2","p3":"value3"};
Object.values(p).forEach(value => {
  console.log(value);
});
// Output:
// value1
// value2
// value3

JavaScript オブジェクトの反復をさらに深く掘り下げる

JavaScript でオブジェクトの反復を処理するもう 1 つの強力な方法は、 Map 物体。通常のオブジェクトとは異なり、 Map オブジェクトを使用すると、任意のデータ型のキーを使用できるキーと値のペアを保存できます。この柔軟性は、オブジェクトや関数などの複雑なキーを値に関連付ける必要があるシナリオで特に役立ちます。簡単に反復できます Map 次のような組み込みメソッドを使用して、 Map.prototype.forEach()、 Map.prototype.keys()、 そして Map.prototype.values()、一貫性のある予測可能な反復順序、つまり挿入順序が提供されます。

に加えて Map、JavaScriptでも提供されています WeakMapこれは似ていますが、キーが弱く参照されています。つまり、オブジェクトへの参照が他にない場合、ガベージ コレクションは妨げられません。これは、特定のアプリケーションでメモリをより効率的に管理するのに役立ちます。両方 Map そして WeakMap キーと値のペアのコレクションを管理するための堅牢なメソッドのセットを提供します。これらはプレーン オブジェクトを直接置き換えるものではありませんが、より複雑なデータ構造やアルゴリズムで活用できる柔軟性とメモリ管理の点で独自の利点を提供します。

JavaScript オブジェクトの反復に関するよくある質問

1. JavaScript でオブジェクトのプロパティを反復処理するにはどうすればよいですか?
2. 使用できます for...in、 Object.keys()、 Object.values()、 または Object.entries() オブジェクトのプロパティを反復処理します。
3. 違いは何ですか for...in そして Object.keys()?
4. for...in プロトタイプ チェーンを通じて継承されたプロパティを含む、すべての列挙可能なプロパティを反復処理します。 Object.keys() オブジェクト自体の列挙可能なプロパティのみを返します。
5. どうやって Object.entries() 仕事？
6. Object.entries() オブジェクト独自の列挙可能なプロパティ [キー、値] ペアの配列を返します。これは、 forEach ループ。
7. 使ってもいいですか forEach 物体に直接?
8. いいえ、 forEach は配列のメソッドですが、によって返される配列で使用できます。 Object.keys()、 Object.values()、 または Object.entries()。
9. とは何ですか Map そして WeakMap?
10. Map あらゆるタイプのキーを許可し、挿入順序を維持します。 WeakMap 弱参照されているキーがあり、ガベージ コレクションされる可能性があります。
11. どうやって Map.prototype.forEach() そして Array.prototype.forEach() 異なる？
12. それらは同様に機能しますが、 Map.prototype.forEach() Map エントリ (キーと値のペア) を反復処理するのに対し、 Array.prototype.forEach() 配列要素を反復処理します。
13. なぜ使うのか Object.values()?
14. 使用 Object.values() オブジェクトのプロパティの値を直接反復処理する必要がある場合。

JavaScript オブジェクトの反復に関する最終的な考え

効果的なプログラミングには、JavaScript でのオブジェクトの反復をマスターすることが不可欠です。などの手法を活用することで、 for...in、 Object.keys()、 Object.values()、 そして Object.entries()により、開発者はオブジェクトのプロパティに効率的にアクセスして操作できます。これらの手法により柔軟性がもたらされ、コードがクリーンで効率的かつ理解しやすい状態に保たれます。単純なオブジェクトを扱う場合でも、複雑なオブジェクトを扱う場合でも、これらの方法を知っておくと、コーディング スキルが向上し、JavaScript アプリケーションが最適化されます。