配列を扱う時、同時に行うことがあるのが配列内の要素の平均値や合計値を求める処理です。
そのためには配列内の要素を順次参照し、計算を行わなければなりません。for文で書くとこのようになります。
let score = [ 88,57,66,72,79 ];
let sum = 0;
for (let i=0;i<score.length;i++){
sum += score[i];
}
console.log("平均:", sum / score.length , "点" ); // 平均 72.4 点
ただ、この処理は.forEach()メソッドを利用することで、さらにコンパクトに再現できます。
forEachとは
.forEach()は配列に格納された要素を順次参照するためのメソッドです。下記のコードは、先程のfor文の処理を再現しています。
score.forEach( function(v){ sum += v; } );
このように.forEach()メソッドはfor文と違って、ループの終了条件などを書く必要はありません。
forEachの構文
.forEach()の構文が下記です。配列の要素を1つ取り出し、functionで定義した処理を行います。
array.forEach( function( [要素] ){
[処理]
});
[処理]で配列の要素を参照する場合は、function( [要素] )とすることで扱うことができます。先程のコードであれば、1回目のループで88がvに代入されsumに加算、2回目のループでは57がvに代入されsumに加算と続く仕組みです。
ちなみに、先のコードはアロー関数を使用しても同様に再現できます。
score.forEach( v => sum += v );
forEachの注意点
配列の要素を抜き出して参照できる.forEach()メソッドですが、注意しなければならないことがあります。
break文などによる制御ができない
.forEach()は一度実行すると途中で中断させることはできません。break文を使用するとエラーが出てしまいます。
配列にしか使用できない
また、.forEach()は配列オブジェクトに対して用意されたメソッドであるため、文字列に対して行うことはできません。文字列を1文字ずつ送りたい場合はforもしくは後述のfor ofを使用します。
forEachよりもfor ofを使おう
.forEach()よりもES6で追加されたfor ofの方がbreak文による制御が可能で、文字列型のループも可能です。
let message = "Hello World";
for( const s of message ){
if (s === "W"){
break;
}
console.log(s); // H e l l o
}
上記コードは文字列を1文字ずつ表示、Wの場合はループを中断するように動きます。.forEach()と同様に配列に対してのループも行うことができるので、できる限りfor ofを使用したほうが良いでしょう。
結論
配列のループは.forEach()でも実現は可能ですが、文字列型のループも可能でbreak文の制御もできるfor ofを中心に使うと良いでしょう。
また、配列の要素数が非常に多い場合、全てをループしなければならない.forEach()は、制御文を使用したfor ofに比べ、処理速度で差がついてしまう可能性もあるので注意が必要です。
コメント