每日一练 从对象生成树

每日一练 从对象生成树

  编写一个函数createTree，从嵌套对象创建一个嵌套的ul/li列表。

例如:

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

  "Tree": {
    "Huge": {
      "sequoia": {},
      "oak": {}
    },
    "Flowering": {
      "apple tree": {},
      "magnolia": {}
    }
  }
};
let container = document.getElementById('container');
createTree(container, data); // 将树创建在 container 中

结果看起来像这样:

• Fish
  • trout
  • salmon
• Tree
  • Huge
    • seqoia
    • oak
  • Flowering
    • apple tree
    • magnolia

  这种复杂的嵌套对象可以看作树结构,可以使用递归快速的遍历该树.我们可以在对树进行遍历的过程中逐一生成DOM节点.这里要注意,当递归的深度加一后要额外添加ul标签

function createTree(elem, data) {
      for (let key of Object.keys(data)) {
        let li = document.createElement('li');
        li.textContent = key;

        if (elem.nodeName == 'LI') {
          let ul = document.createElement('ul');
          elem.append(ul);
          elem = ul;
        }

        elem.append(li);
        createTree(li, data[key]);
      }
    }