Question

我一直在网上搜索，找不到合适的搜索词，所以我最后再向Javascript中的所有老年人询问。以下代码取自答案on these question 我真的不明白方法或功能是如何工作的。

var list = [{id: 1,title: 'home',parent: null},{id: 2,title: 'about',parent: null},{id: 3,title: 'team',parent: 2},{id: 4,title: 'company',parent: 2} ];
function treeify(list) {
     var treeList = [];
     var lookup = {};
     list.forEach(function(obj) {
          obj['children'] = [];
          lookup[obj['id']] = obj;
     });
     console.log(lookup); // [problem number 1]

     list.forEach(function(obj) {
          if (obj['parent'] != null) {
               lookup[obj['parent']]['children'].push(obj);
          } else {
               treeList.push(obj);
          }
     });

     console.log(treeList); // [problem number 2]
};

treeify(list);

问题1：

它产生了一个对象，每个父对象上都有一个子对象，据说我认为，父对象应该在那个时候有一个空数组。它是如何工作的？请开明我。

问题编号2

treeList已经形成了层次结构树。怎么会发生？它甚至没有将查找变量推送到treeList变量？它只使用等于null的父（即父根）推送obj。

希望得到答案。如果您知道任何可以帮助我理解JavaScript的博客，文章等，请不要犹豫，在您的答案中添加链接。非常感谢你！

Answer 1

var list = [
     {id: 1,title: 'home',parent: null},
     {id: 2,title: 'about',parent: null},
     {id: 3,title: 'team',parent: 2},
     {id: 4,title: 'company',parent: 2} 
];

treeify(list);


function treeify(list) {

     var treeList = []; //local array
     var lookup = {}; //local object

     // iterate over each element in list array
     list.forEach(function(obj) {

          // add a children property to each element in the array
          // in this case the children property is an array
          obj['children'] = [];

          // obj['id'] returns 1,2,3,4
          // lookup is an object so we use the id of each element in the list array as a key
          // first iteration adds key : 1 and value {id:1, title: 'home', parent: null, children: [] }
          // second iteration adds key : 2 and value {id:2, title: 'about', parent: null, children: [] }
          // ...
          lookup[obj['id']] = obj;
     });

     /*
          console.log(lookup) should output
          {
               1: {id: 1,title: 'home', parent: null, children: []},
               2: {id: 2,title: 'about', parent: null, children: []},
               3: {id: 3,title: 'team', parent: 2, children: []},
               4: {id: 4,title: 'company', parent: 2, children: []} 
          }

          however, if you run the code the lookup object gets modifyed in 
          the lines below (lookup[obj['parent']]['children'].push(obj);),
          therefore, some items in the lookup object will have children elements in its child array
     */
     console.log(lookup); // [problem number 1]

     list.forEach(function(obj) {
          if (obj['parent'] != null) {
               // this line modifyes the lookup object at runtime
               // obj has a parent, so we add it to the corresponding parents children array using the id
               lookup[obj['parent']]['children'].push(obj);
          } else {
               //only adds an element to the treelist array if its a parent element
               treeList.push(obj);
          }
     });

     console.log(treeList);
};

Answer 2

问题1：
您的假设是正确的，但问题是console.log正在记录引用。由于稍后会更改lookup对象，因此您会看到这些更改。 read more

function treeify(list) {
    var treeList = [];
    var lookup = {};
    list.forEach(function(obj) {
        obj['children'] = [];
        lookup[obj['id']] = obj;
    });
    console.log(lookup); // Now you're right
};

问题2：
lookup中的所有对象都引用list。

lookup[obj['id']] = obj;

此处childrens已更改。

lookup[obj['parent']]['children'].push(obj);

在treeList中也是相同的参考。

Javascript方法和局部变量

2 个答案: