JavaScriptの繰り返し処理for(for-in,for-of)ループとwhile文の使い方
JavaScriptの繰り返し処理についてまとめました。
繰り返し処理
繰り返し処理をする文は大きく分けて2つあります。
- for文
- while文
まずはfor文の使い方からみていきましょう。
for文
for(変数の宣言と初期値 ; 条件式; 次の処理) {
処理内容
}たとえば、次の配列をfor文を使ってループを回します。
const num = [1, 2, 3, 4, 5, 6];
for (let i = 0; i < num.length; i++) {
console.log(`${i}回目`);
}
// 0回目
// 1回目
// 2回目
// 3回目
// 4回目
// 5回目
for-inループ
for-inループの結果は添え字（インデックス番号）が返されます。
上のfor文で使用した式をfor-inループで書き換えます。
const num = [1, 2, 3, 4, 5, 6];
for (let i in num) {
console.log(`${i}回目`);
}
// 0回目
// 1回目
// 2回目
// 3回目
// 4回目
// 5回目
各インデックス番号の値を取得したい場合は次のように書きます。
const num = [1, 2, 3, 4, 5, 6];
for (let i in num) {
console.log(`${num[i]}回目`);
}
// 1回目
// 2回目
// 3回目
// 4回目
// 5回目
// 6回目
キーと値を一括でみたいときは次のように、たとえば書けばOKです。
const num = [1, 2, 3, 4, 5, 6];
for (let i in num) {
console.log(i + ': ' + num[i]);
}
for-ofループ
for-ofループは、値が返されます。
const num = [1, 2, 3, 4, 5, 6];
for (let v of num) {
console.log(`${v}回目`);
}
// 1回目
// 2回目
// 3回目
// 4回目
// 5回目
// 6回目
一般的にはi,j,lは添え字の意味合いが強いので、for-ofループを使うときはvalueの頭文字のvなど別の変数を使います。
for-ofループ + Object.entries()メソッドで配列取得
{
// オブジェクト
const shop = {
starter: ["シーザーサラダ", "大根サラダ", "青じそサラダ", "チキンサラダ"],
main: ["カレー", "ハンバーグ", "スパゲッティ"],
};
//スプレッド構文で配列にする
const menus = [...shop.starter, ...shop.main];
// for-ofループ + Object.entries()
for (const menu of menus.entries()) {
console.log(menu);
}
/* インデックス番号と値が「配列」で取得できる
[0, "シーザーサラダ"]
[1, "大根サラダ"]
[2, "青じそサラダ"]
[3, "チキンサラダ"]
[4, "カレー"]
[5, "ハンバーグ"]
[6, "スパゲッティ"]
*/
}
}for-ofループの変数にObject.entries()メソッドをつけることでインデックス番号と値を配列のかたちで取得できます。
Object.entries()メソッドについては、JavaScriptの繰り返し処理for(for-in,for-of)ループとwhile文の使い方を参考にしてみてください。
for-ofループ + Object.entries()メソッド + 分割代入でindex番号と値を取得
{
// オブジェクト
const shop = {
starter: ["シーザーサラダ", "大根サラダ", "青じそサラダ", "チキンサラダ"],
main: ["カレー", "ハンバーグ", "スパゲッティ"],
};
//スプレッド構文で配列にする
const menus = [...shop.starter, ...shop.main];
for (const [index, value] of menus.entries()) {
console.log(`${index}: ${value}`);
}
/* 返ってくる値
1: シーザーサラダ
2: 大根サラダ
3: 青じそサラダ
4: チキンサラダ
5: カレー
6: ハンバーグ
7: スパゲッティ
*/
}Object.entries()で返されるインデックス番号と値を[index, value]部分に分割代入してループさせることで、それぞれに値として取得することができます。
オブジェクトを持つ配列のforループ処理
次のようなオブジェクトをもった配列があるとします。
ループ処理をして中のデータにアクセスします。
const todos = [
{
id: 1,
title: "study",
completed: true,
},
{
id: 2,
title: "work",
completed: false,
},
{
id: 3,
title: "play",
completed: true,
},
];
for文
オブジェクト全体を取得したい場合はこのように書きます。
for (let i = 0; i < todos.length; i++) {
console.log(i, todos[i]);
}
// 0 {id: 1, title: "study", completed: true}
// 1 {id: 2, title: "work", completed: false}
// 2 {id: 3, title: "play", completed: true}
なお、todos[i]はオブジェクトになります。タイトルを取得したいときはtodos[i].titleとすると取得できます。
completedがtrueの場合のみ、titleを取得するとしたい場合は、次の通りです。
for (let i = 0; i < todos.length; i++) {
let todo = todos[i];
if (todo.completed === true) {
console.log(i, todos[i].title);
}
}
// 0 "study"
// 2 "play"
for-inループで書き換え
for-inループで書き換えると次のようになります。
for (let i in todos) {
let todo = todos[i];
if (todo.completed === true) {
console.log(i, todos[i].title);
}
}
// 0 study
// 2 play
for-ofループで書き換え
for-ofループで書き換えると次のようになります。
for-ofループの場合はiの代わりにtodoとしてあげましょう。todoにはオブジェクトが格納されます。
for (let todo of todos) {
if (todo.completed === true) {
console.log(todo.id, todo.title);
}
}
// 0 "study"
// 2 "play"
次に、while文をみていきましょう。
繰り返し処理-while文
while (条件式) {
処理内容;
次の処理;
}注意点としては、次の処理を書き忘れると無限ループになって、処理が終わらなくなってしまいます。ブラウザなどを再起動する必要が出てしまったりするので、次の処理は忘れず書きましょう。
上の例をwhile文を使って書くと次のようになります。
繰り返し処理-do-while文
while文では、条件が合わない場合、一度も実行されませんが、do-while文にすると、一回は必ず処理内容を実行させることができます。最初に一回は必ず処理したいときに使う構文です。
do {
処理内容;
次の処理;
} while (条件式);たとえば、だれでも一回は特別割引を利用できて、回数券を買うとその割引回数を増やせるサービスがあったとします。
がずお君は回数券の購入なしで初めて特別割引を利用する場合、do-while文を使うと次のようなメッセージをつくることができます。
let visit = 1;
let ticket = 0;
do {
console.log(`${visit}回目の訪問です。残り${ticket}回割引を受けることが可能です。);
} while ( ticket > 0);繰り返し処理で使えるcontinueとbreakについて
繰り返し処理を行うときに合わせてよく使う、continueとbreakの意味を把握しておきましょう。
- ループ中に処理をスキップする場合、continue;
- ループ中に処理をやめるときは、break;
for文の中にif文を入れて、そこの処理内容にcontinue;を書きます。
たとえば、1~10回カウントするときに、偶数を飛ばしたいとします。その場合、次のように記述します。
for (let i = 1; i <= 10; i++) {
if (i % 2 === 0) {
continue;
}
console.log(i);
}