js过滤多维数组数据

一、过滤可以用于前端在做列表搜索功能的时候，进行的一个筛选操作，我的需求是拿到一个三层级数组，但是只需针对第二层级进行搜索筛选，若存在则返回该内容所存在的所有层级的数据

//这是我从后台拿到的数据，我只需对data里面的每个对象中的serviceList中的每一项中的name作为筛选条件，进行筛选过滤
var dataNetService =  { 
        "name": "mulu",
        "data": [
	     {
	         "clusterId": "feiteng",
             "name":"feiteng",
	         "serviceList": [
	             {
	                 "create_time": "2020-11-16 12:04:22",
	                 "domain_name": "-",
	                 "name": "test",
	                 "vip": "-",
					 "deploymentList": [
	                     {
	                         "create_time": "2020-11-18 02:15:34",
	                         "seed_domain": "-",
	                         "seed_name": "aa",
	                         "seed_port": [8080 ],
	                         "seed_remark": "v1",
	                         "seed_status": "100.0%",
	                         "seed_vip": "-"
	                     },
	                 ],
	             }
	         ]
	     },
	     {
	         "clusterId": "longxin",
             "name":"longxin",
	         "serviceList": [
	             {
	                 "create_time": "2020-11-17 09:54:44",
                     "domain_name": "-",
	                 "name": "tomcat",
	                 "vip": "-",
	                 "deploymentList": [
	                     {
	                         "create_time": "2020-11-17 14:52:24",
	                         "seed_domain": "-",
	                         "seed_name": "test",
	                         "seed_port": [8080],
	                         "seed_remark": "1",
	                         "seed_status": "100.0%",
	                         "seed_vip": "-"
	                     }
	                 ],
	                
               },
               {
                "create_time": "2020-11-17 09:54:44",
                "domain_name": "-",
                "name": "tomcat2",
                "vip": "-",
                "deploymentList": [
                    {
                        "create_time": "2020-11-17 14:52:24",
                        "seed_domain": "-",
                        "seed_name": "test",
                        "seed_port": [8080],
                        "seed_remark": "1",
                        "seed_status": "100.0%",
                        "seed_vip": "-"
                    }
                ],
                
            }
	         ]
	     }
	 ]
 }
//因此js逻辑如下：
    getSearchName=(query)=>{
        var filterObj = function(item){ 
            //if(item.name.indexOf(query)>-1) return true 搜索第一层的name,这里我是不需要搜索第一层的，所以可以不写
            if(item.serviceList.length>0){ //搜索第二层的name
                item.serviceList = item.serviceList.filter(function(child){
                    if(child.name.indexOf(query) > -1){ 
                        return true; //这里判断name中是否包含所搜索的内容，filter函数的返回值是布尔值，为true则表示存在会保留在数组中，为false则过滤掉
                    }
                })
                if(item.serviceList.length>0){
                    return item //这里一定要写返回值，不然过滤的结果会一直是空
                }
            }
        }
        var filter = dataNetService.data.filter(function(item){
            return filterObj(item);
        });//因为filter是不会改变原数组的，所以需要定义一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
            this.dataNetService = filter
            console.log(JSON.parse(JSON.stringify(filter)))
    }
    getSearchName('to')//搜索to

 搜索“to”结果如下:

此时可以看到，名字name为“tomcat”和“tomcat2”所在的所有层级都返回了出来。

二、如果你的数据是如下这种形式，比较有规律的层级关系，属性也是雷同的，而且是每个层级都需要搜索，那么就可以用下面的方法，参考https://segmentfault.com/q/1010000016781339

var treeNodeList = [{
        "name": "一级A",
        "children": [{
            "name": "一级-1",
            "children": [{
                "name": "一级-1-1",
                "children": [{
                        "name": "一级-1-1-1",
                        "type": "true",
                    },
                    {
                        "name": "一级-1-1-3",
                        "type": "true",
                    }
                ]
            }]
        }]
    },
    {
        "name": "二级B",
        "children": [{
            "name": "二级-1",
            "children": [{
                "name": "二级-2-2",
                "children": [{
                        "name": "二级-2-2-2",
                        "type": "true",
                    },
                    {
                        "name": "二级-2-2-1",
                        "type": "true",
                    }
                ]
            }]
        }]
    },
    {
        "name": "三级C",
        "children": [{
            "name": "三级-1",
            "children": [{
                "name": "三级-3-1",
                "children": [{
                        "name": "三级-3-3-1",
                        "type": "true",
                    },
                    {
                        "name": "三级-3-3-2",
                        "type": "true",
                    }
                ]
            }]
        }]
    }
]

var query = 'A';

var filterObj = function(item){
    if(item.name.indexOf(query) > -1) return true;
    if(item.hasOwnProperty("children")){
        item.children = item.children.filter(function(child){
            if(child.hasOwnProperty("type")){
                return child.name.indexOf(query) > -1;
            }else if(child.hasOwnProperty("children")){
                return filterObj(child);
            }
        })
        if(item.children.length > 0){
            return true;
        }
    }else{
        return child.name.indexOf(query) > -1;
    }
}
var filter = treeNodeList.filter(function(item){
    return filterObj(item);
});

console.log(JSON.stringify(filter));