从邻接表构建树形结构的JS代码逻辑疑问

Great question—this all comes down to a core JavaScript concept: object references! Let’s break down exactly what’s happening in this code step by step.

First, Let’s Recap the Code’s Two Key Loops #

Here’s the original code for context:

var flat = [ { id: 1, name: "Business", parent: 0 }, { id: 2, name: "Management", parent: 1 }, { id: 3, name: "Leadership", parent: 2 }, { id: 4, name: "Finance", parent: 1 }, { id: 5, name: "Fiction", parent: 0 }, { id: 6, name: "Accounting", parent: 1 }, { id: 7, name: "Project Management", parent: 2 } ];
var nodes = [];
var toplevelNodes = [];
var lookupList = {};

// First loop: Create node objects and populate references
for (var i = 0; i < flat.length; i++) {
 var n = { id: flat[i].id, name: flat[i].name, parent_id: ((flat[i].parent == 0)? null : flat[i].parent), children: [] };
 lookupList[n.id] = n;
 nodes.push(n);
 if (n.parent_id == null) {
 toplevelNodes.push(n);
 }
}

// Second loop: Link child nodes to their parents
for (var i = 0; i < nodes.length; i++) {
 var n = nodes[i];
 if (!(n.parent_id == null)) {
 lookupList[n.parent_id].children = lookupList[n.parent_id].children.concat([n]);
 }
}

console.log(toplevelNodes);

The Critical Detail: Object References in JavaScript #

When you create an object like n = { ... }, that object lives in your computer’s memory. Variables like lookupList[n.id], nodes[i], and (for top-level nodes) toplevelNodes[j] don’t store a copy of the object—they store a reference (a pointer) to the exact same object in memory.

Let’s use the "Business" node (id: 1) as an example:

1. In the first loop, we create the n object for id:1.
2. We add this object to lookupList[1], push it to nodes, and since its parent_id is null, we also push it to toplevelNodes.
3. Now, lookupList[1], nodes[0], and toplevelNodes[0] all point to the exact same object in memory.

How the Second Loop Builds the Tree #

In the second loop, when we process a child node (like id:2, "Management"):

1. We find its parent via lookupList[n.parent_id]—which is lookupList[1], the same "Business" object referenced in toplevelNodes.
2. We add the child node to the parent’s children array with .concat([n]).

Since we’re modifying the actual object in memory that toplevelNodes references, those changes automatically show up in toplevelNodes! The children array of the "Business" node in toplevelNodes gets updated because it’s the same object as the one in lookupList.

To Put It Simply #

• toplevelNodes doesn’t "contain" the full tree directly—it contains references to top-level objects.
• Those top-level objects have their children arrays modified in the second loop, and because of object references, those modifications are visible through the references stored in toplevelNodes.
• This chain continues down the tree: each child node is added to its parent’s children array, and all those parent objects are referenced somewhere in the tree (ultimately linking back to the top-level nodes in toplevelNodes).

内容的提问来源于stack exchange，提问作者fedesc