将扁平对象数组转换为多层嵌套对象：JavaScript 高效实践

本文详细介绍了如何将一个扁平的 javascript 对象数组，根据其内部的父级引用关系，高效地转换成一个多层嵌套的复杂对象。通过利用 `array.prototype.reduce` 方法结合 javascript 的空值合并赋值运算符 (`??=`)，我们能够以单次遍历的方式，动态构建出任意深度的层级结构，实现数据结构的优雅重塑。

1. 问题背景与挑战

在前端开发或数据处理中，我们经常会遇到将扁平化数据（如从数据库或API获取的列表）转换为具有层级关系的树形或嵌套对象结构的需求。例如，给定一个包含以下结构的对象数组：

const data = [
    { "rank": 0, "key": "REPORTING PERIOD", "value": "2022", "parent": "" },
    { "rank": 0, "key": "HOUSE", "value": "", "parent": "" },
    { "rank": 1, "key": "OWNER DATA", "value": "", "parent": "HOUSE" },
    { "rank": 2, "key": "FIRST NAME", "value": "Joe", "parent": "OWNER DATA" },
    // ... 更多层级的数据
    { "rank": 2, "key": "CITY", "value": "LONDON", "parent": "ADDRESS" }
];

每个对象都包含一个 key、一个 value 以及一个 parent 字段，其中 parent 字段指定了其父节点的 key。parent 为空字符串 "" 的表示顶级节点。我们的目标是将其转换为如下所示的嵌套对象结构：

{
  "REPORTING PERIOD": "2022",
  "SIGNATURE DATE": "20211005",
  "HOUSE": {
    "OWNER DATA": {
      "FIRST NAME": "Joe",
      "LAST NAME": "Smith"
    },
    "VALUE HISTORY": {
      "INITAL PRICE": "12345",
      "LAST SALE PRICE": "1231236"
    },
    "ADDRESS": {
      "STREET 1": "5 MAIN TERRACE",
      "CITY": "LONDON"
    }
  },
  "AGENT": {
    "COMPANY DATA": {
      "COMPANY NAME": "The Real Agent, Inc",
      "BUSINESS NUMBER": "0021690080"
    },
    "BUSINESS ADDRESS": {
      "STREET 1": "800 MENLO STREET, SUITE 100",
      "CITY": "MENLO PARK",
      "ZIP": "94025"
    }
  }
}

直接通过简单的循环和条件判断来处理多层嵌套关系会变得复杂，尤其是在层级深度不确定的情况下。传统的迭代方法可能需要多重循环或递归，难以在单次遍历中高效完成。

2. 解决方案：使用 reduce 和空值合并赋值运算符

为了高效地实现这一转换，我们可以利用 JavaScript 的 Array.prototype.reduce 方法，并结合 nullish coalescing assignment (??=) 运算符。这种方法允许我们在单次遍历数组的同时，动态地构建和更新嵌套对象结构。

千图设计室AI海报

千图网旗下的智能海报在线设计平台

下载

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

2.1 核心思路

1. 累加器作为查找表和结果容器： reduce 方法的累加器（accumulator）不仅用于存储最终的嵌套对象，还作为所有已处理节点的临时查找表。这意味着，任何一个节点的父节点，都可以通过其 key 从累加器中快速访问到。
2. 动态创建父节点： 当处理一个子节点时，如果其 parent 对应的对象在累加器中尚未存在，或者不是一个对象，我们应立即将其初始化为一个空对象。??= 运算符在这里发挥关键作用，它能简洁地实现“如果为 null 或 undefined 则赋值”的逻辑。
3. 区分叶子节点与中间节点： 如果一个节点的 value 为空字符串 ""，通常表示它是一个中间节点（如 "HOUSE"、"OWNER DATA"），它本身应该是一个对象，用于容纳其子节点。如果 value 不为空，则它是一个叶子节点，直接赋值其 value。
4. 根节点处理： 顶级节点（parent 为 ""）会被添加到累加器的 "" 键下。最终结果通过访问 accumulator[''] 获得。

2.2 示例代码

const data = [
    {"rank":0,"key":"REPORTING PERIOD","value":"2022","parent":""},
    {"rank":0,"key":"SIGNATURE DATE","value":"20211005","parent":""},
    {"rank":0,"key":"HOUSE","value":"","parent":""},
    {"rank":1,"key":"OWNER DATA","value":"","parent":"HOUSE"},
    {"rank":2,"key":"FIRST NAME","value":"Joe","parent":"OWNER DATA"},
    {"rank":2,"key":"LAST NAME","value":"Smith","parent":"OWNER DATA"},
    {"rank":1,"key":"VALUE HISTORY","value":"","parent":"HOUSE"},
    {"rank":2,"key":"INITAL PRICE","value":"12345","parent":"VALUE HISTORY"},
    {"rank":2,"key":"LAST SALE PRICE","value":"1231236","parent":"VALUE HISTORY"},
    {"rank":1,"key":"ADDRESS","value":"","parent":"HOUSE"},
    {"rank":2,"key":"STREET 1","value":"5 MAIN TERRACE","parent":"ADDRESS"},
    {"rank":2,"key":"CITY","value":"LONDON","parent":"ADDRESS"},
    {"rank":0,"key":"AGENT","value":"","parent":""},
    {"rank":1,"key":"COMPANY DATA","value":"","parent":"AGENT"},
    {"rank":2,"key":"COMPANY NAME","value":"The Real Agent, Inc","parent":"COMPANY DATA"},
    {"rank":2,"key":"BUSINESS NUMBER","value":"0021690080","parent":"COMPANY DATA"},
    {"rank":1,"key":"BUSINESS ADDRESS","value":"","parent":"AGENT"},
    {"rank":2,"key":"STREET 1","value":"800 MENLO STREET, SUITE 100","parent":"BUSINESS ADDRESS"},
    {"rank":2,"key":"CITY","value":"MENLO PARK","parent":"BUSINESS ADDRESS"},
    {"rank":2,"key":"ZIP","value":"94025","parent":"BUSINESS ADDRESS"}
];

const tree = data.reduce((accumulator, { parent, key, value }) => {
  // 1. 确保父节点在累加器中存在且是一个对象。
  //    如果 accumulator[parent] 是 null 或 undefined，则将其初始化为 {}。
  //    然后，将当前 key-value 对添加到这个父节点下。
  // 2. 处理当前节点的 value：
  //    如果 value 为空字符串，表示当前节点是一个中间层级，它本身应该是一个对象，
  //    因此我们确保 accumulator[key] 被初始化为 {}。
  //    否则，它是一个叶子节点，直接赋值其 value。
  (accumulator[parent] ??= {})[key] = value === '' ? (accumulator[key] ??= {}) : value;

  return accumulator; // 返回更新后的累加器
}, {})['']; // reduce 的初始值是一个空对象 {}，最后通过 [''] 访问根节点
             // 这里的 '' 对应于输入数据中 parent 为空字符串的顶级节点。

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

2.3 代码解析

1. data.reduce((accumulator, { parent, key, value }) => { ... }, {}):
   • reduce 方法遍历 data 数组中的每个元素。
   • accumulator 是累加器，在每次迭代中都会被传递和更新。初始值是一个空对象 {}。
   • { parent, key, value } 使用对象解构从当前数组元素中提取所需的属性。
2. (accumulator[parent] ??= {}):
   • 这是构建嵌套结构的关键。它尝试访问 accumulator 中以当前 parent 的 key 为键的属性。
   • ??= 是空值合并赋值运算符。如果 accumulator[parent] 的当前值是 null 或 undefined，它就会被赋值为 {}（一个空对象）。否则，它会保持原样。
   • 这确保了在向一个父节点添加子节点之前，该父节点本身在累加器中已经是一个有效的对象。
3. [key] = value === '' ? (accumulator[key] ??= {}) : value;:
   • 在父节点（accumulator[parent]）被确定或创建之后，我们将当前元素的 key 作为属性名，并为其赋值。
   • value === '' ? (accumulator[key] ??= {}) : value：这是一个三元运算符，用于判断当前节点是中间节点还是叶子节点。
     • 如果 value 为空字符串 ''，则表示这是一个中间节点（如 "HOUSE" 或 "OWNER DATA"），它应该包含子节点。因此，我们再次使用 (accumulator[key] ??= {}) 来确保 accumulator 中以当前 key 为键的属性是一个对象，用于容纳未来的子节点。
     • 如果 value 不为空，则它是一个叶子节点，直接将 value 赋值给 key。
4. return accumulator;: 每次迭代结束时，返回更新后的 accumulator，供下一次迭代使用。
5. ['']: reduce 方法执行完毕后，accumulator 将包含所有节点，其中顶级节点（parent 为 "" 的那些）将作为 accumulator[''] 的属性存在。因此，我们通过 [''] 访问并返回最终的根对象。

3. 注意事项与总结

• 数据顺序： 这种方法对输入 data 数组的顺序没有严格要求，因为 accumulator 作为一个查找表，可以处理任何顺序的父子关系。只要父节点最终会作为某个 key 存在于 accumulator 中，其子节点就能找到它。
• 重复键： 如果在同一个父节点下存在重复的 key，则后处理的项会覆盖先处理的项。如果 key 在整个数据集中是唯一的，则不会有此问题。如果 key 在不同层级或父节点下可以重复（例如 "STREET 1" 可以在 "ADDRESS" 下，也可以在 "BUSINESS ADDRESS" 下），此方法能正确地将它们放置在各自的父节点下。
• rank 字段： 原始数据中的 rank 字段在上述解决方案中并未直接使用，因为 parent 字段已足够建立层级关系。
• 效率： 该方法通过单次遍历数组实现了复杂的数据结构转换，具有较高的效率。

通过这种结合 Array.prototype.reduce 和 nullish coalescing assignment 的策略，我们能够以简洁、高效且易于理解的方式，将扁平化的对象数组转换为任意深度的嵌套对象，这在处理树形数据结构时是一个非常有用的模式。