zoukankan      html  css  js  c++  java
  • js数组reduce()方法的使用和一些应用场景

    reduce()的使用

    reduce()方法为归并类方法,最常见的应用场景就是,计算数组中每一项的总和。

    reduce()方法会遍历数组的每一项,它接收两个参数

    第一个参数是:每次遍历都会调用的函数,而这个函数又接收四个参数,分别为:前一个值、当前项、项目的索引和数组对象,

    而这个函数的返回值,会传给下一次遍历时,执行的这个方法的第一个参数。

    第二个参数是:归并基础的初始值。

    上面哪些参数具体怎么用呢?我们继续往下看:

     let arr = [1,2,3,4,5]
     arr.reduce((prev,cur)=>{
          return prev+cur
     })

    上面这段代码,是用来计算数组总和的,reduce方法中,只传了第一个参数,也就是只传了一个函数,但第二个参数、初始值并没有传,当第二个值没有传的时候,第一次循环,prev的值,默认为数组的第一项,而cur的值为数组的第二项,也就是第一次循环,会return 1+2 ,这个时候,第一次循环返回的结果会传给下一次循环中方法的第一个参数,也就是说、第二次循环方法中prev的值,是第一次循环方法返回的结果。

    let arr = [1,2,3,4,5]
    arr.reduce((prev,cur)=>{
        return prev+cur
    },10)

    我们传入一下第二个参数,第一次循环,prev的值为reduce的第二个参数,也就是“归并基础的初始值”,而cur的值为数组的第一项,第一次循环会返回10+1 。

    总结:

    1.当reduce()方法的第二个值为空时,第一次循环方法中的第一个参数(prev)为数组的第一项值,第二个参数(cur)为数组的第二项值,反之,第一次循环方法中的第一个参数(prev)为reduce的第二个参数值,第二个参数(cur)为数组的第一项值。

    2.reduce方法的第一个参数,就是每次遍历都会执行的匿名函数,当前函数的返回值会传给下一次执行函数的第一个值。也就是prev

    reduce()方法的应用场景

    1.计算总和

    let arr = [1,2,3,4,5]
    let result = arr.reduce((prev,cur)=>{
         return prev+cur
    })
    console.log(result)

    2.简单数组去重

    let arr = [1,2,3,4,5,2,3]
    let result = arr.reduce((prev,cur)=>{
         if (!prev.includes(cur)){
            prev.push(cur)
         }
         return prev
    },[])
    console.log(result)

    上面这个例子噢,第一次循环时,prev的值为[] ,cur的值为数组的第一项,也就是 1 ,然后判断 “1” 是否在[]数组中存在,显然是不存在的,然后将“1”push到prev中,

    并return prev ,当第二次循环时,prev接收到了第一次循环函数返回的值,所以prev就等于[1]了,以此类推。。

    3.统计每个值,在数组中出现的次数

    let arr = [1,2,3,4,5,2,3]
    let result = arr.reduce((prev,cur)=>{
                if (prev[cur] != undefined) {
                    prev[cur]++
                } else {
                    prev[cur] = 1
                }
                return prev
    },{})
    console.log(result)
  • 相关阅读:
    CachedRowSet使用
    mybatis There is no getter for property named 'xx' in 'class java.lang.String
    基于tcpdump的Android智能移动终端数据包捕获完整解决方案
    analytics详解
    android开发图片分辨率
    缩放图片,解决bitmap 内存溢出out of memory的问题
    使用windowAnimations定义Activity及Dialog的进入退出效果
    读取本地已有的.db数据库
    MyBatis 问题列表
    cxf 相关问题
  • 原文地址:https://www.cnblogs.com/Mrrabbit/p/11945380.html
Copyright © 2011-2022 走看看