本文详细介绍了如何将一个扁平的 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 (??=) 运算符。这种方法允许我们在单次遍历数组的同时，动态地构建和更新嵌套对象结构。
立即学习“Java免费学习笔记（深入）”；
2.1 核心思路
累加器作为查找表和结果容器： reduce 方法的累加器（accumulator）不仅用于存储最终的嵌套对象，还作为所有已处理节点的临时查找表。这意味着，任何一个节点的父节点，都可以通过其 key 从累加器中快速访问到。动态创建父节点： 当处理一个子节点时，如果其 parent 对应的对象在累加器中尚未存在，或者不是一个对象，我们应立即将其初始化为一个空对象。??= 运算符在这里发挥关键作用，它能简洁地实现“如果为 null 或 undefined 则赋值”的逻辑。区分叶子节点与中间节点： 如果一个节点的 value 为空字符串 “”，通常表示它是一个中间节点（如 “HOUSE”、”OWNER DATA”），它本身应该是一个对象，用于容纳其子节点。如果 value 不为空，则它是一个叶子节点，直接赋值其 value。根节点处理： 顶级节点（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 代码解析
data.reduce((accumulator, { parent, key, value }) => { … }, {}):reduce 方法遍历 data 数组中的每个元素。accumulator 是累加器，在每次迭代中都会被传递和更新。初始值是一个空对象 {}。{ parent, key, value } 使用对象解构从当前数组元素中提取所需的属性。(accumulator[parent] ??= {}):这是构建嵌套结构的关键。它尝试访问 accumulator 中以当前 parent 的 key 为键的属性。??= 是空值合并赋值运算符。如果 accumulator[parent] 的当前值是 null 或 undefined，它就会被赋值为 {}（一个空对象）。否则，它会保持原样。这确保了在向一个父节点添加子节点之前，该父节点本身在累加器中已经是一个有效的对象。[key] = value === ” ? (accumulator[key] ??= {}) : value;:在父节点（accumulator[parent]）被确定或创建之后，我们将当前元素的 key 作为属性名，并为其赋值。value === ” ? (accumulator[key] ??= {}) : value：这是一个三元运算符，用于判断当前节点是中间节点还是叶子节点。如果 value 为空字符串 ”，则表示这是一个中间节点（如 “HOUSE” 或 “OWNER DATA”），它应该包含子节点。因此，我们再次使用 (accumulator[key] ??= {}) 来确保 accumulator 中以当前 key 为键的属性是一个对象，用于容纳未来的子节点。如果 value 不为空，则它是一个叶子节点，直接将 value 赋值给 key。return accumulator;: 每次迭代结束时，返回更新后的 accumulator，供下一次迭代使用。[”]: 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 的策略，我们能够以简洁、高效且易于理解的方式，将扁平化的对象数组转换为任意深度的嵌套对象，这在处理树形数据结构时是一个非常有用的模式。
以上就是将扁平对象数组转换为多层嵌套对象：JavaScript 高效实践的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1529226.html
微信扫一扫 
支付宝扫一扫 
