JavaScript: 配列オブジェクトを反復処理して値を取得します

for ループまたは forEach メソッドを使用して配列オブジェクトを走査し、オブジェクトの属性名を通じて対応する値を取得できます。

1 for ループの使用

let arr = [
  {
    
     name: 'Alice', age: 18 },
  {
    
     name: 'Bob', age: 20 },
  {
    
     name: 'Charlie', age: 22 }
];

// 使用for循环
for (let i = 0; i < arr.length; i++) {
    
    
  let name = arr[i].name;
  let age = arr[i].age;
  console.log(name, age);
}

出力結果:

Alice 18
Bob 20
Charlie 22

2 forEach メソッドの使用

let arr = [
  {
    
     name: 'Alice', age: 18 },
  {
    
     name: 'Bob', age: 20 },
  {
    
     name: 'Charlie', age: 22 }
];

// 使用forEach方法
arr.forEach(item => {
    
    
  let name = item.name;
  let age = item.age;
  console.log(name, age);
});

出力結果:

Alice 18
Bob 20
Charlie 22

3 2 つの方法の違い

JavaScript では、配列オブジェクトを走査する方法がたくさんありますが、最も一般的に使用される方法は、for ループと forEach メソッドです。それらの主な違いは次のとおりです。

1. for ループでは配列の長さとインデックスを手動で指定する必要がありますが、forEach メソッドではその必要がありません。

2. for ループでは、break を使用してループのフローを制御し続けることができますが、forEach メソッドはそれをサポートしていません。

3. forEach メソッドは反復ごとにコールバック関数を実行し、for ループは必要に応じて反復数や条件を制御できます。

たとえば、次の配列オブジェクトがあるとします。

const persons = [
  {
    
     name: 'Alice', age: 22 },
  {
    
     name: 'Bob', age: 30 },
  {
    
     name: 'Charlie', age: 25 }
];

for ループを使用して配列オブジェクトを反復処理します。

for(let i = 0; i < persons.length; i++){
    
    
  console.log(persons[i].name);
}

forEach メソッドを使用して、配列オブジェクトを反復処理します。

persons.forEach(person => console.log(person.name));

どちらのメソッドも配列オブジェクト内の各人物の名前を出力できますが、for ループは必要に応じてループの流れを制御できますが、forEach メソッドはそれをサポートしていません。

つまり、for ループと forEach メソッドの両方には、配列オブジェクトを走査する際に利点と制限があるため、開発者は特定のニーズに応じて適切なメソッドを選択する必要があります。