JavaScript的高阶函数笔记

短命女 2022-11-15 11:49 180阅读 0赞

今天和一位老师学习了高阶函数，感觉非常有用，做个笔记。

我学习的JavaScript三个高阶函数是filter/map/reduce，高阶函数真的很不错，我打个比方吧，如果说之前使用jQuery的编程速度是‘骑单车’，那么使用JavaScript高阶函数编程就是‘骑摩托车’了，具体看下面例子：

现在有三个需求，  
1、取出一个数组里小于100的数字，  
2、再将取出小于100的数字乘以2，  
3、再将乘以二之后的元素相加求和。如何实现呢？  
如果我们使用以前的老办法解决那就是不停的使用for循环来操作数组里面的元素。

这个大家都会我想就不需要演示了。  
我在直接展示高阶函数的使用：  
假如这个数组是这样的：

const nums = [10, 20, 111, 222, 444, 40, 50]

第一个要求可以使用高阶函数 filter

*  filter中的回调函数有一个要求：必须返回一个boolean值 true:false
 *  true:当返回true时，函数内部会自动将这次回调的n加入到新的数组中
 *  false：当返回false时，函数内部会过滤掉这次的n

第一个需求使用filter演示操作：

const nums = [10, 20, 111, 222, 444, 40, 50]
    //这里的n代表nums里的元素
    let newNums = nums.filter(function(n) {
     	return n<100
     })
     //输出过滤之后的数组
     console.log(newNums)

运行输出的数组是\[10,20,40,50\]

第二个使用map演示操作：

//2、map函数的使用 数组里面的值全部乘以2
     let new2Nums =newNums.map(function(n){
     	return n * 2
     })
     console.log(new2Nums)

运行结果是\[20,40,80,100\]

第三个使用reduce函数：

//reduce作用对数据中所有的内容进行汇总
     let total = new2Nums.reduce(function (preValue,n){
     	return preValue + n
     },0)
     console.log(total)

reduce运行的解析：  
参数代表的含义，0代表初始化的preValue的值，遍历了之后preValue代表数组前一个元素，n代表每次遍历new2Nums里的元素  
第一次：preValue=0 n=20  
第二次：preValue=0+20 n=40  
第三次：preValue=0+20+40 n=80  
第四次：preValue=0+20+40+80 n=100  
total = 240

可以连起来写：

const nums = [10, 20, 111, 222, 444, 40, 50]
    let total =nums.filter(function (n){
    	return n<100
    }).map(function (n){
    	return n*2
    }).reduce(function (preValue,n){
    	return preValue+n
    },0)
    
    console.log(total)

还可以用其他中的写法，一行代码搞定：

const nums = [10, 20, 111, 222, 444, 40, 50]
    
    let total = nums.filter(n=> n <100).map(n => n*2).reduce((pre,n) => pre+n);
    console.log(total)

我虽然是一个后端开发工程师，但是我也喜欢前端开发。  
努力到自己无能为力，拼搏到感动自己！