JavaScriptのmapとfilter

最近JavaScriptのmap()とfilter()を知ったので、基本的な使い方をメモしておく.

mapとfilterの比較

同じところ

• コールの仕方は配列名.メソッド()
• 戻り値は配列
• アロー関数、コールバック関数、インラインコールバック関数を利用可能.

異なるところ

• map()で返される配列の各要素は元の配列の要素のディープコピー. filter()の場合はシャローコピー.
• map()は元の配列の各要素を加工したいときに使う. filter()は一部を抽出したいときに使う.
• map()のコールバック関数は要素を返すようにする. filter()のコールバック関数はBooleanを返すようにする.

mapの使い方

各要素を逆数にした新しい配列を生成

const array = [1,2,3];
const inverse = array.map( (num)=> 1.0/num);
console.log(inverse);    // [1, 0.5, 0.3333333333333333]

単純に配列をディープコピー

const array=[1,2,3];
const array_copy=array.map((num)=>num);    // [1, 2, 3]

文字を追加する

const array=[12, 18, 10];
const students=array.map((age)=>{
    if(age<12){
        return age+':elementary school student';
    }else if(age<15){
        return age+':junior high school student';
    }else{
        return age+':high school student';
    }
});
console.log(students);    // ['12:junior high school student', '18:high school student', '10:elementary school student']

filterの使い方

閾値より大きいもののみ抽出

const array=[10, 20, 30];
const bigger=array.filter((num)=>num>15); 
console.log(bigger);    // [20, 30]

特定の文字を持つ要素のみ抽出

const array=['one', 'two', 'three'];
const withT=array.filter((str)=>str.includes('t'));
console.log(withT);    // ['two', 'three']

map()とfilter()の合わせ技

偶数のみを二乗して新しい配列を作る

const array=[1,2,3,4,5,6,7,8,9,10];
const result=array.filter((num)=>num%2==0).map((even)=>even*even)
console.log(result);    // [4, 16, 36, 64, 100]

参考

qiita.com

developer.mozilla.org

developer.mozilla.org

jsnotice.com