JavaScript で map、filter、reduce を使用する方法を学びます.
2966 ワード
高階関数
高階関数とは、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;
}, []);
短くて甘いものにしてください!
Reference
この問題について(JavaScript で map、filter、reduce を使用する方法を学びます.), 我々は、より多くの情報をここで見つけました
https://dev.to/santan47/learn-how-to-use-map-filter-and-reduce-in-javascript-4ijp
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
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;
}, []);
短くて甘いものにしてください!
Reference
この問題について(JavaScript で map、filter、reduce を使用する方法を学びます.), 我々は、より多くの情報をここで見つけました
https://dev.to/santan47/learn-how-to-use-map-filter-and-reduce-in-javascript-4ijp
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
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;
}, []);
短くて甘いものにしてください!
Reference
この問題について(JavaScript で map、filter、reduce を使用する方法を学びます.), 我々は、より多くの情報をここで見つけました
https://dev.to/santan47/learn-how-to-use-map-filter-and-reduce-in-javascript-4ijp
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
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;
}, []);
短くて甘いものにしてください!
Reference
この問題について(JavaScript で map、filter、reduce を使用する方法を学びます.), 我々は、より多くの情報をここで見つけました https://dev.to/santan47/learn-how-to-use-map-filter-and-reduce-in-javascript-4ijpテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol