配列に役立つ高階関数を知っていますか?
はじめに: 配列にはプッシュやポップなど非常に簡単で便利なメソッドがたくさんありますが、実際に使用する高階関数もたくさんありますので、そのメソッドとシナリオをまとめてみましょう。 -order 関数: 高レベル order 関数は、別の関数を引数として渡すことができる関数です。
- それぞれに
- フィルター
- 地図
- 選別
- いくつかの
- 毎日
- 減らす
- 探す
1.それぞれ
forEach は配列内の各データを走査します。for との違いは、for は走査された配列の各項目を変更できるのに対し、forEach は元の配列を変更しないことです (配列オブジェクトの値が変更された場合、forEach はオブジェクトの値も変更します)。
簡単な使用法 - 配列内の特定のデータは、他のデータを変更するための判断基準として使用されます。
let arr = [ {
name:1}, {
name:2}, {
name:3},{
name:4}];
let num;
arr.forEach((item,index) => {
if(item.name === 1){
num = 10
}
});
2.フィルター
filter は、条件を満たす配列をフィルターで除外し、条件を満たします === 書き込まれた条件が true で新しい配列を形成する各項目を返します。元の配列は変更されません。簡単な使用方法 - 大きい数値で数値をフィルターで除外します。配列内の 8 よりも大きい
let arr = [{
name: 'a', number: 12 },{
name: 'b', number: 8 },{
name: 'c', number: 7 }, {
name: 's', number: 5 }]
let arr1 = arr.filter((item, index) => {
return item.number > 8
})
注: filter. 戻り条件が何であっても、条件を満たす配列の要素全体が返されます。
let arr = [ {
name: 'c', id: 1 }, {
name: 'c', id: 3 }, {
name: 'c', id: 8 }]
let arr2 = [1, 5]
let a = arr.filter(item => arr2.includes(item.id))
console.log(a)
このとき、条件を満たすオブジェクト全体（配列にはid 1, 5が含まれる） {name: 'c', id: 1 }が返されます。
3.地図
マップ トラバーサル。処理された配列の各項目を返して新しい配列を形成します (マップは通常、配列の各項目が必要な場合に使用されます)。通常、配列のオブジェクトを再結合するか、配列データに新しい項目を追加するために使用されます。マップを使用して React でトラバースするなど
簡単な例 1 - 配列オブジェクトのデータを再構築する
let arr = [{
name: 'a', age: 15, fav: "篮球" },{
name: 'b', age: 15, fav: "足球" },{
name: 'c', age: 15, fav: "乒乓球" }, {
name: 'd', age: 15, fav: "排球" }, {
name: 'e', age: 15, fav: "羽毛球" }];
let arr1 = arr.map((item, index) => {
return {
pepleName: item.name, myFav: item.fav, index: index + 1 }
})
Print arr1 -データ再構成後の配列の
単純なインスタンスです。 2 - 新しいデータを配列に追加します。
let arr = [ {
name: 'a', age: 15, fav: "篮球" }, {
name: 'b', age: 15, fav: "足球" }, {
name: 'c', age: 15, fav: "乒乓球" }, {
name: 'd', age: 15, fav: "排球" }, {
name: 'e', age: 15, fav: "羽毛球" }];
let arr1 = arr.map((item, index) => {
return {
...item, index: index + 1 }
})
もちろん、マップと組み合わせたディープコピーを使用して return ステートメントを 1 つに置き換えても、結果は同じです
return Object.assign(item,{
index:index+1})
Print -arr1
簡単な例 3 - インデックスを使用して配列と一致させる
let arr = [ {
name: 'a', age: 15, fav: "篮球" }, {
name: 'b', age: 15, fav: "足球" }, {
name: 'c', age: 15, fav: "乒乓球" }, {
name: 'd', age: 15, fav: "排球" }, {
name: 'e', age: 15, fav: "羽毛球" }];
let arr1 = [ {
key: '1', val: 'sss' }, {
key: '2', val: 'fsd' }, {
key: '3', val: 'fds' }, {
key: '4', val: 'fewf' }, {
key: '5', val: 'ewd' }]
let arr2 = arr.map((item, index) => {
return {
...arr1[index], ...item }
});
arr2 を印刷 -
4.並べ替え
sort は、主に渡された関数に従って配列を並べ替えることです。最も単純なのは数値による並べ替えです。
簡単な例 - 1 - 数値の並べ替え
let arr = [1, 5, 2, 8, 10, 53, 9, 4]
let arr2 = arr.sort((a, b) => {
return a - b
})
let arr3 = arr.sort((a, b) => {
return b - a
})
arr2、arr3 を出力します - 昇順、降順の
簡単な現地語の説明 - 比較関数を sort メソッドに渡します。この関数は、並べ替えられた配列内の 2 つのパラメーター (a、b) の順序を決定します。が最初に来ると仮定すると、比較関数は 0 未満の値を返す必要があります。逆に、最初の引数が後に来ると仮定すると、関数は 0 より大きい値を返す必要があり、2 つの値が等しいと仮定すると、関数は次の値を返す必要があります0. これを使用して、より複雑な並べ替えを行うことができます
以下は、配列内の要素が条件を満たしているかどうかを確認し、最後にブール値を必要とするいくつかの高階関数を確認します。
5.いくつか
some メソッドは、元の配列を変更せずにブール値を検出して返します。実行中に、いずれかが満たされると true が返され、実行は続行されません。
単純なケース - 配列オブジェクトに特定の値が含まれているかどうかを確認します
let arr = [ {
name: 'a', age: 15}, {
name: 'c', age: 55}{
name: 'v', age: 14}, {
name: 'd', age: 18} ]
arr.some(item => item.name.includes('a'))
//检测数组，当检测到第一个对象有a,直接返回true
6.毎
一部とは異なり、配列内の各項目が条件を満たすかどうかをチェックし、すべてが満たされた場合にのみ true を返します。
単純なケース - 配列内のすべてのオブジェクトが条件を満たすかどうかを確認します
let arr = [ {
name: 'a', age: 15}, {
name: 'c', age: 55}, {
name: 'v', age: 14}, {
name: 'd', age: 18} ]
arr.every(item => item.age>10)
7.減らす
コールバック関数のメソッドは配列内の要素を実行します。これは蓄積によく使用されます。
簡単な例 - 配列の累積
let arr = [1,5,8,2,10 ]
let a = arr.reduce((total,num)=>{
return total+num
})
console.log(a)
同様に、乗算することもできます。total が配列の最初のオブジェクト、num が 2 番目のオブジェクトであると理解して、ループ処理を行うことができます。2 番目の合計は関数を実行したデータで、num は 3 番目の値です。
8.見つける
配列内で条件を満たす項目を検索し、条件を満たす項目を見つけて、条件を満たす項目を直接返し、それ以上検索しません。
シンプルなケース
let arr = [ {
name: 'a', age: 15}, {
name: 'c', age: 55},{
name: 'v', age: 14}, {
name: 'd', age: 18} ]
let a = arr.find(item => item.age>10)
console.log(a)
配列の最初の項目を出力します
いいね、いいね、集めてください！