30行代码撸一个性能勉强靠谱的构建树逻辑

大半年前写了一个构建树逻辑，呱呱呱，感觉不够优雅，感觉自己没有对细节做考虑，代码也不够精简，于是自己又动手写了写，整体思想其实差不多，但是针对细节做了一些优化，优化的过程也让我更一步理解了引用类型的数据，也让我发现forEach方法的没注意到的点：就是在用forEach对数组做循环的时候，你删除了数组的一个元素，forEach并没有帮你把循环过程的索引往前移一位，也就是做一个i–的过程，导致整个循环过程会丢失一些元素，所以我使用for循环手动i–。因为这里我是这么想的：一个元素只可能有一个父元素，所以我在对整个的数组做循环的时候，删除已经找到父节点的元素会让整个递归过程更快，整体的思想：就是找到第一级节点，然后递归给第一级节点找子节点，然后递归再给子节点找子子节点，依次递归下去

function hasParentNode(data, item) { // 是否存在父节点
const index = data.findIndex(c => c.id === item.parentId)
if (~index) return true
}

function getChildrenNodes(parentNodes, allNodes) { // 获取每一个节点的子节点
if (parentNodes.length === 0) return
const node = parentNodes.shift()
/* allNodes.forEach((item, index) => { // 这里本来是原本的想法，函数式forEach比for循环更优雅
if (node.id === item.parentId) {
if (node.children) node.children.push(item)
else node.children = [item]
parentNodes.push(item)
allNodes.splice(index, 1)
}
}) */
for (let i = 0; i < allNodes.length; i += 1) {
const current = allNodes[i]
if (node.id === current.parentId) {
if (node.children) node.children.push(current)
else node.children = [current]
parentNodes.push(current)
allNodes.splice(i, 1) // 删除已经找到父节点的元素
i -= 1 // 删除元素后把索引往前挪一位
}
}
getChildrenNodes(parentNodes, allNodes)
}

function buildTree(data) {
const parentNodes = []; // 有子节点的父级节点数组
data.forEach((item) => {
if (!hasParentNode(data, item)) parentNodes.push(item)
})
if (parentNodes.length <= 0) return
const dataSource = [...parentNodes] // 最终数组，引用类型的缘故，你操作parentNodes的每一个元素的过程就是操作dataSource的每一个元素的过程，我经常利用这个特性，如果你不想这样，你可能需要深拷贝复制一个新数组，有时候妙用这一特性能给你带来很多的便利
getChildrenNodes(parentNodes, data)
return dataSource
}

实际测试

const source = [
{
id: 1,
parentId: undefined,
groupName: {
name: '经理1',
count: 10
},
},
{
id: 2,
parentId: null,
groupName: {
name: '经理2',
count: 1
},
},
{
id: 3,
parentId: 0,
groupName: {
name: '经理3',
count: 2
},
},
{
id: 4,
parentId: 1,
groupName: {
name: '主管1',
count: 4
},
},
{
id: 5,
parentId: 1,
groupName: {
name: '主管2',
count: 6
},
},
{
id: 6,
parentId: 4,
groupName: {
name: '小组1',
count: 4
},
},
{
id: 7,
parentId: 5,
groupName: {
name: '小组2',
count: 4
},
},
{
id: 8,
parentId: 2,
groupName: {
name: '主管1',
count: 0
},
},
{
id: 9,
parentId: 3,
groupName: {
name: '主管1',
count: 0
},
},
];
console.log(buildTree(source))

其实很多原生函数返回的对象都是和原先的对象共享内存地址的，比如find, map等等，你可以了解一下堆栈的概念会帮助你更清楚的理解一些js原生函数的返回值，比如字符串的replace函数肯定是返回了一个新字符而不是在原有字符串上做修改，知识点到为止，自己带着问题去找为什么才是正确学习的方法

let a = [{id: 1, name: 'lane'},{id: 2, name: 'lc'}]
let element = a.find((item) => item.id === 2)
element.name = '数据改变了，引用没有变'
console.log(a)