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]); //递归遍历
        }
    }
}

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