JS高阶函数的使用

2024-03-04 15:35:23

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集

码农公寓

相关文章