JS高阶函数的使用

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>

 结果展示:

JS高阶函数的使用

 

由上面可以看出虽然是一样的功能,但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>

结果如下:

JS高阶函数的使用

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>

 

结果如下:

JS高阶函数的使用 

总结:网上的帖子大多都是深浅不一,甚至有些前后矛盾,这个文章都是本人学习过程中的总结,如果发现错误,欢迎各位大佬留言指出,谢谢大家

参考视频资料:https://www.bilibili.com/video/BV15741177Eh?p=46&share_source=copy_web的第P45集

  

  

 

 

 

  

 

上一篇:2021-02-15


下一篇:五、爬虫学习--分页爬取关键词新闻