JavaScript 树形结构数组处理之递归

一.经典示例

var data = [
 {
     name: "所有物品",
     children: [
         {
             name: "水果",
             children: [{name: "苹果", children: [{name: '青苹果'}, {name: '红苹果'}]}]
         },
         {
             name: '主食',
             children: [
                 {name: "米饭", children: [{name: '北方米饭'}, {name: '南方米饭'}]}
             ]
         },
         {
             name: '生活用品',
             children: [
                 {name: "电脑类", children: [{name: '联想电脑'}, {name: '苹果电脑'}]},
                 {name: "工具类", children: [{name: "锄头"}, {name: "锤子"}]},
                 {name: "生活用品", children: [{name: "洗发水"}, {name: "沐浴露"}]}
             ]
         }
  ]
}]
//递归遍历实现
var recursiveFunction = function(){
    var str = ''
    const getStr = function(list){
        list.forEach(function(row){
            if(row.children){
                getStr(row.children)
            }else {
                str += row.name + ";"
            }
        })
    }
    getStr(data)
    console.log(str)
}
recursiveFunction()
//输出：青苹果;红苹果;北方米饭;南方米饭;联想电脑;苹果电脑;锄头;锤子;洗发水;沐浴露;

简单理解：

let arr = [
	{ name: '小明同学', children: [ { name: '小明同学', children: [ { name: '小明同学' } ] } ] }
]

function fn (arr, newArr = []) {
	arr.forEach(item => {
		typeof item === 'object' && item.name && newArr.push(item.name)  // 先判断当前项是否是对象。 当前项是否存在你想要的数据。都符合，把数据push到新数组里
		item.children && item.children instanceof Array && fn(item.children, newArr) // 当前项是否还有子节点，子节是否是数组, 如果是继续调用自己。再循环遍历一次.
	})
	return newArr
}

fn(arr) // ['小明同学','小明同学','小明同学']

function fn1 (arr, newArr = []) {
	function recursion (arr) {
		arr.forEach(item => { 
			newArr.push(item.name)
			item.children && recursion(item.children)
		})
	}
	recursion(arr)
	return newArr
}

fn1(arr) // ['小明同学','小明同学','小明同学']

递归解决多级数组
1.我们考虑利用递归 就必须等有一个判断条件 中断 递归 不然容易出现死循环
2.我们在进如函数递归是 要注意第二次调用自身是 函数的参数要是数据的子数据
二.实现逻辑

//js遍历对象
function TraversalObject(obj)
{
    for (var a in obj) {
        if (typeof (obj[a]) == "object") {
            TraversalObject(obj[a]); //递归遍历
        }
        else {
            alert(a + "=" + obj[a]);//值就显示
        }
    }
}

//遍历对象中所有Ur的值

function TraversalObject(obj)
{
    for (var a in obj) {
        if(a=="Url")    alert(obj[a]);/ /显示URL的值
        if (typeof (obj[a]) == "object") {
            TraversalObject(obj[a]); //递归遍历
        }
    }
}

这种遍历方法在对象不规则但需要获取相同属性时起到非常好的作用。

三.复杂递归
递归属性遍历
一般来说，在JavaScript中考虑复合类型的深层复制的时候，往往就是指对于Date、Object与Array这三个复合类型的处理。我们能想到的最常用的方法就是先创建一个空的新对象，然后递归遍历旧对象，直到发现基础类型的子节点才赋予到新对象对应的位置。不过这种方法会存在一个问题，就是JavaScript中存在着神奇的原型机制，并且这个原型会在遍历的时候出现，然后原型不应该被赋予给新对象。那么在遍历的过程中，我们应该考虑使用hasOenProperty方法来过滤掉那些继承自原型链上的属性：

function clone(obj) {
var copy;
 
    // Handle the 3 simple types, and null or undefined
if (null == obj || "object" != typeof obj) return obj;
 
    // Handle Date
if (obj instanceof Date) {
        copy = new Date();
        copy.setTime(obj.getTime());
return copy;
    }
 
    // Handle Array
if (obj instanceof Array) {
        copy = [];
for (var i = 0, len = obj.length; i < len; i++) {
            copy[i] = clone(obj[i]);
        }
return copy;
    }
 
    // Handle Object
if (obj instanceof Object) {
        copy = {};
for (var attr in obj) {
if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
        }
return copy;
    }
 
throw new Error("Unable to copy obj! Its type isn't supported.");
}
调用如下：

// This would be cloneable:
var tree = {
    "left"  : { "left" : null, "right" : null, "data" : 3 },
    "right" : null,
    "data"  : 8
};
 
// This would kind-of work, but you would get 2 copies of the 
// inner node instead of 2 references to the same copy
var directedAcylicGraph = {
    "left"  : { "left" : null, "right" : null, "data" : 3 },
    "data"  : 8
};
directedAcyclicGraph["right"] = directedAcyclicGraph["left"];
 
// Cloning this would cause a stack overflow due to infinite recursion:
var cylicGraph = {
    "left"  : { "left" : null, "right" : null, "data" : 3 },
    "data"  : 8
};
cylicGraph["right"] = cylicGraph;

四.不限层级

//后台返回来的数据形式
 const data = {
    "code":"0",
    "data":[
        {
            "data":{
                "name":"xx集团香港分公司",
                isLeaf:false,
                "id":1,
                "child":{     
                    "name":"xx集团香港分公司第一分部",
                     isLeaf:false,
                    "id":2,
                    "child":{
                        "name":"xx集团香港分公司第二分部",
                         isLeaf:false,
                        "id":3,
                        "child":{
                            "name":"xx集团香港分公司第三分部",
                             isLeaf:false,
                            "id":4,
                            "child":{
                                "name":"xx集团香港分公司第第四分部",
                                 isLeaf:true,
                                "id":5,
                                "child":{
                                   //此处省略层数不定 可能根据不同的人的权限层级树不一样 isLeaf为true 代表着在往后已经没有子层级
                                }
                            }
                        }
                    }
                }
            }
        }
       
    ],
    "message":"成功"
}


  //因为开发中我个人自己开发和使用的控件是数组形式的  后端不小心弄成都是对象形式返回来 因为涉及的业务关联表比较多 不方便改 所以作为前端还得处理，个人处理如下：
  预期想达到的数据结构效果：
	"data":[
    {
        "name":"xx集团香港分公司",
        isLeaf:false,
        "id":2,
        "child":[   
            {
                "name":"xx集团香港分公司",
                isLeaf:false,
                "id":3,
                "child":[   
                    {
                        "name":"xx集团香港分公司",
                        isLeaf:false,
                        "id":4,
                        "child":[   
                            {
                                "name":"xx集团香港分公司",
                                isLeaf:true,
                                "id":5,
                                child:[{
                                    
                                }]
                            }
                        ]
                    }
                ]
            }
        ]
    }
]
   //复杂的对象转化成为数组 递归实现
    objectToarray(dataObj, arr) {
      let newObj = {};
      if (Object.prototype.toString.call(dataObj) === "[object Object]") {
        for (let i in dataObj) {
          newObj[i] =
            i === "child" && !dataObj.isLeaf
              ? this.objectToarray(dataObj[i], [])
              : dataObj[i];
        }
        arr.push(newObj);
      }
      return arr;
    }
//取到数据和将数据塞进去进行处理 静静等待结果
 const dataObj = data.data[0].data;
 const result = objectToarray(dataObj , [])