当前位置：首页 > 全部内容 > JavaScript reduce() 方法详解与实战应用

JavaScript reduce() 方法详解与实战应用

作者：青柠时间：2026-10-31 08:57:03浏览：508

本文深入解析 JavaScript 数组方法 reduce() 的工作原理与语法结构，重点说明 prev、cur、index 及 initialValue 参数的作用机制。通过求和、统计频次、去重、降维及对象属性处理等实例，展示 reduce 在复杂数据处理中的核心优势与注意事项。

reduce() 方法的功能非常强大，几乎所有通过循环遍历能实现的操作，它都能胜任。常见的应用场景包括数组求和、求积、统计元素出现次数以及数组去重等。

该方法会遍历数组中的每个元素，执行用户提供的回调函数，并将多次调用的结果累积为一个最终的返回值。

1、语法介绍

// arr.reduce(callback,[initialValue])
array.reduce((prev, cur, index, arr)=> {
    /***/
}, initialValue)

reduce 方法会依次执行数组中的每个元素，回调函数接收四个参数：初始值 initialValue（或上一次回调函数的返回值）、当前元素值、当前索引以及调用 reduce 的数组本身。

参数： 

参数一：回调函数（用于处理数组中每个值的函数，包含四个参数）：

  • prev 必需：上一次调用回调返回的值，或者是提供的初始值（initialValue）。
  • cur 必需：数组中当前正在被处理的元素。
  • index 可选：当前元素在数组中的索引位置。
  • arr 可选：调用 reduce 方法的原始数组。

参数二：initialValue 可选：指定初始值，作为第一次调用回调函数时的第一个参数。

若提供初始值，cur 从数组的第一项开始遍历；若不提供初始值，cur 从第二项开始执行，此时第一次回调的 prev 值为数组的第一项值。

2、实例解析 initialValue 参数

示例一：未设置函数的初始迭代值

<script>
    let arr = [1, 2, 3, 4, 5];
    let sum = arr.reduce(function (prev, cur, index, arr) {
        console.log(prev, cur, index);
        return prev + cur;
    });
    console.log('arr:', arr, 'sum:', sum);
</script>

运行结果：

1、语法介绍

分析：在此示例中，reduce 用于对数组求和。可以看出数组长度为 5，但 reduce 函数仅循环 4 次。函数迭代的初始值默认为数组的第一项，index 从 1 开始，第一次 prev 的值为数组的第一个元素，后续 prev 的值则是每次计算后的累积结果。

再看示例二：设置函数的初始迭代值

<script>
    let arr = [1, 2, 3, 4, 5];
    let sum = arr.reduce(function (prev, cur, index, arr) {
        console.log(prev, cur, index);
        return prev + cur;
    }, 5) //注意这里设置了初始值
    console.log("arr:", arr, "sum:", sum);
</script>

运行结果：

1、语法介绍

分析：此处添加了一个初始迭代值，使 prev 从 0 开始计算（即以 0 为初始值进行求和）。index 从 0 开始，数组长度为 5，reduce 函数循环 5 次，最终结果包含了初始值。

结论：

如果没有提供 initialValue，reduce 会从索引 1 的地方开始执行 callback 方法，从而跳过第一个索引。

如果提供了 initialValue，则从索引 0 开始执行。

3、注意事项

1. reduce 是对数组进行累积操作的方法，使用时必须加上 return 返回累积操作的数据。否则 prev 无法获取上一次执行的结果，其值将为 undefined；

2. 当对空数组执行 reduce 操作且未提供初始值时，reduce 会报错，错误信息如下：

1、语法介绍

<script>
    // 空数组的情况
    let arr = [];
    let sum = arr.reduce(function (prev, cur, index, arr) {
        console.log(prev, cur, index);
        return prev + cur;
    })
//报错，"TypeError: Reduce of empty array with no initial value"
</script>

但是，如果设置了初始值，则不会报错，如下：

<script>
    // 空数组，但设置 初始值 的情况
    let arr = [];
    let sum = arr.reduce(function (prev, cur, index, arr) {
        console.log(prev, cur, index);
        return prev + cur;
    }, 0)
    console.log(arr, sum); // [] 0
</script>

4、reduce的应用

（1）、最简单的应用是我们常用的数组求和与求乘积。

let arr = [1, 2, 3, 4];
let sum = arr.reduce((x,y)=>x+y)
let mul = arr.reduce((x,y)=>x*y)
console.log( sum ); //求和，10
console.log( mul ); //求乘积，24

（2）、计算数组中每个元素出现的次数

<script>
    let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
    let nameNum = names.reduce((pre, cur) => {
        if (cur in pre) {
            pre[cur]++
        } else {
            pre[cur] = 1
        }
        return pre
    }, {})
    console.log(nameNum); //{Alice: 2, Bob: 1, Bruce: 1, Tiff: 1}
</script>

分析：

1. 由于设置了迭代初始值为空对象，pre 的第一个值是一个空对象。此时 name 为 Alice，进行判断发现 pre 中没有 Alice 属性，因此将 Alice 对应的属性值赋为 1。 2. 后续没有重复值的处理逻辑相同；若碰到重复值，则将该属性值加 1，从而计算出元素重复的次数。

（3）、数组去重

<script>
    let arr = [1, 2, 3, 4, 4, 1]
    let newArr = arr.reduce((pre, cur) => {
        if (!pre.includes(cur)) {
            return pre.concat(cur)
        } else {
            return pre
        }
    }, [])
    console.log(newArr);// [1, 2, 3, 4]
</script>

（4）、将二维数组转化为一维数组

<script>
    let arr = [[0, 1], [2, 3], [4, 5]]
    let newArr = arr.reduce((pre, cur) => {
        return pre.concat(cur)
    }, [])
    console.log(newArr); // [0, 1, 2, 3, 4, 5]
</script>

（5）、将多维数组转化为一维数组

<script>
    let arr = [[0, 1], [2, 3], [4, [5, 6, 7]]]
    const newArr = function (arr) {
        return arr.reduce((pre, cur) => pre.concat(Array.isArray(cur) ? newArr(cur) : cur), [])
    }
    console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]
</script>

（6）、对象里的属性求和

<script>
    let result = [
        {
            subject: 'math',
            score: 10
        },
        {
            subject: 'chinese',
            score: 20
        },
        {
            subject: 'english',
            score: 30
        }
    ];
    var sum = result.reduce(function (prev, cur) {
        return cur.score + prev;
    }, 0);
    console.log(sum) //60
</script>

（6）、按属性对 Object 进行分类

let person = [
    {
        name: 'xiaoming',
        age: 18
    },{
        name: 'xiaohong',
        age: 17
    },{
        name: 'xiaogang',
        age: 17
    }
];
function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}
let groupedPerson = groupBy(person, 'age');
console.log(groupedPerson);

运行结果：

1、语法介绍

总结：

reduce() 是数组的归并方法，与 forEach()、map()、filter() 等迭代方法一样，都会对数组的每一项进行遍历。但 reduce() 的独特之处在于，它能将前面数组项遍历产生的结果与当前遍历项进行运算，这是其他迭代方法无法实现的。

到此这篇关于 JS 中 reduce() 方法及使用详解的文章就介绍到这了，更多相关 js reduce() 方法内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！

作者最新文章

ES6模块化中js文件怎么用import和export交互

2026-11-05 17:00:48

JS读取本地文件时报错或无响应的常见原因

2026-11-05 16:32:31

let、const与var的区别：JavaScript变量声明最佳实践

2026-11-05 14:16:38

JS中直接定义静态二维数组的字面量写法

2026-11-05 14:16:08

JS 怎么查找字符串中所有匹配项的位置

2026-11-05 14:15:53

相关标签：

js用函数实现累加求和公式