forループ、forEach、map：それぞれのメリットとデメリット
2024-04-02
JavaScriptで配列をループする方法
forループ
最も基本的なループ処理の方法です。
const numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
このコードは、numbers配列の各要素を順番に処理し、その値をコンソールに出力します。
iはループカウンタです。numbers.lengthは配列の長さを表します。numbers[i]は配列のi番目の要素です。
forEach メソッドは、配列の各要素に対して関数を呼び出すための便利な方法です。
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(number => {
console.log(number);
});
forEachメソッドは、配列と、各要素に対して実行する関数を引数として受け取ります。- 関数は、ループカウンタや要素のインデックスを受け取らず、要素そのもののみを受け取ります。
map メソッドは、配列の各要素を変換して新しい配列を生成するための方法です。
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => number * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]
このコードは、numbers配列の各要素を2倍して、新しい配列doubledNumbersを生成します。
mapメソッドは、配列と、各要素をどのように変換するかを記述した関数を引数として受け取ります。- 関数は、変換後の要素を返す必要があります。
その他のループ処理
上記の3つの方法以外にも、JavaScriptには様々なループ処理の方法があります。
for...ofループwhileループ
それぞれのループ処理には、それぞれの特徴があります。状況に応じて適切な方法を選択することが重要です。
JavaScriptで配列をループするには、様々な方法があります。それぞれの特徴を理解して、状況に応じて適切な方法を選択しましょう。
練習問題
以下の問題を解いて、ループ処理の理解を深めましょう。
- 1から10までの数字を出力するプログラムを作成してください。
1から10までの数字を出力するプログラム
for (let i = 1; i <= 10; i++) {
console.log(i);
}
配列の要素の合計値を出力するプログラム
const numbers = [1, 2, 3, 4, 5];
let sum = 0;
for (const number of numbers) {
sum += number;
}
console.log(sum); // 15
配列の要素の偶数をすべて出力するプログラム
const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
if (number % 2 === 0) {
console.log(number);
}
}
// 出力: 2, 4
配列をループするその他の方法
for...in ループは、配列だけでなく、オブジェクトのプロパティをループするにも使用できます。
const numbers = [1, 2, 3, 4, 5];
for (const index in numbers) {
console.log(numbers[index]);
}
for...inループは、配列のインデックスをループします。- インデックスを使用して、配列の要素にアクセスできます。
注意点:
- オブジェクトのプロパティをループしない場合は、
forEachメソッドなどの他の方法を使用することをお勧めします。
for...of ループは、配列の要素のみをループするのに適しています。
const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
console.log(number);
}
- インデックスを使用する必要はありません。
reduce メソッドは、配列の要素を1つの値に集約するための方法です。
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log(sum); // 15
reduceメソッドは、累積値と現在の値を受け取り、新しい累積値を返します。- 最初の累積値は、通常、配列の最初の要素です。
javascript arrays loops
