js 將線性數(shù)據(jù)轉(zhuǎn)為樹形的示例代碼
在日常開發(fā)工作中，我們經(jīng)常碰到將線性的數(shù)據(jù)轉(zhuǎn)換成樹的需求，今天給大家分享一個簡單的轉(zhuǎn)換算法。
數(shù)據(jù)結(jié)構(gòu)
下面是我們轉(zhuǎn)換前的數(shù)據(jù)：
[
{
"id":1,
"parent_id":0,
"name":"四川省"
},
{
"id":2,
"parent_id":0,
"name":"廣東省"
},
{
"id":3,
"parent_id":0,
"name":"江西省"
},
{
"id":5,
"parent_id":1,
"name":"成都市"
},
{
"id":6,
"parent_id":5,
"name":"錦江區(qū)"
},
{
"id":7,
"parent_id":6,
"name":"九眼橋"
},
{
"id":8,
"parent_id":6,
"name":"蘭桂坊"
},
{
"id":9,
"parent_id":2,
"name":"東莞市"
},
{
"id":10,
"parent_id":9,
"name":"長安鎮(zhèn)"
},
{
"id":11,
"parent_id":3,
"name":"南昌市"
}
]
我們轉(zhuǎn)換后的結(jié)果是：
[
{
"id":1,
"parent_id":0,
"name":"四川省",
"children":[
{
"id":5,
"parent_id":1,
"name":"成都市",
"children":[
{
"id":6,
"parent_id":5,
"name":"錦江區(qū)",
"children":[
{
"id":7,
"parent_id":6,
"name":"九眼橋"
},
{
"id":8,
"parent_id":6,
"name":"蘭桂坊"
}
]
}
]
}
]
},
{
"id":2,
"parent_id":0,
"name":"廣東省",
"children":[
{
"id":9,
"parent_id":2,
"name":"東莞市",
"children":[
{
"id":10,
"parent_id":9,
"name":"長安鎮(zhèn)"
}
]
}
]
},
{
"id":3,
"parent_id":0,
"name":"江西省",
"children":[
{
"id":11,
"parent_id":3,
"name":"南昌市"
}
]
}
]
實(shí)現(xiàn)代碼
let array = [
{
id: 1,
parent_id: 0,
name: "四川省"
},
{
id: 2,
parent_id: 0,
name: "廣東省"
},
{
id: 3,
parent_id: 0,
name: "江西省"
},
{
id: 5,
parent_id: 1,
name: "成都市"
},
{
id: 6,
parent_id: 5,
name: "錦江區(qū)"
},
{
id: 7,
parent_id: 6,
name: "九眼橋"
},
{
id: 8,
parent_id: 6,
name: "蘭桂坊"
},
{
id: 9,
parent_id: 2,
name: "東莞市"
},
{
id: 10,
parent_id: 9,
name: "長安鎮(zhèn)"
},
{
id: 11,
parent_id: 3,
name: "南昌市"
}
]
function listToTree(list) {
let map = {};
list.forEach(item => {
if (! map[item.id]) {
map[item.id] = item;
}
});
list.forEach(item => {
if (item.parent_id !== 0) {
map[item.parent_id].children ? map[item.parent_id].children.push(item) : map[item.parent_id].children = [item];
}
});
return list.filter(item => {
if (item.parent_id === 0) {
return item;
}
})
}
console.log(listToTree(array));
分析
這段代碼的核心就在 listToTree 方法中，這個方法分為了三個部分：
第一部分
第一部分先將數(shù)組中的所有元素都復(fù)制到 map 中(注意：這里是引用復(fù)制哦，這個細(xì)節(jié)很重要)。
第二部分
執(zhí)行第二次遍歷前的 map:
// map
{
...,
"3":{
"id":3,
"parent_id":0,
"name":"江西省"
},
...
}
然后這個時候遍歷 parent_id 不等于 0 的元素：
[
...,
{
id: 11,
parent_id: 3,
name: "南昌市"
},
...
]
然后發(fā)現(xiàn)南昌市有 parent_id，我們再給 map[item.parent_id] 設(shè)置子元素，通過南昌市的 parent_id 可以推導(dǎo)出：
map["3"].children ? map["3"].children.push(item) : map[3].children = [item];
上面的代碼判斷了是否存在 children，如果不存在則直接給它賦值，否則將值 push 到 children 中。
執(zhí)行完第二步后，我們已經(jīng)把子節(jié)點(diǎn)添加到了它的父節(jié)點(diǎn)上，但是我們并沒有刪除掉之前的子節(jié)點(diǎn)。所以第三部就是對數(shù)據(jù)進(jìn)行過濾，只要父節(jié)點(diǎn)即可。
總結(jié)
需要注意的是，我們一直都是對 map 進(jìn)行操作的，但是結(jié)果怎么到了 list 上呢，這就是上面提到的引用復(fù)制。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序結(jié)合Storage實(shí)現(xiàn)搜索歷史效果
這篇文章主要為大家詳細(xì)介紹了微信小程序結(jié)合Storage實(shí)現(xiàn)搜索歷史效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
javascript實(shí)現(xiàn)依次輸入input自動定焦
這篇文章主要介紹了javascript實(shí)現(xiàn)依次輸入input自動定焦的方法及示例代碼，非常實(shí)用，這里推薦給小伙伴們2014-12-12
JavaScript瀑布流的實(shí)現(xiàn)你學(xué)會了嗎
這篇文章主要為大家詳細(xì)介紹了JavaScript瀑布流的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要為大家詳細(xì)介紹了js獲取一組日期中最近連續(xù)的天數(shù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
下面小編就為大家?guī)硪黄鶭S查找元素的方法(推薦)。小編覺得挺不錯的，希望對大家有所幫助。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-11-11
flexigrid 參數(shù)說明，需要的朋友可以參考下。2010-11-11
JS操作對象數(shù)組實(shí)現(xiàn)增刪改查實(shí)例代碼
JS提供了很多方便操作數(shù)組的方法,這篇文章主要給大家介紹了關(guān)于JS操作對象數(shù)組實(shí)現(xiàn)增刪改查的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-07-07
下面小編就為大家?guī)硪黄赗equire.js使用方法(總結(jié))。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
老生常談document.ready和window.onload
這篇文章主要介紹了document.ready和window.onload的相關(guān)知識,包括document.ready和window.onload的區(qū)別,要使用document.ready()或者document.onload()的原因分析,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-01-01
這篇文章主要為大家詳細(xì)介紹了小程序富文本提取圖片可放大縮小，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05