JavaScript配列ループ解説
2024-08-17
JavaScriptにおける配列のループ処理
JavaScriptでは、配列内の要素を一つずつ処理するためにループを使用します。複数のループ方法がありますが、ここでは最も一般的な方法を説明します。
forループ
- 配列の長さを利用して、インデックスを指定しながら要素にアクセスします。
const myArray = [10, 20, 30, 40];
for (let i = 0; i < myArray.length; i++) {
console.log(myArray[i]); // 配列の要素を出力
}
- ループ内のコードブロックで、
myArray[i]を使って現在の要素にアクセスします。 i++でループのたびにiをインクリメントします。i < myArray.lengthでループ継続条件を指定します。配列の長さより小さい間ループを続けます。let i = 0で初期化変数iを宣言し、0に初期化します。forキーワードでループを開始します。
for...ofループ
- 配列の要素を直接取り出します。
const myArray = [10, 20, 30, 40];
for (const element of myArray) {
console.log(element); // 配列の要素を出力
}
const elementで、各要素をelement変数に代入します。for...ofループは、イテラブルなオブジェクト（配列など）の要素を順番に処理します。
filter()メソッド：条件を満たす要素から新しい配列を作成します。map()メソッド：配列の要素を新しい配列に変換します。forEach()メソッド：配列の要素ごとにコールバック関数を呼び出します。
備考
- 配列の長さはループ内で変更しないように注意してください。
- ループの内部で配列の要素を変更すると、元の配列も変更されます。
JavaScript配列ループ解説とコード例
配列の要素をインデックスを使って順番に処理します。
const numbers = [10, 20, 30, 40];
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]); // 各要素を出力
}
console.log(numbers[i]): 配列の現在のインデックスiの要素を出力します。for (let i = 0; i < numbers.length; i++): ループの初期化、条件、インクリメントを指定します。i < numbers.length: ループが続く条件です。配列の長さよりもiが小さい間ループが続きます。i++: 各ループの最後にiを 1 増やします。
const fruits = ["apple", "banana", "orange"];
for (const fruit of fruits) {
console.log(fruit); // 各要素を出力
}
for (const fruit of fruits): 配列fruitsの各要素をfruit変数に代入し、ループします。
forEachメソッド
配列の各要素に対してコールバック関数を呼び出します。
const colors = ["red", "green", "blue"];
colors.forEach(function(color) {
console.log(color); // 各要素を出力
});
forEach(function(color)): 配列の各要素に対してコールバック関数を呼び出します。color: コールバック関数のパラメータで、現在の要素を表します。
mapメソッド
配列の各要素に対して処理を行い、新しい配列を返します。
const numbers = [1, 2, 3, 4];
const doubledNumbers = numbers.map(function(number) {
return number * 2;
});
console.log(doubledNumbers); // [2, 4, 6, 8]
map(function(number)): 配列の各要素に対してコールバック関数を呼び出し、新しい配列を作成します。return number * 2: 各要素を2倍にした値を新しい配列に追加します。
filterメソッド
条件を満たす要素から新しい配列を作成します。
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(function(number) {
return number % 2 === 0;
});
console.log(evenNu mbers); // [2, 4]
JavaScript配列のループ処理：代替方法
これまで、一般的な配列ループ方法を紹介しました。ここでは、より高度なまたは特殊なケースに対応する代替方法について説明します。
再帰関数によるループ
- 関数自体を呼び出すことでループを実現します。
function loopArray(array, index = 0) {
if (index >= array.length) {
return;
}
console.log(array[index]);
loopArray(array, index + 1);
}
const myArray = [10, 20, 30];
loopArray(myArray);
- 再帰関数は、深い階層や複雑な処理に適している場合がありますが、スタックオーバーフローのリスクがあります。
ジェネレーター関数
yieldキーワードを使って、値を逐次生成する関数です。
function* arrayGenerator(array) {
for (const element of array) {
yield element;
}
}
const myArray = [10, 20, 30];
const generator = arrayGenerator(myArray);
for (const value of generator) {
console.log(value);
}
- ジェネレーターは、大きなデータセットや非同期処理との連携に有用です。
reduceメソッド
- 配列の要素を累積的に処理し、最終的な値を返します。
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.lo g(sum); // 10
reduceは、ループとは異なるアプローチですが、特定の計算やデータ変換に便利です。
- 機能性
目的とする処理に応じて、最適な方法を選びましょう。 - 可読性
コードの読みやすさを考慮して、適切なループ方法を選択してください。 - パフォーマンス
ループ方法によってパフォーマンスが異なる場合があります。大量のデータを扱う場合は、ベンチマークテストを行うことが重要です。
javascript arrays loops
