Javascriptの配列反復処理関数（forEach,map,reduce,some,everyなど）の共通点/違いとパフォーマンス問題

javascript
javascript

共通点：コールバック関数＋関数内部ループで処理を行います

  • javascriptの配列処理関数（forEach,map,reduce,some,everyなど）はArray.prototypメソッドです
  • これらの配列処理ロジックはコールバック関数に任せ、関数内のループで処理を行います
    • コールバック関数：処理ロジックを一つ関数にまとめる（実作）
    • 関数内のループ：処理する配列のlength分のループ
      配列の反復処理関数にコールバック関数をループ内で処理

配列の反復処理関数（forEach,map,reduce,some,everyなど）の目的の違い

  • forEach: 配列中のそれぞれの要素について関数を呼び出します
  • every: 指定したテスト関数を配列中のすべての要素が満たした場合に true を返します
  • some: 指定したテスト関数を配列中の少なくとも 1 個の要素が満たした場合に true を返します
  • map: 配列内のすべての要素に対して与えられた関数を呼び出し、その結果を格納した新しい配列を生成します
  • reduce: アキュムレータと配列内のすべての要素に対して (左から右の順で) 関数を適用し、単一の値に還元します

コールバック関数（自作必要）で処理ロジックを記述

  • 配列の反復処理関数自身が何も機能しません
  • 処理ロジックをユーザー自身がコールバック関数として作成するする必要はあります
  • 例：mapで新しい配列作成 
    // 例：2項目の配列を「age」項目のみの配列に作成
var data=[
	{age:24, address:"Tokyo"},
	{age:24, address:"Osaka"},
	{age:24, address:"Saporo"},
	{age:24, address:"Okinawa"},
	{age:24, address:"Saitama"},
]

var result = data.map(function(d){
	return d.age ;
}) ;

console.log(result);

    mapで新しい配列の作成例
  • 例：reduceで配列にある項目別の合計値 
    // 3項目の配列
var data=[
	{number:24, time:12, items:28},
	{number:14, time:23, items:34},
	{number:13, time:18, items:21},
	{number:18, time:15, items:24},
]

var result = data.reduce(function(a,b){
	a[0] += b.number;
    a[1] += b.time ;
    a[2] += b.items ;
	return a ;
},  [0,0,0]) ;  // 新しい配列を引数「a」に渡す

console.log(result);

    reduceで配列にある項目別の合計値を求める

for文でこれらの処理実現ができます

  • 反復処理関数の処理ロジックはコールバック関数（自作）に任せたので、当然for文でこれらの処理を実現できます 
    // 反復処理関数： reduce の例
var result = [2,4,6].reduce( function( pre, cur ){
    return pre + cur ;
} ) ;　// 結果： result=12

// for文で処理
var arr = [2,4,6] ;
var result = 0 ;
for( i=0; i<arr.length; i++ ){
    result += arr[i] ;
} // 結果：　result = 12
  • 配列の反復処理関数のほうが簡潔に見えます

違い：処理過程と出力

  • forEach: 何にも出力しません（処理のみ）
  • every: 処理中に最初のfalseがあった場合にfalseとして出力します（最後までfalseがなければtrueとして出力）
  • some: 処理中に最初のtrueがあった場合にtrueとして出力します（最後までtrueがなければfalseとして出力）
  • map: 生成された新しい配列を出力します
  • reduce: 単一の値を出力します

for文処理と比べて、配列の反復処理関数の方がパフォーマンス大幅に劣化の恐れ

  • ここで反復処理関数：map, reduceと同じfor文処理の時間比較を行います
    • 配列を1千万個にランダム数字を書き込みます 
      //　1千万個配列の用意
var arr = [] ;
for(i=0; i<10000000; i++){
  arr.push( Math.random() ) ;
}
    • 1千万回反復処理を行います
  • for文で1千万回処理時間： 35ms 
    // for文の1千万回の処理
var start = Date.now();　　//　処理開始時刻
var result =0;
for(i=0; i<arr.length; i++){
	result += arr[i] ;
}
var end = Date.now();  // 終了時刻

document.write("for文処理時間："+(end-start)+"<br>");
//　結果： 35ms
  • 反復処理関数：mapで処理時間：5640ms 
    // 反復処理関数：mapの1千万回の処理
var start = Date.now();　　//　処理開始時刻
var result =0;
arr.map( function(e){
	return result += e ;
}) ;
var end = Date.now();  // 終了時刻

document.write("mapの処理時間："+(end-start)+"<br>");
// 結果：　5640ms
  • 反復処理関数：reduceの処理時間： 488ms 
    // 反復処理関数：reduceの1千万回の処理
var start = Date.now();　　//　処理開始時刻
var result =0;
arr.reduce( function(pre, cur){
	return result += cur ;
}) ;
var end = Date.now();  // 終了時刻

document.write("reduceの処理時間："+(end-start)+"<br>");
// 結果：　488ms
  • 処理時間の比較
    for文 map reduce
    35ms 5640ms 488ms