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

概述

在javascript开发中，我们经常会遇到需要处理数据结构转换的场景。其中一种常见需求是将一个扁平化的对象（其键名通过特定分隔符表示层级关系）转换为一个具有深层嵌套结构的对象。例如，将 "base/brand/0101-color-brand-primary-red": "#fe414d" 这样的键值对，转换为 { "base": { "brand": { "0101-color-brand-primary-red": "#fe414d" } } } 的形式。这种转换对于提高数据可读性、模块化管理以及方便通过层级路径访问数据都至关重要。

问题描述与目标

假设我们有一个JavaScript对象，其键（key）使用斜杠 / 作为层级分隔符，值（value）是具体的配置或数据。

原始数据示例：

{
    "Base/Brand/0101-color-brand-primary-red": "#fe414d",
    "Base/Brand/0106-color-brand-secondary-green": "#00e6c3",
    "Base/Brand/0102-color-brand-primary-light-gray": "#eaecf0",
    "Base/Brand/0107-color-brand-secondary-black": "#000000",
    "Base/Brand/0103-color-brand-primary-white": "#ffffff",
    "Base/Brand/0108-color-brand-secondary-dark-gray": "#b4b4b4",
    "Base/Brand/0104-color-brand-secondary-blue": "#079fff",
    "Base/Light/Extended/Red/0201-color-extended-900-red": "#7f1d1d",
    "Base/Brand/0105-color-brand-secondary-yellow": "#ffe63b",
    "Base/Light/Extended/Red/0202-color-extended-800-red": "#991b1b"
}

目标转换结果：

{
  "Base": {
    "Brand": {
      "0101-color-brand-primary-red": "#fe414d",
      "0106-color-brand-secondary-green": "#00e6c3",
      "0102-color-brand-primary-light-gray": "#eaecf0",
      "0107-color-brand-secondary-black": "#000000",
      "0103-color-brand-primary-white": "#ffffff",
      "0108-color-brand-secondary-dark-gray": "#b4b4b4",
      "0104-color-brand-secondary-blue": "#079fff",
      "0105-color-brand-secondary-yellow": "#ffe63b"
    },
    "Light": {
      "Extended": {
        "Red": {
          "0201-color-extended-900-red": "#7f1d1d",
          "0202-color-extended-800-red": "#991b1b"
        }
      }
    }
  }
}

解决方案

要实现这种转换，我们可以利用JavaScript的 Object.entries() 方法遍历原始对象的键值对，并结合 Array.prototype.reduce() 方法来递归地构建嵌套结构。

AVCLabs

AI移除视频背景，100%自动和免费

下载

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

核心思路

1. 获取所有键值对： 使用 Object.entries() 将原始对象转换为一个包含 [key, value] 数组的数组。
2. 遍历每个键值对： 对这个数组进行 reduce 操作，初始化一个空对象作为最终结果。
3. 处理每个键路径： 对于每个键（例如 "Base/Brand/0101-color-brand-primary-red"），使用 split('/') 将其分解成一个路径数组 ["Base", "Brand", "0101-color-brand-primary-red"]。
4. 构建嵌套结构： 对路径数组再次进行 reduce 操作。在每次迭代中，根据当前路径片段创建或导航到相应的嵌套对象，直到处理到路径的最后一个元素。
5. 赋值： 当到达路径的最后一个元素时，将原始值赋给该位置。

示例代码

const flatObject = {
  "Base/Brand/0101-color-brand-primary-red": "#fe414d",
  "Base/Brand/0106-color-brand-secondary-green": "#00e6c3",
  "Base/Brand/0102-color-brand-primary-light-gray": "#eaecf0",
  "Base/Brand/0107-color-brand-secondary-black": "#000000",
  "Base/Brand/0103-color-brand-primary-white": "#ffffff",
  "Base/Brand/0108-color-brand-secondary-dark-gray": "#b4b4b4",
  "Base/Brand/0104-color-brand-secondary-blue": "#079fff",
  "Base/Light/Extended/Red/0201-color-extended-900-red": "#7f1d1d",
  "Base/Brand/0105-color-brand-secondary-yellow": "#ffe63b",
  "Base/Light/Extended/Red/0202-color-extended-800-red": "#991b1b"
};

const nestedObject = Object.entries(flatObject).reduce((acc, [path, value]) => {
  // 将路径字符串按 '/' 分割成数组
  const pathSegments = path.split('/');
  // currentLevel 指向当前正在构建的嵌套层级
  let currentLevel = acc;

  // 遍历路径的每个片段，除了最后一个
  for (let i = 0; i < pathSegments.length - 1; i++) {
    const segment = pathSegments[i];
    // 如果当前层级没有这个片段对应的属性，则创建一个空对象
    if (!currentLevel[segment]) {
      currentLevel[segment] = {};
    }
    // 移动到下一层级
    currentLevel = currentLevel[segment];
  }

  // 将原始值赋给路径的最后一个片段
  const lastSegment = pathSegments[pathSegments.length - 1];
  currentLevel[lastSegment] = value;

  return acc; // 返回累加器，即最终的嵌套对象
}, {}); // 初始化累加器为一个空对象

console.log(JSON.stringify(nestedObject, null, 2));

代码解析

1. Object.entries(flatObject): 将 flatObject 转换为一个数组，其中每个元素都是一个 [key, value] 形式的数组。例如，["Base/Brand/0101-color-brand-primary-red", "#fe414d"]。
2. .reduce((acc, [path, value]) => { ... }, {}):
   • 这是一个高阶函数，用于遍历 Object.entries 返回的数组。
   • acc 是累加器，它将逐步构建最终的嵌套对象，初始值为空对象 {}。
   • [path, value] 是解构赋值，分别获取当前迭代的键（路径）和值。
3. const pathSegments = path.split('/');: 将当前键字符串（例如 "Base/Brand/0101-color-brand-primary-red"）按 / 分割成一个字符串数组 ["Base", "Brand", "0101-color-brand-primary-red"]。
4. let currentLevel = acc;: currentLevel 是一个指针，它在每次处理一个新路径时，都从 acc（即最终结果对象）的根部开始。它会随着路径片段的遍历而深入到嵌套结构中。
5. for (let i = 0; i : 这个循环遍历 pathSegments 数组中的所有元素，除了最后一个。这是因为最后一个元素是最终的键，而不是一个需要创建的中间层级。
   • const segment = pathSegments[i];: 获取当前路径片段（例如 "Base", "Brand"）。
   • if (!currentLevel[segment]) { currentLevel[segment] = {}; }: 检查 currentLevel 是否已经存在以 segment 为键的属性。如果不存在，则创建一个新的空对象，作为下一层级的容器。这确保了在构建过程中不会覆盖已有的嵌套对象。
   • currentLevel = currentLevel[segment];: 将 currentLevel 指针移动到新创建（或已存在）的子对象，以便在下一次迭代中继续构建更深的层级。
6. const lastSegment = pathSegments[pathSegments.length - 1];: 获取路径数组中的最后一个元素，它将作为最终的键。
7. currentLevel[lastSegment] = value;: 将原始的 value 赋给 currentLevel 对象中 lastSegment 对应的属性。此时 currentLevel 已经指向了正确的深层位置。
8. return acc;: 每次 reduce 迭代结束后，返回更新后的 acc 对象，供下一次迭代使用。

注意事项

• 路径格式一致性： 确保所有键都遵循相同的 / 分隔符格式。如果存在不规则的键，可能需要额外的预处理逻辑。
• 空路径或根路径： 如果键是空的字符串或不包含分隔符，此方法也能正确处理，但结果可能不是预期的嵌套。例如，键 "key" 会直接在根层级下创建 {"key": value}。
• 性能考量： 对于非常庞大的对象（数万甚至数十万个键），频繁的对象创建和属性访问可能会有性能开销。但在大多数常规应用场景下，这种方法是高效且可读的。
• 键名冲突： 如果不同的扁平路径最终指向同一个嵌套位置，并且其中一个路径是另一个路径的前缀，例如 "A/B" 和 "A/B/C"，此方法会正确地将 "A/B" 创建为一个对象，然后将 "A/B/C" 嵌套在其下。如果存在 "A/B" 和 "A/B" 这样的重复键，后出现的会覆盖先出现的。
• TypeScript 类型： 在TypeScript环境中，可能需要定义递归类型来准确描述这种嵌套结构，以获得更好的类型检查和代码提示。

总结

通过巧妙地结合 Object.entries() 和 Array.prototype.reduce() 方法，我们可以优雅且高效地将扁平化的、带有层级路径的JavaScript对象转换为深层嵌套结构。这种转换不仅提高了数据的组织性和可读性，也为后续的数据操作和管理提供了便利。理解这种模式对于处理各种数据转换需求都非常有益。