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