JavaScript 配列の繰り返し処理(for, for…in, for…of, Array.forEach)｜VB.NET-TIPS などプログラミングについて

2019/03/04

JavaScript 配列の繰り返し処理(for, for…in, for…of, Array.forEach)

配列の繰り返し処理では通常 for 文を使います。
for 文には一般的に指標を使って繰り返し、指標で配列を参照する方法や、配列の指標と値を順次取得できる方法があります。
尚、for 文には以下の使い方がある様ですので、それぞれについて見ていきます。

for(指標を使った一般的な方法)
for...in(オブジェクトのプロパティ名での繰返し)
for...of(オブジェクトのプロパティの値の繰返し)
Array.forEach(配列の各要素についての繰返し)

■for(指標を使った一般的な方法)

いまさらですが for 文の構文は以下の様になっています。「初期値設定」「条件式」「指標処理」の3個の部分を「;」セミコロンで区切ります。それぞれを [] で囲っているのは、必要が無ければ記述を省略できます。（通常はあまり使いませんが）

for ( [ 初期値設定 ]; [ 条件式 ]; [ 指標処理 ] ) {
    // 繰り返しの処理
    ...
}

基本的な使い方は以下のソースを見て下さい。
最初に3個の要素を持つ配列を宣言し、次に for で配列の長さ分の処理を行います。
配列の長さを取得するために length プロパティを参照しますが、このプロパティは、配列の宣言を行った時に javascript が内部で設定されます。
繰返し処理の中身は配列の値をコンソールに表示することを行います。（10 20 30 と順次表示されます。）

//配列の宣言
var arr = [10, 20, 30];
//配列の内容を順次表示
for(var i = 0; i < arr.length; i++) {
    //繰返しの処理...
    console.log(arr[i]);
}

「初期値設定」「条件式」「指標処理」の3個の部分はそれぞれ必要が無ければ記述しなくても問題ありません。究極、3個とも無くしてしまってもOKです。但し、ループを抜ける処理は記述しないと無限ループになってしまいます。
このループを抜ける処理が break 文でループを抜けたい条件の中で記述します。（条件が無くてもOKですが...）
上の処理と同じことを行う例を示します。

//配列の宣言
var arr = [10, 20, 30];
//指標の宣言
var i = 0;
//for 文の中身は記述しない
for( ; ; ) {
    if (i >= arr.length) {  //length の値は「3」
        //指標が長さ以上になった場合ループを抜ける
        break;
    }
    //ループ内処理
    console.log(arr[i]);
    //指標を増やす
    i++;
}
//break 後はここに来る

break 文が出たところで continue 文を出さないと片手落ちなので以下の例を示します。指標が「1」になった時に、指標を＋１してループの先頭に戻しています。結果としてコンソールには 10 30 が表示されます。

//配列の宣言
var arr = [10, 20, 30];
//配列の内容を順次表示
var i = 0;
//for 文の中身は記述しない
for( ; ; ) {
    if (i >= arr.length) {
        //指標が長さ以上になった場合ループを抜ける
        break;
    }
    if (i == 1) {
        //指標を増やす
        i++;
        //指標が[1]ならば先頭に戻る：「if (i >= arr.length) {」の処理に戻る
        continue;
    }
    //ループ内処理
    console.log(arr[i]);
    //指標を増やす
    i++;
}
//break 後はここに来る

■for...in(オブジェクトのプロパティ名での繰返し)

for 文なので配列に使えるのかなと思って、以下の例を実行したのですが、コンソールに表示されるのは「0 1 2」と指標らしきものが表示されます。なぜ指標なのかを正式なドキュメントに当たると以下の様に記されています。

「for..in 文は、指定したオブジェクトの列挙可能プロパティに対して、順不同で反復処理をします。」

つまり返されるのはプロパティ名を返す様です。（単純な配列の場合は指標がプロパティ扱いの様です。

//配列の宣言
var arr = [10, 20, 30];
//配列の内容を順次表示
for(var v in arr) {
    console.log(v);
}

そこで以下の様にオブジェクトに対して for 文を行うと、コンソールには「prop1 prop2 prop3」が順次表示されます。これはオブジェクトのプロパティ名そのものです。

//オブジェクトの宣言
var obj = { prop1: 10, prop2: 20, prop3: 30 };
//オブジェクトのプロパティ名を順次表示
for(var v in obj) {
    console.log(v);
}

さらに以下の様にプロパティ名を扱うと、プロパティに対応する値にアクセスできます。

//オブジェクトの宣言
var obj = { prop1: 10, prop2: 20, prop3: 30 };
//オブジェクトの内容を順次処理
var sum = 0;
var str = "";
for(var v in obj) {
    sum += obj[v];  // 数値として加算
    str += obj[v];  // 文字列として追加
}
console.log(sum);   // 60 と表示される
console.log(str);   // 102030 と表示される

先ほどの配列の場合は以下の様にすれば、指標に対応する値にはアクセスできますが、指標の順番通り取得できるとは限らないので、指標によるアクセスの方が良いようです。（以下の例の様に配列の個数が少ない場合は順番にアクセスされる様ですが..）

//配列の宣言
var arr = [10, 20, 30];
var sum = 0;
//配列の内容を順次表示
for(var v in arr) {
    sum += arr[v];  // 数値として加算
}
console.log(sum);   // 60 と表示される

■for...of(オブジェクトのプロパティの値の繰返し)

for...in ではオブジェクトのプロパティ名での繰り返し処理でしたが、 for...of はオブジェクトのプロパティの値を順次アクセスできるものです。
但し対象となるものは iterable(繰り返し可能)なオブジェクト らしいです。配列(Arrayで宣言されたもの)や、String、Map などです。

//----------
//配列の宣言
var arr = [ 10, 20, 30 ];
//配列の値を順次表示
for(var v of arr) {
    console.log(v);
}
//コンソールに以下の3行で表示される
// 10
// 20
// 30
 
//----------
//Stringの宣言
var str = "ABC";
//Stringの文字を順次表示
for(var v of str) {
    console.log(v);
}
//コンソールに以下の3行で表示される
// A
// B
// C
 
//----------
//Mapの宣言
var M = new Map([["a", 1], ["b", 2], ["c", 3]]);
//Mapの要素を順次表示
for (var ent of M) {
  console.log(ent);
}
//コンソールに以下の3行で表示される
// Array [ "a", 1 ]
// Array [ "b", 2 ]
// Array [ "c", 3 ]
 
//Mapのキーと値を順次表示
for (var [key, value] of M) {
  console.log(key + "=" + value);
}
//コンソールに以下の3行で表示される
// a=1
// b=2
// c=3

■Array.forEach(配列の各要素についての繰返し)

Arrayオブジェクトのメソッドである forEach を使っても繰り返し処理が行えます。構文は以下の通りです。

arr.forEach(function callback( value [, index [, array ] ] ) {
    //your iterator
}[, thisArg]);

パラメーター:
  callback: 各要素に対して実行するコールバック関数で、３つの引数をとります。
  value:    現在処理されている配列の要素。
  index:    現在処理されている配列の要素のインデックス。
  array:    forEachが適用されている配列。
  thisArg:  callback 内で this として使用する値 (i.e the reference Object)。

forEach の例を以下に示します。

//配列の宣言
var arr = ['a', 'b', 'c'];
//配列を順次処理
arr.forEach(function(val, idx) {
    console.log("arr[" + idx + "] = " + val);
});
//コンソールに以下の3行で表示される
// arr[0] = a
// arr[1] = b
// arr[2] = c

VB.NET-TIPS などプログラミングについて

■for(指標を使った一般的な方法)

■for...in(オブジェクトのプロパティ名での繰返し)

■for...of(オブジェクトのプロパティの値の繰返し)

■Array.forEach(配列の各要素についての繰返し)

関連する記事

おすすめ本

コメント