1. 程式人生 > 實用技巧 >樹狀結構的資料的處理方法

樹狀結構的資料的處理方法

後端給我們返回的樹狀結構資料,我們一般用遞迴來處理。

什麼是遞迴?

來自度孃的解釋

程式呼叫自身的程式設計技巧稱為遞迴( recursion)。遞迴做為一種演算法程式設計語言中廣泛應用。 一個過程或函式在其定義或說明中有直接或間接呼叫自身的一種方法,它通常把一個大型複雜的問題層層轉化為一個與原問題相似的規模較小的問題來求解,遞迴策略只需少量的程式就可描述出解題過程所需要的多次重複計算,大大地減少了程式的程式碼量。遞迴的能力在於用有限的語句來定義物件的無限集合。一般來說,遞迴需要有邊界條件、遞迴前進段和遞迴返回段。當邊界條件不滿足時,遞迴前進;當邊界條件滿足時,遞迴返回。

簡言之就是自己上了自己。

貼個別人的程式碼哈哈哈哈

var data = [
 {
     name: "所有物品",
     children: [
         {
             name: "水果",
             children: [{name: "蘋果", children: [{name: '青蘋果'}, {name: '紅蘋果'}]}]
         },
         {
             name: '主食',
             children: [
                 {name: "米飯", children: [{name: '北方米飯'}, {name: '南方米飯'}]}
             ]
         },
         {
             name: 
'生活用品', children: [ {name: "電腦類", children: [{name: '聯想電腦'}, {name: '蘋果電腦'}]}, {name: "工具類", children: [{name: "鋤頭"}, {name: "錘子"}]}, {name: "生活用品", children: [{name: "洗髮水"}, {name: "沐浴露"}]} ] } ] }]

這個是後端返給我們的資料

下面的程式碼是處理的方法

//遞迴遍歷實現
var recursiveFunction = function(){
    var str = ''
    const getStr = function(list){
        list.forEach(function(row){
            if(row.children){
                getStr(row.children)
            }else {
                str += row.name + ";"
            }
        })
    }
    getStr(data)
    console.log(str)
}
recursiveFunction()
//輸出:青蘋果;紅蘋果;北方米飯;南方米飯;聯想電腦;蘋果電腦;鋤頭;錘子;洗髮水;沐浴露;

遞迴可以輕鬆實現多級的遍歷

其實除了這個遞迴的方法,我查了一下別人的部落格,發現還可以用JSONPath實現對樹狀資料的處理

npm install JSONPath 你首先要安裝一下

emmmmmm

其實我也不會,也沒用過。具體的使用方法,用的時候再去查吧。