JavaScriptのmapメソッドは、与えられた配列の要素一つ一つを取り出し、そのそれぞれに対して指定した処理を行った結果を新しい配列として返します。
以下はmapメソッドの使用例です。
.js
const array1 = [1,2,3,4];
const map1 = array1.map(x => x * 3);
console.log(map);//> Array [3, 6, 9, 12]
この例では、array1という名前の配列を定義しています。次に、mapメソッドを使用してarray1の各要素に対してアロー関数(x => x * 3)を適用し、新しい配列map1を作成しています。このアロー関数は、与えられた数値を3倍する処理を表しています。
最終的に、map1配列にはarray1の各要素を3倍した値が格納されています。
ちなみに、mapメソッドをconsole.logで出力すると、配列から一つづつ値を取り出していることがわかります。
.js
const array1 = [1,2,3,4];
const map1 = array1.map((x, i, array1) =>
console.log(x);
);
/* xにはarray1の配列内のそれぞれの値が取り出されて格納されるため、
console.log(x)は下記のようになります。
> 1
> 2
> 3
> 4
*/
filterメソッドでは、配列のなかで指定した条件を満たす要素のみを新しい配列の要素として返します。
例えば、以下のような処理を考えてみます。
.js
array2 = [10, 20, 30, 40, 50];
filterdArray = array2.filter(x => x > 20);
console.log(filterdArray);
//>[30, 40, 50]と表示されます。
この例ではfilterメソッドを適用した際、array2の要素[10, 20, 30, 40, 50]を一つづつ変数xとして取り出し、そのxが20より大きければfilterArray配列の要素として追加、小さければ次の要素の比較という処理を行います。
またmapメソッドとfilterメソッドは、メソッドチェーンで繋げて使用することができ、ある配列の要素を２倍したもののうち、値が30より大きいものだけを抽出して配列を作りたいと言った時に便利です。
.js
const array = [10 ,20 ,30 ,40];
const mapFilter = array.map(x => x * 2).filter(x => x > 30);
console.log(mapFilter);//> [40, 60, 80]