最近在看一些react裡面的Virtual DOM的相關文章，看到了看到了 livoras 的這篇文章，其中講到了在比較兩棵虛擬DOM樹的差異的時候會用到字串最小編輯距離的演算法，因為那篇文章主要講述的點並不在此，所以對於這個演算法著墨不多，於是就認真去研究了下這個演算法，在此處做個記錄吧。

問題描述：

給定兩個字串m和n，只允許進行如下三種操作：

1. 插入，例如：ab -> abc
2. 刪除，例如：abc -> ab
3. 替換，例如：abc -> abd

那麼請求出將m變成n的最小操作次數（也就是最小編輯距離）

求解這個問題，一般有兩種思路：遞迴和動態規劃。

遞迴：

首先假設字串m有j位，字串n有k位，此時我們將m -> n的最小編輯距離記為d[j][k]，此時我們能總結出如下的規律：

1. 當m[j] === n[k]（m[j]和n[k]為字串的最後一位）時，例如：asd -> jkl時候，很明顯此時最後一位是不需要做變動的，因此最小編輯距離等同於：as -> jk，那麼我們可以確定d[j][k] === d[j - 1][k - 1]；
2. 當 m[j] !== n[k] 時，字串asd到字串jkl的d[j][k] 又可以分為如下三種情況：
   
   • asd -> jkl的最小編輯距離 = as -> jkl的最小編輯距離+1（加一個插入d的操作），對此可以描述為：d[j][k] === d[j - 1][k] + 1；
   • asd -> jkl的最小編輯距離 = asdl -> jkl的最小編輯距離 + 1（加一個刪除l的操作），此時可以看到asdl與jkl的最後一位相等，因此可以再次簡化為：asd -> jk的最小編輯距離 + 1，對此可以描述為：d[j][k] = d[j][k - 1] + 1；
   • asd -> jkl的最小編輯距離 = asl -> jkl的最下編輯距離 + 1（加上一個將d替換成l的操作），此時asl與jkl的最後一位再次相等，因此同樣可以進行簡化為：as -> jk的最下編輯距離 + 1，對此可以描述為：d[j][k] = d[j - 1][k - 1] + 1；
3. 如果m的長度為 0，那麼 m -> n 的最小編輯距離為n的長度；反過來，如果n的長度為 0，那麼 m -> n 的最小編輯距離為m的長度（全部執行刪除操作），可以描述為：d[j][0] = j，d[0][k] = k；

那麼我們可以開始按照上述思路寫程式碼了：

/**
 * 遞迴演算法
 * @param {string} m
 * @param {string} n
 * @param {number} j 字串m的長度
 * @param {number} k 字串n的長度
 * @returns {number} 從 m -> n 的最小編輯距離
 */
function editDistance(m, n, j, k) {
    // 觸碰到邊界條件
    if (k === 0) {
        return j;
    } else if (j === 0) {
        return k;
    } else if (m[j - 1] === n[k - 1]) {
        // 當最後一位相等的時候
        return editDistance(m, n, j - 1, k - 1);
    } else {
        // 當最後一位不相等的時候，取最小值
        const d1 = editDistance(m, n, j - 1, k) + 1;
        const d2 = editDistance(m, n, j, k - 1) + 1;
        const d3 = editDistance(m, n, j - 1, k - 1) + 1;

        return Math.min(d1, d2, d3);
    }
}

這個程式碼雖然能實現，但是有個嚴重的問題，就是程式碼的效能很低下，時間複雜度是指數增長的，因此可以考慮另外一種實現。

動態規劃

動態規劃看起來跟遞迴很像，不過推理邏輯正好是反過來的。遞迴的邏輯是：“要求得 d[j][k]，先要求得 d[j-1][k-1]……”，動態規劃的邏輯是：“先求得 d[j-1][k-1]，再求 d[j][k]……”這是它們的主要區別。

同樣先舉個例子，有兩個字串分別是m = ‘asdfgh’ 和 n = ‘zscv’，我們一步步的來進行如下處理：

1：首先將我們的兩個字串放入如下的矩陣中去：

2： 此時我們可以將d[0][0]、d[0][1] … d[0][4]等等的最小編輯距離填入此矩陣：

3： 這個時候我們可以去計算d[1][1]了，上面在講述遞迴的方法的時候我們已經說過計算d[j][k]的時候，當m[j] !== n[k]時會有三種方法，此時 d[0][1] + 1 = 2、 d[1][0] + 1 = 2、d[0][0] + 1 = 1，因此可以得知d[1][1]的最小編輯距離就是1，然後這一行後面的我們都可以直接進行插入操作一次遞增即可，由此得出下面的矩陣：

4：這個時候我們開始去計算d[2][2]，首先我們可以按照之前的方式計算出d[1][2] = 2，填入矩陣，這個時候再看d[2][2]，此時我們可以發現矩陣正好滿足條件m[j] === n[k]，因此此時d[j][k] === d[j - 1][k - 1] = 1，填入矩陣如下：

5：不斷重複上述步驟直到完成矩陣：

此時我們自然可以看到d[j][k] = 5；

按照思路寫下程式碼：

/**
 * 動態規劃演算法
 * @param {string} m
 * @param {string} n
 * @return {number} 從 m → n 的最小編輯距離
 */
function dynamicPlanning(m, n) {
    const lenM = m.length;
    const lenN = n.length;
    const d = [];

    for (let i = 0; i <= lenM; i++) {
        d[i] = [];
        d[i][0] = i;
    }

    for (let j = 0; j <= lenN; j++) {
        d[0].push(j);
    }

    for (let i = 1; i <= lenM; i++) {
        for (let j = 1; j <= lenN; j++) {
            if (m[i - 1] === n[j - 1]) {
                d[i][j] = d[i - 1][j - 1];
            } else {
                const d1 = d[i - 1][j] + 1;
                const d2 = d[i][j - 1] + 1;
                const d3 = d[i - 1][j - 1] + 1;

                d[i][j] = Math.min(d1, d2, d3);
            }
        }
    }

    return d[lenM][lenN];
}

這次的演算法複雜度就為線性了