TIL | For...Ofメソッド

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of
https://blog.naver.com/pxkey/221253982659

FOR...OF

A nice and easy way of iterating over arrays(or other iterable objects)
配列(または他の重複可能なオブジェクト)を繰り返す簡単でクールな方法です.

基本シナリオ

const subreddits = [
  "cringe",
  "books",
  "chickends",
  "funny",
  "pics",
  "soccer",
  "gunners",
];

for (let i = 0; i < subreddits.length; i++) {
  console.log(`Visit reddit.com/r/${subreddits[i]}`);
}

従来のforメソッドは、繰り返し構築の開始条件、終了条件、増減値を直接指定する方法である.forメソッドを使用する場合、アレイ要素の巡回は、通常、アレイの全長(Array.length)を終了条件として実現される.
コードの実行結果は以下の通りです.

このような構造のコードが不変のフレームワークのように硬くなるにつれて、JavaScriptはfor of、for in、foreachメソッドを追加し、コードの長さと可読性を改善し、メソッド自体にコードの意味を十分に説明させる.forメソッドをfor of構造に変更します.以下に示します.

for (let subreddit of subreddits) {
  console.log(`Visit reddit.com/r/${subreddit}`);
}

コードの実行結果は以下の通りです.for法に比べてコードは短く,変数iに関心がなくても結果は同じである.そして、読むのも簡単です.

アレイ内

const seatingChart = [
  ["Kreisten", "Erik", "Namita"],
  ["Geoffrey", "Juanita", "Antonio", "Kevin"],
  ["Yuma", "Sakura", "Jack", "Erika"],
];

for (let i = 0; i < seatingChart.length; i++) {
  const row = seatingChart[i];
  for (let j = 0; j < row.length; j++) {
    console.log(row[j]);
  }
}

配列に配列の変数がfor文を使用することを表すと、読みにくくなり、コードも長くなります.

for (let row of seatingChart) {
  for (let student of row) {
    console.log(student);
  }
}

forを使用すると、より読み取り可能なコードをよりよく記述できます.

文字列

for (let char of "hello world") {
  console.log(char);
}

文字列はforも使用できます.