本文详细介绍了如何将一个键名包含斜杠分隔路径的扁平化JavaScript对象，转换为一个具有相应嵌套结构的深层对象。通过运用Object.entries遍历原始数据，并结合reduce方法对键路径进行递归处理，可以高效地构建出所需的层级结构，从而提升数据组织和访问的便利性。

概述

在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" }

目标转换结果：

Imagen – Google Research

google Brain team推出的图像生成模型。

19

查看详情

{   "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() 方法来递归地构建嵌套结构。

立即学习“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.length – 1; 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对象转换为深层嵌套结构。这种转换不仅提高了数据的组织性和可读性，也为后续的数据操作和管理提供了便利。理解这种模式对于处理各种数据转换需求都非常有益。