【Javascript】for文の書き方３種類について

10510 ワード
JavaScript JavaScript テキストリンク

はじめに

Javascriptのfor文は繰り返し行われる処理を記述するための構文です。ループとも言われますが、こちらのfor文、書き方が３つあったので纏めてみました。

目次

  • for文（基本形）
  • for in
  • for of

for文（基本形）

古い書き方で「初期値、繰り返す条件、増加値(increment)」の3つを引数として渡す必要があります。

for (初期値,繰り返す条件,増加値){
     処理内容
}

for文（基本形）の例

const students = [{id: 1, name: 'Tanaka', grade: 'A'},
{id: 2, name: 'Suzuki', grade: 'B'},
{id: 3, name: 'Kimura', grade: 'C'}]

for (let i = 0; i < students.length; i++) {
    let student = students[i];
    if (student.grade === 'A') {
        console.log(i, student.name);
    }
}

変数iの初期値を0,配列studentsの中身の数だけ繰り返し処理が終わる度に変数iに1を足していく感じです。

for in

配列の中身を繰り返し処理するfor文です。特徴としては変数iには配列の添字が格納されるということです。

for (配列の添字を表す変数 in 配列){
     処理内容
}

配列の添字として使われる変数名は今回iを使用しましたが、決まっていはいません。ただ、「i,j,k」などの変数は増減を表す変数としてよく使われています。

(前略）
for (let i in students) {
    let student = students[i];   
      if (student.grade === 'A') {
          console.log(i, student.name);
     }
}

配列studentsの中身を配列の添字i(0~2まで）で一つひとつ取り出して、繰り返し処理を行います。注意点はfor in はオブジェクトのプロパティ名を並べるものであるので、変数iの値も文字、students[i]の値も文字になります。つまり、変数iはインデックスとしての機能を失ってしまい、他の演算等絡む場合に誤動作の元になるのでループで回す場合にはお勧めできません。

for of

「for in」と似ていますが、特徴としては変数iには配列の中身が格納されるという点が違います。こちら他のfor文と比べ使いやすいですが、新しい記述なので古いブラウザーには対応しません。なので、BabelやWebpackerでバージョンを下げる必要があります。

for (配列の中身を表す変数 of 配列){
     処理内容
}

変数はなんでもいいのですが、基本的には配列を複数形にし変数には単数形を使います。「i,j,k」などは増加値を表すのに使われる場合が多いので、今回の場合にはお勧めしません。

(前略）
for (let student of students) {
    if (student.grade === 'A') {
        console.log(student.name);
    }
}

配列studentsの中身を変数studentに渡しいます。

こちらを上記２つのfor文と同じように、indexも表示する場合には以下のように書きます。

①.keys()メソッドを利用する

// 添字を受け取る場合
for (let i of students.keys()) { // 数値で渡される
   let student = students[i];
     if (student.grade === 'A') {
         console.log(i, student.name);
    }
 }

②.entries()メソッドを利用する

// 添字も中身も受け取る場合
for (let [i, student] of students.entries()) {
    if (student.grade === 'A') {
        console.log(i, student.name);
    }
}

CSSは階層化menu barを確立する.