js高級進級の高次関数編

高次関数を習得することは、フロントエンドの開発者一人一人が高度な段階に進むために必要な道です.ビジネスコードでは使用しないことができますが、他人のコードを読む必要があります.これらの高次使用方法に慣れていないと、必然的に軽蔑され、粘り強い不注意なむやみな修正を強行することは災難的な結果をもたらします.もちろん高次関数を学ぶのもいくつかの高次関数の方法を使うだけではなくて、最も主要なのはその設計思想を味わって、自分の後で牛迫点のコードを書くために基礎をします.
高次関数の概念
一等関数JavaScriptが関数を一等公民と見なしていると聞いたことがあるかもしれません.JavaScriptや他の関数式プログラミング言語では、関数がオブジェクトであるためです.
JavaScriptでは、関数は特殊なタイプのオブジェクトです.彼らはFunctionの対象です.JavaScriptでは、オブジェクト、文字列、数値などの他のタイプの操作関数を使用して実行できます.パラメータとして他の関数(コールバック関数)に渡したり、変数に割り当てて渡したりすることができます.JavaScriptの関数がFirst-Class関数(一等関数)と呼ばれている理由です.これに対応するのは、
高次関数高次関数は、他の関数を操作する関数であり、パラメータとして返すか、返すことができます.簡単に言えば、高次関数は、パラメータとして関数を受信したり、出力として関数を返したりする関数です.
jsでよく見られる高次関数
map
定義:map()メソッドはJavaScriptのArrayで定義され、元の配列呼び出し関数で処理された値を持つ新しい配列を返します.
注意:map() ，map() 構文:array.map(function(currentValue, index, arr), thisIndex)パラメータの説明:
function(currentValue,index,arr):必須です.関数の場合、配列内の各要素がこの関数を実行します.関数パラメータ:

currentValue：  。       。
index：  。       。
arr：  。           。

thisValue:オプションです.オブジェクトは、このコールバックを実行するときに使用され、関数に渡され、「this」の値として使用されます.
インスタンスの印刷結果:

let indexValue = [6,7,8];
let resultArry = arry.map(function(currentValue, index, arr){
    console.log("currentValue: "+currentValue);
    console.log("index: "+index);
    console.log("arr: "+arr);
    console.log("indexValue: "+indexValue);
    console.log("this: "+this);
    console.log("----------------------------------------")
},indexValue)
VM1084:4 currentValue: 2
VM1084:5 index: 0
VM1084:6 arr: 2,3,4
VM1084:7 indexValue: 6,7,8
VM1084:8 this: 6,7,8
VM1084:9 ----------------------------------------
VM1084:4 currentValue: 3
VM1084:5 index: 1
VM1084:6 arr: 2,3,4
VM1084:7 indexValue: 6,7,8
VM1084:8 this: 6,7,8
VM1084:9 ----------------------------------------
VM1084:4 currentValue: 4
VM1084:5 index: 2
VM1084:6 arr: 2,3,4
VM1084:7 indexValue: 6,7,8
VM1084:8 this: 6,7,8
VM1084:9 ----------------------------------------

以上の各パラメータの実行プロセスの値が明確に表示されます.
経典の応用:配列の各平方を求めます:

let a = [0,1,2,3];

let aSquare = a.map(x=>x*x);

console.log(aSquare)//[0, 1, 4, 9]

reduce
定義:
reduce()メソッドは、関数をアキュムレータとして受信し、配列内の各値(左から右)を縮小し、最終的に値として計算します.
reduce()は、関数のcomposeに使用される高次関数として使用できます.「js高度なステップcomposeとpipe」を参照してください.
注意:reduce()は空の配列に対してコールバック関数を実行しないmapと同じです.
構文:array.reduce(function(total, currentValue, currentIndex, arr), initialValue)パラメータの説明:
function(total,currentValue,index,arr):必須.各配列要素を実行するための関数です.関数パラメータ:

		total	  。   ,            。
		currentValue	  。    
		currentIndex	  。       
		arr	  。           。

インスタンスは、各パラメータの値を印刷します.

let b = [10,100,1000];
let initialValue = [10,20]

let res = b.reduce(function(total, currentValue, currentIndex, arr){
    console.log("total:"+total);
    console.log("currentValue:"+currentValue);
    console.log("currentIndex:"+currentIndex);
    console.log("arr:"+arr);
    console.log("initialValue:"+initialValue);
    console.log("------------------------------");
}, initialValue)
VM1169:5 total:10,20
VM1169:6 currentValue:10
VM1169:7 currentIndex:0
VM1169:8 arr:10,100,1000
VM1169:9 initialValue:10,20
VM1169:10 ------------------------------
VM1169:5 total:undefined
VM1169:6 currentValue:100
VM1169:7 currentIndex:1
VM1169:8 arr:10,100,1000
VM1169:9 initialValue:10,20
VM1169:10 ------------------------------
VM1169:5 total:undefined
VM1169:6 currentValue:1000
VM1169:7 currentIndex:2
VM1169:8 arr:10,100,1000
VM1169:9 initialValue:10,20
VM1169:10 ------------------------------

reduceインスタンスは配列和を適用する

let b = [10,100,1000];
let sum = b.reduce((total,currentValue)=>total+=currentValue,0);
console.log(sum)//1110

数値10000と配列bの要素の和を求めたいとしたら、次のように書きます.

let b = [10,100,1000];
let sum = b.reduce((total,currentValue)=>total+=currentValue,10000);
console.log(sum)
VM1268:3 11110

reduceインスタンスは配列の重み付けを適用する

let c = [1,2,3,2,1,null,null]

let result = c.reduce((ac,current)=>{
   return ac.includes(current)?ac : ac.concat(current);
},[])
console.log(result);

reduceインスタンス配列降次元の適用

let d = [[1,2],[3,4],[5,6]];

let cd = d.reduce((total,current)=>{
    return total.concat(current)
},[])

console.log(cd)
VM140:8 (6) [1, 2, 3, 4, 5, 6]

filter
定義と使用法:filter()メソッドは、指定した配列の条件に合致するすべての要素をチェックする新しい配列を作成します.
注意:filter()は空の配列を検出しません.
注意:filter()は元の配列を変更しません.
構文array.filter(function(currentValue,index,arr), thisValue)パラメータの説明:
function(currentValue,index,arr)は必須です.関数、配列内の各要素は、次の関数パラメータを実行します.

	currentValue	  。      
	index	  。        
	arr	  。           

このValueはオプションです.オブジェクトは、このコールバックを実行するときに使用され、関数に渡され、「this」の値として使用されます.this Valueが省略されている場合、thisの値はundefinedになります.
インスタンス印刷パラメータ値の適用

let as =[2,3,3,3,6];
let thisValue = 0;

as.filter(function(currentValue,index,arr){
    console.log("currentValue:"+currentValue);
    console.log("index:"+index);
    console.log("arr:"+arr);
    console.log("initialValue:"+thisValue);
    console.log("------------------------------");
}, thisValue)
VM194:5 currentValue:2
VM194:6 index:0
VM194:7 arr:2,3,3,3,6
VM194:8 initialValue:0
VM194:9 ------------------------------
VM194:5 currentValue:3
VM194:6 index:1
VM194:7 arr:2,3,3,3,6
VM194:8 initialValue:0
VM194:9 ------------------------------
VM194:5 currentValue:3
VM194:6 index:2
VM194:7 arr:2,3,3,3,6
VM194:8 initialValue:0

インスタンス配列を適用して偶数値を除去

let as =[2,3,4,5,6];
as.filter((current,index)=>{
   return  current%2 == 0
})
(3) [2, 4, 6]

flat
配列フラット化処理----次元ダウン

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]