【JavaScript】繰り返し処理まとめ

使用した教材

以下の動画でJavaScriptの繰り返し処理について学んだので、簡単にまとめてみました。

JavaScriptの繰り返し処理

for文

書き方

for (初期化式; 条件式; 増減式) { 実行したい処理 }

app.js

for (let i = 0; i < 10; i++) {
    console.log(i);
}

// 出力結果
// 0
// 1
// 2
// (途中省略)
// 9

• let i = 0
  • for文で使う変数の初期化式
  • 変数名のiは慣習的に用いられている
• i < 10
  • 繰り返し処理をいつまで行うかを決める条件式
  • 上記コードの場合、変数iが10未満の間は繰り返し処理が行われる
• i++
  • 変数iの値を更新するための増減式（値を更新しないと繰り返し処理が終わらない）
  • 上記コードの場合、変数iは0から1ずつ値が増えていき、i = 10になった時点で条件式がfalseになるので、for文から抜ける

無限ループ

条件式や増減式の書き間違いにより繰り返し処理が止まらなくなり、最終的にブラウザが固まってしまう恐れがあるので注意する

配列の繰り返し処理

app.js

const classmates = ["青木", "加藤", "鈴木", "田中"];

for (let i = 0; i < classmates.length; i++) {
    console.log(`出席番号${i + 1}番: ${classmates[i]}`);
}

// 出力結果
// 出席番号1番: 青木
// 出席番号2番: 加藤
// 出席番号3番: 鈴木
// 出席番号4番: 田中

• i < classmates.length
  • 配列の要素数と同じ回数だけ繰り返し処理を行う
  • 上記コードの場合、classmates.lengthは4なので、変数iが4未満、すなわち0 ~ 3の間は繰り返し処理が実行される

ループのネスト

for文を別個に書く場合と比べて、繰り返し処理の回数が増える

app.js

for (let i = 1; i <= 10; i++) {
    for (let j = 1; j <= 3; j++) {
        console.log(`i: ${i}, j: ${j}`);
    }
}

// 出力結果
// i: 1, j: 1
// i: 1, j: 2
// i: 1, j: 3
// i: 2, j: 1
// i: 2, j: 2
// (途中省略)
// i: 10, j: 2
// i: 10, j: 3

while文

書き方

while (条件式) { 実行したい処理 }

app.js

let count = 0;

while (count < 10) {
   count++;
   console.log(count);
}

// 出力結果
// 1
// 2
// 3
// (途中省略)
// 9
// 10

• while文の()内に書くのは条件式のみ
• 初期化式はwhile文の手前、増減式はwhile文の{}の中に書く

for文とwhile文の使い分け

• for文は、主に繰り返し処理の回数が予め分かっている時に使う
• 一方while文は、主に繰り返し処理の回数が事前に分かっていない時に使う

break

ループ内（主にwhile文）で使うことで、繰り返し処理を途中で終わらせることができる

app.js

let count = 0;
while (count < 10) {
    if (count === 6) break;
    count++;
    console.log(count);
}

// 出力結果
// 1
// 2
// 3
// 4
// 5
// 6

for...of

書き方

for (変数 of 列挙可能なオブジェクト) { 実行したい処理 }

app.js

const members = ["ヌートバー", "近藤", "大谷", "吉田", "村上"];

for (let member of members) {
   console.log(member);
}

// 出力結果
// ヌートバー
// 近藤
// 大谷
// 吉田
// 村上

• let member of members
  • memberは、配列membersから取り出された要素を格納しておくための変数
  • membersの部分は、配列に限らず、順番に処理できる能力を持ったオブジェクト（列挙可能なオブジェクト）であれば良い（文字列なども使える）

オブジェクトのキーとバリューをfor...ofで取り出す

for (変数 of Object.keys(オブジェクト名)) { 実行したい処理 }

app.js

const numbers = {
    nootbaar: 23,
    kondo: 8,
    ohtani: 16,
    yoshida: 34,
    murakami: 55,
}

for (let member of Object.keys(numbers)) {
    console.log(`${member}: 背番号${numbers[member]}`);
}

// 出力結果
// nootbaar: 背番号23
// kondo: 背番号8
// ohtani: 背番号16
// yoshida: 背番号34
// murakami: 背番号55

• Object.keys(numbers)
  • オブジェクトnumbersのキーを取り出す

(2024/08/30追記) さらに便利な書き方
コメントにてご指摘いただきましたので、追記しておきます
for (const [キー用の変数名, バリュー用の変数名] of Object.entries(オブジェクト名)) { 実行したい処理 }

app.js

const numbers = {
    nootbaar: 23,
    kondo: 8,
    ohtani: 16,
    yoshida: 34,
    murakami: 55,
}

for (const [player, number] of Object.entries(numbers)) {
    console.log(`${player}: 背番号${number}`);
}

// 出力結果
// nootbaar: 背番号23
// kondo: 背番号8
// ohtani: 背番号16
// yoshida: 背番号34
// murakami: 背番号55

• Object.entries(numbers)
  • オブジェクトnumbersのキーとバリューの組の配列を返す