本文是上一篇vue3中diff算法的教程的续篇！！！
如果您还不知道vue3中diff算法的基本思路，我建议您应该先去看看我上一篇的教程！！！
上一篇会提及 什么时候用到diff算法？为什么要使用diff算法？使用v-for有无key在更新过程中的区别吗？
非常详细的介绍了diff算法！！！
当然如果您只是想知道最长递增子序列的算法，那么本篇一样会给您带来帮助！！！
最长递增子序列是什么？
答：属于一种算法，在一个乱序的数值序列中，遍历这个序列，找出依次递增的数值，保存在新序列中，使得这个新序列元素的数值依次递增，并且这个新序列的长度尽可能地大（从乱序序列中找出越多越好）注意：最长递增子序列中的数值在原序列中不一定是要连续的，只要是递增的数值就符合！
注意：「子序列」和「子串」这两个名词的区别，子串一定是连续的，而子序列不一定是连续的。
diff算法为什么需要用到最长递增子序列？
在上一篇手写diff算法中，在处理新乱序子级进行进行倒叙插入时，每一个乱序的元素都进行了一次插入，而某一些递增或连续的元素，根本不用动，只需要插入或移动那些位置发生改变或新增的元素；所以最长递增子序列为了找出不用动的元素，在遍历插入时，跳过这些节点的插入！！！在上一篇末尾有图解说明为什么要用到最长递增子序列的例子。
正文
求最长递增子序列个数
序列为：[3,2,8,9,5,6,7,11,15]
情况一：3，8，9，11，15（不变的情况）
情况二：2，5，6，7，11，15 （小的替换大的，但不能回头把8插进来）
情况二是怎么得出来的？
3,2,8,9,5,6,7,11,15
在循环序列时，大的放到末尾，遇到小的值替换掉最前面大的值
3
2
2，8
2，8，9
2，5，9
2，5，6
2，5，6，7
2，5，6，7，11
2，5，6，7，11，15
前言介绍
在力扣题库300中的最长递增子序列和现在要写的是有区别的。力扣题中求解的是最长递增子序列的长度，我们现在写的主要是用于vue3的diff算法，最终返回的是一个映射子序列的下标数组。但核心都是一样的采用贪心算法+二分查找法
另一个区别：为了正确的符合上一篇diff算法的需求（找出最长递增子序列，这些元素将不用进行处理），在查找出最长递增子序列的下标数组后，还会对这个结果集进行特殊处理，因为这个结果集不一定是对的有弊端（对于diff算法而言，后面有例子说明），所以在写的过程中，每个子序列还会记录自己的前驱节点，最后再进行回溯，具体怎么操作，感兴趣的您一定要看下去！！！
开始
续上一篇的例子我们可以得到一个newIndexToOldIndexMap值为[5,3,4,0],那么最长递增子序列就为[3,4],由于我们在遍历新乱序子级进行倒叙插入跳过[3,4]的处理，所以结果集应该保存的是下标映射为[1,2],在遍历新乱序子级到下标为2和1的时候跳过处理，通过最少的移动实现页面渲染！
function getSequence(arr) {
let length = arr.length//拿到长度
const result = [0] //默认第0个位基准（保存是对应原序列的索引值）
let resultLastIndex //结果集中最后一个元素，在原序列中的索引值
for (let i = 0; i < length; i++) {
let arrI = arr[i]//当前数值
if (arrI !== 0) {//因为下标为0需要创建，所以不在复用范围内，需排除
resultLastIndex = result[result.length - 1] //拿到结果序列最后一项的下标（原序列）
if ( arrI > arr[resultLastIndex] ) {//比较最后一项和当前项的值，如果比最后一项大，则将当前索引放到结果集中
result.push(i)
continue
}
}
}
return result
}
getSequence([2,3,7,4,5,8,1,9])//0，1，2，5，7
| i | resultLastIndex | arrI > arr[resultLastIndex] | result（初始值0，每次拿最后一项比较） |
|---|---|---|---|
| 0 | 0 | 2 > 2? | 0 |
| 1 | 0 | 3 > 2? | 0 ，1 |
| 2 | 1 | 7 > 3? | 0 ，1，2 |
| 3 | 2 | 4 > 7? | 0 ，1，2 |
| 4 | 2 | 5 > 7? | 0 ，1，2 |
| 5 | 4 | 8 > 7? | 0 ，1，2 ，5 |
| 6 | 4 | 1 > 8? | 0 ，1，2 ，5 |
| 7 | 4 | 9 > 8? | 0 ，1，2 ，5，7 |
到此只能拿到普通递增的数值对应的下标，但不是最长的,在下标为3值为4时，比7小，4比7更有潜力，应该查找result序列中最前面一个比4大的进行替换，所以在result[0，1，2]中对应的是[2，3，7],数组中比4大的是7，应该把7替换掉result为[0,1,3],这样在下一轮比对5就可以插入到末尾了！
不进行替换的话result为[0,1,2,5,7],进行替换的话result为[0,1,3,4,5,7]，明显替换的话长度个数更多，这就是要求出的最长递增子序列！！！
贪心算法+二分查找
由上例子可知：我们可以在判断arrI > arr[resultLastIndex]为false：最后一项大于当前项时，利用二分查找（速度快），找出result中最前的一个比当前值大的替换掉，比如[1,5,7,8]，想插入4，数组中5,7,8都比4大，但只会替换最前面的5；
思路：
- 添加三个属性start（开始索引）、end （结束值索引）、middle（中间索引）,while遍历start === end 就停止
- 每次循环都取出一个中间索引middle，并取出对应的数值，利用这个中间值和当前值arrI比较
- 中间值小于当前值的话就往右边继续折半查找，否则往左边继续折半查找 找到中间值后做替换操作
- while结束会有一个中间索引，利用这个索引拿到数值再进行判断，如果这个中间值大于当前值就进行替换掉对应下标
//求递增子序列的个数
function getSequence(arr) {
let length = arr.length
const result = [0] //默认第0个位基准，注意这里保存的是乱序数组的下标
let start//二分查找开始位置
let end //结束位置
let middle //二分中间值
let resultLastIndex //结果集中最后一个索引值
for (let i = 0; i < length; i++) {
let arrI = arr[i]
if (arrI !== 0) {//因为下标为0需要创建，所以不在复用范围内，需排除
resultLastIndex = result[result.length - 1] //拿到最后一项进行比对
if (arrI > arr[resultLastIndex]) {//比较最后一项和当前项的值，如果比最后一项大，则将当前索引放到结果集中
result.push(i)
continue //结束此次循环
}
//arrI小于结果集最后一个元素的话，需要从结果集中找到第一个比当前值大的，然后用当前值索引进行替换，利用二分查找
//1356789 ->4 折中就是6，6比4大，往左继续折中3，3比4小，往后面只有5，替换掉5
start = 0
end = result.length - 1
while (start < end) {//start === end 就停止,在找result索引
middle = ((start + end) / 2) | 0 //取到result中间索引，二进制运算向下取整 (5/2)| 0 =2
let ArrMiddle = arr[result[middle]]//利用middle到result对应arr中的索引，再拿到arr对应的值
// 1234 ArrMiddle 6789 //中间值比当前值小就往右边走
if (ArrMiddle < arrI) {
start = middle + 1 //开始值+1，然后在下次循环再运算右边中间索引
} else { //往左边走
end = middle
}
}
//流程S0为start=0 e5为end=5 m1为middle=1
// result 1, 2, 7, 8, 9 arrI 5
// S0 e5 m2 7 < 5 ? false end = middle
// s0 e2 m1 2 < 5 ? true start = middle + 1
// s2 e2 相等退出
//result 2 4 5 8 9 10 13 18 arrI 12
//s0 e7 m3 8 < 12 ?
//s4 e7 m5 10 < 12 ?
//s6 e7 m6 13 < 12 ?
//s6 e6
//无论怎么比最后start和end一定会相等
console.log(start, end);
//找到中间值后，需要做替换操作
if (arr[result[end]] > arrI) {//end和start相等，用哪个都一样
result[end] = i //贪心法在此体现，用当前这一项，替换掉已有的比当前大的那一项，需要更有潜力的，如果不换后面更大的就无法进入
}
}
}
return result
}
console.log(getSequence([1, 2, 7, 8, 9, 5, 3, 0]));//
到此求出最长递增子序列的长度个数是对的，但利用这个结果集不满足上一篇diff算法的需求，这个结果集是有弊端的！！！
例子：
看上图，有一组乱序子序列[5,3,4,2],我们一眼就能看出CD两个元素是不需要移动的，但在我们上面的算法中2会把3给替换掉(贪心算法)，所以result为[3,2]，注意result保存是索引，这样就导致了C和H不用动，这3明显是错误的！
回溯
从上图可看出以上面的算法，最后数值结果为[1,3,4,6,7,9],result对应的索引为[2,1,8,4,6,7],用这个最长递增子序列去移动元素肯定是不对的，正确符合diff算法的数值结果应该是[2,3,5,6,7,9]（结果可能不唯一），所以我们要进行回溯！
在回溯前，需要记录每个元素的前驱节点是谁
记录前驱流程在程序中undefined
- 放入2没有前驱为undefined （2）
- 放入3要记录2为前驱，所以记录2的索引0（2，3）
- 1要替换2，2没有前驱，所以1的前驱也为undefined （1，3）
- 放入5，5的前驱为3，所以记录3的索引1 （1，3，5）
- 放入6，6的前驱为5，所以记录5的索引为3（1，3，5，6）
- 放入8，8的前驱为6，所以记录6的索引为4（1，3，5，6，8）
- 7要替换掉8，8的前驱为6，所以记录6的索引为4（1，3，5，6，7）
- 放入9，9的前驱为7，所以记录7的索引为6（1，3，5，6，7，9）
- 4要替换掉5，5的前驱为1，所以记录5的索引为1（1，3，4，6，7，9）
每个数值都记录了自己的前驱，这样就可以进行回溯了，从最后一个值开始回溯，因为最后一个值肯定是最大的也是正确的
回溯流程：
| i | 值 | 当前索引 | 前驱索引 | result结果集 |
|---|---|---|---|---|
| 5 | 9 | 7 | 6 | [7] |
| 4 | 7 | 6 | 4 | [6，7] |
| 3 | 6 | 4 | 3 | [4，6，7] |
| 2 | 5 | 3 | 1 | [3，4，6，7] |
| 1 | 3 | 1 | 0 | [1，3，4，6，7] |
| 0 | 2 | 0 | [0，1，3，4，6，7] |
result[0,1,3,4,6,7] ，数值为[2,3,5,6,7,9]，这个result才是我们要求出的最长递增子序列，resultbao保存的下标就是标识不用插入的元素。
是不是有个问题为什么不是[2,3,5,6,8,9]呢？其实是7是8并不重要，因为肯定是其中一个不用动，只是7比8小，所以把8替换掉了，通过回溯最后的结果集是正确的就行，这也就验证了结果不唯一
代码思路：
- 新增一个和乱序数组一样长的数组，用于映射保存前驱索引
- 在if (arrI > arr[resultLastIndex])判断当前值大于最后值进行push时，进行记录最后值的索引
- 在if (ArrMiddle < arrI)中间值大于当前值，需要替换掉中间值，并保存中间值的前驱索引
- 最后对result进行倒叙回溯（通过最后一项）
function getSequence(arr) {
let length = arr.length
const result = [0] //默认第0个位基准，注意这里保存的是乱序数组的下标
//拷贝arr,修改不会影响arr，用于节点追溯,最后要标记索引
+ const p = new Array(length).fill(0)
//console.log(p);//[0, 0, 0, 0, 0, 0, 0, 0, 0]
let start//二分查找开始位置
let end //结束位置
let middle //二分中间值
let resultLastIndex //结果集中最后一个索引值
for (let i = 0; i < length; i++) {
let arrI = arr[i]
if (arrI !== 0) {//因为下标为0需要创建，所以不在复用范围内，需排除
resultLastIndex = result[result.length - 1] //拿到最后一项进行比对
if (arrI > arr[resultLastIndex]) {//比较最后一项和当前项的值，如果比最后一项大，则将当前索引放到结果集中
result.push(i)
+ p[i] = resultLastIndex //当前放到末尾的要记住他前面的那个元素的下标是谁
continue //结束此次循环
}
//arrI小于结果集最后一个元素的话，需要从结果集中找到第一个比当前值大的，然后用当前值索引进行替换，利用二分查找
//1356789 ->4 折中就是6，6比4大，往左继续折中3，3比4小，往后面只有5，替换掉5
start = 0
end = result.length - 1
while (start < end) {//start === end 就停止,在找result索引
middle = ((start + end) / 2) | 0 //取到result中间索引，二进制运算向下取整 (5/2)| 0 =2
let ArrMiddle = arr[result[middle]]//利用middle到result对应arr中的索引，再拿到arr对应的值
// 1234 ArrMiddle 6789 //比当前值小就往右边走
if (ArrMiddle < arrI) {
start = middle + 1 //开始值+1，然后在下次循环在运算右边中间索引
} else { //往左边走
end = middle
}
}
//无论怎么比最后start和end一定会相等
// console.log(start, end);
//找到中间值后，需要做替换操作
if (arr[result[end]] > arrI) {//end和start相等，是二分查找出的那个下标，用哪个都一样
result[end] = i //贪心算法在此体现，用当前这一项，替换掉已有的比当前大的那一项，需要更有潜力的，比如7 10 13遇到 遇到9，9需要把10替换掉
+ p[i] = result[end - 1] //记住他前一个元素是谁
}
//中间值替换例子（可不看）：
// arr2 3 1 5 6 8 7
// 1、 result [0 1] i 2 1>3?无法插入需要替换掉大的 end 0 result [2 1] p[0,0,undefined,0,0,0,0] 前面没有去前驱为undefined
// 2、 result [2 1 3 4 5] i 6 7>8?无法插入需要替换掉大的 end 4 result [2 1 3 4 6] p[0,0,undefined,1,3,4,4] 原本是p[0,0,undefined,1,3,4,0]
}
}
+ // console.log(p);[0, 0, undefined, 1, 3, 4, 4, 6, 1]
//通过最后一项进行回溯
+ let i = result.length
+ let last = result[i - 1]//拿到最后一项
+ // console.log(result);//为回溯result为 [ 2, 1, 8, 4, 6, 7 ]
+ while (i-- > 0) {//倒叙追溯
+ result[i] = last//最后一项肯定是去确定好的
+ last = p[last]//取出前驱索引
+ }
//回溯流程（可不看）
//数组[2, 3, 1, 5, 6, 8, 7, 9, 4] 最长数值:[1, 3, 4, 6, 7, 9]
//result[ 2, 1, 8, 4, 6, 7 ] p[ 0, 0, undefined, 1, 3, 4, 4, 6, 1 ]
// i last result p[last]
// 5 7 [ 2, 1, 8, 4, 6, 7 ] 6
// 4 6 [ 2, 1, 8, 4, 6, 7 ] 4
// 3 4 [ 2, 1, 8, 4, 6, 7 ] 3
// 2 3 [ 2, 1, 3, 4, 6, 7 ] 1 //变化：因为原本的数值4（8）替换了数值5（3）
// 1 1 [ 2, 1, 3, 4, 6, 7 ] 0
// 0 0 [ 0, 1, 3, 4, 6, 7 ] 0 //变化：因为原本的数值1（2）替换了数值2（0）
//这样最后正确数值为[2, 3, 5, 6, 7, 9 ]
return result
}
//console.log(getSequence([2, 3, 1, 5, 6, 8, 7, 9, 4]));//[ 0, 1, 3, 4, 6, 7 ]
解决遗留问题
拿到正确的最长递增子序列后就可以完善上一篇diff算法留下的问题了
const patchKeyedChildren = (oldChildren, newChildren, el) => {
....省略上面代码
//需要移动位置
//获取最长递增子序列
+ let increment = getSequence(newIndexToOldIndexMap) //不用移动的元素
//比如toBePatched4个元素乱序，倒叙3 2 1 0 ，最长递增子序列为[1,2]
//遇到下标为2,1就不要进行操作
+ let j = increment.length - 1
for (let i = toBePatched - 1; i >= 0; i--) {//倒叙插入
let index = i + s2 //找到当前元素在newChildren中的下标
let current = newChildren[index] //找到newChildren最后一个乱序元素
let anchor = index + 1 < newChildren.length ? newChildren[index + 1] : null //找到元素的下个元素
//current可能是新增的元素没有el，如果没有el
if (newIndexToOldIndexMap[i] === 0) {
patch(null, current, el, anchor)//创建元素并根据参照物插入
} else {
+ if (i != increment[j]) {//不在最长递增子序列中就要移动
+ hostInsert(current.el, el, anchor)//存在el直接根据参照物插入
+ } else {
+ j--
+ }
}
}
这样一个完整的手写diff算法就算完成了，感谢您的观看，如有不对的地方请大佬指出，万分感谢！！！
536
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
