js树形数据转一维数组

241 阅读1分钟

ps:学习自抖音某博主,仅自己学习记录使用

首先让我们看一组树形结构数据

const tree = [    {      id: 1,      name: 'a',      children: [        {          id: 12,          name: 'aa',          children: [            {              id: 121,              name: 'aaa',            },            {              id: 122,              name: 'aab'            }          ]        }      ]    },    {      id: 2,      name: 'b'    },    {      id: 3,      name: 'c',      children: [        {          id: 31,          name: 'cc',          children: [            {              id: 311,              name: 'ccc'            }          ]        }      ]    }  ]

那么如何利用reduce将其转换为一维数组呢?

博主给出的原方案

const result = tree.reduce(function fn (prev, curr) {    prev.push({      id: curr.id,      name: curr.name    })    curr.children && curr.children.forEach((v) => {      v.parentId = curr.id      arguments.callee(prev, v)    })    return prev}, [])

那么什么是arguments.callee()呢

从mdn给出的解释可以看出,该方法可以以递归的形式调用当前函数体内正常执行的函数,但该函数在严格模式下是无法使用的,因此,我们改造下此方法,使用有名函数做递归调用

改造后的方法

const result = tree.reduce(function fn (prev: any, curr: any) {    curr.parentId ? prev.push({      id: curr.id,      name: curr.name,      parentId: curr.parentId  // 加入parentId做层级标识    }) : prev.push({      id: curr.id,      name: curr.name    })        curr.children && curr.children.forEach((item: any) => {      item.parentId = curr.id      fn(prev, item)    })    return prev}, [])