Reduce函数

最新推荐文章于 2025-05-29 18:40:51 发布

原创最新推荐文章于 2025-05-29 18:40:51 发布 · 770 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #经验分享 #javascript

Reduce函数：

概念表述： reduce()方法是一个迭代方法对数组中的每个元素按序执行一个提供的 reducer 函数，每一次运行 reducer函数体会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。用于累积运算。 执行机制：每一个值执行一次循环体，且每次执行都是独立的(sum也是独立的)

基本语法：数组名.reduce((sum,current,index)=>{ sum + current； return; },0) sum为累加器，reduce方法会遍历数组中的每一项，所以current是当前值，相当于forEach方法item即每一项，index为索引(可选)，最后的0为一个初始值，头一次会赋值给sum开始计算。注意：一定要return值作为下一次sum的初始值。

案例1：累加和

 let arr = [1, 2, 3, 4, 5]
 let s = arr.reduce((sum, current, index) => {
      sum + current
      return sum
     }, 0)
 console.info(s)

案例2：对象数组的累加和

let arr = [{
         name: 'jack',
         count: 10
     },
     {
         name: 'rose',
         count: 20
     }
 ]
 let s = arr.reduce((sum, current, index) => {
      sum + current.count
      return sum
 }, 0);
 console.info(s)

案例3：对象的分组求和

        let arr = [{
                name: 'jack',
                course: '政治',
                count: 100
            },
            {
                name: 'jack',
                course: '历史',
                count: 100
            },
            {
                name: 'jack',
                course: '地理',
                count: 100
            },
            {
                name: 'rose',
                course: '政治',
                count: 50
            },
            {
                name: 'rose',
                course: '历史',
                count: 50
            },
            {
                name: 'rose',
                course: '地理',
                count: 50
            }
        ]
        //reduce
        let s2 = arr.reduce((obj, current, index) => {
            let name = current.name
            let count = current.count

            // 获得obj对应名称值  {'jack':100}  100
            let oldCount = obj[name]
// oldCount 如果是 undefined，表示此名称第一次出现  ，因为初始值是空对象，所以第一个累加器值为undefined，布尔false，让他等于100
            if (oldCount) {
                obj[name] = oldCount + count
            } else {
                //第一次赋值
                obj[name] = count
            }
            console.info(`之前累加值：${oldCount},当前值：${count}，最终结果：${JSON.stringify(obj)}`)

            return obj  //return给下一次循环函数独立体
        }, {})
        console.info(s2)

代码执行过程及输出：

初始状态：obj 是一个空对象 {}。
第一轮迭代：
- current 是 {name: 'jack', course: '政治', count: 100}。
- name 是 'jack'，count 是 100。
- oldCount 是 undefined（因为 obj['jack'] 不存在）。
- 将 obj['jack'] 设置为 100。
- 输出：之前累加值：undefined, 当前值：100，最终结果：{"jack":100}。
第二轮迭代：
- current 是 {name: 'jack', course: '历史', count: 100}。
- name 是 'jack'，count 是 100。
- oldCount 是 100（因为 obj['jack'] 存在且为 100）。
- 将 obj['jack'] 更新为 200。
- 输出：之前累加值：100, 当前值：100，最终结果：{"jack":200}。
第三轮迭代：
- current 是 {name: 'jack', course: '地理', count: 100}。
- name 是 'jack'，count 是 100。
- oldCount 是 200（因为 obj['jack'] 存在且为 200）。
- 将 obj['jack'] 更新为 300。
- 输出：之前累加值：200, 当前值：100，最终结果：{"jack":300}。
第四轮迭代：
- current 是 {name: 'rose', course: '政治', count: 50}。
- name 是 'rose'，count 是 50。
- oldCount 是 undefined（因为 obj['rose'] 不存在）。
- 将 obj['rose'] 设置为 50。
- 输出：之前累加值：undefined, 当前值：50，最终结果：{"jack":300,"rose":50}。
第五轮迭代：
- current 是 {name: 'rose', course: '历史', count: 50}。
- name 是 'rose'，count 是 50。
- oldCount 是 50（因为 obj['rose'] 存在且为 50）。
- 将 obj['rose'] 更新为 100。
- 输出：之前累加值：50, 当前值：50，最终结果：{"jack":300,"rose":100}。
第六轮迭代：
- current 是 {name: 'rose', course: '地理', count: 50}。
- name 是 'rose'，count 是 50。
- oldCount 是 100（因为 obj['rose'] 存在且为 100）。
- 将 obj['rose'] 更新为 150。
- 输出：之前累加值：100, 当前值：50，最终结果：{"jack":300,"rose":150}。

案例3的最后结果：

{"jack": 300,"rose": 150}

案例4：字符串拼接

        let arr = ['苹果', '香蕉', '荔枝', '山竹', '芒果']
        let steEle = arr.reduce((str, value) => {
            str = str + value
            return str
        }, '')
        console.log(steEle);

给予初始值为空字符串，循环体进行拼接。