JavaScript常用的高阶函数

墨蓝 2023-10-05 08:52 54阅读 0赞

JavaScript的高阶函数  
filter | map | reduce  
filter：  
需求1：将一个数组中小于100的值过滤出来  
不使用filter函数时，就需要使用for循环遍历数组，并且使用if函数过滤  
const nums=\[10,20,50,120,180\]  
let newNums=\[\]  
for（let n of this.nums)\{  
if (n<100)\{  
newNums.push(n)  
\}  
\}  
使用filter函数时：  
const nums=\[10,20,50,120,180\]  
let newNums=nums.filter(function(n)\{  
return n<100  
\})  
filter回调一个函数时，必须返回一个boolean值，当boolean为true时就将n添加到新数组中，如果为false就过滤掉以上就是将nums数组中小于100的数值过滤出来添加到了newNums数组中  
map:  
需求2：将新的到的数组中的元素全部乘以2  
不使用map函数时：  
将新数组中的元素使用for循环遍历，然后*2  
let new2Nums=\[\]  
for(let n of newNums)\{  
new2Nums.push(n*2)  
\}  
使用map函数：  
let new2Nums=newNums.map(function(n)\{  
return n*2  
\})  
map函数也需要一个调函数，最后也需要一个返回值  
reduce：  
需求三：将获得的新数组相加得出结果  
不使用reduce函数：  
let total=0  
for(let n of this.new2Nums)\{  
total+=n  
\}  
使用reduce函数：  
let total =new2Nums.reduce(function(preValue,n)\{  
return preValue+n  
\},0)  
reduce函数就是将数组中的所有元素进行汇总，这个函数需要传入两个参数，reduce（参数1，参数2）在这里面参数1实际上就是一个function函数，参数2就是0，在function中要传入参数为上一步操作的值和操作后的值这个函数会遍历四次  
0 n 20 0就是传入的第二个参数 20就是第一个参数方法里的n  
20 n 40 20就是上一操作执行结束之后的preValue 40就是n  
60 n 80  
140 n 100  
240  
最后汇总结果即是240  
高阶函数的综合使用：  
直接完成三个需求之后获得汇总值  
let total=nums.filter(function(n)\{  
return n <100  
\}).map(function(n)\{  
return n*2  
\}).reduce(function(preValue,n)\{  
return preValue+n  
\},0)  
更简洁的写法  
let total=nums.filter(n => n<100).map(n=> n\*2).reduce((preValue,n) => preValue+n );