今天就掰扯掰扯js遍历Tree

何处锦绣不灰堆

发布于 2021-07-15 09:42:57

7930

发布于 2021-07-15 09:42:57

问题描述

遍历tree难点在于怎么找到每一个节点的值，同时判断还有没有更多的节点，也就是说，将所有的节点都找到且拿到节点的值！那么我们的思路就比较明确了，首先我们认为他是没有任何节点了，直接将我们需要的数据给到一个函数A进行操作，然后操作的时候判断一下是他的childrens是不是存在且同时为我们需要的数组类型，如果是，就调我们之前操作对象的函数A，这样就可以直接将所有的节点都找到！代码实现如下：

//声明一个tree的数据
var arrData = [
         {
        id:1,
        name:"tom",
        childrens:[{
            id:1,
            name:"jim"
            },{
            id:2,
            name:"lisi"
            }]
    }, {
        id:2,
        name:"jerry",
        childrens:[{
            id:1,
            name:"karry"
            },{
            id:2,
            name:"wanger",
                childrens:[
                       {
                    id:1,
                    name:"mali"
                     }]
        },{
        id:3,
        name:"wangwu"
        }]
    }
];

//声明一个函数，做的操作是将数组中的每一项作为一个操作对象进行操作，比如你要根据一些特定条件进行筛选数据等，这里我们将里面的所有的name全部列出来！
let tickFilter = (function(){
    let tempArr = new Array()
    let getFilterReault = function(arg){
            tempArr.push(arg.name)
        if(arg.childrens instanceof Array && null != arg.childrens){
            for(let child of arg.childrens){
                getFilterReault(child)
            }
        
    }
    //到这为止，以上的代码其实可以将数组中的对象给拿出来了，但是获取的是子节点中的数据，因为我们没有原数据的入口，作为一个工具我们需要有一个入口，也就是将原数组作为参数传递进去的这么一个入口！
    return {
        filterFunc:function(arr){
            tempArr = new Array()
                for(let item of arr){
                    getFilterReault(item)
                }
            return tempArr
        }
    }
})()

console.log(tickFilter.filterFunc(arrData))