本教程旨在指导开发者如何将具有扁平化、下划线分隔键名的javaScript对象，高效地转换为层级分明的嵌套对象。我们将重点介绍如何结合使用Object.entries()、Array.prototype.reduce()以及Lodash库中的_.set()方法，实现这一复杂的数据结构转换，并提供详细的代码示例和注意事项。
在前端开发中，我们经常会遇到需要对数据结构进行转换的场景。其中一种常见需求是将扁平化的对象（其键名通过特定分隔符表示层级关系）转换为具有实际嵌套结构的对象。例如，将以下输入对象：
// 输入对象 const inputObject = { a_b_c: 1, a_b_d: 2, a_e: 3, f_g: 4 };
转换为如下所示的嵌套对象：
// 期望输出对象 const outputObject = { a: { b: { c: 1, d: 2 }, e: 3 }, f: { g: 4 } };
这种转换在处理来自数据库查询结果、API响应或其他扁平数据源时尤为有用，能够使数据结构更符合业务逻辑和前端组件的展示需求。
立即学习“Java免费学习笔记（深入）”；
转换思路与工具选择
要实现这种转换，核心思路是：
- 遍历原始对象的每一个键值对。
- 对于每个键，根据分隔符（本例中是下划线 _）将其拆分成一个路径数组。
- 根据这个路径数组，在新的目标对象中逐步创建嵌套结构，并将原始值赋给最终的属性。
虽然可以使用纯javascript的for…in循环或Object.keys().reduce()来手动构建嵌套逻辑，但这通常涉及到复杂的条件判断和对象属性的动态创建，代码会相对冗长且容易出错。幸运的是，像Lodash这样的实用工具库提供了更简洁高效的方法来处理此类问题。
我们将利用Lodash库中的_.set()方法，它能够根据提供的路径（字符串或数组）在对象上设置值，并且会自动创建路径中缺失的嵌套对象。
使用 Lodash _.set() 实现转换
下面是结合Object.entries()和Array.prototype.reduce()以及Lodash _.set()方法实现上述转换的代码示例：
// 确保已引入 Lodash 库 // 例如，通过 CDN：<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script> const data = {a_b_c: 1, a_b_d: 2, a_e: 3, f_g: 4}; // 使用 reduce 方法将扁平对象转换为嵌套对象 const result = Object.entries(data).reduce((acc, [key, value]) => { // 1. 将扁平键名按 '_' 分割成路径数组 const path = key.split('_'); // 2. 使用 Lodash 的 _.set 方法在累加器对象中设置值 // _.set(object, path, value) // object: 要修改的对象 // path: 属性路径，可以是数组 ['a', 'b', 'c'] 或字符串 'a.b.c' // value: 要设置的值 _.set(acc, path, value); // 3. 返回累加器，以便进行下一次迭代 return acc; }, {}); // 初始累加器为一个空对象 {} console.log(result); /* 期望输出: { a: { b: { c: 1, d: 2 }, e: 3 }, f: { g: 4 } } */
代码解析
- Object.entries(data): 这个方法返回一个给定对象自身可枚举字符串键属性的[key, value]对数组。例如，对于data对象，它会生成 [[‘a_b_c’, 1], [‘a_b_d’, 2], …]。
- .reduce((acc, [key, value]) => { … }, {}):
- reduce方法用于将数组中的所有元素归约为一个单一的输出值。
- acc（accumulator）是累加器，它在每次迭代中都会被更新并传递到下一次迭代。我们将其初始值设置为一个空对象 {}，这将是最终的嵌套对象。
- [key, value]是解构赋值，用于从Object.entries()返回的每个[key, value]对中提取键和值。
- const path = key.split(‘_’);: 这是转换的关键一步。对于每个扁平键名（如a_b_c），我们使用split(‘_’)方法将其分割成一个字符串数组（如[‘a’, ‘b’, ‘c’]）。这个数组就代表了在新对象中值应该存放的路径。
- _.set(acc, path, value);: 这是Lodash _.set()方法的应用。
- 它接收当前累加器对象acc。
- 接收我们刚刚生成的路径数组path。
- 接收原始键值对中的value。
- _.set()会智能地遍历acc对象，根据path数组的指示，创建任何不存在的中间对象，并将value设置到路径的最终位置。如果路径上的某个部分已经存在且不是对象，它会被覆盖。
- return acc;: 在每次迭代结束时，返回更新后的累加器对象acc，以便reduce方法可以继续处理下一个键值对。
Lodash 库的引入
为了使上述代码正常运行，你需要确保项目中已经引入了Lodash库。你可以通过以下几种方式引入：
- CDN (内容分发网络)：在html文件中通过<script>标签引入。
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
- npm/yarn (包管理器)：在node.js项目或使用打包工具（如webpack、vite）的前端项目中安装。
npm install lodash # 或 yarn add lodash
然后在JavaScript文件中导入：
import _ from 'lodash'; // 或 const _ = require('lodash');
注意事项与总结
- 键名规范性：此方法高度依赖于键名中明确的分隔符（例如 _）。如果键名不规范，或者分隔符在某些情况下也作为普通字符存在，则需要调整split()方法或采用更复杂的解析逻辑。
- 外部依赖：引入Lodash库会增加项目的打包体积。对于对包大小有严格要求的小型项目，或者仅需此单一功能的情况，可能需要权衡是否值得引入整个库。在这种情况下，可以考虑自行实现一个精简版的set函数。
- 性能考量：对于包含数万甚至数十万个键值对的巨大对象，Object.entries().reduce()的遍历和_.set()的路径解析及对象创建可能会有一定的性能开销。在极端性能敏感的场景下，可能需要进行性能测试并考虑更底层的优化。
- 值覆盖：如果两个不同的扁平键名最终解析到同一个嵌套路径，后处理的值将覆盖先处理的值。例如，如果a_b和a_b_c都存在，且a_b的值是一个非对象类型，那么a_b_c的设置可能会导致a_b被覆盖为一个新的对象。在我们的示例中，a_b_c和a_b_d是同级关系，所以不会有覆盖问题。
通过上述方法，我们可以优雅且高效地将扁平化的JavaScript对象转换为具有复杂嵌套结构的对象，极大地简化了数据处理的逻辑，并提高了代码的可读性和可维护性。Lodash _.set()方法在这种场景下展现了其强大的实用性。