現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

基礎

【JavaScript入門】繰り返し処理の基本|for文・while文・do…while文の使い方を初心者向けに解説

投稿日:2019年4月15日 更新日:

JavaScriptの繰り返し処理|for文・while文・do…while文を初心者向けに解説

JavaScriptで同じ処理を繰り返したい場合は、for文while文 を使います。

  • for文:繰り返す回数が決まっているとき
  • while文:繰り返す回数が決まっていないとき
  • do…while文:最低1回は処理を実行したいとき



指定回数だけ処理を繰り返す(for文)

for文は、次の3つの要素で構成されます。

for (初期値; 条件; 増減) {
    処理;
}
  • 初期値:カウンタ変数の初期設定
  • 条件:true の間だけ処理を繰り返す
  • 増減:ループごとに変数を増減させる

例:1〜5 の数を順番に加算する

total = 0;
for (i = 1; i <= 5; i++) {
    document.write(i + “回目<br>”);
    total = total + i;
    document.write(“合計:” + total + “<br>”);
}



オブジェクトや配列の値を順番に処理する(for…in文)

for...in 文は、オブジェクトや配列のすべてのプロパティ(キー)を順番に取り出して処理します。

for (key in navigator) {
    val = navigator[key];
    document.write(key + “:” + val + “<br>”);
}

navigator の部分を window や screen に変えると、それぞれのオブジェクトのプロパティ一覧を取得できます。

条件が真の間、処理を繰り返す(while文)

while文は、条件が true の間だけ処理を繰り返します。

while (条件) {
    処理;
}

例:名前が入力されるまで繰り返す

res = “”; // 初期値
while ((res == “”) || (res == null)) {
    res = prompt(“名前を入力してください。”, “”);
}
document.write(“ようこそ! <b>” + res + “</b>さん”);

条件が最初から false の場合、while文は一度も実行されません。

最低1回は処理を実行する(do…while文)

do...while 文は、処理を実行した後に条件を判定します。

do {
    処理;
} while (条件);

そのため、条件が false でも最低1回は必ず処理が実行されるのが特徴です。

例:名前が入力されるまで繰り返す(do…while)

do {
    res = prompt(“名前を入力してください。”, “”);
} while ((res == “”) || (res == null));

document.write(“ようこそ! <b>” + res + “</b>さん”);



まとめ

  • for文:回数が決まっている繰り返しに使う
  • for…in文:オブジェクトや配列の全要素を処理する
  • while文:条件が true の間だけ繰り返す
  • do…while文:最低1回は必ず処理が実行される

関連リンク

このブログは Xserver 上の WordPress で運用しています。
表示速度が速く、安定しているのでブログ初心者にもおすすめです。
レンタルサーバー エックスサーバー

-基礎
-

執筆者:

関連記事

【JavaScript入門】new・delete・with・thisの使い方|オブジェクト操作の基本を初心者向けに解説

JavaScriptのnew・delete・with・thisの使い方|オブジェクト操作の基本を初心者向けに解説 JavaScriptでは、オブジェクトを作成したり削除したり、オブジェクト名を省略して …

【JavaScript入門】変数の基本を解説|宣言方法・命名規則・スコープの仕組みを初心者向けに紹介

JavaScriptの変数とは?宣言方法・命名規則・スコープを初心者向けにわかりやすく解説 変数とは、値や式を一時的に保存しておくための「箱」のようなものです。 変数を使うことでコードが読みやすくなり …

【JavaScript入門】イベントとイベントハンドラの基本|onclick・onload・onmouseoverの使い方を解説

JavaScriptのイベントとイベントハンドラの基本|onclick・onload・onmouseoverを初心者向けに解説 JavaScriptでは、ユーザーの操作やページの状態変化に応じて「イベ …

【JavaScript入門】breakとcontinueの使い方|ループ処理を制御する基本構文を初心者向けに解説

JavaScriptのbreakとcontinueの使い方|繰り返し処理を制御する基本構文を解説 JavaScriptの繰り返し処理(for / while / do…while)や sw …

【JavaScript入門】基本書式と記述ルールまとめ|命名規則・文字列・数値・セミコロンの使い方

JavaScriptの基本書式と記述ルールまとめ|初心者が知っておくべき注意点を解説 JavaScriptを書くときには、基本的な書式や命名ルール、文字列の扱いなど、知っておくべきポイントがいくつかあ …