javascript 递归 tree

最新推荐文章于 2025-06-03 18:20:00 发布

weixin_34189116

最新推荐文章于 2025-06-03 18:20:00 发布

阅读量95

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：https://segmentfault.com/a/1190000009078153

本文介绍了一种使用JavaScript实现的构建动物类别树状结构的方法。通过对一系列动物类别的数据进行处理，创建了一个从最广泛的类别到具体种类的多层次树状结构。此方法可以应用于多种需要展示层级关系的数据场景。

let animals = [
    { id: 'animals', name: 'animals', parent: null },
    { id: 'mammals', name: 'mammals', parent: 'animals' },
    { id: 'mammals2', name: 'mammals2', parent: 'animals' },
    { id: 'cats', name: 'cats', parent: 'mammals' },
    { id: 'dogs', name: 'dogs', parent: 'mammals' },
    { id: 'chihuahua', name: 'chihuahua', parent: 'dogs' },
    { id: 'labrador', name: 'labrador', parent: 'dogs' },
    { id: 'persian', name: 'persian', name: 'animals', parent: 'cats' },
    { id: 'siamese', name: 'siamese', parent: 'cats' }
]

let isEmptyObject = (obj) => {
    for (let t in obj)
        return !1;
    return !0
}

let makeTree = (animals, parent) => {
    let node = {}

    let filters = animals.filter(c => c.parent === parent)

    if (filters.length) {
        filters.forEach(c => {

            node[c.id] = c

            n = makeTree(animals, c.id)

            node[c.id]['children'] = []

            if (!isEmptyObject(n)) {
                node[c.id]['children'].push(n)
            }

        })
    }

    return node
}

console.log(
    JSON.stringify(
        makeTree(animals, null), null, 2
    )
)

/**
 {
  "animals": {
    "id": "animals",
    "name": "animals",
    "parent": null,
    "children": [
      {
        "mammals": {
          "id": "mammals",
          "name": "mammals",
          "parent": "animals",
          "children": [
            {
              "cats": {
                "id": "cats",
                "name": "cats",
                "parent": "mammals",
                "children": [
                  {
                    "persian": {
                      "id": "persian",
                      "name": "animals",
                      "parent": "cats",
                      "children": []
                    },
                    "siamese": {
                      "id": "siamese",
                      "name": "siamese",
                      "parent": "cats",
                      "children": []
                    }
                  }
                ]
              },
              "dogs": {
                "id": "dogs",
                "name": "dogs",
                "parent": "mammals",
                "children": [
                  {
                    "chihuahua": {
                      "id": "chihuahua",
                      "name": "chihuahua",
                      "parent": "dogs",
                      "children": []
                    },
                    "labrador": {
                      "id": "labrador",
                      "name": "labrador",
                      "parent": "dogs",
                      "children": []
                    }
                  }
                ]
              }
            }
          ]
        },
        "mammals2": {
          "id": "mammals2",
          "name": "mammals2",
          "parent": "animals",
          "children": []
        }
      }
    ]
  }
}
*/