ray88’s diary

お仕事で困ったとき用の自分用の覚書

JavaScript  Arrayオブジェクトの反復メソッドとコールバック関数(for each,every,some,filter,map)

JavaScript 目次 - ray88’s diary
反復メソッド
 配列内の各要素について指定する関数を呼び出す。
また、呼び出す関数をコールバック関数という
※反復メソッドのコールバック関数にはアロー関数を使用するのがお勧め。
  多くの場合アロー関数の省略ルールを適用できる。
 
 ●for each メソッド
 ①値・②インデックス(省略可)・③元の配列(省略可)の3つの仮引数がある
 【サンプルコード】

function myFunction(){
  const array = ['Apple','Orange','Banana','Peach','Cherry'];
  
  array.forEach((fuluit,index) => console.log(`${index}:${fuluit}`));
}


every メソッド
配列の要素の全てがコールバック関数を満たすかどうか
(trueを返すかどうか)を判定する
some メソッド
配列の要素の少なくとも1つがコールバック関数を満たすかどうか
(trueを返すかどうか)を判定する
filterメソッド
配列の要素の中でコールバック関数を満たす要素のみの配列を返す
mapメソッド
コールバック関数の結果を配列として返す
※上記のevery,some,filter,mapメソッドはfor each と同様以下3つの仮引数が必要
 ①値・②インデックス・③元の配列

function myFunction(){
  const array = ['Apple','Orange','Peach','Cherry'];
  
  //everyメソッド
  console.log(array.every(value => value.includes('e')));true
  //someメソッド
  console.log(array.some(value => value === 'Orange'));true
  //findメソッド・配列の要素のうち条件を満たす最初の要素を返す
  console.log(array.find(value => value.includes('a')));'Orange'
  //findインデックス・配列の要素のうち条件を満たす最初の要素のインデックスを返す
  console.log(array.findIndex(value => value.includes('a')));1

  //filterメソッド(charAtメソッドはインデックスnの文字を返す)
  console.log(array.filter(value => value.charAt(2)==='a'));//[ 'Orange', 'Peach' ]
 //mapメソッド
  console.log(array.map(value => value.length));//[ 5, 6, 5, 6 ]
}

reduce メソッド
配列の要素を先頭からコールバック関数を実行してひとつの値にまとめて返す
reduceRightメソッド
配列の要素を末尾からコールバック関数を実行してひとつの値にまとめて返す
※recuceメソッドとreduceRightメソッドの引数
 ①前回のコールバック関数の戻り値,②現在の値,③インデックス(省略可),④元の配列(省略可)