JavaScript树形结构数组处理之递归问题
作者：小熊代码加
这篇文章主要介绍了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))
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。