如何優雅的使用javascript遞歸畫一棵結構樹

時間 2019-11-05

標籤如何優雅使用 javascript 遞歸結構欄目 JavaScript 简体版

原文原文鏈接

遞歸和尾遞歸

簡單的說，遞歸就是函數本身調用本身，它作爲一種算法在程序設計語言中普遍應用。其核心思想是把一個大型複雜的問題層層轉化爲一個與原問題類似的規模較小的問題來求解。通常來講，遞歸須要有邊界條件、遞歸前進階段和遞歸返回階段。當邊界條件不知足時，遞歸前進；當邊界條件知足時，遞歸返回。javascript

可是做爲一個合格的程序員，咱們也因該知道，遞歸算法相對經常使用的算法如普通循環等，運行效率較低。所以，應該儘可能避免使用遞歸，除非沒有更好的算法或者某種特定狀況，遞歸更爲適合的時候。在遞歸調用的過程中系統爲每一層的返回點、局部量等開闢了棧來存儲，遞歸次數過多容易形成棧溢出等。前端

這個時候，咱們就須要用到尾遞歸，即一個函數中全部遞歸形式的調用都出如今函數的末尾，對於尾遞歸來講，因爲只存在一個調用記錄，因此永遠不會發生"棧溢出"錯誤。vue

舉個例子，咱們來實現一下階乘，若是用普通的遞歸，實現將是這樣的：java

function factorial(n) {
  if (n === 1) return 1;
  return n * factorial(n - 1);
}

factorial(5) // 120
複製代碼

最多須要保存n個調用棧，複雜度 O(n)，若是咱們使用尾遞歸：node

function factorial(n, total = 1) {
  if (n === 1) return total;
  return factorial(n - 1, n * total);
}

factorial(5) // 120
複製代碼

此時只須要保存一個調用棧，複雜度 O(1) 。經過這個案例，你是否已經慢慢理解其精髓了呢？接下來我將介紹幾個經常使用的遞歸應用的案例，並在其後實現本文標題剖出的樹的實現。react

遞歸的經常使用應用案例

1. 數組求和

對於已知數組arr，求arr各項之和。程序員

function sumArray(arr, total) {
    if(arr.length === 1) {
        return total
    }
    return sum(arr, total + arr.pop())
}

let arr = [1,2,3,4];
sumArray(arr, arr[1]) // 10
複製代碼

該方法給函數傳遞一個數組參數和初始值，也就是數組的第一項，經過迭代來實現數組求和。面試

2. 斐波那且數列

斐波那契數列（Fibonacci sequence），又稱黃金分割數列，指的是這樣一個數列：一、一、二、三、五、八、1三、2一、3四、……在數學上，斐波那契數列以以下被以遞推的方法定義：F(1)=1，F(2)=1, F(n)=F(n-1)+F(n-2)（n>=3，n∈N*）在現代物理、準晶體結構、化學等領域，斐波納契數列都有直接的應用。接下來咱們用js實現一個求第n個斐波那契數的方法：算法

// 斐波那契數列
function factorial1 (n) {
    if(n <= 2){
        return 1
    }
    return factorial1(n-1) + factorial1(n-2)
}

// 尾遞歸優化後
function factorial2 (n, start = 1, total = 1) {
    if(n <= 2){
        return total
    }
    return factorial2 (n -1, total, total + start)
}
複製代碼

由尾遞歸優化後的函數能夠知道，每一次調用函數自身，都會將更新後的初始值和最終的結果傳遞進去，經過回溯來求得最終的結果。vuex

3. 階乘

階乘在上文以提到過，如想回顧，請向上翻閱。

4. 省市級聯多級聯動

省市級聯多級聯動的方法本質是生成結構化的數據結構，在element或antd中都有對應的實現，這裏就不作過多介紹了。

5. 深拷貝

深拷貝的例子你們也已經司空見慣了，這裏只給出一個簡單的實現思路：

function clone(target) {
   if (typeof target === 'object') {
       let cloneTarget = Array.isArray(target) ? [] : {};
       for (const key in target) {
           cloneTarget[key] = clone(target[key]);
       }
       return cloneTarget;
   } else {
       return target;
   }
};
複製代碼

6. 爬梯問題

一共有n個臺階，每次只能走一個或兩個臺階，問要走完這個臺階，一共有多少種走法。

n =1; result = 1  --> 1
n =2; result = 2  --> 11 2
n =3; result = 3  --> 111 12 21
...
若是第一步走1個臺階，由以上規律能夠發現剩下的臺階有n-1種走法；
若是第一步走2個臺階，由以上規律能夠發現剩下的臺階有n-2種走法；
則一共有fn(n-1) + fn(n-2) 種走法
function steps(n) {
    if(n <= 1) {
        return 1
    }
    return steps(n-1) + steps(n-2)
}
複製代碼

7. 對象數據格式化

這道題是本人曾經面試阿里的一道筆試題，問題是若是服務器返回了嵌套的對象，對象鍵名大小寫不肯定，若是統一讓鍵名小寫。

let obj = {
    a: '1',
    b: {
        c: '2',
        D: {
            E: '3'
        }
    }
}
轉化爲以下：
let obj = {
    a: '1',
    b: {
        c: '2',
        d: {
            e: '3'
        }
    }
}

// 代碼實現
function keysLower(obj) {
    let reg = new RegExp("([A-Z]+)", "g");
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            let temp = obj[key];
            if (reg.test(key.toString())) {
                // 將修改後的屬性名從新賦值給temp，並在對象obj內添加一個轉換後的屬性
                temp = obj[key.replace(reg, function (result) {
                    return result.toLowerCase()
                })] = obj[key];
                // 將以前大寫的鍵屬性刪除
                delete obj[key];
            }
            // 若是屬性是對象或者數組，從新執行函數
            if (typeof temp === 'object' || Object.prototype.toString.call(temp) === '[object Array]') {
                keysLower(temp);
            }
        }
    }
    return obj;
};
複製代碼

具體過程和思路在代碼中已經寫出了註釋，感興趣能夠本身研究一下。

咱們這裏使用node來實現刪除一個目錄，用現有的node API確實有刪除目錄的功能，可是目錄下若是有文件或者子目錄，fs.rmdir && fs.rmdirSync 是不能將其刪除的，因此要先刪除目錄下的文件，最後再刪除文件夾。

function deleteFolder(path) {
    var files = [];
    if(fs.existsSync(path)) { // 若是目錄存在
        files = fs.readdirSync(path);
        files.forEach(function(file,index){
            var curPath = path + "/" + file;
            if(fs.statSync(curPath).isDirectory()) { // 若是是目錄，則遞歸
                deleteFolder(curPath);
            } else { // 刪除文件
                fs.unlinkSync(curPath);
            }
        });
        fs.rmdirSync(path);
    }
}
複製代碼

9. 繪製分形圖形

經過遞歸，咱們能夠在圖形學上有更大的自由度，可是請記住，並非最好的選擇。

咱們能夠藉助一些工具和遞歸的思想，實現如上的分形圖案。

10. 扁平化數組Flat

數組拍平實際上就是把一個嵌套的數組，展開成一個數組，以下案例：

let a = [1,2,3, [1,2,3, [1,2,3]]]
// 變成
let a = [1,2,3,1,2,3,1,2,3]
// 具體實現
function flat(arr = [], result = []) {
    arr.forEach(v => {
        if(Array.isArray(v)) {
            result = result.concat(flat(v, []))
        }else {
            result.push(v)
        }
    })
    return result
}

flat(a)
複製代碼

固然這只是筆者實現的一種方式，更多實現方式等着你去探索。

用遞歸畫一棵自定義風格的結構樹

經過上面的介紹，我想你們對遞歸及其應用已經有一個基本的概念，接下來我將一步步的帶你們用遞歸畫一棵結構樹。效果圖：

該圖形是根據目錄結構生成的目錄樹圖，在不少應用場景中被普遍使用，接下來咱們就來看看他的實現過程吧：

const fs = require('fs')
const path = require('path')
// 遍歷目錄/生成目錄樹
function treeFolder(path, flag = '|_') {
    var files = [];
    
    if(fs.existsSync(path)) {
        files = fs.readdirSync(path);
        files.forEach(function(file,index){
            var curPath = path + "/" + file;
            if(fs.statSync(curPath).isDirectory()) { // recurse
                // obj[file] = treeFolder(curPath, {});
                console.log(flag, file)
                treeFolder(curPath, ' ' + flag)
            } else {
                // obj['--'] = file
                console.log(flag, file)
            }
        })
        // return obj
    }
}

treeFolder(path.resolve(__dirname, './test'))
複製代碼

test爲咱們建的測試目錄，以下：

咱們經過短短10幾行代碼就實現了一個生成結構樹的小應用，是否是感受遞歸有點意思呢？在這個函數中，第一個參數是目錄的絕對路徑，第二個是標示符，標示符決定咱們生成的樹枝的樣式，咱們能夠自定義不一樣的樣式。

歡迎你們相互學習交流，一塊兒探索前端的邊界。