見出し画像

reduce, find, some, every関数を使いこなそう


今回の関数はforEach, map, filter関数とは異なり用途がそれぞれ決まっている。漸化式(reduce)、データ検索(find)、条件判定(some, each)と使いどころは限られる。

forEach, map, filter関数について


どんな人が学ぶといい?

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


reduce関数 

array.reduce(function("引数1", "引数2"){処理内容})

配列の(左から右へ)順番に記述した処理内容を実行する。
前回実行した結果(returnで返された値)が引数1に格納される。
引数2には配列の次の要素が格納される。
※最初のループでは引数1にarray[0]、引数2にarray[1]が格納される。

最終的なreduce関数の返り値は最後にreturnに返された単一の値が格納される。

数学で学ぶ「漸化式」とほぼ同じ挙動をとる。

function test_reduce(){
 var numbers = [1,2,3,4,5,6,7,8,9];
 
 var result = numbers.reduce((sum, item)=> {
   //sumには前のループでreturnされた累積値が格納される。
   //resultには最終ループでreturnに返された値のみが格納される(map関数などとは違い一つの値しか返されない)
   return sum+item;
 })
 
 console.log(result); 
 //45
}


reduce関数の使用失敗例

純粋な配列以外(連想配列など)には使えない

function test_reduce2(){
 var men =[
   {name:"太郎",pay:1200},
   {name:"次郎",pay:3300},
   {name:"小次郎",pay:4300},
   {name:"馬太郎",pay:3200},
   {name:"三郎",pay:1800}  
 ];

 //map関数ではループさせる以外の変数を渡すことができる。
 var all_pay =men.reduce((sum,row)=>{return sum + row.pay});
 console.log(all_pay); 
 //[object Object]3300430032001800 

 /*
 men[0]は最初sumに格納されるらしい
 連想配列に各payの数値を足していく形になり
 文字列としてオブジェクトデータに数値が結合されている。
 連想配列の処理ができないとなると使い道が限られそう...
 */
}



find関数

array.find(function("引数"){条件式})

条件式を最初に満たす要素を返す関数。見つからなかった場合は undefined を返す。
条件式を使った柔軟な判定式の作成、見つかった要素をそのままreturnとして変数に格納できる点で有用

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

 //find関数では条件に該当する一番最初の要素を返す。
 var member_info =men.find((row)=>{return row.sex==="男"});

 console.log(member_info); //{ name: '太郎', old: 19, sex: '男' } 
}



every関数

array.every(function("引数"){条件式})

array配列の要素が条件式を満たしているかのチェックを行う。すべての要素が条件を満たす場合のみtrueを返す。
またnullや0などの値検知も可能。


function test_every(){
 const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 const arr2 =["hallo",null,"world"];

 //コールバック関数内の条件をすべて満たすかどうかを返り値として返す
 console.log(arr.every(value => value > 0));
 //true

 console.log(arr.every(value => value < 5));
 //false



 //比較をしなくてもreturnで配列の要素チェックができる
 //nullや0をreturnする場合はfalseとなる
 console.log(arr2.every(item=>{return item}));
 //false

}



some関数

array.some(function("引数"){条件式})

array配列の要素が条件式を満たしているかのチェックを行う。配列の要素一つでも条件を満たせばtrueを返す。
またnullや0などの値検知も可能。


function test_some(){
 const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 const arr2 =["hallo",null,"world"];

 //コールバック関数内の条件をひとつでも満たすかどうかを返り値として返す
 console.log(arr.some(value => value > 10));
 //false

 console.log(arr.some(value => value < 5));
 //true

 //比較をしなくてもreturnで配列の要素チェックができる
 //nullや0をreturnする場合はfalseとなる
 console.log(arr2.some(item=>{return item}));
 //true
}

この記事が気に入ったらサポートをしてみませんか?