JavaScript オブジェクトのプロパティの反復処理

JavaScript オブジェクトのプロパティの反復処理
JavaScript オブジェクトのプロパティの反復処理
Louis Robert
2024年6月23日日曜日 13:04:13

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

JavaScript オブジェクトは、キーと値のペアでデータを保存および管理するための基本です。これらのオブジェクトを操作する場合、プロパティをループしてキーと値にアクセスする必要が生じることがよくあります。

このチュートリアルでは、JavaScript オブジェクトのプロパティを列挙するさまざまな方法を説明します。 JavaScript を初めて使用する場合でも、スキルを磨きたいと考えている場合でも、効果的なコーディングにはこれらのテクニックを理解することが不可欠です。

指示 説明
for...in オブジェクトの列挙可能なプロパティをループします。
hasOwnProperty() 指定されたプロパティがオブジェクト自体のプロパティとして存在するかどうかを確認します。
Object.keys() 指定されたオブジェクト自身の列挙可能なプロパティ名の配列を返します。
forEach() 提供された関数を配列要素ごとに 1 回実行します。
Object.entries() 指定されたオブジェクト独自の列挙可能な文字列キー付きプロパティ [キー、値] ペアの配列を返します。

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

提供されるスクリプトは、JavaScript オブジェクトのプロパティを反復処理するためのさまざまなメソッドを提供します。最初のスクリプトでは、 for...in ループ。オブジェクトの列挙可能なすべてのプロパティを反復処理します。このループ内では、 hasOwnProperty() メソッドは、オブジェクトが指定されたプロパティを独自のプロパティとして持っているかどうかをチェックし、継承されたプロパティが含まれていないことを確認します。このメソッドは、値のログ記録や変更など、オブジェクトの各プロパティに対して操作を実行する必要がある場合に便利です。

2 番目のスクリプトは、 Object.keys() このメソッドは、オブジェクト自体の列挙可能なプロパティ名の配列を返します。の forEach() 次に、メソッドを使用してこの配列を反復処理し、メソッドと比較してよりシンプルで読みやすいアプローチを提供します。 for...in ループ。 3 番目のスクリプトでは、 Object.entries()、オブジェクト独自の列挙可能な文字列キー付きプロパティ [キー、値] ペアの配列を返します。あ for...of ループを使用してこれらのペアを反復処理し、キーと値の両方に同時にアクセスするための簡潔な方法を提供します。

JavaScript でのオブジェクト プロパティのループ

JavaScript ES6 メソッドの使用

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

JavaScript でのオブジェクトのキーと値の反復処理

JavaScript オブジェクト メソッドの使用

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

JavaScript でのオブジェクトのキーと値の抽出

JavaScript Object.entries() メソッドの使用

const p = {"p1": "value1", "p2": "value2", "p3": "value3"};
for (const [key, value] of Object.entries(p)) {
  console.log(key + ": " + value);
}

JavaScript オブジェクトを反復処理するための高度なテクニック

前に説明したメソッドに加えて、JavaScript オブジェクトを反復処理するためのもう 1 つの便利なテクニックは、 Object.values() 方法。このメソッドは、オブジェクト自体の列挙可能なプロパティ値の配列を返します。これは、キーではなく値のみが必要な場合に特に便利です。その後、使用できます forEach() またはこれらの値を処理する他の配列メソッド。この方法により、キーが当面のタスクに無関係なシナリオが簡素化されます。

もう 1 つの高度な方法は、 Reflect.ownKeys()、列挙不可能なプロパティやシンボル プロパティを含むすべてのプロパティの配列を返します。この方法はより包括的です Object.keys() そして Object.getOwnPropertyNames()。と組み合わせると for...ofを使用すると、開発者はオブジェクトのすべてのプロパティを統一された方法で反復処理できます。これらの高度な方法を理解すると、複雑なオブジェクトを処理するためのツールキットが拡張され、幅広い反復シナリオを効果的に処理できるようになります。

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

  1. オブジェクトのプロパティをループするにはどうすればよいですか?
  2. を使用できます for...in ループまたは Object.keys() と forEach()。
  3. 違いは何ですか Object.keys() そして Object.values()?
  4. Object.keys() プロパティ名の配列を返しますが、 Object.values() プロパティ値の配列を返します。
  5. オブジェクトのキーと値の両方を取得するにはどうすればよいですか?
  6. 使用 Object.entries() [キー、値] ペアの配列を取得し、次のように繰り返します。 for...of。
  7. 列挙不可能なプロパティを反復処理できますか?
  8. はい、使用します Object.getOwnPropertyNames() または Reflect.ownKeys() 列挙不可能なプロパティを含めるには。
  9. プロパティがオブジェクト自身のプロパティであるかどうかを確認するにはどうすればよいですか?
  10. 使用 hasOwnProperty() ループ内でプロパティが継承されないようにします。
  11. オブジェクトのシンボルを反復処理するにはどうすればよいですか?
  12. 使用 Object.getOwnPropertySymbols() シンボルのプロパティの配列を取得します。
  13. オブジェクトのプロパティを反復処理するための最良の方法は何ですか?
  14. それはあなたのニーズによって異なります。使用 for...in 簡単にするために、 Object.keys() 特定のプロパティ名については、 Object.entries() キーと値の両方に対して。

JavaScript オブジェクトの反復のまとめ

JavaScript オブジェクトを効率的に反復するには、さまざまなメソッドとその適切な使用例を理解する必要があります。シンプルなものから for...in を使用してより高度なテクニックにループします。 Object.entries() そして Reflect.ownKeys()、それぞれのアプローチに利点があります。これらのメソッドをマスターすると、さまざまなプログラミング シナリオを処理する能力が向上し、JavaScript アプリケーションでオブジェクトのプロパティを効果的に管理および操作できるようになります。