js扁平數(shù)組和樹結(jié)構(gòu)相互轉(zhuǎn)換處理方法
更新時(shí)間：2023年07月06日 11:07:37 作者：憂郁的蛋~
這篇文章主要給大家介紹了關(guān)于js扁平數(shù)組和樹結(jié)構(gòu)相互轉(zhuǎn)換處理方法的相關(guān)資料,之前面試有遇到過這個(gè)問題,面試官問如何把一個(gè)數(shù)組數(shù)據(jù)扁平,然后轉(zhuǎn)化為Tree結(jié)構(gòu)數(shù)據(jù),工作中剛好也用到了,所以總結(jié)下,需要的朋友可以參考下
一、將扁平的數(shù)據(jù)轉(zhuǎn)為樹形結(jié)構(gòu)
在 js中，可以使用遞歸算法將扁平的數(shù)據(jù)轉(zhuǎn)換為樹形結(jié)構(gòu)。
扁平數(shù)據(jù)通常是一個(gè)帶有 parentId 屬性的數(shù)組，而樹形結(jié)構(gòu)通常是一個(gè)帶有 children 屬性的對(duì)象。
1、方法一
下面是一個(gè)簡單的例子，演示如何將扁平數(shù)組轉(zhuǎn)換為樹形對(duì)象：
let data = [
{ id: 1, pid: 0, name: '中國' },
{ id: 2, pid: 0, name: '巴鐵' },
{ id: 3, pid: 1, name: '小日本兒' },
{ id: 4, pid: 2, name: '雜種美國' },
{ id: 5, pid: 2, name: '俄羅斯' },
{ id: 6, pid: 13, name: '烏克蘭' },
{ 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) {
// '&& pid === 0' 判斷條件是為了只將 pid 為 0 作為根節(jié)點(diǎn)，其它值不作為根節(jié)點(diǎn)。
// 如需將其它值也作為根節(jié)點(diǎn)，可將 'else if (!map.has(pid) && pid === 0)' 改為 'else'
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)換為樹形對(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ù)過濾出所有的子節(jié)點(diǎn)。
- 使用 map() 函數(shù)構(gòu)造每個(gè)子節(jié)點(diǎn)的新結(jié)構(gòu)，并使用遞歸來處理子節(jié)點(diǎn)的 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ù)項(xiàng)是根節(jié)點(diǎn),那么所有其它的數(shù)據(jù)項(xiàng)的 parentId 分別對(duì)應(yīng)它的父節(jié)點(diǎn)，我們可以使用 groupBy() 來將所有節(jié)點(diǎn)根據(jù)它們的 parentId 分組，然后我們可以使用 mapValues() 來構(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)換為樹形對(duì)象，
* 適用于來自同一個(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)選擇器)鍵名稱
* @param {*} valueName 自定義(Cascader 級(jí)聯(lián)選擇器)值名稱
* @returns 樹形結(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);二、樹形轉(zhuǎn)扁平
1、方法一
在 js中，可以使用遞歸算法將樹形結(jié)構(gòu)數(shù)據(jù)轉(zhuǎn)換為扁平數(shù)組。
下面是一個(gè)簡單的例子，它演示了如何將樹形數(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ù)。
這是一種將樹形結(jié)構(gòu)數(shù)據(jù)轉(zhuǎn)換為扁平數(shù)組的方法，如果有其他特定的需求，還可以使用其他方法來轉(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ù)組中的每個(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、方法三
在 js中，可以使用遞歸算法將樹形結(jié)構(gòu)數(shù)據(jù)轉(zhuǎn)換為扁平數(shù)組。
下面是一個(gè)簡單的例子，它演示了如何將樹形數(shù)據(jù)轉(zhuǎn)換為扁平數(shù)組：
let data = [{
id: 1, pid: 0, name: '棒子', childrens: [
{
id: 2, pid: 1, name: '中國', childrens: [
{ id: 4, pid: 2, name: '小日本兒' },
{ id: 5, pid: 2, name: '雜種美國' }
]
},
{
id: 3, pid: 1, name: '俄羅斯', childrens: [
{ id: 6, pid: 3, name: '巴鐵' },
{ 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ì)樹形結(jié)構(gòu)數(shù)組數(shù)據(jù)內(nèi)部具體的屬性名稱要求較?。ǔ?childrens）。
總結(jié)
到此這篇關(guān)于js扁平數(shù)組和樹結(jié)構(gòu)相互轉(zhuǎn)換處理方法的文章就介紹到這了,更多相關(guān)js扁平數(shù)組和樹結(jié)構(gòu)相互轉(zhuǎn)換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Bootstrap為我們提供了各式各樣漂亮的按鈕，我們無需自己給按鈕寫樣式，直接使用它給我們提供的類樣式，使用在我們的按鈕上，非常的簡單方便2016-12-12
javascript實(shí)現(xiàn)簡易的計(jì)算器
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡易的計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
JavaScript是所有現(xiàn)代瀏覽器的官方語言。 因此，JavaScript 問題出現(xiàn)在各種開發(fā)人員的面試中。這篇文章主要跟大家分享了關(guān)于JavaScript中最常見的三個(gè)面試題，需要的朋友可以參考學(xué)習(xí)，下面來一起看看吧。2017-03-03
javascript設(shè)計(jì)模式之策略模式學(xué)習(xí)筆記
這篇文章主要介紹了javascript設(shè)計(jì)模式之策略模式學(xué)習(xí)筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
基于layui實(shí)現(xiàn)高級(jí)搜索（篩選）功能
這篇文章主要為大家詳細(xì)介紹了基于layui實(shí)現(xiàn)高級(jí)搜索、篩選功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了js實(shí)現(xiàn)select下拉框菜單的詳細(xì)代碼，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要介紹了webpack-dev-server核心概念案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了js顯示世界時(shí)間的方法,可現(xiàn)實(shí)世界各大城市的當(dāng)前時(shí)間,涉及JavaScript針對(duì)時(shí)間的獲取與運(yùn)算操作技巧,需要的朋友可以參考下2016-04-04
JS樹形菜單組件Bootstrap TreeView使用方法詳解
這篇文章主要為大家詳細(xì)介紹了js組件Bootstrap TreeView使用方法，本文一部分針對(duì)于bootstrap的treeview的實(shí)踐，另一部分是介紹自己寫的樹形菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要幫助大家輕松掌握J(rèn)avaScript代理模式，什么是代理模式？代理的用途，感興趣的小伙伴們可以參考一下2016-08-08