let tree = [
{
id: 1,
name: "1",
pid: 0,
children: [
{
id: 2,
name: "2",
pid: 1,
children: [],
},
{
id: 3,
name: "3",
pid: 1,
children: [
{
id: 4,
name: "4",
pid: 3,
children: [],
},
],
},
],
},
];
// tree形式转为扁平化数组
function treeToArray(tree) {
let res = [];
for (const item of tree) {
const { children, ...i } = item;
if (children && children.length) {
res = res.concat(treeToArray(children));
}
res.push(i);
}
return res;
}
const arr = [
{ id: 1, pid: 0, title: "html" },
{ id: 2, pid: 1, title: "body" },
{ id: 3, pid: 2, title: "div" },
{ id: 4, pid: 2, title: "div" },
{ id: 5, pid: 3, title: "a" },
{ id: 6, pid: 3, title: "a" },
{ id: 7, pid: 5, title: "span" },
];
// 扁平化数组转为tree形式
function arrayToTree(list) {
let res = [];
function getChildren(res, pid) {
for (const item of list) {
if (item.pid === pid) {
const newItem = { ...item, children: [] };
res.push(newItem);
getChildren(newItem.children, newItem.id);
}
}
}
getChildren(res, 0);
return res;
}
前端面试必问:数组扁平化转换
最新推荐文章于 2024-05-13 09:38:30 发布
本文介绍了如何在前端开发中,通过函数`treeToArray`和`arrayToTree`实现树形数据结构与扁平数组之间的转换,以HTML、CSS和JavaScript为例,展示在实际项目中的操作技巧和应用场景。
摘要由CSDN通过智能技术生成