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

更新时间：2023年06月07日 10:32:50 作者：小熊代码加

这篇文章主要介绍了JavaScript树形结构数组处理之递归问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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

经典示例

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 , [])

JS必会技巧之递归树结构

列表转化为树结构（递归树形结构）

实际开发中，经常会遇到的业务需求中，后端传过来的是数组中包含许多“形式一样”的对象，但实际这些对象是由层级关系的（树结构）。

因此前端需要经过处理，转化为树结构。

const list = [
    {
        id:1,
        pid:0,
        name:'中国'
    },
    {
        id:2,
        pid:1,
        name:'北京'
    },
    {
        id:3,
        pid:1,
        name:'深圳'
    },
    {
        id:4,
        pid:1,
        name:'武汉'
    },
    {
        id:5,
        pid:1,
        name:'西安'
    },
    {
        id:6,
        pid:2,
        name:'朝阳'
    },
    {
        id:7,
        pid:2,
        name:'海淀'
    }
]
const trancListToTreeData = (data,rootVal)=>{
    const res = [];
    //遍历查找
    data.forEach((item)=>{
        if(item.pid == rootVal){ //找到了根--找根下面的数据
            res.push(item);
            const children = trancListToTreeData(data,item.id) //子节点
            children.length &&(item.children = children)
        }
    })
    return res;
}
//遍历树形的原则--有头，才知道从哪开始
//要找根
console.log(trancListToTreeData (list,0))

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

JS仿flash上传头像效果实现代码
flash上传头像多不胜举了，可JS仿flash的见的不多，也是工作需要，就试着写写看！不料，设想还真的可行
2011-07-07
js实现图片无缝滚动特效
这篇文章主要为大家详细介绍了js实现图片无缝循环滚动特效的相关资料，本实例在网页中较为常见，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-01-01
TypeScript中类型兼容性的示例详解
JavaScript是一门弱类型语言，它对类型是弱校验，所以才有了TypeScript。本文就来和大家一起看看TypeScript的类型兼容性的概念和分类，需要的可以参考一下
2022-08-08
微信小程序实现长按拖拽排序功能
这篇文章主要为大家详细介绍了微信小程序实现长按拖拽排序功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-05-05
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
通过本文主要介绍如何提取Bootstrap的图标信息，存储到数据库里面为我所用，非常具有参考借鉴价值，感兴趣的朋友一起学习吧
2016-05-05
CORS cross-origin resourse sharing跨域资源共享解决
这篇文章主要为大家介绍了CORS cross-origin resourse sharing跨域资源共享的解决方案详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
JavaScript实现相册弹窗功能（zepto.js)
这篇文章主要介绍了JavaScript基于zepto.js实现相册弹窗功能的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-06-06
用JS实现一个简单的打砖块游戏
这篇文章主要介绍了用JS实现一个简单的打砖块游戏,代码分为html+css+js三部分，具体实例代码感兴趣的朋友跟随小编一起看看吧
2019-12-12
JavaScript引用类型和基本类型详解
这篇文章主要介绍了JavaScript引用类型和基本类型详解的相关资料,需要的朋友可以参考下
2016-01-01
JSscript标签有哪些属性
本文介绍了JSscript标签有哪些属性,向HTML页面中插入JavaScript的主要方法,就是使用script>元素.这个元素由Netscape创造并在NetscapeNavigator2中首先实现.后来,这个元素被加入到正式的HTML规范中,下面小编来讲解下JSscript标签有哪些属性,需要的朋友可以参考下
2022-01-01