今天有人问怎么把一维数据转换成tree格式,按我以前风格当然是reduce+递归,那样效率和性能都很差;于是利用浅拷贝的机制-引用赋值来做:
直接上代码:
/**
*
* @param {*} data 需要转变的数据
* @param {*} config:id、pid设置 需结合data中的对应字段
* @returns tree
*/
function toTree(data = [], config = {}) {
const { id = "id", pid = "pid" } = config;
// 浅拷贝精髓所在
const newData = JSON.parse(JSON.stringify(data));
// 存放结果
const result = [];
// 存放平铺数据
const allNodeMap = {};
// 不是Array不处理
if (!Array.isArray(newData)) {
return result;
}
// 清除原有的children,以及平铺数据
newData.forEach((item) => {
delete item.children;
allNodeMap[item[id]] = item;
});
// 核心代码
newData.forEach((item) => {
const parent = allNodeMap[item[pid]];
parent.children ? parent.children.push(item) : (parent.children = [item]);
});
return result;
}
// 测试数据
const data = [
{
id: 1,
pid: 0,
text: "data_01",
},
{
id: 2,
pid: 1,
text: "data_02",
},
{
id: 3,
pid: 1,
text: "data_03",
},
{
id: 4,
pid: 3,
text: "data_04",
},
{
id: 5,
pid: 6,
text: "data_05",
},
{
id: 6,
pid: 2,
text: "data_06",
},
{
id: 7,
pid: 6,
text: "data_07",
},
];
console.log(`%c${JSON.stringify(toTree(data), null, 2)}`, 'color:red');
字段名不同的可以设置config