JavaScript で map、filter、reduce を使用する方法を学びます.


高階関数



高階関数とは、1 つ以上の関数を引数として受け取るか、関数を結果として返す関数です.
map、filter、reduce はすべて高階関数で、関数を引数として取ります.

マッピング、フィルター、削減の基礎



Map、reduce、filter はすべて JavaScript の配列メソッドです.それぞれが配列を反復処理し、変換または計算を実行します.それぞれが、関数の結果に基づいて新しい配列を返します.

。地図()



map() メソッドは、既存の配列から新しい配列を作成するために使用され、最初の配列の各要素に関数を適用します.

配列のすべての要素がコールバック関数に渡され、同じ長さの新しい配列が返されます.
map を使用する場合: 配列の各要素に対して同じ操作/変換を実行し、変換された値で同じ長さの新しい配列を取得する場合.

var numbers= [1,2,3,4,5];
var doubled  = numbers.map(n => n * 2);
doubled; // [2,4,6,8,10]


。フィルター()



filter() メソッドは、配列内の各要素を取得し、それに対して条件文を適用します.この条件が true を返す場合、要素は出力配列にプッシュされます.条件が false を返す場合、要素は出力配列にプッシュされません.

配列のすべての要素がコールバック関数に渡されます.各反復で、コールバックが true を返す場合、その要素は新しい配列に追加されます.それ以外の場合は、新しい配列に追加されません.

var numbers = [1,2,3,4,5];
var greaterThan2 = numbers.filter(n => n > 2);
greaterThan2; // [3,4,5]


。減らす()



reduce() メソッドは、値の配列を 1 つの値に減らします.出力値を取得するために、配列の各要素に対してレデューサー関数を実行します.

reduce を使用している間は、アキュムレータ (最終結果) の初期値を宣言する必要があります.各反復で、コールバック内でいくつかの操作を実行し、それがアキュムレータに追加されます.

var numbers = [1,2,3,4,5];
var initialVal = 0;
let result=numbers.reduce((accu, val) => val + accu , initialVal);
console.log(result) // 15


実際の例



実際の実用的な例を作成してみましょう: インタビューの実施.

1.map:複数候補の試験実施
2.filter: 合格者の選別
3.reduce:選ばれた候補者からチームを作る

var users = [{"user": "👩🏻‍💻"},{"user": "👨🏾‍💻"},{"user": "💃"},{"user": "👨🏻‍🎓"},{"user": "🧑🏻‍🏫"},{"user": "🦸‍♂️"},{"user": "🧟‍♂️"}];

let resultDetails = users.map(user => {
    let mark = Math.random() * 100;
    user.mark = mark;
    return user
});
//for me resultDetails 
/*
0: {user: "👩🏻‍💻", mark: 76.03572182106969}
1: {user: "👨🏾‍💻", mark: 71.62190728557552}
2: {user: "💃", mark: 56.21776553271223}
3: {user: "👨🏻‍🎓", mark: 25.801390164601944}
4: {user: "🧑🏻‍🏫", mark: 85.74297532451267}
5: {user: "🦸‍♂️", mark: 67.11805101358996}
6: {user: "🧟‍♂️", mark: 18.253450044782184}
*/

var selectedCandidate = resultDetails.filter(user => {
    if(user.mark > 50){
        return user;
    }
});
/* selected candidate 
0: {user: "👩🏻‍💻", mark: 76.03572182106969}
1: {user: "👨🏾‍💻", mark: 71.62190728557552}
2: {user: "💃", mark: 56.21776553271223}
3: {user: "🧑🏻‍🏫", mark: 85.74297532451267}
4: {user: "🦸‍♂️", mark: 67.11805101358996}
*/

// Create Team 

let TeamMembers = selectedCandidate.reduce((teamMembers,  user) => {
     teamMembers.push(user);
    return teamMembers;
}, []);



短くて甘いものにしてください!