當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
JS 如何快速高效的将数组转换成树形结构
生活随笔
收集整理的這篇文章主要介紹了
JS 如何快速高效的将数组转换成树形结构
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
JS 如何快速高效的將數組轉換成樹形結構
const data = [{id: 1,pid: 0,name: 'body'}, {id: 2,pid: 1,name: 'title'}, {id: 3,pid: 2,name: 'div'}];轉化為這種: [{id: 1,pid: 0,name: 'body',children: [{id: 2,pid: 1,name: 'title',children: [{id: 3,pid: 1,name: 'div'}]}]}]上代碼:
function toTree(data) {// 空數組let result = [];// 判斷不是數組 直接返回if (!Array.isArray(data)) {return result}// 遍歷 刪除 children 屬性 做初始化操作data.forEach(item => {delete item.children;});// 空對象let map = {};data.forEach(item => {map[item.id] = item;});/*** map對象的 鍵: 是每個id 值:對應的item* 1: {id: 1, pid: 0, name: "body"}* 2: {id: 2, pid: 1, name: "title"}* 3: {id: 3, pid: 2, name: "div"}*/data.forEach(item => {// item.pid 為0時 返回underfinedlet parent = map[item.pid];if (parent) {(parent.children || (parent.children = [])).push(item);} else {// 這里push的item是pid為0的數據result.push(item);}});return result;}console.log(toTree(data))完事!
總結
以上是生活随笔為你收集整理的JS 如何快速高效的将数组转换成树形结构的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Vue中的 ref 和 $refs
- 下一篇: JS 中判断一个对象是否为数组对象?