1.何为高阶函数呢?
JavaScript的函数其实都指向某个变量。既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数。简单来说,就是对其他函数进行操作的函数就为高阶函数。
2.下面就介绍一下在JS中常见的filter()/reduce()/map()这三个高阶函数
filter()函数:是用于把Array的某些元素过滤掉,然后返回剩下的元素。它要求我们传入一个回调函数。且回调函数的返回值必须是一个Boolean值,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素。
2.2就比如说,有个需求要求出一个数组中小于100的数字:
2.3话不多说,直接看代码:
<script> const nums = [10, 20, 30, 55, 60, 102, 105]; let news = nums.filter((n) => { return n < 100; }); console.log(news); </script>
2.4我们再来看看传统的做法,代码如下
<script> const nums = [10, 20, 30, 55, 60, 102, 105]; let news = []; for (let i of nums) { if (i < 100) { news.push(i); } } console.log(news); </script>
结果展示:
由上面可以看出虽然是一样的功能,但filter()函数是非常方便的,当上面filter()函数返回值为true时,函数内部会自动将这次回调的n加入新的数组news当中,当为false时,函数内部会自动过滤n,所以filter函数代码效率也是相对于普通做法较高的。
map()函数:是指返回一个新的数组,数组中的元素为原始数组调用函数处理后的值。map()函数用法与filter函数用法也是差不多的,也是要求我们传入一个回调函数。
需要注意的是:1.map()不会对空数组进行检测
2.map() 不会改变原始数组
还是老样子:看需求实现功能:要求把数组中小于100的数乘以2
代码如下:
<script> const nums = [10, 20, 30, 55, 60, 102, 105]; let news = nums.filter((n) => { return n < 100; }); let news2 = news.map((n) => { return n * 2 }) console.log(news); console.log(news2); </script>
结果如下:
reduce()函数: 是要我们传入两个参数如(callback,[initialValue]),reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,其中回调函数callback中接受四个参数:1.初始值(或者上一次回调函数的返回值),2.当前元素值,3.当前索引,4.调用 reduce 的数组 。而[initialValue])是(作为第一次调用 callback 的第一个参数。)
简单一点来说,这个函数就是对数组中所有的内容进行汇总,如全部相加,相乘等。
老样子,看需求实现一个数组所有数相加的和:
<script> const nums = [10, 20, 40, 50, 60]; let total = nums.reduce((preValue, n) => { return preValue + n; }, 0); console.log(total); //第一次:preValue 0 n 10 //第一次:preValue 10 n 20 //第一次:preValue 30 n 40 //第一次:preValue 70 n 50 //第一次:preValue 120 n 60 </script>
结果如下:
总结:网上的帖子大多都是深浅不一,甚至有些前后矛盾,这个文章都是本人学习过程中的总结,如果发现错误,欢迎各位大佬留言指出,谢谢大家
参考视频资料:https://www.bilibili.com/video/BV15741177Eh?p=46&share_source=copy_web的第P45集