概要

配列には、配列のすべての要素に対して処理を行うメソッドがあります。
配列のすべての要素に対して行うメソッドには3つあります。

index.js

.forEach(f)
.map(f)
.filter()

これらの反復メソッドは、アロー関数で表されます。

アロー関数とは

関数は、名前を付けて使用するとしてきました。しかし、関数は名前を付けずに使用することもできます。しかし、名前のない関数は呼び出すことができません。そこで、使用するためにオブジェクトのプロパティに入れる、関数の引数にする、すぐにその場で使用する。という方法があります。

1、オブジェクトのプロパティに入れる▶メソッド
2、関数の引数にする▶コールバック関数
３，その場で使う▶即時関数

アロー関数は、多くの場合関数の引数に設定するコールバック関数として使います。

コールバック関数

引数に、要素、位置、配列そのものを取ります。コールバック関数に渡される値はメソッド実行時の値です。コールバック関数が呼ばれるのは、値が代入済みの要素です。

forEach(f)

配列の各要素をコールバック関数fで処理します。
値を代入していない値は実行されません。

index.js

const fruits = ["りんご","ばなな","いちご","メロン"];

fruits.forEach((fruit,index) =>{
  console.log(`${index}個：${fruit}`);
});
//0個：りんご
//1個：ばなな
//2個：いちご
//3個：メロン

.map(f)

配列の各要素をコールバック関数fで処理して、関数の戻り値から新しい配列を作って返します。数値から作った文字列の配列を作ります。

index.js

const num = [1,2,3,4,5,6];
    
const num2 = num.map(x => `${x}番目`);
    
console.log(num2);

//["1番目", "2番目", "3番目", "4番目", "5番目", "6番目"]

*アロー関数は、引数が1つの場合は()を省略することができ、処理が1つの場合は{}も省略することができます。

.filter(f)

配列の各要素をコールバック関数fで処理して、trueとみなす値を返した要素のみの新しい配列を作って返します。

index.js

const num2 = num.filter(x =>{
  if (x % 2 === 0) {
    return true;
  } else {
    return false;
  }
});

console.log(num2);
//[2, 4, 6]

*細かく記述すると上記の様な記述になります。しかしif文は省略することができます。そして、アロー関数では処理が1行のみの場合、{}とreturnを省略することができます。その場合は、処理結果がそのまま戻り値になります。

index.js

const num2 = num.filter(x =>x % 2 === 0); 

console.log(num2);
//[2, 4, 6]

メソッドチェーンの使用(番外編)

メソッドチェーンとは、あるオブジェクトに対してメソッドを.（ドット）で連結して繋げていくことです。
前のメソッドで返ってきた値を次に繋げたメソッドが受け取って処理していきます。

index.js

[400,533,632,333]
.map((x,i) => ({i: i, n: x})) //位置と値を記録したオブジェクトの作成
.filter(x => x.n % 2 === 0) //偶数の要素のみを抜き出す
.forEach(x => console.log(`${x.i}番目${x.n}`)); //文字列にして出力