Javascript / GAS | mapとfilterメソッドの使い方

    結論  :   

 mapは、配列から配列を作る。

filterは、配列から、条件に合致する要素をとりだして配列を作る。

どちらもコールバック関数を引数にとるメソッドである。

目次

結論

1.mapの使い方

2.filterの使い方

3.アロー関数の使い方

まとめ

map/filterは、配列に対して使用できるメソッドである。

また戻り値が配列であるため、複雑な処理をチェーンメソッドで一度に書ける。

そのためにはアロー関数も含めて使うことで、より便利に書くことができる。

1.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 ]

2.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 } ]

3.アロー関数の使い方

//アロー関数
  let jakunen = arr.filter((val, idx, arr) => {
    return val.age < 20;
  })
  let jakunen2 = arr.filter(val => {//引数1つなら、()も不要。ただし、引数の順番は守る必要がある。
    return val.age < 20;
  })
  let jakunen3 = arr.filter(val => val.age < 20)//1行でいい場合は、{}も不要。かつ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導入の負担を減らす

________________

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です