樹狀結構的數據的處理方法

后端給我們返回的樹狀結構數據，我們一般用遞歸來處理。

什么是遞歸？

來自度娘的解釋

程序調用自身的編程技巧稱為遞歸（ 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

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