关于vue3.x中最长递增子序列（LIS）

chendf_2024-09-02 9:51

什么是最长递增子序列？

简单来说最长递增子序列就是在一个数组中呈现递增的数据的长度
lettcode原题

示例：我们有一个数组 arr

ts 复制代码 
const arr = [10, 9, 2, 5, 3, 7, 101, 18]
  • 那么他的序列有那些呢？
    • [2]
    • [2, 3]
    • [2, 5]
    • [2, 3, 7]
    • [2, 5, 7]
    • [2, 3, 101]
    • [2, 5, 101]
    • [2, 3, 7, 101]
    • [10, 101]
  • 其中，最长递增子序列为 [2, 3, 7, 101]，其长度为 4。

求取最长递增子序列

我们上面了解了什么是最长递增子序列，那么我们就来实现如何获取最长的序列吧~

动态规划

  • 我们首先通过动态规划的方式求取最长序列。
    • 定义状态： 定义一个dp用于存储数组 array 中所有的项对应的最长序列大小。默认是1。可以用 dp[i] 表示以第 i 个元素结尾的最长递增子序列的长度。
    • 状态转移方程： 建立两层遍历，通过两层遍历的方式去查找当前这个数据和下一个数据大小的对比，从而改变其序列长度。找到状态之间的关系，建立递推公式：dp[j] = Math.max(dp[i] + 1, dp[j])。
    • 计算结果： 根据状态转移方程我们可以得到数组中每个数据对应的最长序列值是多少。
js 复制代码 
/**
 * @param {number[]} nums
 * @return {number}
 */
function lengthOfLIS(nums) {
	// 第一步定义一个dp用于存储数组 array 中所有的项对应的最长序列大小。默认是0
	const dp = new Array(nums.length).fill(1)
	// 双层遍历
	for(let i = 0; i < nums.length; ++i) {
		for (let j = i; j < nums.length; ++j) {
			// 判断当前 i 对应的数据是否 小于 j 对应的数据。如果小于，则代表 j 与 i 形成一个递增的序列
			if (nums[i] < nums[j]) {
				// 根据递推公式：dp[j] = Math.max(dp[j], i + 1)
				dp[j] = Math.max(dp[i] + 1, dp[j])
			}
		}
	}

	// 获取 dp 中最大的数，即对应着最长的序列
	return Math.max(...dp)
}
  • 查看运行结果
js 复制代码 
console.log(lengthOfLIS([10, 9, 2, 5, 3, 7, 101, 18]))

// 结果
4

通过贪心算法加二分查找法

  • 建立一个结果数组，用于存储当前增长最慢且最长的序列的索引。默认是第一个即：[0]
    • 增长最慢：后一个值一定比前一个大，并且他们之间的差值是最小的
      • 如：[1, 3, 2, 5]。他增长最慢的序列就是：[1, 2] 对应的索引就是：[0, 1]
  • 遍历原数组。通过贪心我们认为下一个一定比前一个大。
    • 如果当前值大于结果数组中的最后一位，那么我们就可以把当前值放到结果数组中的最后一位，因为他们肯定形成一个递增
    • 如果当前值小于最后一位，那么我们就需要通过二分去查找最接近的一个值了
      • 二分查找法
        • 通过头尾 中间 的指针对比当前元素，判断当前元素属于那个区间（left -> middle 或 middle -> right）
        • 如果在左侧，那么将 left 指针移动到中间的下一个位置（因为中间已经比过了）
        • 否则，将 right 移动到中间的位置
      • 二分结束之后我们可以得到一个 left，判断当前值是否小于这个 left。如果小于，则把当前值替换掉 left
  • 最后拿到 result 的 长度 即可得到最长的一个子序列 注意：当前子序列长度是对的，但是顺序是不对的
js 复制代码 
/**
 * @param {number[]} nums
 * @return {number}
 */
function lengthOfLIS (nums) {
	// 用于存储当前增长最慢且最长的序列的索引
    const result = [0]
    for (let i = 0; i < nums.length; ++i) {
        // 如果当前值大于结果数组的最后一个，则意味着他是当前序列中的最大值
        if (nums[i] > nums[result[result.length - 1]]) {
        	// 将当前索引加入到结果的最后一个
            result.push(i)
        } else {
            let left = 0, right = result.length - 1
            while (left < right) {
            	// vue 源码使用的是 left + right >> 1 。这里这样写是为了避免 Infinity 导致的结果不正确问题（(Infinity - 1) + (Infinity - 10) >> 1）
                const middle = left + ((right - left) >> 1)
                // 说明在右边
                if (nums[i] > nums[result[middle]]) {
                	// 将左指针移动到中间嗯后一位
                    left = middle + 1
                } else {
                	// 将右指正移动到中间
                    right = middle
                }
            }
            // 二分和贪心走完了，我们只需要判断 left 是不是 大于当前值，如果大于，则替换即可
            if (nums[i] < nums[result[left]]) {
            	// 直接替换即可
                result[left] = i
            }
        }
    }

	// 返回序列长度
    return result.length
}
  • 查看运行结果
js 复制代码 
console.log(lengthOfLIS([10, 9, 2, 5, 3, 7, 101, 18]))

// 结果
4

回溯

  • 为什么会需要回溯呢？在 vue3.x 中，我们需要的是判断节点是否需要移动，这个时候我们需要一个有序的序列，乱的肯定不行。可以先试下我们按照之前的二分和贪心拿到的结果。我们在返回 result.length 之前打印下 result 的结果看下。为了方便查看我们打印了 result 的结果和它对应的在 nums 中实际的结果
ts 复制代码 
// 因为上面的数据返回的结果刚好符合数序，所以我们换一个数据尝试结果
// [2, 4, 5, 3, 1, 9, 7, 8]

/**
 * @param {number[]} nums
 * @return {number}
 */
function lengthOfLIS (nums) {
	// 用于存储当前增长最慢且最长的序列的索引
    const result = [0]
	// .....
	
	// 增加打印结果
	console.log(result, result.map(m => nums[m]))
	return result 
}

console.log(lengthOfLIS([2, 4, 5, 3, 1, 9, 7, 8]))

// 执行结果
[ 4, 3, 2, 6, 7 ] [ 1, 3, 5, 7, 8 ]
5
  • 通过结果打印我们可以看到，虽然最长序列的长度是正确的，但是存储的结果中的序列却不是正确的，正确的序列应该是：[ 2, 4, 5, 7, 8 ]。所以这个时候 vue 通过了一个巧妙的方式给他重新进行一个回溯已达到正确的队列。
  • 怎么回溯呢？
    • 简单来说就是：我们在查找过程中，因为我们拿到的值一定比上一个大，也就是 result 中存储的后一个值肯定比前一个大，那么我们就可以存储当前值的上一个值的索引位置，在回溯的时候我们就可以从后往前查，我们可以定义两个指针，一个指向最后一个，一个执行前一个，那么我们下一个取的值就是上一次执行的前一个的值。 这么说可能有点抽象，我们看下代码实现。
      • 增加一个 p数组 用来存储回溯的数据（存储的是前一个最大值索引）
        • result 修改分为两种情况，
          1. 直接在后面插入，那么这个时候它的上一个最大值就是 result 的最后一个数据（新的数据插入 result 前）。
          2. 修改某个位置的 result 。那么它上一个最大值就是你修改位置的前一个数据。（为什么是前一个数据：因为我们按照贪心算法给他加入的时候是有序的，他是单调递增的也就是说他的前一个一定是离他最近符合条件的最大值。）
      • 回溯
        • 通过两个指针去处理。(我们引用 vue 源码的变量吧，u、v)
          • u ：当前指针指向 result 要修改的数据。默认指向最后一个，因为我们是从后往前回溯的
          • v ：当前指针指向 result 的上一个，其实就是 u - 1
        • 有了这两个指针，那么我们在修改 u 的时候，是不是 v 其实指向的就是 u 所对应的上一个索引，这个时候我们去 p 里面取 u 所对应的值不就是他的上一个最大值了嘛。所以我们直接把 u 位置的值 给到 v 就ok了。
ts 复制代码 
/**
 * @param {number[]} nums
 * @return {number}
 */
function lengthOfLIS (nums) {
	// 用于存储当前增长最慢且最长的序列的索引
    const result = [0]
    // 增加一个 p 用于存储回溯的数据
    const p = nums.slice(0)
    for (let i = 0; i < nums.length; ++i) {
        // 如果当前值大于结果数组的最后一个，则意味着他是当前序列中的最大值
        if (nums[i] > nums[result[result.length - 1]]) {
        	// 修改当前数据对应的前一个最大值。取 result 的最后一个
        	p[i] = result[result.length - 1]
        	// 将当前索引加入到结果的最后一个
            result.push(i)
        } else {
            let left = 0, right = result.length - 1
            while (left < right) {
            	// vue 源码使用的是 left + right >> 1 。这里这样写是为了避免 Infinity 导致的结果不正确问题（(Infinity - 1) + (Infinity - 10) >> 1）
                const middle = left + ((right - left) >> 1)
                // 说明在右边
                if (nums[i] > nums[result[middle]]) {
                	// 将左指针移动到中间的后一位
                    left = middle + 1
                } else {
                	// 将右指正移动到中间
                    right = middle
                }
            }
            // 二分和贪心走完了，我们只需要判断 left 是不是 大于当前值，如果大于，则替换即可
            if (nums[i] < nums[result[left]]) {
            	// 直接替换即可
                result[left] = i
				
				// 修改了 result 的值，所以我们也需要修改 p 对应的索引
				if (left > 0) { // 防止数组越界
					// 修改当前数据对应的前一个最大值。取 left 的上一个
					p[i] = left - 1
				}
            }
        }
    }
	
	// 回溯
	let u = result.length, v = result[u - 1] // 默认为最后一个
	while(u-- > 0) { // 因为这里执行了 u--，所以此刻 u 指向的就是 result 的最后一个
		// 最后一个肯定是最大的，所以第一次执行的时候这个复制就是将最后一个值修改为最后一个相当于是没有变化
		// 下一次进入的时候，v 的值已经是他所对应的最大值了
		result[u] = v  
		// 第一次就是取 result 最后一个值对应的上一个最大值，
		// 下一次进入的时候，就是取当前的下一个最大值是啥
		v = p[v]
	}
	// 我们输出 result 看结果
	console.log(result)

	// 返回序列长度
    return result.length
}
  • 执行结果
ts 复制代码 
console.log(getMaxLength([2, 4, 5, 3, 1, 9, 7, 8]))

// 输出结果
[ 0, 1, 2, 6, 7 ]
5

这个时候我们可以看到输出的 result 序列顺序已经没有问题了，顺利完成了回溯。

相关推荐
AwesomeCPA5 分钟前
果蔬识别系统性能优化之路（四）
前端·人工智能·python·性能优化·tensorflow
梦想科研社15 分钟前
【无人机设计与控制】四旋翼飞行无人机姿态控制ADRC非线性自抗扰控制Simulink仿真
算法·数学建模·matlab·无人机
lixu_boke34 分钟前
通过XMLHttpRequest和window.open在浏览器中打开文件流pdf以及下载pdf
前端·pdf
妄想...1 小时前
最大余额法，解决百分比计算相加不等于100%(扇形/饼图百分比使用的此算法)
前端·javascript·算法
鱼跃鹰飞1 小时前
Leetcode面试经典150题-148.排序链表
算法·leetcode·链表·面试
hummhumm1 小时前
数据库系统 第58节 数据库审计
网络·数据库·python·算法·oracle·java-ee·database
chnyi6_ya1 小时前
前端设计之 主页面、书架页面、数据分析页面
前端·python·数据分析
小白学大数据1 小时前
Django视图：构建动态Web页面的核心技术
开发语言·前端·爬虫·django·sqlite
summ1ts2 小时前
P3489 [POI2009] WIE-Hexer
c++·算法·图论·dijkstra·状态压缩
热门推荐
01组基轨迹建模 GBTM的介绍与实现（Stata 或 R）022024年高教社杯数学建模国赛C题超详细解题思路分析03【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提0451-2 万字长文，深度解读端到端自动驾驶的挑战和前沿052024数学建模国赛高教社杯C题:农作物的种植策略 思路代码文章助攻手把手保姆级06【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文07Coze扣子平台完整体验和实践（附国内和国际版对比）082024 高教社杯 数学建模国赛 （A题）深度剖析|“板凳龙” 闹元宵|数学建模完整代码+建模过程全解全析092024年高教杯国赛（C题）数学建模竞赛解题思路|完整代码论文集合10苍穹外卖面试总结