zoukankan      html  css  js  c++  java
  • 数组中的reduce 函数理解

    第一次见到reduce 是在js 的高级程序设计中,它的意思是把一个数组减少为一个数,举的例子是数组中元素的求和。它接受一个函数作为参数,函数又有两个参数,一个是prev, 前一个值,一个是next, 后一个值,然后函数体就是返回相加的值。

    let array = [1, 3, 5];
    let sum = array.reduce((prev, next) => {
      return prev + next;
    })
    
    console.log(sum);
      我对reduce 的理解也仅限于此,只停留在了表面,当然,除了这个例子之后,我也不会用reduce. 今天在读js函数式编程相关书籍的时候,又遇到reduce, 仔细读了几遍,加深了理解,大体上懂了它的原理和用法。
      reduce 确实是把数组减少为一个值,也是接受一个函数作为参数,但它还有一个可选的第二个参数。对函数接受的两个参数的理解也有偏差,第一个参数准确来讲应该是个累计值,第二个参数应该是数组的每一个项的值。还是数组的求和为例,我们完全可以不用recude, 直接循环遍历数组就可以。那么我们该怎么做呢?
      先声明一个变量,来存储求和后的值。
    let sum = 0;
      然后循环遍历数组的每一项,和sum 进行相加
    for (let index = 0; index < array.length; index++) {
      const element = array[index];
      sum = sum + element;
    }

      完全没有问题,可以求出数组中的元素的和。数组元素的求和应该都是这样的步骤,我们尝试把这个步骤封装一下, 先直接定义一个函数把所有步骤包含起来, 只把console.log(sum) 变成return sum;

    function reduce () {
    
      let sum = 0;
    
      for (let index = 0; index < array.length; index++) {
        const element = array[index];
        sum = sum + element;
      }
    
      return sum;
    }

      现在来看封装的函数,可以发现有几个问题:

      1,let sum = 0 不太合适,在函数中固定一个变量的值,不具有灵活性。这个很简单,可以声明一个变量,让sum 等于传递进行的值。如果没有,可以默为0 , 变量为initValue;

      2,这个问题也很简单地,就是要遍历的数组,要把数组传递进来,所以要接受一个数组参数,用来进行遍历。
      3,这个问题可能不太好理解,但也是最关键的。第三个问题是在sum = sum + element;sum + element是这个函数要做的事情,如果不指定,这个reduce 函数只能做求和运算。我们想让这个函数更为通用,函数要做的事情就要让用户进行指定。要做的事情,在js 中,可以用函数进行表示,所以接受一个函数做为参数,这个函数要接受两个参数sum, elemnet, 然后在函数体中指定这个函数要做什么事情。由于sum + element 的值要赋值为sum, 所以这个函数还要有返回值。
    function reduce (array, fn, initValue) {
      let sum ;
    
      initValue ? (sum =initValue): (sum = 0);
    
      // 然后循环遍历数组的每一项,和sum 进行相加
      for (let index = 0; index < array.length; index++) {
        const element = array[index];
        sum = fn(sum, element);
      }
    
      return sum;
    }

      调用我们自己封装的reduce 时行数组的求和

    let result = reduce(array, (sum, element) => sum  + element);

      现在我们来对比原生的调用方式和自己封装的方式?可以发现没有本质不同。唯一的不同可能是我们的第一个参数是数组,而原生没有,这是因为原生的方法是定义在数组原型上,所 以没有接受数组作为参数,对于理解reduce 函数来说,这没有什么本质的不同。通过封装的过程,我们更能明白接受的函数的参数的意思。这个函数至少要接受两个参数,第一个参数的真正意义应该是调用函数所返回的值,由于在第一个调用函数之前,没有返回值,所以我们可以给它赋初值,或通过第三个参数,或直接调为0。 第二个参数,就是数组的每一项,只有不停的遍历数组中的每一项,最终才能把数组变成一个值。其实初值还有一个更好的办法,如果没有传递进来,可以取数组的第一项作为初始值。最终的函数可能如下:

    const reduce = (array, fn, initialValue) => {
      let sum;
      if (initialValue) {
        sum = initialValue;
        for (const value of array)  // 这里用了es6 在for of 
          sum = fn(sum, value)
      }
      else {
        sum = array[0];
        for (let i = 1; i < array.length; i++)
          sum = fn(sum, array[i])
      }
      return sum;
    }

      通过以上分析,我们可以看到,reduce函数真正的核心在于传递进去的函数。正确的使用reduce 就是要正确的写好这个函数,通常这个函数要满足一下,几点要求。

      1, 这个函数至少要接受两个参数进行计算,一个参数是累计值,一个参数是数组的每一个元素

      2, 这个函数必须要有返回值,因为要用它进行下一步的运算,并且,必须返回一个由参数进行计算的得到结果值,最后返回的值,还是要和数组中的元素类型相同,这还是因为它要进行下一步的运算。

      3, 初始的结果值,可以由第三个参数进行传递,也可以不传,如果不传的话,初始的累计值默认为第一个参数。

  • 相关阅读:
    《高校实验室低值易耗品和耗材的"一站式"管理探索 》论文笔记
    《浅谈MVC框架模式》论文笔记
    《低值易耗品的超市化和信息化管理模式探索》论文笔记
    《浅谈企业低值易耗品的管理》论文笔记
    《解说Spring MVC的处理流程及优点》论文笔记
    《基于SSM构建RESTfuI API服务》论文笔记
    《基于SSM的登录验证功能实现》论文笔记
    《基于SpringBoot+Shiro的权限管理实现》论文笔记
    《实验室设备管理系统》10
    《实验室设备管理系统》9
  • 原文地址:https://www.cnblogs.com/SamWeb/p/10204551.html
Copyright © 2011-2022 走看看