ループ構文(for, while, do-while)について
ループ構文は、特定の条件が満たされるまで、または特定の回数だけ繰り返し処理を行うための構文です。JavaScriptには、for
ループ、while
ループ、do-while
ループの3種類のループ構文があります。このセクションでは、各ループ構文の使い方とその応用について詳しく説明します。
for
ループ
for
ループは、指定した回数だけ繰り返し処理を行うための構文です。初期化、条件式、更新式の3つの部分で構成されます。
基本的な構文
for (初期化; 条件式; 更新式) {
// 繰り返し実行されるコード
}
- 初期化: ループが開始される前に1回だけ実行される部分です。通常、カウンタ変数を初期化します。
- 条件式: 各反復の前に評価される部分です。条件式が真(
true
)である限り、ループが実行されます。 - 更新式: 各反復の後に実行される部分です。通常、カウンタ変数を更新します。
使用例
for (let i = 0; i < 5; i++) {
console.log("Iteration number: " + i);
}
この例では、変数 i
が0から4までの間、ループが5回実行されます。それぞれの反復で i
の値が出力されます。
while
ループ
while
ループは、指定した条件が真である限り繰り返し処理を行うための構文です。条件式が最初に評価され、真であればループが実行されます。
基本的な構文
while (条件式) {
// 繰り返し実行されるコード
}
使用例
let i = 0;
while (i < 5) {
console.log("Iteration number: " + i);
i++;
}
この例では、変数 i
が5未満である限り、ループが実行されます。各反復で i
の値が出力され、i
が1ずつ増加します。
do-while
ループ
do-while
ループは、条件式が真かどうかに関わらず、少なくとも1回はループが実行される構文です。条件式は各反復の後で評価されます。
基本的な構文
do {
// 繰り返し実行されるコード
} while (条件式);
使用例
let i = 0;
do {
console.log("Iteration number: " + i);
i++;
} while (i < 5);
この例では、変数 i
が5未満である限り、ループが実行されます。各反復で i
の値が出力され、i
が1ずつ増加します。
ループの制御
ループの制御には、break
と continue
の2つのキーワードが使用されます。
break
break
は、ループを強制的に終了するために使用されます。
使用例
for (let i = 0; i < 10; i++) {
if (i === 5) {
break;
}
console.log("Iteration number: " + i);
}
この例では、変数 i
が5になった時点でループが終了します。それまでの i
の値が出力されます。
continue
continue
は、現在の反復をスキップして次の反復に進むために使用されます。
使用例
for (let i = 0; i < 10; i++) {
if (i === 5) {
continue;
}
console.log("Iteration number: " + i);
}
この例では、変数 i
が5の場合だけ出力をスキップし、それ以外の i
の値が出力されます。
ネストされたループ
ループはネスト(入れ子)にすることができます。ネストされたループを使用すると、複雑な繰り返し処理を実行できます。
使用例
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
console.log(`i = ${i}, j = ${j}`);
}
}
この例では、外側のループが3回実行され、そのたびに内側のループが3回実行されます。出力される組み合わせは次のとおりです。
i = 0, j = 0
i = 0, j = 1
i = 0, j = 2
i = 1, j = 0
i = 1, j = 1
i = 1, j = 2
i = 2, j = 0
i = 2, j = 1
i = 2, j = 2
ループの応用例
配列の反復処理
ループは、配列の各要素にアクセスするためによく使用されます。
使用例(for
ループ)
let fruits = ["apple", "banana", "cherry"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
この例では、配列 fruits
の各要素が順に出力されます。
使用例(while
ループ)
let fruits = ["apple", "banana", "cherry"];
let i = 0;
while (i < fruits.length) {
console.log(fruits[i]);
i++;
}
使用例(do-while
ループ)
let fruits = ["apple", "banana", "cherry"];
let i = 0;
do {
console.log(fruits[i]);
i++;
} while (i < fruits.length);
オブジェクトの反復処理
オブジェクトのプロパティを反復処理する場合、for-in
ループがよく使用されます。
使用例(for-in
ループ)
let person = {
name: "Alice",
age: 30,
city: "New York"
};
for (let key in person) {
console.log(`${key}: ${person[key]}`);
}
この例では、オブジェクト person
の各プロパティ名とその値が出力されます。
配列やオブジェクトの反復に特化したメソッド
配列には、forEach
, map
, filter
, reduce
など、反復処理に特化したメソッドがあります。これらのメソッドを使用すると、より簡潔で読みやすいコードが書けます。
使用例(forEach
メソッド)
let fruits = ["apple", "banana", "cherry"];
fruits.forEach(fruit => console.log(fruit));
この例では、配列 fruits
の各要素が順に出力されます。
使用例(map
メソッド)
let numbers = [1, 2, 3];
let squares = numbers.map(number => number * number);
console.log(squares); // [1, 4, 9]
この例では、配列 numbers
の各要素が2乗された新しい配列 squares
が作成されます。
使用例(filter
メソッド)
let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // [2, 4]
この例では、配列 numbers
の中から偶数だけが抽出された新しい配列 evenNumbers
が作成されます。
使用例(reduce
メソッド)
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((total, number) => total + number, 0);
console.log(sum); // 15
この例では、配列 numbers
の要素をすべて加算した合計値 sum
が求められます。
パフォーマンスの考慮
ループは、特に大規模なデータセットを処理する場合、パフォーマンスに大きな影響を与えることがあります。以下のポイントに注意して、効率的なループを実装することが重要です。
- 不要な計算を避ける: ループ内で頻繁に同じ計算を行う場合、計算結果を変数に保存して再利用することを検討します。
- ネストの深さを減らす: ネストされたループはパフォーマンスを低下させる原因となります。可能であれば、ループのネストを減らす方法を探します。
- 適切なループ構文を選択する: 使用するデータ構造や目的に応じて、適切なループ構文を選択します。例えば、配列の反復には
for
ループやforEach
メソッド、オブジェクトのプロパティにはfor-in
ループが適しています。
まとめ
JavaScriptのループ構文は、繰り返し処理を効率的に行うための基本的なツールです。for
ループ、while
ループ、do-while
ループの3種類のループ構文を理解し、適切に使用することで、様々な繰り返し処理を効果的に実装できます。また、ループの制御やネストされたループ、配列やオブジェクトの反復処理に特化したメソッドを活用することで、より複雑な処理を簡潔かつ効率的に行うことが可能です。これらの基本的なスキルを習得することで、JavaScriptプログラミングの基礎を固め、より高度なアプリケーション開発に対応できるようになります。
高度な配列メソッド:map, filter, reduce
8月 20, 2024モジュールとインポート/エクスポートについて
8月 17, 2024ローカルストレージとセッションストレージ
8月 16, 2024