数组 reduce 方法的高级应用：如何用 reduce 实现 map 和 filter？

各位同仁，各位编程爱好者，晚上好！

今天，我们将深入探讨 JavaScript 数组方法中最强大、也最容易被低估的基石之一：reduce。我们不仅会回顾它的基本用法，更重要的是，我们将解锁其高级潜力，通过它来重新构建我们日常开发中常用的另外两个高阶函数：map和filter。这不仅是一个有趣的智力挑战，更是一个深入理解函数式编程思想，以及数组操作底层机制的绝佳机会。

数组方法reduce的核心概念

在 JavaScript 中，Array.prototype.reduce()方法是一个不可或缺的工具。它的核心职责是将一个数组的所有元素“归约”成一个单一的值。这个“单一的值”可以是任何类型：一个数字、一个字符串、一个布尔值，甚至是一个全新的数组或对象。

reduce的方法签名

让我们先从它的签名开始：

array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)

• callback：这是在数组的每个元素上执行的函数。它接收以下四个参数：
  • accumulator：累加器，它保存了上一次回调函数执行后的返回值。对于第一次调用，如果提供了initialValue，它将是initialValue；否则，它将是数组的第一个元素。
  • currentValue：当前正在处理的数组元素。
  • currentIndex(可选)：当前正在处理的元素的索引。
  • array(可选)：调用reduce的数组本身。
• initialValue(可选)：作为第一次调用callback函数时accumulator的初始值。如果没有提供initialValue，reduce将从数组的第二个元素开始执行callback，并将数组的第一个元素作为初始的accumulator。如果数组为空且没有提供initialValue，reduce将抛出TypeError。

reduce的基本应用示例

为了更好地理解reduce的工作方式，我们来看几个简单的例子。

示例一：计算数组元素的总和

这是reduce最经典的用法之一。我们将一个数字数组归约成一个单一的总和。

const numbers = [1, 2, 3, 4, 5]; // 使用 reduce 计算总和 const sum = numbers.reduce((accumulator, currentValue) => { console.log(`累加器 (accumulator): ${accumulator}, 当前值 (currentValue): ${currentValue}`); return accumulator + currentValue; }, 0); // 初始值为 0 console.log(`数组总和: ${sum}`); // 输出: 数组总和: 15 /* 执行过程（带 console.log）： 累加器 (accumulator): 0, 当前值 (currentValue): 1 -> 返回 1 累加器 (accumulator): 1, 当前值 (currentValue): 2 -> 返回 3 累加器 (accumulator): 3, 当前值 (currentValue): 3 -> 返回 6 累加器 (accumulator): 6, 当前值 (currentValue): 4 -> 返回 10 累加器 (accumulator): 10, 当前值 (currentValue): 5 -> 返回 15 */

在这个例子中，initialValue是0。callback函数在每次迭代中将currentValue加到accumulator上，并返回新的accumulator。

示例二：查找数组中的最大值

reduce也可以用来从数组中找出最大或最小值。

const numbers = [10, 5, 20, 15, 8]; // 查找最大值 const max = numbers.reduce((accumulator, currentValue) => { return Math.max(accumulator, currentValue); }, -Infinity); // 初始值设为负无穷大，确保任何数组元素都能成为最大值 console.log(`最大值: ${max}`); // 输出: 最大值: 20

示例三：将二维数组扁平化

reduce的强大之处在于其accumulator可以是任何类型，包括另一个数组。

const nestedArray = [[1, 2], [3, 4], [5, 6]]; // 扁平化数组 const flattenedArray = nestedArray.reduce((accumulator, currentValue) => { return accumulator.concat(currentValue); }, []); // 初始值为空数组 console.log(`扁平化数组: ${flattenedArray}`); // 输出: 扁平化数组: [1, 2, 3, 4, 5, 6]

通过这些基本示例，我们可以看到reduce的核心思想：它迭代数组的每个元素，并使用一个回调函数将它们逐步“整合”到一个累加器中，最终产生一个单一的结果。这种“整合”能力正是我们实现map和filter的关键。

reduce实现map

现在，让我们进入今天讲座的核心部分：如何用reduce来实现map。

map方法回顾

首先，我们简要回顾一下Array.prototype.map()的作用。map方法创建一个新数组，其结果是该数组中的每个元素都调用一次提供的函数后的返回值。它不改变原数组。

const numbers = [1, 2, 3]; const doubledNumbers = numbers.map(num => num * 2); console.log(`原数组: ${numbers}`); // 输出: 原数组: [1, 2, 3] console.log(`翻倍后的数组: ${doubledNumbers}`); // 输出: 翻倍后的数组: [2, 4, 6]

用reduce实现map的思路

要用reduce实现map，我们需要：

1. 一个累加器来存储新数组的元素。这个累加器自然应该是一个空数组[]作为initialValue。
2. 一个回调函数，它对每个currentValue执行map的转换逻辑。
3. 将转换后的结果添加到累加器中。

让我们一步步构建它。

第一步：定义一个模拟的map函数

我们将创建一个名为myMap的函数，它接收一个数组和一个转换函数作为参数，就像原生的map一样。

function myMap(array, mappingFunction) { // 这里将使用 reduce // ... }

第二步：在myMap中使用reduce

在myMap内部，我们将调用array.reduce()。

• initialValue必须是[]，因为map的结果是一个新数组。
• callback函数需要接收accumulator和currentValue。

function myMap(array, mappingFunction) { return array.reduce((accumulator, currentValue) => { // ... 在这里执行转换并添加到 accumulator }, []); // 初始值是一个空数组 }

第三步：实现转换逻辑

在reduce的callback内部，我们需要执行mappingFunction对currentValue进行转换，并将结果添加到accumulator中。

function myMap(array, mappingFunction) { return array.reduce((accumulator, currentValue) => { const transformedValue = mappingFunction(currentValue); // 应用转换函数 return [...accumulator, transformedValue]; // 将转换后的值添加到新数组中 }, []); }

这里我们使用了 ES6 的展开运算符...来创建一个新数组，将旧的accumulator和新的transformedValue组合在一起。这确保了我们每次都返回一个新的数组，维持了函数式编程的不可变性原则。

reduce实现map的完整代码示例

/** * 使用 reduce 实现 Array.prototype.map * @param {Array} array - 要进行映射的数组 * @param {Function} mappingFunction - 应用于每个元素的转换函数 * @returns {Array} - 包含转换后元素的新数组 */ function myMap(array, mappingFunction) { // 检查输入是否有效，例如 array 是否是数组，mappingFunction 是否是函数 if (!Array.isArray(array)) { throw new TypeError('myMap expects an array as the first argument.'); } if (typeof mappingFunction !== 'function') { throw new TypeError('myMap expects a function as the second argument.'); } return array.reduce((accumulator, currentValue, currentIndex, originalArray) => { // 调用传入的 mappingFunction，获取转换后的值 // mappingFunction 也可以接收 index 和 array 参数，我们这里也传递过去 const transformedValue = mappingFunction(currentValue, currentIndex, originalArray); // 将转换后的值添加到累加器数组中 // 使用 spread 语法创建新数组，保持不可变性 return [...accumulator, transformedValue]; }, []); // 初始值为空数组，表示最终要构建的新数组 } // 示例 1: 数字翻倍 const numbers = [1, 2, 3, 4, 5]; const doubledNumbers = myMap(numbers, num => num * 2); console.log("原始数字:", numbers); // 输出: 原始数字: [1, 2, 3, 4, 5] console.log("翻倍后的数字 (myMap):", doubledNumbers); // 输出: 翻倍后的数字 (myMap): [2, 4, 6, 8, 10] // 示例 2: 将字符串转为大写 const words = ["hello", "world", "javascript"]; const uppercaseWords = myMap(words, word => word.toUpperCase()); console.log("原始单词:", words); // 输出: 原始单词: ["hello", "world", "javascript"] console.log("大写单词 (myMap):", uppercaseWords); // 输出: 大写单词 (myMap): ["HELLO", "WORLD", "JAVASCRIPT"] // 示例 3: 从对象数组中提取特定属性 const users = [ { id: 1, name: "Alice" }, { id: 2, name: "Bob" }, { id: 3, name: "Charlie" } ]; const userNames = myMap(users, user => user.name); console.log("原始用户:", users); // 输出: 原始用户: [{ id: 1, name: "Alice" }, ...] console.log("用户姓名 (myMap):", userNames); // 输出: 用户姓名 (myMap): ["Alice", "Bob", "Charlie"] // 示例 4: 带有索引的映射 const indexedNumbers = myMap(numbers, (num, index) => `Index ${index}: ${num}`); console.log("带索引的数字 (myMap):", indexedNumbers); // 输出: 带索引的数字 (myMap): ["Index 0: 1", "Index 1: 2", ...] // 示例 5: 空数组的映射 const emptyArray = []; const mappedEmptyArray = myMap(emptyArray, x => x * 10); console.log("空数组映射 (myMap):", mappedEmptyArray); // 输出: 空数组映射 (myMap): []

reduce实现map的工作原理分析

让我们通过一个表格来追踪myMap函数在处理[1, 2, 3]并将其翻倍时的内部状态。

从这个表格中，我们可以清晰地看到reduce是如何一步步地构建出map所需的新数组的。每次迭代都将一个新元素（经过转换的currentValue）添加到累加器数组中。

reduce实现filter

接下来，我们将探讨如何利用reduce来实现filter方法。

filter方法回顾

Array.prototype.filter()方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。与map类似，它也不改变原数组。

const numbers = [1, 2, 3, 4, 5, 6]; const evenNumbers = numbers.filter(num => num % 2 === 0); console.log(`原数组: ${numbers}`); // 输出: 原数组: [1, 2, 3, 4, 5, 6] console.log(`偶数数组: ${evenNumbers}`); // 输出: 偶数数组: [2, 4, 6]

用reduce实现filter的思路

要用reduce实现filter，我们需要：

1. 一个累加器来存储通过测试的元素。同样，这个累加器应该是一个空数组[]作为initialValue。
2. 一个回调函数，它对每个currentValue执行filter的条件测试逻辑。
3. 如果元素通过测试，就将其添加到累加器中；否则，就跳过它，不添加到累加器。

第一步：定义一个模拟的filter函数

我们创建一个名为myFilter的函数，它接收一个数组和一个谓词函数（测试条件）作为参数。

function myFilter(array, predicateFunction) { // 这里将使用 reduce // ... }

第二步：在myFilter中使用reduce

在myFilter内部，我们将调用array.reduce()。

• initialValue同样是[]，因为filter的结果也是一个新数组。
• callback函数需要接收accumulator和currentValue。

function myFilter(array, predicateFunction) { return array.reduce((accumulator, currentValue) => { // ... 在这里执行条件测试并有选择地添加到 accumulator }, []); // 初始值是一个空数组 }

第三步：实现条件测试逻辑

在reduce的callback内部，我们需要执行predicateFunction对currentValue进行测试。如果测试结果为true，则将currentValue添加到accumulator中；否则，直接返回accumulator，不添加任何元素。

function myFilter(array, predicateFunction) { return array.reduce((accumulator, currentValue) => { if (predicateFunction(currentValue)) { // 如果元素通过测试 return [...accumulator, currentValue]; // 将其添加到新数组中 } else { return accumulator; // 否则，不添加，直接返回当前的累加器 } }, []); }

reduce实现filter的完整代码示例

/** * 使用 reduce 实现 Array.prototype.filter * @param {Array} array - 要进行筛选的数组 * @param {Function} predicateFunction - 应用于每个元素的测试函数，返回 true 或 false * @returns {Array} - 包含通过测试的元素的新数组 */ function myFilter(array, predicateFunction) { // 检查输入是否有效 if (!Array.isArray(array)) { throw new TypeError('myFilter expects an array as the first argument.'); } if (typeof predicateFunction !== 'function') { throw new TypeError('myFilter expects a function as the second argument.'); } return array.reduce((accumulator, currentValue, currentIndex, originalArray) => { // 调用传入的 predicateFunction 进行条件测试 // predicateFunction 也可以接收 index 和 array 参数 if (predicateFunction(currentValue, currentIndex, originalArray)) { // 如果条件为真，则将当前值添加到累加器数组中 return [...accumulator, currentValue]; } else { // 如果条件为假，则不添加当前值，直接返回当前的累加器数组 return accumulator; } }, []); // 初始值为空数组，表示最终要构建的新数组 } // 示例 1: 筛选偶数 const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const evenNumbers = myFilter(numbers, num => num % 2 === 0); console.log("原始数字:", numbers); // 输出: 原始数字: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] console.log("偶数 (myFilter):", evenNumbers); // 输出: 偶数 (myFilter): [2, 4, 6, 8, 10] // 示例 2: 筛选长度大于 5 的字符串 const words = ["apple", "banana", "cat", "dog", "elephant"]; const longWords = myFilter(words, word => word.length > 5); console.log("原始单词:", words); // 输出: 原始单词: ["apple", "banana", "cat", "dog", "elephant"] console.log("长单词 (myFilter):", longWords); // 输出: 长单词 (myFilter): ["banana", "elephant"] // 示例 3: 筛选年龄大于 18 的用户 const people = [ { name: "Alice", age: 25 }, { name: "Bob", age: 17 }, { name: "Charlie", age: 30 } ]; const adults = myFilter(people, person => person.age >= 18); console.log("原始人员:", people); // 输出: 原始人员: [{ name: "Alice", age: 25 }, ...] console.log("成年人 (myFilter):", adults); // 输出: 成年人 (myFilter): [{ name: "Alice", age: 25 }, { name: "Charlie", age: 30 }] // 示例 4: 空数组的筛选 const emptyArray = []; const filteredEmptyArray = myFilter(emptyArray, x => x > 0); console.log("空数组筛选 (myFilter):", filteredEmptyArray); // 输出: 空数组筛选 (myMap): []

reduce实现filter的工作原理分析

让我们通过一个表格来追踪myFilter函数在处理[1, 2, 3, 4]并筛选偶数时的内部状态。

这个表格清晰地展示了filter的逻辑：只有当predicateFunction返回true时，元素才会被添加到累加器数组中。

reduce的高级应用：单次遍历实现map和filter

到目前为止，我们已经学会了如何用reduce分别实现map和filter。这本身已经证明了reduce的强大。但reduce的真正威力在于它能够将多个数组操作（如map和filter）合并到单次遍历中。

想象一下这样的场景：你有一个包含用户对象的数组，你需要：

1. 筛选出所有年龄大于 18 岁的用户。
2. 然后将这些用户的姓名转换为大写。

如果使用原生的map和filter，你可能会这样写：

const users = [ { name: "Alice", age: 25 }, { name: "Bob", age: 17 }, { name: "Charlie", age: 30 }, { name: "David", age: 16 } ]; const adultUserNamesUpperCase = users .filter(user => user.age >= 18) // 第一次遍历，创建新数组 [Alice, Charlie] .map(user => user.name.toUpperCase()); // 第二次遍历，创建新数组 [ALICE, CHARLIE] console.log(adultUserNamesUpperCase); // 输出: ["ALICE", "CHARLIE"]

这段代码清晰易懂，但在内部，它进行了两次完整的数组遍历，并创建了两个中间数组。对于小型数组来说，这通常不是问题。但对于非常大的数据集，这可能会导致性能开销，尤其是在内存使用方面。

使用reduce实现单次遍历的map和filter

我们可以使用reduce在一次遍历中完成这两项任务。核心思想是在reduce的callback函数中同时执行筛选和映射的逻辑。

/** * 使用 reduce 在单次遍历中实现 filter 和 map 的组合操作 * @param {Array} array - 原始数组 * @param {Function} predicateFunction - 筛选条件函数 * @param {Function} mappingFunction - 映射转换函数 * @returns {Array} - 经过筛选和映射后的新数组 */ function myFilterAndMap(array, predicateFunction, mappingFunction) { if (!Array.isArray(array)) { throw new TypeError('myFilterAndMap expects an array as the first argument.'); } if (typeof predicateFunction !== 'function' || typeof mappingFunction !== 'function') { throw new TypeError('myFilterAndMap expects functions as the second and third arguments.'); } return array.reduce((accumulator, currentValue, currentIndex, originalArray) => { // 首先执行筛选逻辑 if (predicateFunction(currentValue, currentIndex, originalArray)) { // 如果元素通过筛选，则执行映射逻辑 const transformedValue = mappingFunction(currentValue, currentIndex, originalArray); // 并将转换后的值添加到累加器中 return [...accumulator, transformedValue]; } else { // 如果元素未通过筛选，则不进行映射，直接返回当前的累加器 return accumulator; } }, []); // 初始值仍为空数组 } const users = [ { name: "Alice", age: 25 }, { name: "Bob", age: 17 }, { name: "Charlie", age: 30 }, { name: "David", age: 16 } ]; const adultUserNamesUpperCaseSinglePass = myFilterAndMap( users, user => user.age >= 18, // 筛选条件：年龄大于等于18 user => user.name.toUpperCase() // 映射转换：姓名转大写 ); console.log("单次遍历筛选映射结果:", adultUserNamesUpperCaseSinglePass); // 输出: 单次遍历筛选映射结果: ["ALICE", "CHARLIE"]

单次遍历的工作原理分析

让我们追踪myFilterAndMap函数处理users数组时的内部状态。

通过这个例子，我们清楚地看到，reduce仅遍历了数组一次，并且在每次迭代中根据条件决定是否对元素进行转换并将其加入最终结果。这避免了创建中间数组，从而在某些场景下提供了性能优势。

reduce实现flatMap

flatMap是 ES2019 中引入的一个非常实用的数组方法，它结合了map和flat（扁平化）的功能。它首先使用映射函数映射每个元素，然后将结果扁平化成一个新数组。

flatMap方法回顾

const words = ["hello world", "javascript is fun"]; // 将每个字符串按空格分割成单词，然后扁平化 const allWords = words.flatMap(sentence => sentence.split(' ')); console.log(allWords); // 输出: ["hello", "world", "javascript", "is", "fun"]

用reduce实现flatMap的思路

要用reduce实现flatMap，我们需要：

1. 一个累加器来存储最终扁平化后的元素。同样，initialValue应该是一个空数组[]。
2. 一个回调函数，它对每个currentValue执行flatMap的转换逻辑。这个转换函数会返回一个数组。
3. 将转换函数返回的数组中的所有元素添加到累加器中。

/** * 使用 reduce 实现 Array.prototype.flatMap * @param {Array} array - 原始数组 * @param {Function} mappingFunction - 映射函数，返回一个数组 * @returns {Array} - 扁平化后的新数组 */ function myFlatMap(array, mappingFunction) { if (!Array.isArray(array)) { throw new TypeError('myFlatMap expects an array as the first argument.'); } if (typeof mappingFunction !== 'function') { throw new TypeError('myFlatMap expects a function as the second argument.'); } return array.reduce((accumulator, currentValue, currentIndex, originalArray) => { // 对当前值应用映射函数，预期返回一个数组 const mappedArray = mappingFunction(currentValue, currentIndex, originalArray); // 确保映射函数确实返回一个数组，否则可能导致意外行为 if (!Array.isArray(mappedArray)) { // 根据实际需求决定是抛出错误还是将非数组值原样添加或忽略 // 这里我们选择将其视为一个包含单个元素的数组，模拟 flatMap 的行为 return [...accumulator, mappedArray]; } // 将映射函数返回的数组中的所有元素“展开”并添加到累加器中 return [...accumulator, ...mappedArray]; }, []); // 初始值为空数组 } // 示例 1: 拆分句子为单词 const sentences = ["Learning JavaScript is", "a great experience"]; const wordsList = myFlatMap(sentences, sentence => sentence.split(' ')); console.log("扁平化单词列表 (myFlatMap):", wordsList); // 输出: ["Learning", "JavaScript", "is", "a", "great", "experience"] // 示例 2: 从嵌套数据中提取并扁平化 const usersData = [ { id: 1, tags: ["frontend", "javascript"] }, { id: 2, tags: ["backend", "nodejs", "database"] }, { id: 3, tags: ["cloud"] } ]; const allTags = myFlatMap(usersData, user => user.tags); console.log("所有标签 (myFlatMap):", allTags); // 输出: ["frontend", "javascript", "backend", "nodejs", "database", "cloud"] // 示例 3: 处理可能返回非数组的情况 (根据 myFlatMap 的实现) const mixedData = [1, [2, 3], 4]; const mappedMixed = myFlatMap(mixedData, item => (Array.isArray(item) ? item : [item * 10])); console.log("混合数据扁平化 (myFlatMap):", mappedMixed); // 输出: [10, 2, 3, 40]

在myFlatMap的实现中，[...accumulator, ...mappedArray]是关键。它使用展开运算符将mappedArray中的所有元素添加到accumulator中，从而实现了一级扁平化。

性能考量与最佳实践

理解如何用reduce实现map和filter是一种深刻的编程练习，它揭示了这些高阶函数的底层机制。然而，在日常开发中，我们应该如何选择使用它们呢？

原生方法与reduce实现的比较

何时选择reduce实现map/filter？

1. 学习和理解目的：这是我们今天讲座的主要目的。通过手动实现，能更深刻地理解这些方法的本质。
2. 性能优化（特定场景）：当需要对大型数组执行多个链式操作（例如filter后跟map），并且这些操作可以在单次遍历中完成时，使用reduce可以避免创建多个中间数组，从而减少内存开销和 CPU 周期。
3. 复杂的数据转换：当你的转换逻辑不仅仅是简单的映射或筛选，而是需要根据前一个元素的状态或更复杂的逻辑来构建最终结果时，reduce提供了无与伦比的灵活性。例如，将数组转换为对象、按属性分组、计算频率等。
4. 自定义迭代器/转换器：如果你正在构建自己的函数式编程库，reduce是实现各种高阶函数的基础。

何时不选择reduce实现map/filter？

1. 代码可读性优先：对于简单的映射或筛选任务，原生的map和filter方法具有更高的可读性和意图清晰度。它们是为这些特定任务设计的，因此更易于理解和维护。
2. 性能差异不明显：对于小型到中型数组，原生方法的优化已经非常高。手动使用reduce实现可能带来的性能提升微乎其微，甚至可能因为额外的逻辑判断和函数调用开销而略逊一筹。
3. 维护成本：如果团队成员对reduce的高级用法不熟悉，使用它来实现简单的map或filter可能会增加代码的理解难度和维护成本。

总结：在绝大多数情况下，为了代码的清晰性和可读性，我们应该优先使用原生的map和filter。只有当你面临大型数据集的多重链式操作，且性能成为瓶颈时，或者出于深入理解底层机制的目的，才考虑使用reduce来实现这些功能。

reduce的更广阔天地

今天我们专注于用reduce实现map和filter，但这仅仅是reduce强大能力的一瞥。reduce方法的通用性使其能够完成几乎所有其他数组迭代方法能做到的事情，甚至更多。

• Array.prototype.some()和Array.prototype.every()：可以用reduce结合布尔逻辑来实现。
• Array.prototype.find()和Array.prototype.findIndex()：可以通过在accumulator中保存找到的元素或索引，并在找到后提前返回累加器来实现（尽管原生方法在找到后会立即停止迭代，reduce会遍历整个数组，除非你手动抛出异常）。
• 分组数据：将数组转换为按某个键分组的对象，例如groupBy。
• 构建复杂对象：将数组转换为具有特定结构的复杂对象。
• 计数频率：统计数组中每个元素出现的次数。

reduce方法是函数式编程中“折叠”（fold）或“聚合”（aggregate）操作的体现。理解它，掌握它，你将拥有一个强大的工具来处理各种数组转换和数据聚合任务。

总结与展望

通过今天的讲座，我们深入剖析了 JavaScript 中Array.prototype.reduce()方法的强大功能。我们不仅学习了如何利用它来实现map和filter这两个常用高阶函数，更重要的是，我们理解了reduce作为一种通用归约工具的内在机制。

我们看到，reduce能够通过其灵活的累加器和回调函数，模拟出多种数组转换行为。尤其是在需要对数组进行多次操作并希望优化性能、避免创建中间数组时，reduce能够将这些操作合并到单次遍历中，展现其独特的优势。

掌握reduce不仅仅是掌握一个方法，更是掌握了一种将复杂列表处理问题分解为简单、迭代步骤的思维模式。这种能力将极大地提升您解决各种数据转换和聚合问题的效率与优雅性。