JavaScript入門 その3：繰り返し

JavaScript入門の書籍を読んで書いてあったこと＋自分で調べたことのメモ書きその3。ループ（繰り返し）処理。

繰り返し

for、while、do-while については自分が知っている他の言語にもある。特に気になる点はない。

for-of

配列や文字列から1要素・1文字ずつ取り出すループ処理をする。

例：配列

const arr1 = ["CAPTAIN STAG", "BUNDOK", "snow peak"];
for (const element of arr1) {
  console.log(element);
}

【実行結果】

CAPTAIN STAG
BUNDOK
snow peak

例：文字列

const str1 = "xyz";
for (const element of str1) {
  console.log(element);
}

【実行結果】

x
y
z

const arr2 = ["なす", "かぶ", "ねぎ"];
for (const element of arr2) {
  for (const character of element) {
    console.log(character);
  }
}

【実行結果】

な
す
か
ぶ
ね
ぎ

for-in

オブジェクトから列挙可能プロパティを1個ずつ取り出すループ処理をする。

const obj = { "名称": "クロスカブ110", "排気量": "109cc", "WMTCモード値": "67.9km/L" };
for (const key in obj) {
  console.log(key + ": " + obj[key]);
}

【実行結果】

名称: クロスカブ110
排気量: 109cc
WMTCモード値: 67.9km/L

ラベル付きbreak、continue

ループやswitch文の処理を終了する break と ループ内の反復処理を中止して次の反復処理に移る continue にはラベルを付けることができる。

ラベル付きbreakの例。
iとjがともに1になると break loop1 によりloop1のループ（外側のループ）処理が終了する。

loop1: for (let i = 0; i < 3; i++) {
  loop2: for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) {
      break loop1;
    }
    console.log(`i=${i},j=${j}`);
  }
}

【実行結果】

i=0,j=0
i=0,j=1
i=0,j=2
i=1,j=0

ラベル付きcontinueの例。
iとjがともに1になると continue loop1 により現在の反復処理が終了し、loop1の次の反復処理（i=2）を実行する。

loop1: for (let i = 0; i < 3; i++) {
  loop2: for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) {
      continue loop1;
    }
    console.log(`i=${i},j=${j}`);
  }
}

【実行結果】

i=0,j=0
i=0,j=1
i=0,j=2
i=1,j=0
i=2,j=0
i=2,j=1
i=2,j=2

ラベル付きブロックに対するbreakの例。
break outerBlock により outerBlock の末尾に移動する。break outerBlock より後の innerBlock、outBlock の処理は実行されない。

outerBlock: {
  innerBlock: {
    console.log("1");
    break outerBlock;
    console.log(":-(");
  }
  console.log("2");
}

【実行結果】

1

参考

書籍

解きながら学ぶJavaScriptつみあげトレーニングブック | マイナビブックス 4章

WEBページ

for...in - JavaScript | MDN
break - JavaScript | MDN
ラベル - JavaScript | MDN