JavaScript中使用DOM的递归

Question

我正在学习JavaScript，并尝试解决一个问题，该问题在https://javascript.info/modifying-document#create-a-tree-from-the-object给出。

问题是从给定的嵌套对象创建嵌套的ul / li。

以下是我的代码：

let data = 
  {
      "Fish": {
    "trout": {},
    "salmon": {}
  },

"Tree": {
    "Huge": {
      "sequoia": {},
      "oak": {}
    },
    "Flowering": {
      "redbud": {},
      "magnolia": {}
    }
  }
};


function createTree(data,key=null,parent_element=document.body){

  if(Object.keys(data).length){



    if(key){

    li = document.createElement('li');
    li.textContent = key;
    li = parent_element.append(li);

    }

    ul = document.createElement('ul');


    parent_element.append(ul);



    for(let key in data){

    createTree(data[key],key,ul);

    }

    return

  }


    li = document.createElement('li');
    li.textContent = key;
    parent_element.append(li);
    return;
}

createTree(data);

这将产生以下输出 而期望的输出如下所示： 我的代码有什么问题？我无法找到逻辑上的任何错误。

- jibin mathew

Answer 1

您的逻辑没有问题。问题是，您在createTree函数中的ul变量之前忘记了放置var声明。在它之前添加var，您的代码就能正常工作了。（您应该始终使用var、let或const声明变量，否则可能会出现奇怪的情况。）

let data = {
  "Fish": {
    "trout": {},
    "salmon": {}
  },
  "Tree": {
    "Huge": {
      "sequoia": {},
      "oak": {}
    },
    "Flowering": {
      "redbud": {},
      "magnolia": {}
    }
  }
};


function createTree(data, key = null, parent_element = document.body) {
  var li;
  if (Object.keys(data).length) {
    if (key) {
      li = document.createElement('li');
      li.textContent = key;
      li = parent_element.append(li);
    }

    var ul = document.createElement('ul');
    parent_element.append(ul);

    for(let key in data){
      createTree(data[key], key, ul);
    }
    
    return;
  }

  li = document.createElement('li');
  li.textContent = key;
  parent_element.append(li);
  return;
}

createTree(data);

这是一个关于在JavaScript中声明变量的不同方式及其含义的快速概述：

---

// Creates a global variable.
myVar1 = 1;

// Creates a variable within the scope you're currently in. It's "hoisted"
// to the top of the scope you're currently in, so if you declare a var in 
// the middle of a function, it gets pulled to the very top when your code
// is executed.
var myVar2 = 2;

// Declares a variable that is not hoisted.
let myVar3 = 3;

// Declares a constant that cannot be reassigned.
const myVar4 = 4;

你的实现失败的原因是因为`ul`变成了全局变量，导致你的函数无法返回期望的结果。

- Jake Miller

---

我刚刚花了7个小时来弄清楚出了什么问题。非常感谢。你知道当变量没有用let声明时会发生什么吗？ - jibin mathew

@jibinmathew 在我的回答中添加了解释。请查看我的编辑。 - Jake Miller

Answer 2

let data = {
    "Fish": {
        "trout": {},
        "salmon": {}
    },

    "Tree": {
        "Huge": {
            "sequoia": {},
            "oak": {}
        },
        "Flowering": {
            "redbud": {},
            "magnolia": {}
        }
    }
};


function createTree(data, key = null, parent_element = document.body) {
    if (Object.keys(data).length) {
        let ul = document.createElement('ul');
        if (key) {
            li = document.createElement('li');
            li.textContent = key;
            li = parent_element.append(li);
        }
        ul = document.createElement('ul');
        parent_element.append(ul);
        for (let key in data) {
            createTree(data[key], key, ul);
        }
        return
    }
    li = document.createElement('li');
    li.textContent = key;
    parent_element.append(li);
    return;
}

createTree(data);

你需要创建 let ul = document.createElement('ul'); 然后需要附加 <li>，但是创建问题...

- Parth Raval

---

你的答案是正确的，我没有给你的答案点踩。我已经给你的答案点赞了。谢谢你的时间。 - jibin mathew

@jibinmathew 我提供的解决方案比Jake miller更快且质量更高，所以你应该给我点赞...对吧？ - Parth Raval