JavaScript の配列をもっと便利にループ処理！ forEach、map、filter、reduce メソッドを紹介

2024-04-02

JavaScript の配列における for...in と for...of の違い

処理対象

for...in: 配列の インデックス番号 と プロパティ の両方を処理します。
for...of: 配列の 要素の値 のみ処理します。

ループ順序

for...in: インデックス番号に基づいて昇順にループします。

使用例

for...in は、配列だけでなく、オブジェクトのすべてのプロパティをループ処理したい場合にも使用できます。
for...of は、配列の要素の値だけを取り出して処理したい場合に便利です。

// 配列の要素の値を出力する

const fruits = ["apple", "banana", "orange"];

// for...of
for (const fruit of fruits) {
  console.log(fruit); // "apple", "banana", "orange"
}

// for...in
for (const index in fruits) {
  console.log(fruits[index]); // "apple", "banana", "orange"
}

その他

for...in は、非推奨の構文ではありませんが、for...of の方が新しい構文であり、多くの場合より効率的に動作します。
for...of は、配列だけでなく、文字列や Set など、イテレータを持つオブジェクトにも使用できます。

for...in と for...of は、どちらも配列をループ処理するのに役立ちますが、それぞれ異なる特徴があります。処理対象やループ順序などを考慮して、適切な構文を選択しましょう。

for...in と for...of の違いを比較するサンプルコード

const fruits = ["apple", "banana", "orange"];

// for...in
console.log("**for...in**");
for (const index in fruits) {
  console.log(`index: ${index}, value: ${fruits[index]}`);
}

// for...of
console.log("**for...of**");
for (const fruit of fruits) {
  console.log(`value: ${fruit}`);
}

**for...in**
index: 0, value: apple
index: 1, value: banana
index: 2, value: orange
**for...of**
value: apple
value: banana
value: orange

for...in の場合、インデックス番号と要素の値が両方出力されます。一方、for...of の場合は、要素の値のみ出力されます。

for...in を使用する例

const person = {
  name: "John Doe",
  age: 30,
  city: "Tokyo"
};

// オブジェクトのプロパティをすべて出力する
for (const prop in person) {
  console.log(`${prop}: ${person[prop]}`);
}

このコードを実行すると、以下の出力が得られます。

name: John Doe
age: 30
city: Tokyo

for...of を使用する例

const numbers = [1, 2, 3, 4, 5];

// 配列の要素の値を合計する
let sum = 0;
for (const number of numbers) {
  sum += number;
}

console.log(`合計: ${sum}`); // 合計: 15

JavaScript の配列をループ処理するその他の方法

forEach メソッドは、配列の各要素に対して指定された関数を呼び出します。

const fruits = ["apple", "banana", "orange"];

// 配列の要素の値を出力する
fruits.forEach((fruit) => {
  console.log(fruit); // "apple", "banana", "orange"
});

forEach メソッドは、簡潔なコードでループ処理を行うことができます。

map メソッドは、配列の各要素に対して指定された関数を呼び出し、その結果を新しい配列として返します。

const numbers = [1, 2, 3, 4, 5];

// 配列の要素の2倍を要素とする新しい配列を作成する
const doubledNumbers = numbers.map((number) => number * 2);

console.log(doubledNumbers); // [2, 4, 6, 8, 10]

map メソッドは、配列の要素を変換して新しい配列を作成するのに便利です。

const fruits = ["apple", "banana", "orange", "grape"];

// 柑橘類のみを含む新しい配列を作成する
const citrusFruits = fruits.filter((fruit) => fruit === "orange" || fruit === "grape");

console.log(citrusFruits); // ["orange", "grape"]

filter メソッドは、配列の要素を条件に基づいて絞り込むのに便利です。

const numbers = [1, 2, 3, 4, 5];

// 配列の要素の合計を計算する
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue);

console.log(sum); // 15