扁平資料轉tree與tree資料扁平化
ead>theme: channing-cyan highlight: a11y-dark
持續創作,加速成長!這是我參與「掘金日新計劃 · 6 月更文挑戰」的第12天,點選檢視活動詳情。
扁平資料轉tree與tree資料扁平化
一、寫在前面
有時我們拿到的資料的資料結構可能不是理想的,那麼此時就要求前端程式設計師,具有改造資料的能力。例如拿到扁平的資料, 但我們要應用在 tree 樹形元件或 Cascader 級聯選擇器元件中,這樣的元件要求資料結構是非扁平的的具有層級遞進關係的 tree 結構。
總之就是說,提供資料的介面給到的資料,未必符合要求,而當我們又無法令他人為為我們改變時,需求和要求就來到了前端程式設計師這裡, 所以得具備這樣的資料處理能力。
下面是將舉兩個資料改造的例子:
一是扁平化,具有層級遞進關係的 tree 資料,轉換為扁平結構的的 flat 資料
二是反扁平化,扁平結構的 flat 資料,轉換為具有層級遞進關係的 tree 資料
二、正文部分
2.1 扁平資料轉為 tree 資料
扁平化函式
```js / * 扁平化:將具有層級遞進關係結構的 tree 資料扁平化 * * @param treeList 有層級遞進關係結構的 tree 資料 * @param flatList 用於接收扁平化結果的變數 * @returns {} 返回扁平化結果 / function treeToFlat (treeList, flatList) { // flatList.length > 9999 是考慮底線保護原則,出於極限保護的目的設定的,可不設或按需設定。 if (flatList.length > 9999) { return }
treeList.map(e => {
flatList.push(e)
// 遞迴:有條件的自己呼叫自己,條件是 e.children.length 為真
if (e.children && e.children.length) {
treeToFlat(e.children, flatList)
}
})
// console.log('扁平化後:', flatList)
return flatList
} ```
2.2 tree 資料轉為扁平資料
反扁平化函式
```js / * 反扁平化:將扁平結構的 flat 資料轉換為具有層級遞進關係結構的 tree 資料 * * @param flatList 扁平結構的資料 * @param treeList 用於接收反扁平化結果的變數 * @returns {} 返回反扁平化結果 / function flatToTree (flatList, treeList) { flatList.map(e => { // 以 e.pid===null,作為判斷是不是根節點的依據,或者直接寫死根節點(如果確定的話), // 具體以什麼作為判斷根節點的依據,得看資料的設計規則,通常是判斷層級或是否代表根節點的標記 if (e.pid === null) { // 避免出現重複資料 const index = treeList.findIndex(sub => sub.id === e.id) if (index === -1) { treeList.push(e) } }
flatList.map(e2 => {
if (e2.pid === e.id) {
// 避免出現重複資料
const index = e.children.findIndex(sub => sub.id === e2.id)
if (index === -1) {
e.children.push(e2)
}
}
})
})
```
2.3 完整測試 demo
demo 測試結果截圖如下:
```html
扁平資料轉tree與tree資料扁平化
```
三、寫在後面
這兩個扁平化與反扁平化寫法,感覺還有值得優化的方法,但暫時想不到。
此外,遞迴的應用也是值得注意的地方。
我理解的遞迴:有條件的自己呼叫自己。
- 複習|js指令碼肯定會阻塞渲染?
- 雙18期|CSS揭祕之簡寫屬性
- 扁平資料轉tree與tree資料扁平化
- CSS揭祕之效能優化技巧篇
- 資料視覺化:核心、互動、分類與工具
- 哇,這個易用工具適合我這水平的人
- 前端技術圖譜:看看你學廢了哪些?
- 雙17期|跨域資源共享:跨域錯誤該前端還是後端處理?
- js對話資料庫體驗:hello-mysql
- CSS揭祕之控制繼承:height能變為可繼承嗎?
- 進階|監控上傳和下載進度
- 今日軟考|普通程式設計師或許更應考軟考
- 一字一圖,領略瀏覽器方向的優化
- 天天用可替換元素(replaced element),竟說不知道
- 不要再濫用css樣式!important規則了
- 適合非大廠的70 面試題(2022-5)
- 11種樣式選擇器與樣式優先順序計算
- 面試|變數提升與函式提升,挑戰下這幾個例子?
- 雙10期|基本物件Error及8種錯誤型別
- 社群資料說話,真的是前端最卷?