JavaScript 超初心者向け -- 配列のループ最初の最初 --

配列(array)のループ処理の最初の最初を勉強していたことを整理したいと思います。以前にも書きましたが、JavaScript超初心者が最初から勉強することを想定していますので、イケてる、イケてないという議論はここではおいておきます。

配列のループ処理

配列にはインデックスがあり、0から始まるということ。これはJavaScriptに限った話ではないと思いますが、そこを最初に意識していないとミスを連発しました。

for 文

for (var i = 0, arr = 0 ; i < array.length; i++) {
    処理;
}

最初に勉強していたときに、 以下 か 未満 かという点です。 配列ののインデックスは 0 から始まるので、i <= array.length としてしまうと、ズレてしまいます。

具体的に書いてみます。

var arr = [1,2,3]; 

for (var i = 0, sum = 0; i <= arr.length; i++) {
    sum += arr[i];
}
console.log(sum); 
// =>  NaN　で出ます。

こうして not a number を返されてしまいまして、なんでだろうなとひとりで思っており、 console.log(arr[i]); を入れて何が書いてあるか、見てみました。

上記のように、undefined が 3 のあとに返っていることに気づき、ループしている要素数が一つ多いことに気づきました。 これを実行しているときに学んだことは、arr[i] のログをしっかりとること、インデックスが0から始まることをよくよく認識 します。 なので配列要素の長さ 未満 で処理する必要があります。

var arr = [1,2,3]; 
for (var i = 0, sum = 0; i < arr.length; i++) {
    sum += arr[i];
}
console.log(sum); 
// => 6

これで条件文を以下から未満にして、インデックスが 0, 1, 2 で 3 はやらないようにするとうまくいきます。

for... of

配列の要素をループする方法でもうひとつ for...of という書き方があるようです。

for (変数) of (配列名) {
    //処理; 
} 

1. [変数名] が何でもいいということに気づくのがまず大事で、ドキュメントでは number of numbersArray のように書いてありますが、変数名はとにかくなんでも良いということです。

2. 配列名。 これは、for ([変数] of [配列名]) { ... } としてかいたときに、{ } の中に対象の配列名を書く必要があるということです。

例えば、以下のような感じ。

var arr = [1,2,3,4,5], sum = 0; 
for (var value of arr) {
    sum += value;
}
console.log(sum); 
// => 15

これをすると、for loop で書いた指定のミスがなくなるので、こちらの方が使いやすい感じがしました。

最後に、for... in は配列では使わない方が良いらしいです。配列はシステム上オブジェクトなので、for (var xxx in object) {} も利用可能らしいのですが2つの点で配列では使えないそうです。 1. 環境依存 2. 遅い

詳しくは下記の記事

javascript.info

次は配列内にオブジェクトがある際のアクセス方法と forEach メソッドなどメソッドを書きたい。