詳解JavaScript中扁平與樹(shù)形數(shù)據(jù)的轉(zhuǎn)換
一、扁平轉(zhuǎn)樹(shù)形
在 JavaScript 中，可以使用遞歸算法將扁平的數(shù)據(jù)轉(zhuǎn)換為樹(shù)形結(jié)構(gòu)。
扁平數(shù)據(jù)通常是一個(gè)帶有 parentId 屬性的數(shù)組，而樹(shù)形結(jié)構(gòu)通常是一個(gè)帶有 children 屬性的對(duì)象。
1、方法一
下面是一個(gè)簡(jiǎn)單的例子，它演示了如何將扁平數(shù)組轉(zhuǎn)換為樹(shù)形對(duì)象：
let data = [
{ id: 1, pid: 0, name: '沃爾瑪' },
{ id: 2, pid: 0, name: '生鮮區(qū)' },
{ id: 3, pid: 1, name: '日用品區(qū)' },
{ id: 4, pid: 2, name: '魚(yú)' },
{ id: 5, pid: 2, name: '牛肉' },
{ id: 6, pid: 13, name: '衛(wèi)生紙' },
{ id: 7, pid: 3, name: '牙刷' },
{ id: 8, pid: 7, name: '電動(dòng)牙刷' },
{ id: 9, pid: 7, name: '普通牙刷' }
];
function convertToTree(flatData) {
let treeData = [];
let map = new Map();
let outputObj, pid;
for (let i = 0; i < flatData.length; i++) {
pid = flatData[i].pid;
if (map.has(pid)) {
if (!map.get(pid).childrens)
map.get(pid).childrens = [];
let obj = new Object(flatData[i]);
map.get(pid).childrens.push(obj);
map.set(flatData[i].id, obj);
} else if (!map.has(pid) && pid == 0) {
outputObj = new Object(flatData[i]);
treeData.push(outputObj);
map.set(flatData[i].id, outputObj);
}
}
return treeData;
}
let TreeData = convertToTree(data);
console.log(TreeData);2、方法二
使用遞歸算法將扁平數(shù)組轉(zhuǎn)換為樹(shù)形對(duì)象：
const flatData = [
{ id: 1, name: 'Node 1', parentId: null },
{ id: 2, name: 'Node 2', parentId: 1 },
{ id: 3, name: 'Node 3', parentId: 2 },
{ id: 4, name: 'Node 4', parentId: 3 },
{ id: 5, name: 'Node 5', parentId: 3 }
];
function convertToTree(flatData, parentId = null) {
const children = flatData.filter(node => node.parentId === parentId);
if (!children.length) {
return null;
}
return children.map(node => ({
...node,
children: convertToTree(flatData, node.id)
}));
}
const treeData = convertToTree(flatData);
console.log(treeData);該算法的流程為：
- 使用 filter() 函數(shù)過(guò)濾出所有的子節(jié)點(diǎn)。
- 使用 map() 函數(shù)構(gòu)造每個(gè)子節(jié)點(diǎn)的新結(jié)構(gòu)，并使用遞歸來(lái)處理子節(jié)點(diǎn)的 children 屬性。
3、方法三
還有一些第三方庫(kù)可以幫助你轉(zhuǎn)換扁平數(shù)據(jù)為樹(shù)形結(jié)構(gòu)，例如 lodash 中的 _.groupBy() 和 _.mapValues() 方法可以幫助你將扁平數(shù)據(jù)轉(zhuǎn)換為樹(shù)形數(shù)據(jù)。
const flatData = [
{ id: 1, name: 'Node 1', parentId: null },
{ id: 2, name: 'Node 2', parentId: null },
{ id: 3, name: 'Node 3', parentId: 1 },
{ id: 4, name: 'Node 4', parentId: 2 },
{ id: 5, name: 'Node 5', parentId: 2 }
];
const tree = _(flatData)
.groupBy('parentId')
.mapValues((children, parentId) => ({
id: parentId || 'root',
children: children.map(({ id, name, parentId }) => ({ id, name, parentId }))
}))
.values()
.value();
console.log(tree)在這種情況下，假設(shè)parentId為null的數(shù)據(jù)項(xiàng)是根節(jié)點(diǎn),那么所有其它的數(shù)據(jù)項(xiàng)的 parentId 分別對(duì)應(yīng)它的父節(jié)點(diǎn)，我們可以使用 groupBy() 來(lái)將所有節(jié)點(diǎn)根據(jù)它們的 parentId 分組，然后我們可以使用 mapValues() 來(lái)構(gòu)造每個(gè)組的新結(jié)構(gòu)。
4、方法四
const flatData = [
{ id: 1, name: 'Node 1', value: 1, parentId: null },
{ id: 2, name: 'Node 2', value: 2, parentId: 1 },
{ id: 3, name: 'Node 3', value: 3, parentId: 2 },
{ id: 4, name: 'Node 4', value: 4, parentId: 3 },
{ id: 5, name: 'Node 5', value: 5, parentId: 3 }
];
/**
* 將扁平數(shù)組轉(zhuǎn)換為樹(shù)形對(duì)象，
* 適用于來(lái)自同一個(gè)表的數(shù)據(jù)，即idName的數(shù)據(jù)不重復(fù)
*
* @param {*} flatData 同級(jí)數(shù)組數(shù)據(jù)
* @param {*} idName 唯一id
* @param {*} pidName 父級(jí)id
* @param {*} nameName 自定義(Cascader 級(jí)聯(lián)選擇器)鍵名稱(chēng)
* @param {*} valueName 自定義(Cascader 級(jí)聯(lián)選擇器)值名稱(chēng)
* @returns 樹(shù)形結(jié)構(gòu)數(shù)組數(shù)據(jù)，適用于Cascader 級(jí)聯(lián)選擇器組件
*/
function convertToTree(flatData, idName, pidName, nameName, valueName) {
let treeData = [];
if (!Array.isArray(flatData)) {
return treeData;
}
flatData.forEach((item) => {
delete item.children;
});
let map = {};
flatData.forEach((item) => {
// 深拷貝，該方式將使該轉(zhuǎn)換方法失效
// map[item[idName]] = JSON.parse(JSON.stringify(item));
// 淺拷貝，將對(duì) item 的引用傳遞給 map
map[item[idName]] = item;
});
flatData.forEach((item) => {
// 深拷貝，該方式將使該轉(zhuǎn)換方法失效
// let parent = JSON.parse(JSON.stringify(map[item[pidName]]));
// 淺拷貝，將對(duì) map 的引用傳遞給 parent
let parent = map[item[pidName]];
if (parent) {
// 利用了淺拷貝的引用傳遞，最終 flatData 中的 item 將會(huì)改變
(parent.children || (parent.children = [])).push(
nameName && valueName ? Object.assign(item, { label: item[nameName], id: item[valueName] }) : item);
} else {
treeData.push(
nameName && valueName ? Object.assign(item, { label: item[nameName], id: item[valueName] }) : item);
}
});
return treeData;
}
const treeData = convertToTree(flatData, 'id', 'parentId', 'name', 'value');
console.log(treeData);二、樹(shù)形轉(zhuǎn)扁平
1、方法一
在 JavaScript 中，可以使用遞歸算法將樹(shù)形結(jié)構(gòu)數(shù)據(jù)轉(zhuǎn)換為扁平數(shù)組。
下面是一個(gè)簡(jiǎn)單的例子，它演示了如何將樹(shù)形數(shù)據(jù)轉(zhuǎn)換為扁平數(shù)組：
const treeData = [{
id: 1,
name: 'Node 1',
children: [
{ id: 2, name: 'Node 2', children: [{ id: 3, name: 'Node 3' }, { id: 4, name: 'Node 4' }] },
{ id: 5, name: 'Node 5' }
]
}];
function convertToFlat(data, parentId = null) {
return data.reduce((acc, curr) => {
acc.push({ ...curr, parentId });
if (curr.children) {
acc = acc.concat(convertToFlat(curr.children, curr.id));
}
return acc;
}, []);
}
const flatData = convertToFlat(treeData);
console.log(flatData);該算法的流程為：
- 使用 reduce() 函數(shù)遍歷每個(gè)節(jié)點(diǎn)，并將父節(jié)點(diǎn)的 id 作為參數(shù)傳遞給遞歸函數(shù)。
- 使用 push() 函數(shù)將當(dāng)前節(jié)點(diǎn)添加到結(jié)果數(shù)組中。
- 使用 concat() 函數(shù)將遞歸調(diào)用的結(jié)果與結(jié)果數(shù)組連接在一起。
- 如果當(dāng)前節(jié)點(diǎn)有 children 屬性，則遞歸調(diào)用 convertToFlat() 函數(shù)，并將當(dāng)前節(jié)點(diǎn)的 id 作為父節(jié)點(diǎn)傳遞給函數(shù)。
注意：該方法返回的扁平結(jié)構(gòu)數(shù)據(jù)未將 children屬性刪除，因此存在冗余的數(shù)據(jù)。
這是一種將樹(shù)形結(jié)構(gòu)數(shù)據(jù)轉(zhuǎn)換為扁平數(shù)組的方法，如果有其他特定的需求，還可以使用其他方法來(lái)轉(zhuǎn)換數(shù)據(jù)，例如使用廣度優(yōu)先遍歷算法，使用隊(duì)列存儲(chǔ)節(jié)點(diǎn)。
2、方法二
const treeData = [
{
id: 1,
name: 'Node 1',
children: [
{
id: 2,
name: 'Node 2',
children: [
{ id: 3, name: 'Node 3' },
{ id: 4, name: 'Node 4' },
]
},
{ id: 5, name: 'Node 5' },
]
},
{
id: 6,
name: 'Node 6',
children: [
{ id: 7, name: 'Node 7' }
]
},
];
function convertToFlat(treeData, parentId = null) {
let flatData = [];
for (let node of treeData) {
flatData.push({ id: node.id, name: node.name, parentId });
if (node.children) {
flatData = flatData.concat(convertToFlat(node.children, node.id));
}
}
return flatData;
}
const flatData = convertToFlat(treeData);
console.log(flatData);該算法的流程為：
- 創(chuàng)建一個(gè)空的扁平數(shù)組。
- 遞歸遍歷樹(shù)形數(shù)組中的每個(gè)節(jié)點(diǎn)，將當(dāng)前節(jié)點(diǎn)添加到扁平數(shù)組中。
- 對(duì)于當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)，繼續(xù)使用遞歸，并將子節(jié)點(diǎn)添加到扁平數(shù)組中。
- 返回扁平數(shù)組
注意：該方法需要手動(dòng)構(gòu)造push 到扁平數(shù)組的對(duì)象，通用性較差。
3、方法三
在 JavaScript 中，可以使用遞歸算法將樹(shù)形結(jié)構(gòu)數(shù)據(jù)轉(zhuǎn)換為扁平數(shù)組。
下面是一個(gè)簡(jiǎn)單的例子，它演示了如何將樹(shù)形數(shù)據(jù)轉(zhuǎn)換為扁平數(shù)組：
let data = [{
id: 1, pid: 0, name: '沃爾瑪', childrens: [
{
id: 2, pid: 1, name: '生鮮區(qū)', childrens: [
{ id: 4, pid: 2, name: '魚(yú)' },
{ id: 5, pid: 2, name: '牛肉' }
]
},
{
id: 3, pid: 1, name: '日用品區(qū)', childrens: [
{ id: 6, pid: 3, name: '衛(wèi)生紙' },
{ id: 7, pid: 3, name: '牙刷' }
]
}
]
}];
function convertToFlat(treeData) {
let flatData = [];
for (let i = 0; i < treeData.length; i++) {
if (treeData[i].childrens) {
flatData.push(...convertToFlat(treeData[i].childrens));
delete treeData[i].childrens;
}
flatData.push({ ...treeData[i] });
}
return flatData;
}
let flatData = convertToFlat(data);
console.log(flatData);該方法通用性較強(qiáng)，對(duì)樹(shù)形結(jié)構(gòu)數(shù)組數(shù)據(jù)內(nèi)部具體的屬性名 要求較?。ǔ?childrens）。
到此這篇關(guān)于詳解JavaScript中扁平與樹(shù)形數(shù)據(jù)的轉(zhuǎn)換的文章就介紹到這了,更多相關(guān)JavaScript扁平轉(zhuǎn)樹(shù)形數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- js實(shí)現(xiàn)樹(shù)形數(shù)據(jù)轉(zhuǎn)成扁平數(shù)據(jù)的方法示例
- javascript將扁平的數(shù)據(jù)轉(zhuǎn)為樹(shù)形結(jié)構(gòu)的高效率算法
- JavaScript數(shù)組扁平轉(zhuǎn)樹(shù)形結(jié)構(gòu)數(shù)據(jù)(Tree)的實(shí)現(xiàn)
- Javascript中扁平化數(shù)據(jù)結(jié)構(gòu)與JSON樹(shù)形結(jié)構(gòu)轉(zhuǎn)換詳解
- js扁平數(shù)組和樹(shù)結(jié)構(gòu)相互轉(zhuǎn)換處理方法
相關(guān)文章
這篇文章主要介紹了微信JS接口匯總及使用詳解，十分的全面、詳盡，包含分享到朋友圈，分享給朋友，分享到QQ，拍照或從手機(jī)相冊(cè)中選圖，識(shí)別音頻并返回識(shí)別結(jié)果，使用微信內(nèi)置地圖查看位置等接口，有需要的小伙伴參考下吧2015-01-01
js設(shè)置cookie有很多種方法，包括JS設(shè)置cookie、讀取cookie，工作中常會(huì)用到！下面是詳細(xì)代碼，感興趣的小伙伴們可以參考一下2016-02-02
js中如何對(duì)嵌套數(shù)組進(jìn)行filter過(guò)濾
這篇文章主要介紹了js中如何對(duì)嵌套數(shù)組進(jìn)行filter過(guò)濾問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
多個(gè)js與css文件的合并方法詳細(xì)說(shuō)明
在Web項(xiàng)目的開(kāi)發(fā)中,js,css文件會(huì)隨著項(xiàng)目的開(kāi)發(fā)變得越來(lái)越多,越來(lái)越大,這就給給性能方面帶來(lái)一些問(wèn)題;解決該問(wèn)題的一個(gè)好的方法就是合并js,css文件需要了解的朋友可以參考下2012-12-12
這篇文章主要介紹了只要1K大小，純JS腳本送你一朵3D玫瑰花，屬于你的情人節(jié)專(zhuān)屬玫瑰，感興趣的小伙伴們可以參考一下2016-08-08
layui點(diǎn)擊按鈕頁(yè)面會(huì)自動(dòng)刷新的解決方案
今天小編就為大家分享一篇layui點(diǎn)擊按鈕頁(yè)面會(huì)自動(dòng)刷新的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
本文通過(guò)實(shí)例代碼很詳細(xì)的給大家介紹了js中的多態(tài)，感興趣的朋友一起看看吧2017-10-10
js實(shí)現(xiàn)圖片旋轉(zhuǎn) js滾動(dòng)鼠標(biāo)中間對(duì)圖片放大縮小
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片旋轉(zhuǎn),滾動(dòng)鼠標(biāo)中間對(duì)圖片放大縮小等效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
近幾天在做百度地圖時(shí),需要轉(zhuǎn)換時(shí)間格式并做顯示,下面這篇文章主要給大家介紹了關(guān)于js中各種時(shí)間格式的轉(zhuǎn)換方法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
JS生態(tài)系統(tǒng)加速模塊解析賦能性能優(yōu)化探索
這篇文章主要為大家介紹了JS生態(tài)系統(tǒng)加速模塊解析賦能性能優(yōu)化探索,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01