この記事では、JavaScript オブジェクトを反復処理する方法を学びます。反復中、オブジェクトのプロパティを 1 つずつループします。反復に使用するメソッドに応じて、これらのプロパティへのアクセスが異なる場合があります。

オブジェクトを反復処理するには、以下で説明するメソッドが多数あります。

目次

• for…in ループの使用
• Object.entries() メソッドと map() メソッドの使用
• forEach() メソッドと object.keys() メソッドの使用
• Lodash _.forOwn() メソッドの使用

方法 1: 使用する for…inループ

オブジェクトのプロパティは、for..in ループを使用して反復できます。このループは、オブジェクトのすべての非 Symbol 反復可能プロパティを反復するために使用されます。一部のオブジェクトには、プロトタイプから継承されるプロパティが含まれている場合があります。の hasOwnProperty() メソッドを使用して、プロパティがオブジェクト自体に属しているかどうかを確認できます。オブジェクトの各キーの値は、キーをオブジェクトのインデックスとして使用することで見つけることができます。

構文：

for (let key in exampleObj) {  if (exampleObj.hasOwnProperty(key)) {  value = exampleObj[key];  console.log(key, value);  } }>

例： この例は、上記で説明したアプローチの実装を示しています。

function iterateObject() {  let exampleObj = {  book: 'Sherlock Holmes',  author: 'Arthur Conan Doyle',  genre: 'Mystery'  };  for (let key in exampleObj) {  if (exampleObj.hasOwnProperty(key)) {  value = exampleObj[key];  console.log(key, value);  }  } } iterateObject();>

book Sherlock Holmes author Arthur Conan Doyle genre Mystery>

方法 2: 使用する Object.entries() メソッド そして 地図（） 方法

の Object.entries() メソッド オブジェクト独自の列挙可能な文字列キーのプロパティ ペアの配列を返すために使用されます。返された配列は、 地図（） ペアからキーと値を抽出するメソッド。キーと値のペアのキーと値は、配列ペアの最初と 2 番目のインデックスにアクセスすることで抽出できます。最初のインデックスはキーに対応し、2 番目のインデックスはペアの値に対応します。

構文：

Object.entries(exampleObj).map(entry =>{ let key = エントリ[0];  値をエントリ[1]にします;  console.log(キー, 値); });>>
    例：    この例は、上記で説明したアプローチの実装を示しています。
JavaScript 
function iterateObject() {  let exampleObj = {  book: 'Sherlock Holmes',  author: 'Arthur Conan Doyle',  genre: 'Mystery'  };  Object.entries(exampleObj).map(entry =>{ let key = エントリ[0];  値をエントリ[1]にします;  console.log(キー, 値);  }); iterateObject();>>
   
  出力  方法 3: を使用する  forEach() メソッド  そして object.keys() メソッド 
Object.keys() はオブジェクトのキーの配列を返します。forEach()>は、配列内の各要素を反復処理できる配列メソッドです。
 
    例：    この例は、上記で説明したアプローチの実装を示しています。
JavaScript 
function iterateObject() {  let exampleObj = {  book: 'Sherlock Holmes',  author: 'Arthur Conan Doyle',  genre: 'Mystery'  };  Object.keys(exampleObj).forEach(key =>{ const 値 = exampleObj[キー];  console.log(`${key}: ${value}`);  }); iterateObject();>>
   
  出力  
book: Sherlock Holmes author: Arthur Conan Doyle genre: Mystery>
 
方法 4: を使用する Lodash _.forOwn() メソッド 
このアプローチでは、オブジェクトの反復処理に役立つ Lodash _.forOwn() メソッドを使用しています。
 
    例：    この例は、上記で説明したアプローチの実装を示しています。
JavaScript 
// Defining Lodash variable  const _ = require('lodash'); let users = {  'a': 1,  'b': 2,  'c': 3 }; _.forOwn(users, function (value, key) {  console.log(key, '=', value); });>
  
    出力：    
 
a = 1 b = 2 c = 3>
方法 5: Object.values() メソッドと forEach() メソッドを使用する
Object.values() メソッドは、オブジェクト自体の列挙可能なプロパティ値の配列を返します。これを forEach() メソッドと組み合わせることで、各値を反復処理できます。対応するキーにもアクセスするには、Object.keys() メソッドを併用します。
 
構文：
Object.values(exampleObj).forEach((value, index) =>{ const key = Object.keys(exampleObj)[インデックス];  console.log(キー, 値); });>>
    例：    
JavaScript 
function iterateObject() {  let exampleObj = {  book: 'Sherlock Holmes',  author: 'Arthur Conan Doyle',  genre: 'Mystery'  };  Object.values(exampleObj).forEach((value, index) =>{ const key = Object.keys(exampleObj)[インデックス];  console.log(キー, 値);  }); iterateObject();>>
   
  出力