【ES6】JavaScript：for文の書き方

1. for (let i = 1; i < 5; i++)
   「i」という名前の変数をつくり、その中に初期値の1を入れる。「i」が「5」より小さい間だけ繰り返しを行う。「i」は繰り返しのたびに1ずつ増えていく。
2. console.log(i);
   変数「i」の中身をコンソール画面に表示する。

1. const person = {...};
   「person」という名前の変数を作り、オブジェクト{}の中に「キー」と「値」を入れる。
2. for (let key in person)
   「person」の中にある「キー（name, age, job）」を1つずつ取り出して、「key」という変数に入れる繰り返しを始める。
3. console.log(`${key}: ${person[key]}`);
   取り出したキー（key）と、その中の値（person[key]）をコンソール画面に表示する。

【オブジェクトのコード】

const person = {
  name: "たろう",     // プロパティ（キー + 値）
  age: 20,           // プロパティ （キー + 値）
  job: "エンジニア"   // プロパティ（キー + 値）
};

【for文のコード】

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

1. const fruits = ["りんご", "みかん", "バナナ"];
   「fruits」という名前の変数を作り、配列リテラル[ ]にりんご、みかん、バナナを入れる。
2. for (const basket of fruits)
   変数「fruits」の中にある配列[“りんご”, “みかん”, “バナナ”]を1つずつ取り出して、「basket」という変数に入れる繰り返しを始める。
3. console.log(basket);
   変数「basket」の中身をコンソール画面に表示する。

const fruits = ["りんご", "みかん", "バナナ"];

【for文のコード】

for (const basket of fruits) {
  console.log(basket);
}

1. const snacks = ["チョコ", "ポテチ", "クッキー"];
   「snacks」という名前の変数を作り、配列 [“チョコ”, “ポテチ”, “クッキー”] を入れる。
2. snacks.forEach(function(basket)
   配列「snacks」の中身を1つずつ取り出して、「basket」という名前の変数に入れる。
3. console.log(basket);
   変数「basket」の中身をコンソール画面に表示する。

const snacks = ["チョコ", "ポテチ", "クッキー"];

【for文のコード】

for (const basket of fruits) {
  console.log(basket);
}

1. for (let i = 1; i < 9; i++)
   i」という名前の変数をつくり、その中に初期値の1を入れる。「i」が「9」より小さい間だけ繰り返しを行う。「i」は繰り返しのたびに1ずつ増えていく。
2. if (i % 2 === 0)
   「i」を2で割ったとき余りが0になるものをチェックする。（偶数かチェックする）
3. console.log(`${i} は偶数です`);
   先ほど処理した変数「i」の中身と、「は偶数です」という文字列をまとめてコンソール画面に表示する。

1. const array = [];
   「array」という中身が空の変数を作る。
2. for (let i = 0; i < 5; i++)
   「i」という名前の変数をつくり、その中に初期値の0を入れる。「i」が「5」より小さい間だけ繰り返しを行う。「i」は繰り返しのたびに1ずつ増えていく。
3. array.push(i);
   「i」の値を配列「array」に追加していく。
4. console.log(array)
   配列「array」の中身をコンソール画面に表示する。

たとえば、次のように変数aに入っている文字列「おはよう」の文字数を知りたいときに使います。

const a = "おはよう"

console.log(s.length)

4

このlengthとfor文と組み合わせることで、配列の中身を順番に取り出すことができます。

1. const colors = ["赤色", "青色", "黄色"];
   「colors」という名前の変数を作り、配列 ["赤色", "青色", "黄色"] を入れる。
2. for (let i = 0; i < colors.length; i++)
   「i」という名前の変数をつくり、その中に初期値の0を入れる。「i」が配列の数より小さい間だけくり返しを行う。「i」は繰り返しのたびに1ずつ増えていく。
3. console.log(basket);
   配列「colors」の中身を順番にコンソール画面に表示する。

const colors = ["赤色", "青色", "黄色"];

【for文のコード】

for (let i = 0; i < colors.length; i++) {
  console.log(colors[i]);
}

1. for (let i = 1; i < 6; i++)
   i」という名前の変数をつくり、その中に初期値の1を入れる。「i」が「6」より小さい間だけ繰り返しを行う。「i」は繰り返しのたびに1ずつ増えていく。
2. if (i === 3) {break;}
   「i」が「3」になったときループ処理を終了する。
3. console.log(i);
   変数「i」の中身をコンソール画面に表示する。

1. for (let i = 1; i < 6; i++)
   i」という名前の変数をつくり、その中に初期値の1を入れる。「i」が「6」より小さい間だけ繰り返しを行う。「i」は繰り返しのたびに1ずつ増えていく。
2. if (i === 3) {continue;}
   「i」が「3」のときは「continue」によりこの回の処理（console.log(i)）をスキップして、次のiのループへ進む。
3. console.log(i);
   変数「i」の中身をコンソール画面に表示する。

for (let i = 1; i > 0; i++) {
  console.log(i);
}

このコードは「iが0より大きい間は、iの値を1ずつ増やしていく」という意味です。

i = 1で始まっているので、ずっと0より大きい状態が続くため、繰り返しが止まらず無限ループになります。

このようにかんたんに無限ループが発生してしまうので、for文を書くときは「このループは本当に止まるのか？」を必ず確認しましょう。

1. const numbers = [1, 2, 3, 4, 5];
   「numbers」という名前の変数を作り、1から5までの数字が入った配列を作る。
2. numbers.reduce(function(a, b) { return a + b; });
   配列の「1」を「a」、「2」を「b」に入れ合計する。その合計を「a」に入れ、次の値「3」を「b」に入れ合計する。これをくり返す。
3. const sum = ...
   合計の結果を「sum」という変数に入れる。
4. console.log(sum);
   変数「sum」の中身をコンソール画面に表示する。