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

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

霞舞

发布： 2025-10-14 09:05:43

原创

205人浏览过

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

本文深入探讨如何利用javascript的array.prototype.reduce方法，将一个包含父子关系信息的扁平对象数组高效地转换为一个深度嵌套的javascript对象。通过单次遍历和巧妙地运用空值合并赋值运算符（??=），我们能够处理多层嵌套结构，为数据重组提供一种简洁而强大的解决方案。

在前端开发和数据处理中，我们经常会遇到需要将扁平化的数据结构转换为具有层级关系的嵌套对象的情况。例如，从数据库或API获取的数据可能是一个包含父级引用字段的对象数组，而我们需要将其重构为一个更符合业务逻辑的树形结构。

问题描述

假设我们有以下一个JavaScript对象数组，每个对象都包含key、value以及一个可选的parent字段，表示其父级元素的key：

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": 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" },
    // ...
];

登录后复制

我们的目标是将其转换为一个如下所示的深度嵌套对象：

{ 
  "REPORTING PERIOD": "2022",
  "SIGNATURE DATE": "20211005",
  "HOUSE": {
    "OWNER DATA": {
      "FIRST NAME": "Joe",
      "LAST NAME": "Smith"
    },
    "VALUE HISTORY": { /* ... */ },
    "ADDRESS": { /* ... */ }
  },
  "AGENT": { /* ... */ }
}

登录后复制

直接遍历数组并简单地根据parent字段进行赋值，往往难以处理多层嵌套的情况，因为它要求父级对象在子级对象被处理之前就已存在，这可能导致逻辑复杂或需要多轮遍历。

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

解决方案：利用 Array.prototype.reduce

解决这类问题的优雅方式是使用JavaScript的Array.prototype.reduce方法。reduce方法可以遍历数组，并为每个元素执行回调函数，将结果累积到一个单一的值中。在这个场景下，累积器（accumulator）将不仅仅是最终的嵌套对象，它还将作为一个查找表，存储所有已创建的中间对象引用，以便后续的子元素能够正确地找到它们的父级。

核心思路

累积器作为查找表和构建器： reduce方法的累积器（a）将同时充当一个哈希表，存储所有已处理的key（包括父级key）及其对应的对象引用。这样，当处理一个子元素时，我们可以通过其parent字段直接从累积器中获取到父级对象的引用。
空值合并赋值运算符（??=）： 这个运算符是实现条件性创建嵌套对象的关键。obj.prop ??= value 等价于 if (obj.prop === null || obj.prop === undefined) { obj.prop = value; }。它允许我们在父级对象不存在时创建它，如果已存在则直接使用。
处理叶子节点与分支节点： 数据中的value字段为空字符串（""）通常表示该key是一个分支节点，它本身不存储值，而是作为进一步嵌套的容器。如果value非空，则表示它是一个叶子节点，直接存储其值。

示例代码

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，则将其初始化为一个空对象 {}
  //    然后返回这个父级对象，以便后续操作
  const parentObject = (accumulator[parent] ??= {});

  // 2. 根据 value 的情况，将当前 key 及其值/子对象添加到父级对象中
  if (value === '') {
    // 如果 value 为空字符串，表示当前 key 是一个容器（分支节点）
    // 确保 accumulator[key] 存在（可能被用作未来子元素的父级），并将其赋值给 parentObject[key]
    parentObject[key] = (accumulator[key] ??= {});
  } else {
    // 如果 value 非空，表示当前 key 是一个叶子节点
    // 直接将 value 赋值给 parentObject[key]
    parentObject[key] = value;
  }

  // 3. 返回更新后的累积器，供下一次迭代使用
  return accumulator;
}, {})['']; // 初始累积器为空对象，最后通过访问 [''] 获取根节点
// 注意：初始累积器 {} 会被用来存储所有层级的引用，
// 而最终的根对象是那些 parent 为空字符串（''）的元素的集合。
// 因此，我们通过 accumulator[''] 来获取最终的完整树结构。

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

登录后复制

代码解析

data.reduce((accumulator, { parent, key, value }) => { ... }, {}):
- accumulator (或 a) 是在每次迭代中累积结果的对象。
- { parent, key, value } 是通过解构从当前数组元素中提取的属性。
- {} 是reduce方法的第二个参数，表示累积器的初始值。
(accumulator[parent] ??= {}):
- 这一行是关键。它首先尝试访问 accumulator[parent]。
- 如果 accumulator[parent] 是 null 或 undefined（即这个父级对象尚未在累积器中创建），则 ??= 运算符会将其初始化为一个空对象 {}。
- 无论父级对象是新创建的还是已存在的，parentObject 变量都会持有对它的引用。
parentObject[key] = value === '' ? (accumulator[key] ??= {}) : value;:

即构数智人
即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

36

查看详情
- 这里判断当前元素的 value 是否为空字符串。
- 如果 value 为空字符串 (value === ''): 这意味着 key 是一个中间节点，它将包含其他子节点。我们将其在 parentObject 中初始化为一个新的空对象 (accumulator[key] ??= {})。同时，accumulator[key] 也被更新或创建，以便后续的子元素可以找到这个作为其父级的对象。
- 如果 value 非空 (else): 这意味着 key 是一个叶子节点，它直接存储一个值。我们将 value 直接赋给 parentObject[key]。
return accumulator;: 每次迭代结束时，返回更新后的累积器，供下一次迭代使用。
['']: 在 reduce 方法执行完毕后，accumulator 对象包含了所有层级的引用。那些 parent 字段为空字符串（""）的顶级元素最终会累积到 accumulator[''] 这个属性下。因此，通过访问 accumulator['']，我们就能得到最终的完整嵌套对象。

注意事项与最佳实践

数据完整性： 确保parent字段的值始终对应一个有效的key。如果parent引用了一个不存在的key，该逻辑仍然会创建一个空对象作为父级，但可能不符合预期。
循环引用： 如果原始数据中存在循环引用（例如 A 的父级是 B，B 的父级是 A），这种方法不会无限循环，但结果可能不是一个标准的树形结构，因为对象引用会指向自身。
性能： reduce方法在单次遍历中完成所有工作，对于大多数数据集来说，其性能是高效的。
可读性： 尽管代码紧凑，但对于不熟悉reduce和??=的开发者来说，可能需要一些时间来理解。适当的注释可以提高代码的可读性。

TypeScript 类型： 如果使用TypeScript，可以为accumulator和tree定义更精确的类型，以增强代码的健壮性。例如：

interface DataItem {
    rank: number;
    key: string;
    value: string;
    parent: string;
}

type NestedObject = {
    [key: string]: string | NestedObject;
};

const tree: NestedObject = data.reduce(...);

登录后复制

总结

通过巧妙地运用 Array.prototype.reduce 方法，并结合空值合并赋值运算符（??=），我们可以高效且优雅地将一个带有父级引用信息的扁平对象数组转换为一个深度嵌套的JavaScript对象。这种方法避免了多轮遍历或复杂的递归逻辑，提供了一个简洁而强大的解决方案，适用于处理各种层级数据转换的场景。理解其内部机制，特别是累积器作为查找表和条件对象创建的原理，对于掌握这种数据重组技术至关重要。

以上就是将扁平数组转换为嵌套对象的JavaScript教程的详细内容，更多请关注php中文网其它相关文章！