一般的な高階関数：
地図（）：
map（）メソッドはJavaScriptの配列で定義されているため、配列のmap（）メソッドを呼び出し、独自の関数を渡して、結果として新しい配列を取得します。基本的に、配列内のすべての数値が取り出されて操作が実行されます。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>map演示</title>
</head>
<body>
<script>
// 将数组内容全部乘以2
let a_list = [2, 3, 4, 5]
let newList = a_list.map(function (n) {
return n * 2
})
console.log(newList)
</script>
</body>
</html>
フィルタ（）：
フィルタは一般的に使用される操作であり、配列の一部の要素を除外して、残りの要素を返すために使用されます。Arrayのfilter（）は関数を受け取ります。map（）とは異なり、filter（）は渡された関数を各要素に順番に適用し、戻り値がtrueかfalseかに応じて、要素を保持するか破棄するかを決定します。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>filter演示</title>
</head>
<body>
<script>
// 将数组中大于5的过滤掉
let a_list = [2, 3, 4, 5, 6, 7, 8]
let newList = a_list.filter(function (n) {
return n <= 5
})
console.log(newList)
</script>
</body>
</html>
reduce（）：
配列のreduce（）は、この配列に関数を適用します。この関数は、2つのパラメーターを受け取る必要があります。一方は前の実行の結果であり、もう一方はこの実行のパラメーターです。reduce（）は、シーケンスの次の要素で結果を続行します。累積計算。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>reduce演示</title>
</head>
<body>
<script>
// 将数组加和
let a_list = [2, 3, 4, 5, 6, 7, 8]
// reduce的结构:
// reduce(fun(pre,cur),init) 此处的init为第一次给pre的赋值，如果不写，则默认数组的第一个值为pre,从第二个值开始执行
let total = a_list.reduce(function (preValue, currentValue) {
console.log('preValue:' + preValue)
return preValue + currentValue
})
console.log(total)
</script>
</body>
</html>
包括的な例：
請求：
- 1.配列内の100より大きい数値を削除します
- 2.新しい配列の数値に2を掛けます
- 3.残りの配列に番号を追加します
- 4.結果を得る
例1：一般的な実装方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
let aList = [20, 23, 22, 445, 21, 22, 100, 50, 200, 233, 46, 22]
let newList = []
//1.---------
for (const number of aList) {
if (number <= 100) {
newList.push(number)
}
}
let newList2 = []
//2.--------------
for (const newListElement of newList) {
newList2.push(newListElement * 2)
}
let total = 0
//3.-------
for (const newList2Element of newList2) {
total += newList2Element
}
console.log(aList, newList, newList2, total)
</script>
</html>
例2：高階関数の使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
let aList = [20, 23, 22, 445, 21, 22, 100, 50, 200, 233, 46, 22]
// 1.--------
newList = aList.filter(function (n) {
return n <= 100
})
let newList2 = []
// 2.---------
newList2 = newList.map(function (n) {
return n * 2
})
let total = 0
// 3.----------
total = newList2.reduce(function (pre, cur) {
return pre + cur
})
console.log(aList, newList, newList2, total)
</script>
</html>
例3：チェーンプログラミングを追加する
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
let aList = [20, 23, 22, 445, 21, 22, 100, 50, 200, 233, 46, 22]
let total = aList.filter(function (n) {
return n <= 100
}).map(function (n) {
return n * 2
}).reduce(function (pre, cur) {
return pre + cur
})
console.log(total)
</script>
</html>
例4：矢印関数の使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
let aList = [20, 23, 22, 445, 21, 22, 100, 50, 200, 233, 46, 22]
let total = aList.filter(n => n <= 100).map(n => n * 2).reduce((pre, cur) => pre + cur)
console.log(total)
</script>
</html>