本教程详细介绍了如何使用JavaScript将带有斜杠分隔键的扁平化对象转换为深度嵌套的对象结构。通过结合运用Object.entries()遍历键值对和Array.prototype.reduce()方法递归构建嵌套层级，我们可以高效且优雅地实现这一常见的数据转换需求，从而提高数据的可读性和组织性。
理解数据转换需求
在处理前端或后端数据时，我们经常会遇到以扁平结构存储的配置或属性，其键名通过特定分隔符（如斜杠/）来表示层级关系。例如，一个颜色配置对象可能如下所示：
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/Light/Extended/Red/0201-color-extended-900-red": "#7f1d1d", "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" }, "Light": { "Extended": { "Red": { "0201-color-extended-900-red": "#7f1d1d", "0202-color-extended-800-red": "#991b1b" } } } } }
实现方法：Object.entries()与reduce()的结合
要实现这种转换，我们可以利用JavaScript的两个强大特性：Object.entries()和Array.prototype.reduce()。
- Object.entries(): 将对象转换为一个包含键值对数组的数组。例如，Object.entries({a: 1, b: 2})会得到[[‘a’, 1], [‘b’, 2]]。这使我们能够遍历每个原始的键及其对应的值。
- String.prototype.split(‘/’): 对于每个键，使用斜杠/作为分隔符将其分割成一个路径段数组。例如，”Base/Brand/Key”.split(‘/’)会得到[‘Base’, ‘Brand’, ‘Key’]。
- Array.prototype.reduce(): 这是构建嵌套结构的核心。我们将在路径段数组上使用reduce，逐步构建嵌套对象。
详细步骤与代码实现
以下是实现上述转换的完整JavaScript代码：
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((accumulator, [path, value]) => { // 1. 将路径字符串分割成数组 const pathSegments = path.split('/'); // 2. 使用内部reduce构建嵌套结构 pathSegments.reduce((currentLevel, segment, index, array) => { // 如果是路径的最后一个片段，则赋值 if (index === array.length - 1) { currentLevel[segment] = value; } else { // 如果当前层级不存在该片段对应的对象，则创建 if (!currentLevel[segment]) { currentLevel[segment] = {}; } } // 返回当前层级，供下一次迭代使用 return currentLevel[segment]; }, accumulator); // 初始累加器为最终的嵌套对象 return accumulator; // 返回最终的嵌套对象 }, {}); // 初始累加器为一个空对象 console.log(JSON.stringify(nestedObject, null, 2));
代码解析
-
外层 reduce (Object.entries(flatObject).reduce(…)):
立即学习“Java免费学习笔记（深入）”；
- Object.entries(flatObject)：将扁平对象转换为 [[“Base/Brand/…”, “#fe414d”], …] 这样的数组。
- accumulator：这是最终将要构建的嵌套对象，初始值是一个空对象 {}。
- [path, value]：解构赋值，path是原始键（如 “Base/Brand/0101-color-brand-primary-red”），value是对应的值（如 “#fe414d”）。
- 这个外层 reduce 的作用是遍历每一个原始的键值对，并为每个键值对调用内层 reduce 来构建其在嵌套对象中的位置。
-
内层 reduce (pathSegments.reduce(…)):
- pathSegments：由 path.split(‘/’) 得到的路径数组，例如 [‘Base’, ‘Brand’, ‘0101-color-brand-primary-red’]。
- currentLevel：内层 reduce 的累加器，代表当前正在处理的嵌套层级。初始值是外层 reduce 的 accumulator（即最终的 nestedObject）。
- segment：当前正在处理的路径片段（如 ‘Base’, ‘Brand’）。
- index：当前片段在 pathSegments 数组中的索引。
- array：pathSegments 数组本身。
- 逻辑判断 if (index === array.length – 1):
- 如果 index 等于 array.length – 1，说明 segment 是路径的最后一个片段。此时，我们将 value 直接赋给 currentLevel[segment]。
- 否则（index 不是最后一个片段），说明 segment 是一个中间层级。我们需要检查 currentLevel[segment] 是否存在。如果不存在，就创建一个新的空对象 {}，以便继续向下构建嵌套层级。
- return currentLevel[segment]: 在每次迭代结束时，currentLevel 更新为 currentLevel[segment]，这样在下一次迭代中，currentLevel 就指向了更深一层的对象，从而实现逐层深入构建。
简洁版代码（ES6 语法糖）
上述代码可以进一步简化，利用逻辑或赋值运算符 ??=（空值合并赋值）和三元运算符，使其更加紧凑：
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 nestedObjectConcise = Object.entries(flatObject).reduce((acc, [path, value]) => { path.split('/').reduce((current, segment, index, arr) => { // 如果是最后一个片段，直接赋值；否则，确保它是一个对象 current[segment] ??= (index < arr.length - 1 ? {} : value); return current[segment]; // 返回下一层级 }, acc); return acc; // 返回最终的累加器 }, {}); console.log(JSON.stringify(nestedObjectConcise, null, 2));
在这个简洁版本中：
- current[segment] ??= …：这是一个空值合并赋值运算符。它检查 current[segment] 是否为 null 或 undefined。如果是，则将右侧的值赋给它。
- index < arr.length – 1 ? {} : value：这是一个三元表达式。如果当前片段不是最后一个，就赋值一个空对象 {}；如果是最后一个，就赋值原始的 value。
注意事项
- 路径冲突: 如果不同的扁平键路径在中间层级有交集，例如 Base/Brand/A 和 Base/Brand/B，此方法会正确地将它们归类到同一个 Base.Brand 对象下。
- 覆盖行为: 如果一个路径既是中间节点又是末端节点（例如 Base/Brand 和 Base/Brand/Key），并且 Base/Brand 本身在原始数据中被赋值，则此方法会将 Base/Brand 视为一个对象，并将其下的 Key 赋值。如果原始数据中有 {“Base/Brand”: “value”} 和 {“Base/Brand/Key”: “anotherValue”}，那么 Base.Brand 最终会是一个对象，而不会是 “value”。如果需要处理这种情况，可能需要更复杂的逻辑来决定是保留值还是创建对象。
- 性能: 对于非常大的对象或非常深的嵌套层级，此方法可能会有性能开销。但对于常见的数据转换需求，其性能通常是可接受的。
- 分隔符: 示例中使用的是斜杠/作为分隔符，你可以根据实际需求修改 split(‘/’) 中的分隔符。
总结
通过巧妙地结合使用 Object.entries() 和 Array.prototype.reduce()，我们可以高效且优雅地将扁平化的、带有路径分隔符的键转换为深度嵌套的 JavaScript 对象。这种模式在处理配置数据、文件路径或任何具有层级结构但以扁平形式存储的数据时都非常有用，极大地提升了数据的可读性和可操作性。理解并掌握这种数据转换技巧，将有助于开发者更灵活地处理各种数据结构。
相关标签：
javascript es6 java js 前端 json 后端 可视化数据 键值对 red JavaScript es6 String Array Object NULL 运算符 赋值运算符 三元运算符 if 递归 数据结构 Length undefined 对象 prototype