概要
今回は3.JavaScriptの文法と構文について、の
ループ処理について確認していきます。
様々な条件で繰り返したり、オブジェクトや配列を簡単にループできる機能はしっておきたいですね。
※無料版なので、誤っている情報もあると思いますが、アウトプットできれば良しとします。
ループ
ループはいくつか種類があるのでその辺を聞いてみます。
【質問】
JavaScriptの文法と構文について、ループ処理の種類、記述方法や注意点を教えてください。
【回答】
JavaScriptには、いくつかの種類のループがあります。
以下にそれぞれの種類と記述方法、注意点を説明します。
forループ
forループは、特定の回数だけ処理を繰り返したい場合に使用します。
以下のように書きます。
for (初期化式; 条件式; 更新式) {
// 処理
}
例えば、1から10までの数字を順に表示する場合は、以下のようになります。
for (let i = 1; i <= 10; i++) {
console.log(i);
}
whileループ
whileループは、条件がtrueである限り処理を繰り返したい場合に使用します。
以下のように書きます。
while (条件式) {
// 処理
}
例えば、10から1までの数字を逆順に表示する場合は、以下のようになります。
let i = 10;
while (i >= 1) {
console.log(i);
i--;
}
do...whileループ
do...whileループは、最低でも1回は処理を実行し、その後条件がtrueである限り処理を繰り返したい場合に使用します。
以下のように書きます。
do {
// 処理
} while (条件式);
例えば、1から10までの数字を順に表示する場合は、以下のようになります。
let i = 1;
do {
console.log(i);
i++;
} while (i <= 10);
注意点としては、無限ループに陥らないように条件式を確認することです。
また、forループでは初期化式で変数を宣言することができますが、letやconstを使用する場合はブロックスコープに注意する必要があります。
さらに、ループ処理によるパフォーマンスの問題にも注意する必要があります
for...inループ
for...inループは、オブジェクトのプロパティを列挙する場合に使用します。
以下のように書きます。
for (変数 in オブジェクト) {
// 処理
}
例えば、以下のようなオブジェクトをfor...inループで列挙する場合は、以下のようになります。
const obj = { a: 1, b: 2, c: 3 };
for (let prop in obj) {
console.log(`${prop}: ${obj[prop]}`);
}
この場合、a: 1、b: 2、c: 3が順に表示されます。
注意点としては、オブジェクトのプロトタイプチェーンに含まれるプロパティも列挙されることがあるため、
hasOwnProperty()メソッドを使用して、オブジェクト自身のプロパティであることを確認する必要があります。
for...ofループ
for...ofループは、配列や文字列などの反復可能なオブジェクトを列挙する場合に使用します。
以下のように書きます。
for (変数 of 反復可能オブジェクト) {
// 処理
}
例えば、以下のような配列をfor...ofループで列挙する場合は、以下のようになります。
const arr = [1, 2, 3];
for (let num of arr) {
console.log(num);
}
この場合、1、2、3が順に表示されます。
注意点としては、オブジェクトが反復可能であるためにfor...ofループを使用できるかどうかを確認することが重要です。
forEach()メソッド
forEach()メソッドは、配列の各要素に対して指定された関数を実行する場合に使用します。
以下のように書きます。
配列.forEach(function(要素, インデックス, 配列) {
// 処理
});
例えば、以下のような配列をforEach()メソッドで処理する場合は、以下のようになります。
const arr = [1, 2, 3];
arr.forEach(function(num) {
console.log(num);
});
この場合、1、2、3が順に表示されます。
注意点としては、forEach()メソッドは、配列の各要素に対して順番に処理を実行するため、同期的な処理しか行えないことです。
色んな種類があり、場面によってどれを使うか選択する必要があります。
特に、for、while、foreachは非常に良く使うと思います。