JavaScript高阶函数

Posted 2021-09-04 n6nzcewp

需求：有这样一个数组[10, 20, 110, 200, 60, 30, 40]
1.筛选出数组中小于100的元素
2.将筛选出的每个元素的值x2
3.完成第2步之后，将数组中的所有元素加起来

普通方法
如果我们还没接触过filter、map、reduce，那么就是用for循环

html
<script>
list = [10, 20, 30, 40, 60, 110, 200]
newList = []
newList2 = []
total = 0
// 第1次for循环把小于100的数加入新的数组newList
for (item of list){

if (item<100){
  newList.push(item)
}

}
// 第2次for循环把所有的元素值乘以2
for (item of newList){

newValue = item * 2
newList2.push(newValue)

}
// 第3次for循环把数组中的全部元素加起来
for (item of newList2){

total += item

}
console.log(total)
</script>
以上写起来非常繁琐，还要定义很多变量，代码阅读起来也不是很好，其实我们有更好的方式，下面介绍

filter
检测数值元素，并返回符合条件所有元素的数组。

定义和用法
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素

注意
filter() 不会对空数组进行检测。
filter() 不会改变原始数组。

语法
Bash
array.filter(function(currentValue,index,arr), thisValue)
参数说明如下：

function(currentValue, index, arr)：必填函数，数组中的每个元素都会执行这个函数
currentValue：必填，当前元素的值
index：可选。当前元素的索引值
arr：可选。当前元素属于的数组对象
thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 this 的值。如果省略了 thisValue ，this 的值为 undefined

小练习
使用filter函数筛选出[10, 20, 110, 200, 60, 30, 40]小于100的

Bash
list = [10, 20, 30, 40, 60, 110, 200]
newList = list.filter(function (n) {
return n < 100
})
console.log(newList)
打印结果

CSS
[10, 20, 30, 40, 60]

map
通过指定函数处理数组的每个元素，并返回处理后的数组。

定义和用法
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。

注意
注意： map() 不会对空数组进行检测。
注意： map() 不会改变原始数组。

语法
Bash
array.map(function(currentValue,index,arr), thisValue)
参数说明如下：

function(currentValue, index, arr)：必填函数，数组中的每个元素都会执行这个函数
currentValue：必填，当前元素的值
index：可选。当前元素的索引值
arr：可选。当前元素属于的数组对象
thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 this 的值。如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。

小练习
将数组[10, 20, 30, 40, 60]中的每个元素值乘以2

HTML
<script>
list = [10, 20, 30, 40, 60]
newList = list.map(function (n) {

return n * 2

})
console.log(newList)
</script>
打印结果

CSS
[20, 40, 60, 80, 120]

reduce
将数组元素计算为一个值（从左到右）

定义和用法
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
reduce() 可以作为一个高阶函数，用于函数的 compose。
注意:reduce() 对于空数组是不会执行回调函数的。

语法
Bash
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
参数说明如下：

function(total,currentValue, index,arr)：必填函数，数组中的每个元素都会执行这个函数
total：必填。初始值, 或者计算结束后的返回值。
currentValue：必填，当前元素的值
index：可选。当前元素的索引值
arr：可选。当前元素属于的数组对象
initialValue：可选。传递给函数的初始值

小练习
计算数组之和[20, 40, 60, 80, 120]

HTML
<script>
list = [20, 40, 60, 80, 120]
newList = list.reduce(function (total, n) {

return total + n

}, 0)
console.log(newList)
</script>
打印结果

320

使用filter和map和reduce完成案例
上面我们分别介绍了3个高阶函数，接下来结合起来使用

方式1
HTML
<script>
list = [10, 20, 110, 200, 60, 30, 40]
newList = list.filter(function (n) {

return n < 100

}).map(function (n) {

return n * 2

}).reduce(function (total, n) {

return total + n

})
console.log(newList)
</script>

方式2
HTML
<script>
list = [10, 20, 110, 200, 60, 30, 40]
newList = list.filter(n => n < 100).map(n => n * 2).reduce((total, n) => total+n);
console.log(newList)
</script>
以后我们就可以一行代码完成上面的需求，而不需要使用for循环了