zoukankan      html  css  js  c++  java
  • 关于 JavaScript 中的 Array.reduce()

    关于 JavaScript 中的 Array.reduce()

    reduce() 方法在 MDN 的定义看起来很复杂:

    reduce((previousValue, currentValue, currentIndex, array) => { ... }, initialValue)
    

    我们先看一个简单的例子:对数组中元素求和。看完这个例子,reduce() 就很容易理解了。

    var array = [1,2,3,4,5]
    
    var total = 0;
    for(var index = 0; index < array.length; index++)
    {
        total += array[index];
    }
    
    console.log( total );
    

    虽然这个例子非常简单,还是做一点说明。

    为了完成这个针对数组中每个元素的求和操作,我们首先定义了一个用来保存每次累加和的变量 total,它用来提供初始值和每次累加之后的当前结果,也可以说是上一次累加之后的结果。它的值每次更新,并被用于下一次的累加。所以,它的初始值设置为 0。

    在实际的循环中,我们需要拿到数组中每个元素的值,然后拿这个当前元素的值与上一次处理的结果进行一个求和的运算,运算的结果重新又回到这个合计的 total 中,它又返回给了下一次的运算。这里虽然没有使用 return,但是隐含了这样的处理。

    所以,我们再看一下这个 reduce() 函数,它就是用来帮助我们简化此类操作的函数。

    initialValue 就是 total 的初始值 0。

    在针对每个元素的处理函数中,这个值就以 previousValue 出现了。每次取到数组中的一个元素的值,就是 array[index],在每次处理过程中,total 的值都被更新,并被用于下一次的循环处理,这时候的 total 就可以看成 previousValue 了。它需要 return 以便用于下一轮的处理。

    而每次处理的当前元素就是 currentValue 了。

    所以,使用 reduce() 的形式,上面的代码就可以简化为下面的代码:

    [1,2,3,4,5].reduce( (previousValue, currentValue)=>{
        return previousValue + currentValue;
    }, 0)
    

    需要注意的是,需要通过 return 将当前的计算结果返回,以便下一次的时候以 previousValue 的形式使用。

    总结

    reduce() 需要我们提供一个高阶函数,reduce() 会针对数组中的 n 个元素调用 n 次该函数。

    在调用这个高阶函数的时候,reduce() 会为我们提供 previousValue、currentValue、currentIndex 以及数组本身作为参数。在 JavaScript 参数是可选的,所以,实际使用哪些参数看你的需要了。

    在高阶函数内部,你可以做任何需要的运算,但是注意要返回一个结果,供下一次高阶函数被调用的时候使用。

    在第一次高阶函数被调用的时候,这个 previousValue 就来自于 initialValue。

  • 相关阅读:
    希尔排序
    插入排序
    Unity创建一个简易的弹簧(弹动)效果
    看到个美到爆的菜单,忍不住扒下来~
    用avalon实现一个完整的todomvc(带router)
    页面动态加入<script>标签并执行代码
    一个简单粗暴的前后端分离方案
    常用的HTML5、CSS3新特性能力检测写法
    犀利的background-clip:text,实现K歌字幕效果
    用canvas开发H5游戏小记
  • 原文地址:https://www.cnblogs.com/haogj/p/15179000.html
Copyright © 2011-2022 走看看