递归嵌套 JavaScript 对象 | 编码教程

简介

在本实验中，我们将探索一个名为 nest 的 JavaScript 函数，该函数会递归地将相互链接的对象嵌套在一个扁平数组中。该函数使用递归、Array.prototype.filter() 和 Array.prototype.map() 根据对象的 id 和 parent_id 属性来过滤和嵌套这些项。完成本实验后，你将更好地理解如何使用递归在 JavaScript 中创建嵌套对象。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("Destructuring Assignment") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("DOM Traversal") subgraph Lab Skills javascript/variables -.-> lab-28507{{"JavaScript 中相互链接对象的递归嵌套"}} javascript/data_types -.-> lab-28507{{"JavaScript 中相互链接对象的递归嵌套"}} javascript/arith_ops -.-> lab-28507{{"JavaScript 中相互链接对象的递归嵌套"}} javascript/comp_ops -.-> lab-28507{{"JavaScript 中相互链接对象的递归嵌套"}} javascript/array_methods -.-> lab-28507{{"JavaScript 中相互链接对象的递归嵌套"}} javascript/higher_funcs -.-> lab-28507{{"JavaScript 中相互链接对象的递归嵌套"}} javascript/destr_assign -.-> lab-28507{{"JavaScript 中相互链接对象的递归嵌套"}} javascript/spread_rest -.-> lab-28507{{"JavaScript 中相互链接对象的递归嵌套"}} javascript/dom_traverse -.-> lab-28507{{"JavaScript 中相互链接对象的递归嵌套"}} end

如何在 JavaScript 中使用递归嵌套对象

要在扁平数组中递归地嵌套对象，请遵循以下步骤：

打开终端/SSH 并输入 node 开始练习编码。
使用递归嵌套相互链接的对象。
使用 Array.prototype.filter() 过滤出 id 与 link 匹配的项。
使用 Array.prototype.map() 将每个项映射到一个新对象，该对象具有一个 children 属性，该属性会根据哪些项是当前项的子项来递归地嵌套这些项。
省略第二个参数 id，默认为 null，这表示该对象未链接到另一个对象（即它是顶级对象）。
省略第三个参数 link，使用 'parent_id' 作为默认属性，通过其 id 将对象链接到另一个对象。

以下是代码：

const nest = (items, id = null, link = "parent_id") =>
  items
    .filter((item) => item[link] === id)
    .map((item) => ({ ...item, children: nest(items, item.id, link) }));

要使用 nest() 函数，请创建一个包含 id 属性和将它们链接到另一个对象的 parent_id 属性的对象数组。然后，调用 nest() 函数并将该数组作为参数传递。该函数将返回一个基于其 parent_id 属性进行嵌套的新对象数组。

例如：

const comments = [
  { id: 1, parent_id: null },
  { id: 2, parent_id: 1 },
  { id: 3, parent_id: 1 },
  { id: 4, parent_id: 2 },
  { id: 5, parent_id: 4 }
];
const nestedComments = nest(comments);
// [{ id: 1, parent_id: null, children: [...] }]

总结

恭喜你！你已完成“嵌套对象”实验。你可以在 LabEx 中练习更多实验来提升你的技能。