結論 ：
mapは、配列から配列を作る。
filterは、配列から、条件に合致する要素をとりだして配列を作る。
どちらもコールバック関数を引数にとるメソッドである。
map／filterは、配列に対して使用できるメソッドである。
また戻り値が配列であるため、複雑な処理をチェーンメソッドで一度に書ける。
そのためにはアロー関数も含めて使うことで、より便利に書くことができる。
１.mapの使い方
mapはある配列から要素を取り出し、新しい配列を作るメソッド。
let 新しい配列名 = 配列 . map ( function ( value, index , array){ return 新しい配列に追加したい値 ; })
const persons = [
{ name: 'sazae', age:28},
{ name: 'katuo', age:15},
{ name: 'wakame', age:13}
]
let persons_name = persons.map(function(val){
return val.name;
})
console.log(persons_name);//['sazae','katuo','wakame'];上の内容をアロー関数で表すと以下のようになる
let persons_name = persons.map((val) => { return val.name});
let persons_name = persons.map(val => val.name);
filterと違って、取り出すときに全ての要素を取り出すため、一部の値だけが欲しいという処理には向かない。
let over20 = persons.map((val) => {
if (val.age >= 20)
return val }
);
console.log(over20);//[ { name: 'sazae', age: 28 }, undefined, undefined ]２.filterの使い方
filterは、配列から、条件にが地位する要素のみを残した配列をつくるメソッド。
let 新しい配列名 = 配列 . filter(( value , index, array) => { return 真偽値;}
先ほどmapではできなかった、ageが20歳以上のオブジェクトの取り出しをfilterで再度行ってみる。
const over20 = persons.filter((val) => {
if (val.age >= 20)
return val
}
);
console.log(over20);// [ { name: 'sazae', age: 28 } ]
３.アロー関数の使い方
//アロー関数
let jakunen = arr.filter((val, idx, arr) => {
return val.age < 20;
})
let jakunen2 = arr.filter(val => {//引数１つなら、()も不要。ただし、引数の順番は守る必要がある。
return val.age < 20;
})
let jakunen3 = arr.filter(val => val.age < 20)//１行でいい場合は、{}も不要。かつreturnも不要
const text = arr.join('\n');
const text2 = arr
.filter(val => val.age < 60)
.map(val => `${val.nameは学生。`)
.join(' と ');
console.log(text2);
}//チェーンメソッドの使い方まとめ
複雑な処理をまとめてかけるfilter / map は便利。
コールバック関数を引数にとるメソッドの中でもよく使うもの。
Cloud Tree
Cloud Treeは中小企業向けDX・システム制作会社です。
中小企業DXツールであり、コストパフォーマンスが高いZohoを当社でも採用しております。
システムづくり、業務効率化、Zohoにご興味をお持ちの方は、問い合わせボタンまたはメニューよりお声がけください。
執筆者 佐伯 翔子
CloudTree所属
Zoho導入パートナー、webデザイナー、GASシステムアプリ制作
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
現場の役に立つシステムを作る
DX導入の負担を減らす
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
JA 
EN