常见高阶函数：
map()：
由于map()方法定义在JavaScript的Array中，我们调用Array的map()方法，传入我们自己的函数，就得到了一个新的Array作为结果。本质上是把数组中的每个数都取出来执行一遍操作。
示例：
<!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>
filter():
filter是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。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()：
Array的reduce()把一个函数作用在这个Array上，这个函数必须接收两个参数，一个是上一次执行的结果，一个是本次执行的参数，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>