今天碰到了一个这样的数据结构,如下:
var cityData = [{
id: 1,
name: '广东省',
children: [{
id: 11,
name: '深圳',
children: [{
id: 111,
name: '宝安',
children: [{
id: 1111,
name: '西乡',
children: [{
id: 11111,
name: '坪洲',
children: []
},
{
id: 11112,
name: '灵芝',
children: []
}
]
},
{
id: 1112,
name: '南山',
children: [{
id: 11121,
name: '科技园',
children: []
}]
}
]
},
{
id: 112,
name: '福田',
children: []
}
]
},
{
id: 12,
name: '广州',
children: [{
id: 122,
name: '白云区',
children: [{
id: 1222,
name: '白云区',
children: []
}]
},
{
id: 122,
name: '珠海区',
children: []
}
]
}
]
},
{
id: 2,
name: '湖南省',
children: []
}
];
我现在想获取id是11112的name是灵芝。
对于这个问题一般的朋友都会直接想到用递归来做吧~,先获取最外层的元素,判断id是否相等,不相等就继续判断是否含有子节点,然后继续递归循坏,直接上代码。
const recursion = (cityData, id) => {
if (!cityData || !cityData.length) {
return
}
//先循坏cityData
for (let i = 0; i < cityData.length; i++) {
const childs = cityData[i].children;
// console.log(cityData[i].id)
if (cityData[i].id === id) {
result = cityData[i].name
}
if (childs && childs.length > 0) {
recursion(childs, id);
}
}
return result
}
console.log(recursion(cityData, 122))//灵芝
以上的做法,大部分都能想到,那么我们想下用其他的方法来解决这个需求。
第二种
let result = ''
const range = (cityData, id) => {
if (!cityData || !cityData.length) return;
// 定义一个数据栈
let stack = [];
let item = null;
//先将第一层节点放入栈
for (var i = 0, len = cityData.length; i < len; i++) {
stack.push(cityData[i]);
}
while (stack.length) {
// 将数据栈的第一个取出来
item = stack.shift();
// 如果符合就赋值给result
if (item.id === id) {
result = item.name
}
//如果该节点有子节点,继续添加进入栈底
if (item.children && item.children.length) {
stack = stack.concat(item.children);
}
}
return result
};
let r1 = range(cityData, 11112);
console.log(r1) // 灵芝
第三种
let result = ''
const deep = (cityData, id) => {
// 没有数据直接返回
if (!cityData || !cityData.length) return;
// 先定义一个数据栈
let stack = []
let item = null
//先将第一层节点放入数据栈
for (var i = 0, len = cityData.length; i < len; i++) {
stack.push(cityData[i])
}
// 循环
while (stack.length) {
item = stack.shift()
if (item.id === id) {
result = item.name
}
//如果该节点有子节点,继续添加进入栈顶
if (item.children && item.children.length) {
// 注意这里调换了顺序
stack = item.children.concat(stack);
}
}
return result
};
let r3 = deep(cityData, 11112)
console.log(r3) // 灵芝