前端小白之高阶函数的使用-filter/nums/reduce

  • 时间:
  • 来源:互联网
  • 文章标签:

文章目录

  • 前言
  • 一、实例
  • 二、高级写法
  • 三、进阶写法
  • 总结
  • 每日推荐


前言

在javaScript中有许多高阶函数,合理的使用高阶函数能让我们在实际开发当中,更加方便快捷,今天我们一起来学习filter/nums/reduce


一、实例

今天我们从实例的问题当中来使用这几个高阶函数
现在有一个数组,要求进行以下几种操作:
步骤一:去除nums中所有小于100的数字
步骤二:将所有小于100的数字分别*2
步骤三:将其中的所有数字进行相加

    <script>
        const nums = [10, 20, 30, 60, 50, 100, 200, 300, 40];
        // 需求一:去除nums中所有小于100的数字
        // 1.常规  
        let newNums = []
        for (let n of nums) {
            if (n < 100) {
                newNums.push(n)
            }
        }
        // 2.filer
        //filter中的回调函数有一个要求:必须返回一个boolean值
        // true:当返回true时,函数内部会自动将这次回调的n加入到新的数组中
        // false:当返回false时,函数内部会过滤这次的n
        newNums = nums.filter(function(n) {
            return n < 100
        })

        // 需求二:将所有小于100的数字分别*2
        // 1.常规
        let new2Nums = []
        for (let n of newNums) {
            new2Nums.push(n * 2)
        }
        //2.nums
        //可以对数组中的元素进行变化
        new2Nums.nums(function(n) {
                return n * 2
            })
        // 需求三:将其中的所有数字进行相加
        // 1.常规
        let total = 0
        for (let n of new2Nums) {
            total += n
        }
        // 2.reduce
        //可以对数组中的元素进行求和
        //preValue表示上一项求和的值,0是初始值 
        total = reduce(function(preValue, n) {
            return preValue + n
        }, 0)
    </script>

二、高级写法

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

    <script>
        const nums = [10, 20, 30, 60, 50, 100, 200, 300, 40];
        let total = filter(function(n) {
                return n < 100
            }).nums(function(n) {
                return n * 2
            }).reduce(function(preValue, n) {
                return preValue + n
            }, 0)
	</script>

三、进阶写法

    <script>
        const nums = [10, 20, 30, 60, 50, 100, 200, 300, 40];
        let total = nums.filter(n => n < 100).map(n => n * 2).reduce((pre, n) => pre + n)
    </script>

总结

好的,这三个高阶函数,可以说是使用起来会让代码可读性更高,提示书写效率。

每日推荐

工具:凡科快图-大量免费的作图模板

本文链接http://www.taodudu.cc/news/show-1944768.html