JavaScript 数组扁平化深度解析：理解 reduce 与递归的强大组合

本文深入探讨了在 javascript 中使用 `reduce` 方法进行数组扁平化的技术，并着重阐释了递归在处理多层嵌套数组时的核心作用。通过对比有无递归的实现方式，结合具体代码示例，详细分析了递归如何确保所有嵌套层级都能被正确展开，从而生成一个完全扁平化的数组字符串，帮助开发者理解其工作原理及应用场景。

数组扁平化概述

数组扁平化（Array Flattening）是指将一个包含多层嵌套数组的复杂结构转换为一个一维数组的过程。在 JavaScript 开发中，我们经常会遇到需要处理这种嵌套数据结构的情况，例如处理树形数据、解析复杂配置等。JavaScript 提供了多种方式来实现数组扁平化，其中 Array.prototype.reduce() 方法结合递归是一种非常强大且灵活的实现方式。

reduce 方法的基础应用

reduce() 方法对数组中的每个元素执行一个由您提供的 reducer 函数，将其结果汇总为单个返回值。它接收两个参数：一个回调函数（reducer）和一个初始值。

let myArray = ["J", "a", "v", ["a", "scrip"], "t"];

const flattenSimple = (arr) => {
  return arr.reduce((flat, item) => {
    return flat.concat(item);
  }, []).join("");
};

console.log(flattenSimple(myArray));
// Output => Javascript

在上述代码中，flattenSimple 函数尝试将数组扁平化。对于 myArray 这样的浅层嵌套数组（只有一层嵌套），它似乎能正常工作。reduce 遍历数组，遇到子数组 ["a", "scrip"] 时，直接将其与 flat 数组连接。由于 concat 方法会将数组元素展开一层，因此对于 ["a", "scrip"] 这样的子数组，它会被展开为 a 和 scrip 两个独立的元素，最终通过 join("") 得到 "Javascript"。

递归的必要性：处理深层嵌套数组

然而，上述 flattenSimple 函数在面对更深层次的嵌套数组时就会失效。例如：

立即学习“Java免费学习笔记（深入）”；

let deepMyArray = ["J", ["a", "v"], ["a", "s", ["c", ["r", "i"], "p"]], "t"];

如果尝试用 flattenSimple 处理 deepMyArray，结果将不是完全扁平化的字符串，因为 ["c", ["r", "i"], "p"] 这样的深层嵌套无法被一次性展开。

为了解决这个问题，我们需要引入递归。递归是一种函数调用自身的技术，直到满足某个基本条件才停止。在数组扁平化中，这意味着当 reduce 方法遇到一个子数组时，不应该简单地将其连接到结果数组中，而是应该再次调用扁平化函数处理这个子数组，直到所有的子数组都被完全展开为止。

结合 reduce 与递归实现深度扁平化

下面是使用 reduce 结合递归实现深度扁平化的标准方法：

文心大模型

百度飞桨-文心大模型 ERNIE 3.0 文本理解与创作

56

查看详情

const flattenDeep = (arr) => {
  return arr.reduce((flat, item) => {
    // 检查当前元素是否为数组
    if (Array.isArray(item)) {
      // 如果是数组，则递归调用 flattenDeep 处理该子数组
      return flat.concat(flattenDeep(item));
    } else {
      // 如果不是数组，则直接将其添加到结果数组中
      return flat.concat(item);
    }
  }, []).join("");
};

让我们用 deepMyArray 来测试这个函数，并与没有递归的版本进行对比：

示例代码：有递归的扁平化

let deepMyArray = ["J", ["a", "v"], ["a", "s", ["c", ["r", "i"], "p"]], "t"];

const flattenRecursive = (arr) => {
  return arr.reduce((flat, item) => {
    return Array.isArray(item) ? flat.concat(flattenRecursive(item)) : flat.concat(item);
  }, []).join("");
};

console.log("有递归版本:", flattenRecursive(deepMyArray));
// 预期输出: 有递归版本: Javascript

示例代码：无递归的扁平化（仅处理一层嵌套）

let deepMyArray = ["J", ["a", "v"], ["a", "s", ["c", ["r", "i"], "p"]], "t"];

const flattenNonRecursive = (arr) => {
  return arr.reduce((flat, item) => {
    // 即使是数组，也只是直接连接，不会深入处理
    return flat.concat(item);
  }, []).join("");
};

console.log("无递归版本:", flattenNonRecursive(deepMyArray));
// 预期输出: 无递归版本: J,a,v,a,s,c,r,i,p,t  （注意逗号，且深层嵌套未完全展开）
// 实际输出：Jav,a,s,c,r,i,p,t
// 让我们更精确地看：
// flat.concat(["a","s",["c",["r","i"],"p"]]) 会变成 ["a","s",["c",["r","i"],"p"]]
// 所以最终会是 ["J","a","v","a","s",["c",["r","i"],"p"],"t"]
// join("") 后会是 "Jav,a,s,c,r,i,p,t" (取决于 toString 行为)
// 实际上，["c", ["r", "i"], "p"].toString() 会是 "c,r,i,p"
// 所以 flattenNonRecursive(deepMyArray) 会输出 "Jav,a,s,c,r,i,p,t"
// 这里的关键是：flattenNonRecursive 无法将 ["r","i"] 再次扁平化

通过运行上述两个代码片段，我们可以清晰地看到它们的区别：

• 有递归版本 (flattenRecursive)：当 reduce 遇到 ["a", "s", ["c", ["r", "i"], "p"]] 时，它会再次调用 flattenRecursive 来处理这个子数组。这个子调用会继续深入到 ["c", ["r", ["r", "i"], "p"]]，然后再次调用 flattenRecursive 处理 ["r", "i"]，直到所有嵌套层级都被完全展开。最终，所有字符都被收集到一个一维数组中，然后 join("") 形成 "Javascript"。
• 无递归版本 (flattenNonRecursive)：当 reduce 遇到 ["a", "s", ["c", ["r", "i"], "p"]] 时，它只是简单地将这个子数组的元素（包括另一个嵌套数组 ["c", ["r", "i"], "p"] 本身）连接到结果数组中。它不会进一步检查 ["c", ["r", "i"], "p"] 内部是否还有数组，因此深层嵌套 ["r", "i"] 仍会以数组形式存在于结果数组中（在 join 之前），导致最终的字符串不是完全扁平化的。

工作原理分析

flattenRecursive 函数的核心在于 Array.isArray(item) ? flat.concat(flattenRecursive(item)) : flat.concat(item) 这一行。

1. flat: 这是 reduce 方法的累加器，它在每次迭代中存储着已经扁平化后的部分结果。
2. item: 这是当前正在处理的数组元素。
3. Array.isArray(item): 判断当前元素 item 是否为一个数组。
   • 如果是数组 (true)：这意味着我们遇到了一个需要进一步扁平化的嵌套结构。此时，flattenRecursive(item) 被调用。这个递归调用会处理 item 这个子数组，并返回一个已经完全扁平化的一维数组。然后，这个扁平化的结果通过 flat.concat() 添加到主 flat 累加器中。
   • 如果不是数组 (false)：这意味着 item 是一个基本数据类型（如字符串、数字等），它不需要进一步扁平化，直接通过 flat.concat(item) 添加到 flat 累加器中即可。

通过这种方式，函数能够一层一层地“剥开”嵌套数组，直到所有元素都成为非数组类型，从而实现彻底的扁平化。

总结

在 JavaScript 中，当需要将一个可能包含任意深度嵌套的数组完全扁平化时，结合 Array.prototype.reduce() 方法与递归是至关重要的。reduce 提供了一个迭代和累加的框架，而递归则赋予了函数处理不确定嵌套深度的能力。缺少递归，函数只能处理浅层嵌套，无法达到真正的深度扁平化。理解并正确运用递归，是处理复杂数据结构和编写健壮代码的关键技能之一。

以上就是JavaScript 数组扁平化深度解析：理解 reduce 与递归的强大组合的详细内容，更多请关注php中文网其它相关文章！