forEach、map、filter関数を使いこなそう

どんな人が学ぶといい？

・for(var i = 0; i<test.length;i++){...}というループ処理をよく行っている人
・二次元配列データ処理をよく行う人

ざっくりと何ができるのか？

配列の処理の際、ループでの処理と処理後の要素の格納を同時に行うことができる。
通常の場合は以下の作業が必要

１，空配列を用意
２，for文でループさせる
３，ループ内の処理で処理を行う
４，処理後の数値を1で用意した配列に格納（push）していく

以上の処理を関数によって違いはあるが簡略化して書くことが可能。
またfor文ではなくforEach、map、filter関数を使うことでそのループ処理が何を意図してループ処理しているのかが分かりやすくなる。

forEach関数

array.forEach(function("引数"){処理内容})

配列の各要素に対して順番に処理をしていきたいときに使う。
ログ表示や別プロダクトへの出力など後続処理がない処理で使うイメージ。

処理後のデータを配列として保持したい場合は後述するmap関数の方がいい。エラーデータの確認などはsome,every関数、特定データの検索はindexof,find関数を使った方がいい。

function for_each() {
 let test = ["リンゴ","ゴリラ","ラッパ"];

 //for文を使用した書き方
 for(var i = 0; i<test.length;i++){
    Logger.log(test[i]);   
 }
  /*実行結果
 リンゴ
 ゴリラ
 ラッパ
 */ 

 //forEachを使用した書き方
 test.forEach(function(item){
   Logger.log(item);
 });
 /*実行結果
 リンゴ
 ゴリラ
 ラッパ
 */
}

forEach関数の書き方に違和感がある場合は先にコールバック関数やアロー関数について学んだ方がいいかもしれない。

コールバック関数やアロー関数の説明

map関数

array.map(function("引数"){処理内容})

配列の各要素に対して順番に処理し、処理後のデータを配列として保持したい場合に使用する。
forEachと異なり処理内容でreturnを返すことができ、returnで返された内容は配列として格納される。

function test_map(){
 let test = [1,2,3,4,5];
 
 
 var result = test.map(function( value ) {
     //配列の各要素を2倍にする
     return value * 2;
 });
 console.log( result );　//[ 2, 4, 6, 8, 10 ]



 //アロー関数を使用すると以下のように省略可能
 var result2 = test.map(item =>item*2);
 console.log( result2 ); //[ 2, 4, 6, 8, 10 ]


}

map使い方２：コールバック関数内の引数で配列要素以外を取得する

map関数では配列の要素以外に今何番目の要素化を表すindexや、元の配列を取得することができる。

function test_map2(){
 var items = [1,2,3,4,5,6,7,8,9];
 
 var result = items.map(( value, index, array )=> {
   /*
   value:配列の要素が順番に格納される
   index:今何番目の配列要素かindexが格納される
   array:元の配列（ここではitemsが格納される）
   　　　 arrayを変更すると元のitemsの中身まで変更される
   */
 
     //「index番号」が偶数の時だけ2倍にする
     if( index % 2 !== 0 ) {
         return value * 2;
     }
     else {
         return value;
     }
 });
 
 console.log( result );  //[ 1, 4, 3, 8, 5, 12, 7, 16, 9 ]
}

少し実践的な内容にして、条件に合った配列だけreturnに格納してみる。

function test_map3(){
 var men =[
   {name:"太郎",old:19,sex:"男"},
   {name:"治郎",old:45,sex:"男"},
   {name:"さや",old:34,sex:"女"},
   {name:"元太",old:97,sex:"男"},
   {name:"ももこ",old:38,sex:"女"}   
 ];
 var member_name =["さや","元太"];

 //map関数ではループさせる以外の変数を渡すことができる。
 var member_info =men.map((row)=>{
   if(member_name.indexOf(row.name)>=0){return row;}
 });

 console.log(member_info);

 /*
 map関数は毎ループで返り値を必須で返す。returnを書いてなくてもundefinedが返される。
 [ undefined,
   undefined,
   { name: 'さや', old: 34, sex: '女' },
   { name: '元太', old: 97, sex: '男' },
   undefined ]
 */

}

スクリプトにも書いてあるが、map関数は毎ループで返り値を必須で返す。returnを書いてなくてもundefinedが返される。

条件に合った時だけ返り値の配列にデータを格納したい。そんな時にはfilter関数が使用できる。

filter関数

array.filter(function("引数"){処理内容})

配列の各要素に対して順番に処理し、処理後のデータを配列として保持したい場合に使用する。
map関数とは異なり毎ループでreturnを返さなくてもいい。
if文などの条件分岐で条件に該当するデータだけを配列に格納したい時などに使用できる。

function test_filter(){
 var items = [1,2,3,4,5,6,7,8,9];

 var result = items.filter(value => {  
     //5よりも小さい数値だけを格納
     return value < 5;
 })
 
 console.log( result ); //[ 1, 2, 3, 4 ]
}

map関数の最後にできなかった処理についてもfilter関数で書き直してみる。

function test_filter2(){
 var men =[
   {name:"太郎",old:19,sex:"男"},
   {name:"治郎",old:45,sex:"男"},
   {name:"さや",old:34,sex:"女"},
   {name:"元太",old:97,sex:"男"},
   {name:"ももこ",old:38,sex:"女"}   
 ];
 var member_name =["さや","元太"];

 var member_info =men.filter((row)=>{
   if(member_name.indexOf(row.name)>=0){return row;}
 });

 console.log(member_info);

 /*
   [ { name: 'さや', old: 34, sex: '女' },
   { name: '元太', old: 97, sex: '男' } ]
 */

}