将扁平对象转换为嵌套对象的JavaScript教程-js教程-PHP中文网

将扁平对象转换为嵌套对象的JavaScript教程

本教程将详细介绍如何使用javascript，特别是结合lodash库，将包含下划线分隔键名的扁平对象高效地转换为多层嵌套的对象结构。文章将通过示例代码演示核心转换逻辑，并探讨lodash `_.set` 方法的强大功能，帮助开发者处理复杂的数据重构场景。

在JavaScript开发中，我们经常需要对数据结构进行转换以适应不同的业务需求或API规范。其中一个常见的场景是将一个键名包含特定分隔符（如：下划线 _）的扁平对象，转换为一个具有层级关系的嵌套对象。这种转换有助于提高数据可读性、更好地组织数据，并与前端组件或后端服务的数据模型保持一致。

理解转换需求

假设我们有如下输入对象：

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
  }
};

从输入到输出的转换规则是：键名中的下划线 _ 表示对象的层级分隔符。例如，a_b_c 应该被解析为 outputObject.a.b.c。

解决方案：结合 Object.entries() 和 Lodash _.set()

为了实现这种转换，我们可以利用JavaScript的原生方法 Object.entries() 遍历对象的键值对，并结合流行的实用工具库 Lodash 中的 _.set() 方法来动态构建嵌套对象。

1. 引入 Lodash

在使用Lodash之前，您需要将其引入到您的项目中。可以通过CDN引入：

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

或者通过npm安装并在模块中导入：

npm install lodash

import _ from 'lodash';

2. 核心转换逻辑

Lodash 的 _.set(object, path, value) 方法是实现此转换的关键。它允许我们通过一个路径数组（或点分隔的字符串）来设置对象的深层属性。如果路径中的任何部分不存在，_.set() 会自动创建相应的对象。

前端设计引擎

使用此技能可创建独具特色、具备生产级质量的前端界面，设计品质高。当用户要求构建网页组件、页面、产物、海报或应用程序时（例如：网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 进行样式优化与视觉美化），请启用该能力。输出需为富有创意、精雕细琢的代码与 UI 设计，避免千篇一律的 AI 风格。

下载

以下是实现转换的代码示例：

const inputObject = {a_b_c: 1, a_b_d: 2, a_e: 3, f_g: 4};

const resultObject = Object.entries(inputObject).reduce((accumulator, [key, value]) => {
  // 1. 将原始键名按 '_' 分割，得到一个路径数组
  const path = key.split('_'); 

  // 2. 使用 Lodash 的 _.set() 方法设置嵌套属性
  // accumulator 是最终要构建的嵌套对象
  // path 是由键名分割而来的路径数组
  // value 是原始键对应的值
  _.set(accumulator, path, value);

  return accumulator;
}, {}); // 初始值为空对象 {}

console.log(resultObject);
/*
输出:
{
  a: {
    b: {
      c: 1,
      d: 2
    },
    e: 3
  },
  f: {
    g: 4
  }
}
*/

代码解析：

Object.entries(inputObject): 这个方法返回一个包含 [key, value] 数组的数组，允许我们迭代原始对象的每个键值对。
.reduce((accumulator, [key, value]) => { ... }, {}): reduce 方法用于将数组中的所有元素归约为一个单一的输出值。在这里，accumulator 是我们正在构建的最终嵌套对象，初始值是一个空对象 {}。[key, value] 是解构赋值，用于获取当前迭代的键和值。
const path = key.split('_');: 这是关键一步。对于每个原始键（例如 a_b_c），我们使用 split('_') 方法将其拆分为一个数组 ['a', 'b', 'c']。这个数组正是 _.set() 方法所需的路径。
_.set(accumulator, path, value);: Lodash 的 _.set() 方法会根据 path 数组，在 accumulator 对象中创建或设置对应的深层属性。如果路径中的某个中间对象不存在，它会自动创建。例如，当处理 a_b_c: 1 时，它会创建 accumulator.a，然后创建 accumulator.a.b，最后将 accumulator.a.b.c 设置为 1。当处理 a_b_d: 2 时，由于 accumulator.a 和 accumulator.a.b 已经存在，它会直接在 accumulator.a.b 下设置 d: 2。

注意事项与扩展

性能考量: 对于包含大量键的巨型对象，reduce 和 _.set 的组合通常是高效且可读的。然而，如果性能是极致瓶颈，可以考虑手动实现 set 逻辑，以避免额外的函数调用开销，但这通常会牺牲代码简洁性。
键名冲突: 如果原始键名中存在非下划线分隔的键，例如 foo: 1 和 foo_bar: 2，则 foo 将被视为一个叶子节点，而 foo_bar 将尝试在 foo 下创建子对象。这会导致 foo 的值被覆盖或引发类型错误（例如，尝试在数字 1 上添加属性）。在设计原始键名时应避免此类冲突。
不使用 Lodash 的替代方案: 如果项目不允许引入 Lodash，可以手动实现一个类似的 set 函数。这通常涉及一个循环，遍历路径数组，并在每个层级检查并创建对象：
```
function setDeep(obj, pathArr, value) {
  let current = obj;
  for (let i = 0; i  {
  const path = key.split('_');
  setDeep(acc, path, value);
  return acc;
}, {});
console.log(resultObjectManual);
```
手动实现虽然增加了代码量，但提供了对逻辑的完全控制，并且避免了外部依赖。