翔子的博客

mcp-server

Wed, 04 Jun 2025 00:00:00 GMT

安装 python 环境 python3 --version 验证

安装uv

Terminal window

1
curl -LsSf https://astral.sh/uv/install.sh | sh

通过 uvx --version 验证

安装完成以后，MCP 配置如下。这里的 uvx 就类似于 npx 可以从命令行执行一个 python 包

1
{
2
  "mcpServers": {
3
    "fetch": {
4
      "command": "uvx",
5
      "args": ["mcp-server-fetch"]
6
    }
7
  }
8
}

配置Trae 智能体

使用工具#

browser-tools-mcp #

让 AI 能够监控浏览器行为，抓取日志、网络请求、截图，辅助调试和交互

功能：

捕获浏览器日志：抓取浏览器控制台日志，帮助调试和分析
抓取网络请求：抓取浏览器中的网络请求，帮助调试和优化性能
截图：抓取浏览器中的页面截图，帮助调试和分析

安装#

拉取代码，安装浏览起插件

Terminal window

1
git clone https://github.com/AgentDeskAI/browser-tools-mcp.git

安装并运行浏览器工具服务器

Terminal window

1
npx @agentdeskai/browser-tools-server@1.2.0

打开浏览器 F12，找到 BrowserToolMCP

1
对于我们现在的网站，你有什么分析吗
2
帮我看看这个账号的所有你能看到的信息，并进行总结。
3
帮我看看这个网页上都说了什么，截个图，并总结一下。
4
帮我翻译下这个网页，并进行总结。
5
帮我看看它这个图片生成请求是怎么发的？
6
帮我看看页面刷新时候，token会不会变？
7
这个网页加载好慢，帮我看看怎么回事？
8
帮我看看是不是有BUG，我的余额怎么不会涨（最后这个开玩笑，不用试 = = ）

Firecrawl #

网页抓取能力

firecrawl_scrape：抓取指定网页的主要内容，支持提取文本、HTML、Markdown 等格式。
firecrawl_map：生成指定网站的结构地图，可用于了解页面间链接关系，常用于网站结构分析。
firecrawl_crawl：执行多层级网页爬取任务，可发现并递归抓取内部链接，实现深度爬取。
firecrawl_check_crawl_status：查询当前爬取任务的状态，包括进度、成功/失败记录等。
firecrawl_search：支持在搜索引擎上发起查询请求，并抓取结果页面内容。
firecrawl_extract：使用大模型能力从页面中抽取结构化数据，如产品信息、联系人、文章摘要等。
firecrawl_deep_research：针对某一主题执行深度搜索与多页面整合分析，适用于研究与情报收集。
firecrawl_generate_llmstxt：将爬取内容自动转换为适合 LLM 使用的 prompt 格式文本（如：摘要、指令式文本等），便于 AI 模型消费。

NocoDB学习笔记

Tue, 03 Jun 2025 00:00:00 GMT

是什么#

开源 Airtable 替代品.

无代码数据库平台，通过直观的电子表格界面构建应用程序

核心功能#

丰富的电子表格界面#

基础的增删改查操作 + 记录
字段排序、过滤、隐藏等
视图类型：网格（默认）、图库、日历视图、表单视图和看板视图
有协作视图和锁定视图
分享：公开或私密
变体单元格类型：ID、链接、查找、汇总、单行文本、附件、货币、公式等
使用角色进行访问控制：不同级别的细粒度访问控制

程序访问#

提供 RESTAPI 和 SDK、即将推出的对数据源直接进心 sql 查询

用户操作日志集中保存#

协作能力#

NocoDB 术语#

工作区 (Workspace)：工作区是一个或多个基础库的集合，相关的表格、视图等元素，方便团队协作和项目管理
基础库 (Base)：基础库是一个或多个数据源的集合，每个数据源包含一个或多个表格，类似数据库
表格 (Table)：表格将数据逻辑地以行和列的形式排列，一个基础库可以创建多张表格，存放不同的数据
视图 (View)：视图定义了表格中数据的呈现和交互方式，默认视图是网格视图，此外还支持表单视图、画廊视图和看板视图等
单元格 (Cell)：单元格是是存储数据的基本单元。每个单元格可以存储一个具体的值，如文本、数字或日期
字段 (Field)：字段即表格中的一列，用于存储同一类型的数据，字段可以定义数据类型并组织数据，例如文本、数字或日期类型
记录 (Record)：一条记录代表表中的一行，即一个完整的数据条目
工作区拥有者 (Workspace owner)：指创建该工作区的成员，拥有者身份不可转让
工作区成员 (Workspace member)：指在工作区中拥有特定访问权限的用户，成员包括工作区的拥有者和其他被授予编辑、读者等权限的用户
基础库拥有者 (Base owner)：指创建该基础库的成员，每个基础库只能有一位拥有者，拥有者身份不可转让
基础库成员 (Base member)：指拥有该基础库访问权限的用户，成员可以被赋予不同级别的权限（如读者、编辑等）来访问和操作该基础库。
模态框 (Modal)：用户界面中的一种弹出对话框，常用于收集用户输入、显示提示或确认操作等场景。
Webhook (Webhook)：可以触发预定义的动作，实现不同服务之间的数据同步和自动通知。示例在 NocoDB 中为客户表配置一个 Webhook，当新增客户记录时，自动将该信息发送到外部系统，从而实现消息提醒或数据同步。

RESTAPI#

API Snippets

Table-Records

WebHook#

NocoDB 与 NocoBase 的区别#

项目	定位	典型场景
NocoDB	数据库 → 电子表格转换工具	快速将 SQL 数据库转为类 Airtable 的协作界面
NocoBase	企业级应用开发框架	构建企业级的 CRM、ERP 复杂业务系统

NocoBase 是功能全面的应用开发平台，适合技术团队解决多变的业务需求；而 NocoDB 主要是专注于数据管理的工具，更适合需要直观数据操作的场景

supaBase学习笔记

Mon, 19 May 2025 00:00:00 GMT

是什么#

The open source Firebase alternative.

目标是将后端服务抽象为可直接调用的 API

核心功能#

数据库 #

PostgreSQL

提供完全托管的 PostgreSQL 数据库，每个 Supabase 项目都配备一个完整的 Postgres 数据库，支持SQL 语法和图形化操作
自动生成 API

根据表结构自动生成 RESTful & GraphQL API

身份认证（Authentication）#

多方式登录

支持邮箱/密码、社交登录（Google/GitHub 等）、Magic Link、手机号验证等，无需自建用户体系。

1
// 邮箱登录示例
2
const { user, error } = await supabase.auth.signInWithPassword({
3
  email: 'test@example.com',
4
  password: 'xxxxxx',
5
})

行级安全（RLS）

基于 PostgreSQL 的行级安全策略，控制用户数据访问权限，例如，可以限制不同用户对同一张表的不同数据行的访问权限
```
1
-- 仅允许用户访问自己的数据
2
 create policy "User can read own profile"
3
 on users for select
4
 using (auth.uid() = id);
```

存储（Storage）#

文件托管：支持上传、下载、管理文件（图片、视频等），自动生成 CDN 加速链接。

1
// 上传文件示例
2
const { data, error } = await supabase.storage
3
  .from('avatars')
4
  .upload('user1.png', file)

serverless Functions#

数据库函数DataBase Function

顾名思义，应该和数据库相关，在数据库内部执行的，可能用 SQL 或 PL/pgSQL 编写，用于数据操作、复杂查询（如多表联查、聚合计算）等

通过 rpc 调用
边缘函数

使用 TypeScript/JavaScript 编写，可以用于处理数据库敏感操作（增删数据）、也可以处理一些相比数据库 CRUD 更复杂的逻辑（如支付回调、数据清洗），完全不需要部署后端代码了

通过 invoke 调用

Supabase CLI #

Supabase 本地开发，在本地计算机上的独立环境中处理项目，需要 Docker 环境

supabase init：初始化本地项目，生成 supabase/config.toml 以及 migrations、functions、tests 等目录
supabase login：登录 Supabase，自动打开浏览器，输入对应的 verification code 登陆，显示登陆成功
supabase start / supabase stop：用 Docker 启动／停止完整的 Supabase 本地环境，一步到位
supabase migration：管理数据库迁移，让 schema 变更更可控
supabase db push：把本地 schema/函数直接推到你在 Supabase 平台上的数据库（很适合 CI/CD
supabase projects：查、建、删 Supabase 项目
supabase gen types：一键从数据库生成 TypeScript 类型定义，前端调用接口更安心
supabase completion：帮你生成 Shell 补全脚本，不用每次记命令格式

使用 CLI 连接 Supabase 远程项目#

前提：本地 docker 环境正确部署

执行 supabase init 完成初始化后，连接到远程的 Supabase 项目步骤如下：

登录/退出 Supabase 账户
Terminal window
```
1
supabase login
2
supabase logout
```
执行此命令后，浏览器会自动打开并要求您授权 CLI 访问您的 Supabase 账户。
获取项目引用 ID

从 Supabase 仪表板获取项目的引用 ID，在项目设置中找到，通常是一个类似 abcdefghijklmnopqrst 的字符串。

或者使用命令获取项目引用 ID
Terminal window
```
1
supabase projects list
```

链接/取消链接远程项目

Terminal window

1
supabase link --project-ref 您的项目引用ID
2
supabase unlink

验证登陆状态
Terminal window
```
1
supabase status
```

Supabase CLI 与 Docker#

Supabase CLI 是一个命令行工具，用于管理 Supabase 项目。根据不同的使用场景，对 Docker 的依赖程度不同：

需要 Docker 的场景#

本地开发环境
- supabase start：在本地启动完整的 Supabase 开发环境
- supabase db：数据库相关操作（如 db pull , db push , db diff ）
- supabase gen types：生成数据库类型定义
- supabase functions serve：本地测试 Edge Functions
Edge Functions 开发
- 开发、测试和部署 Edge Functions 时需要 Docker
- Docker 用于模拟 Deno 运行环境，确保本地测试与生产环境一致
数据库迁移
- 创建、应用和回滚数据库迁移时需要 Docker

不需要 Docker 的场景#

项目管理
- supabase login：登录 Supabase 账户
- supabase projects list：列出项目
- supabase link：链接到远程项目
部署操作
- supabase functions deploy：部署 Edge Functions（仅需将代码上传到远程服务器）
- supabase secrets list/set：管理环境变量
基本配置
- supabase init：初始化项目配置文件

Supabase SDK #

依赖安装#

Terminal window

1
npm install @supabase/supabase-js

api 文档

初始化#

配置 supabase 环境变量

env.local

1
VITE_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
2
VITE_SUPABASE_ANON_KEY=<SUBSTITUTE_SUPABASE_ANON_KEY>

例如 AI-Agent 查项目 Project：

1
url: 'https://xwizhxzutcmpanozdpja.supabase.co'
2
anon_key: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inh3aXpoeHp1dGNtcGFub3pkcGphIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDczOTI4NzksImV4cCI6MjA2Mjk2ODg3OX0.8Hg1eMyBGhJbi-8Bq7QCYXVnienRyqwjd5EqXPQced0'

创建 Supabase 客户端

可以通过匿名密钥或服务角色密钥创建 Supabase 客户端

src/lib/supabaseClient.js

1
import { createClient } from '@supabase/supabase-js'
2
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
3
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY
4

5
// 使用 createClient() 方法初始化一个新的 Supabase 客户端
6
export const supabase = createClient(supabaseUrl, supabaseAnonKey)

1
export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
2
  // 自定义accessToken 是headers authorization
3
  accessToken: () => Promise.resolve(''),
4
  // 自定义headers
5
  global: {
6
    headers: {
7
      'x-my-custom-header': 'my-app-name',
8
    },
9
  },
10
})

更多参数参考createClient

密钥#

匿名密钥

服务于客户端代码，本身就是可以公开，Supabase 的安全模型不依赖于保持这个密钥的私密性
服务角色密钥

服务于服务器端代码，具有管理员权限，可以绕过行级安全（RLS）策略，必须保密

对比#

特性	匿名密钥 (Anon Key)	服务角色密钥 (Service Role Key)
权限级别	受限，遵循 RLS 策略	管理员级别，可绕过 RLS
使用位置	客户端代码	服务器端代码 Edge Function
安全性要求	可以公开	必须保密
适用场景	普通用户操作(查看)	管理操作、批量处理

最佳实践#

始终设置 RLS 策略

使用匿名密钥仅允许前端进行有限操作（如公开数据读取）
对于需要更高权限的操作，使用服务器端代码和服务角色密钥

敏感操作（如写入、删除）应通过 Edge Functions 或后端服务处理
设置域名限制

在 Supabase 控制台中限制可以使用匿名密钥的域名

查看在客户端，增删改在服务端

如，删除用户

在服务端，定义删除用户边缘函数

1
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
2
import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'
3

4
// 定义 CORS 头
5
const corsHeaders = {
6
  'Access-Control-Allow-Origin': '*', // 或者指定您的域名
7
  'Access-Control-Allow-Headers':
8
    'authorization, x-client-info, apikey, content-type',
9
  'Access-Control-Allow-Methods': 'POST, OPTIONS',
10
}
11

12
serve(async (req) => {
13
  // 处理 OPTIONS 预检请求
14
  if (req.method === 'OPTIONS') {
15
    return new Response('ok', { headers: corsHeaders })
16
  }
17

18
  try {
19
    const { id } = await req.json()
20

21
    if (!id) {
22
      return new Response(JSON.stringify({ error: '缺少用户ID' }), {
23
        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
24
        status: 400,
25
      })
26
    }
27

28
    // 使用服务角色密钥创建 Supabase 客户端
29
    const supabaseUrl = Deno.env.get('SUPABASE_URL') || ''
30
    const supabaseServiceKey =
31
      Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') || ''
32
    const supabase = createClient(supabaseUrl, supabaseServiceKey)
33

34
    // 执行删除操作
35
    const { error } = await supabase.from('test').delete().eq('id', id)
36

37
    if (error) throw error
38

39
    return new Response(JSON.stringify({ success: true }), {
40
      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
41
      status: 200,
42
    })
43
  } catch (error) {
44
    return new Response(
45
      JSON.stringify({ error: error.message || '删除用户数据失败' }),
46
      {
47
        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
48
        status: 500,
49
      }
50
    )
51
  }
52
})

展开收起

客户端通过 invoke 调用边缘函数

1
export const deleteUser = async (id: number) => {
2
  try {
3
    const { data, error } = await supabase.functions.invoke('delete-user', {
4
      body: { id }
5
    })
6

7
    if (error) throw error
8
    return true
9
  } catch (error: any) {
10
    throw new Error(error.message || "删除用户数据失败")
11
  }

调用记录，可以知道是谁删除的用户

可以添加用户日志

1
serve(async (req)=>{
2
   // 处理 OPTIONS 预检请求
3
   if (req.method === 'OPTIONS') {
4
     return new Response('ok', {
5
       headers: corsHeaders
6
     });
7
   }
8
   let headersObject = Object.fromEntries(req.headers);
9
   let requestHeaders = JSON.stringify(headersObject, null, 2);
10
   console.log(`Request headers: ${requestHeaders}`);

TypeScript 支持#

NOT NULL 列会被推断为非空类型，NULL 列则为 T | null。
自动生成类型：Supabase 可以根据数据库模式自动生成 TypeScript 类型定义

生成 types#

Supabase CLI#

Generating TypeScript Types

Terminal window

1
npx supabase gen types typescript \
2
  --project-id <your-project-id> \
3
  --schema public \
4
  > database.types.ts

Auth #

Supabase 采用 JWT（JSON Web 令牌）和密钥认证（Key Auth）相结合的鉴权方式。其运作逻辑如下：

无认证头时

若请求中未包含 Authorization 请求头，API 将默认以匿名用户（anonymous user）身份处理请求（此角色默认权限有限，需通过 RLS 策略控制数据访问）
携带认证头时

登陆后会生成 JWT，标识和授权已登录的用户，包含用户身份信息，有过期时间，用于维持用户会话状态

若请求包含有效的 Authorization 头（如 Bearer <JWT> 或 Apikey <密钥>），API 将：
- 身份切换：自动切换到对应令牌所属的用户角色
- 权限继承：基于该用户的权限执行操作（受 RLS 策略约束）

数据库操作#

提供增、删、改、查等基础操作
调用 Postgres 函数：调用
过滤器：仅返回符合特定条件的行，如等于、包含等
修饰符：修饰符必须在过滤器后指定，如排序、分页等

联查

Supabase 表关系通过 ! 符号后跟外键名称来指定的，默认为 LEFT JOIN

1
supabase.from('product_list').select(`
2
   *,
3
   related_table!related_table_id(*)
4
   `)

如果外键名称与被引用的主键名称相同，可以不用写 related_table(*)

内连接（INNER JOIN）

1
// !inner 表示内连接（INNER JOIN）
2
supabase.from('product_list').select(`
3
   *,
4
   related_table!inner(*)
5
   `)

返回结果为

1
;[
2
  {
3
    id: 1,
4
    name: 'xx',
5
    // 其他 user 表字段...
6
    related_table: {
7
      id: 'xx',
8
      name: '张三',
9
    },
10
  },
11
  // 更多用户记录...
12
]

vue 快速入门#

通过邮箱注册登陆

supabase.auth.signUp
supabase.auth.verifyOtp
supabase.auth.signInWithPassword

接收邮件模版配置

打通默认的 auth.users 表（身份认证表）和自定义的 user 表（业务用户表）#

创建业务用户表

1
 -- 在 Supabase SQL 编辑器中执行
2
   create table public.user (
3
     id uuid references auth.users(id) primary key, -- 外键关联
4
     username text unique,
5
     avatar_url text,
6
     created_at timestamp with time zone default now()
7
   );

设置行级安全（RLS）

1
-- 允许用户仅访问自己的数据
2
alter table public.user enable row level security;
3

4
create policy "用户只能管理自己的数据"
5
on public.user
6
for all using (auth.uid() = id);

自动同步用户创建事件

使用数据库触发器

1
 -- 当 auth.users 插入新用户时，自动创建 public.user 记录
2
create or replace function public.handle_new_user()
3
returns trigger as $$
4
begin
5
 insert into public.user (id, username)
6
 values (new.id, new.email); -- 初始用户名设为邮箱
7
 return new;
8
end;
9
$$ language plpgsql security definer;
10

11
-- 绑定触发器
12
drop trigger if exists on_auth_user_created on auth.users;
13
create trigger on_auth_user_created
14
 after insert on auth.users
15
 for each row execute procedure public.handle_new_user();

展开收起

客户端代码同步

1
// 用户注册成功后，手动插入数据到 public.user
2
const {
3
  data: { user },
4
  error,
5
} = await supabase.auth.signUp({
6
  email: 'user@example.com',
7
  password: 'password123',
8
})
9

10
if (user) {
11
  await supabase.from('user').insert({
12
    id: user.id,
13
    username: user.email,
14
  })
15
}

展开收起

遇到问题#

查询结果为空数组

之所以会得到空数组，是因为 Supabase 为每张表启动 Row Level Security 策略，我们回到 Supabase Dashboard，打开右侧菜单Authentication - Policies，可以看到在表的安全策略中有个提示：

翻译就是：已为此表启用行级别安全性，但未设置任何策略，选择查询将返回一个空的结果数组。

知道原因后，我们需要配置一个安全策略，点击右侧的 Create policy，这里我们只需要放开 Select 查询的权限就行，它会绕过 Row Level Security 策略：

Edge Functions 报 CORS error

需要在函数中设置请求头

1
// 定义 CORS 头
2
const corsHeaders = {
3
  'Access-Control-Allow-Origin': '*', // 或者指定您的域名
4
  'Access-Control-Allow-Headers':
5
    'authorization, x-client-info, apikey, content-type',
6
  'Access-Control-Allow-Methods': 'POST, OPTIONS',
7
}

部署的服务传递 Authorization Header 报 401 Unauthorized

1
// Authorization置空
2
accessToken: () => Promise.resolve(''),

部署的服务 SUPABASE_URL、SUPABASE_SERVICE_ROLE_KEY 获取不到

环境变量问题、查看 edge function 日志 docker logs supabase-edge-functions

报错 JWSError JWSInvalidSignature

查库时报错

1
const supabase = createClient(supabaseUrl, supabaseKey)
2

3
// 查询 product_list 表
4
let { data: product_list, error } = await supabase.from('product_list')

解决方案 1未解决解决方案 2

官网生成 API keys对自部署的服务有 bug

1
import { KJUR } from 'jsrsasign'
2
import crypto from 'crypto'
3

4
const JWT_HEADER = { alg: 'HS256', typ: 'JWT' }
5
const now = new Date()
6
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
7
const fiveYears = new Date(
8
  now.getFullYear() + 5,
9
  now.getMonth(),
10
  now.getDate()
11
)
12

13
const anonToken = `
14
   {
15
     "role": "anon",
16
     "iss": "qmp_supabase",
17
     "iat": ${Math.floor(today.valueOf() / 1000)},
18
     "exp": ${Math.floor(fiveYears.valueOf() / 1000)}
19
   }
20
   `.trim()
21

22
const serviceToken = `
23
   {
24
     "role": "service_role",
25
     "iss": "qmp_supabase",
26
     "iat": ${Math.floor(today.valueOf() / 1000)},
27
     "exp": ${Math.floor(fiveYears.valueOf() / 1000)}
28
   }
29
   `.trim()
30

31
const generateRandomString = (length) => {
32
  const CHARS =
33
    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
34
  let result = ''
35
  const MAX = Math.floor(256 / CHARS.length) * CHARS.length - 1
36
  const randomUInt8Array = new Uint8Array(1)
37
  for (let i = 0; i < length; i++) {
38
    let randomNumber
39
    do {
40
      crypto.getRandomValues(randomUInt8Array)
41
      randomNumber = randomUInt8Array[0]
42
    } while (randomNumber > MAX)
43
    result += CHARS[randomNumber % CHARS.length]
44
  }
45
  return result
46
}
47

48
const jwt_secret_key = generateRandomString(128)
49
const anonTokenSigned = KJUR.jws.JWS.sign(
50
  null,
51
  JWT_HEADER,
52
  anonToken,
53
  jwt_secret_key
54
)
55
const serviceTokenSigned = KJUR.jws.JWS.sign(
56
  null,
57
  JWT_HEADER,
58
  serviceToken,
59
  jwt_secret_key
60
)
61
console.log(`JWT_SECRET=${jwt_secret_key}`)
62
console.log(`ANON_KEY=${anonTokenSigned}`)
63
console.log(`SERVICE_ROLE_KEY=${serviceTokenSigned}`)

展开收起

自部署服务无法使用 Email/password 登陆
.enb
```
1
ENABLE_PHONE_SIGNUP = true
```

目前只能访问 public schema 下的库

.env

1
;(PGRST_DB_SCHEMAS = public), storage, graphql_public, xxx

supabaseClient.js

1
export const supabase = createClient<Database>(supabaseUrl, supabaseAnonKey, {
2
   db: {
3
     schema: 'xxx'
4
   },

未解决 denied for schema xxx

获取所有表/表中的字段属性

创建 database functions

1
create or replace function get_tables()
2
 returns table (table_name text)
3
 language plpgsql
4
 as $$
5
 begin
6
   return query
7
   select t.table_name::text
8
   from information_schema.tables t
9
   where t.table_schema = 'public'
10
   and t.table_type = 'BASE TABLE';
11
 end;
12
 $$;

1
create or replace function get_table_columns(p_table_name text)
2
 returns table (
3
   column_name text,
4
   data_type text,
5
   is_nullable boolean,
6
   column_default text
7
 )
8
 language plpgsql
9
 as $$
10
 begin
11
   return query
12
   select
13
     c.column_name::text,
14
     c.data_type::text,
15
     c.is_nullable::boolean,
16
     c.column_default::text
17
   from information_schema.columns c
18
   where c.table_schema = 'public'
19
   and c.table_name = p_table_name;
20
 end;
21
 $$;

展开收起

通过 rpc 调用 await supabase.rpc('get_tables')、await supabase.rpc('get_table_columns', { p_table_name: 'your_table_name' })

小结#

解放后端：Supabase 将 PostgreSQL、自动生成的 REST/GraphQL API、Auth、Storage、Realtime 等能力封装好，让前端直接对接数据库和云函数，不依赖后端。

快速迭代：通过 Supabase Studio 可视化建表，前端可自主搭建 CRUD 功能模块，提高开发速度。

可扩展：需要更复杂的业务逻辑，还可以用 Edge Functions 来实现补丁功能。

跟着卡哥学算法Day 51：图论part2 岛屿问题

Thu, 03 Apr 2025 00:00:00 GMT

99. 岛屿数量#

题目描述#

题目描述：

给定一个由 1（陆地）和 0（水）组成的矩阵，你需要计算岛屿的数量。岛屿由水平方向或垂直方向上相邻的陆地连接而成，并且四周都是水域。你可以假设矩阵外均被水包围。

输入描述：

第一行包含两个整数 N, M，表示矩阵的行数和列数。

后续 N 行，每行包含 M 个数字，数字为 1 或者 0。

输出描述：

输出一个整数，表示岛屿的数量。如果不存在岛屿，则输出 0。

输入示例：

输出示例：

提示信息

alt

根据测试案例中所展示，岛屿数量共有 3 个，所以输出 3。

数据范围：

1 <= N, M <= 50

解题思路#

给定一个由’1’（陆地）和’0’（水）组成的二维网格，需要计算其中岛屿的数量。岛屿的定义是被水包围的、通过水平或垂直方向相邻连接的陆地区域

所有连在一起的’1’算作一个岛屿，而单独的’1’或者被’0’分隔开的’1’群各自算作不同的岛屿

好的，我现在要解决“岛屿数量”这个问题。首先，我得弄清楚题目要求。题目是给定一个由’1’（陆地）和’0’（水）组成的二维网格，需要计算其中岛屿的数量。岛屿的定义是被水包围的、通过水平或垂直方向相邻连接的陆地区域。也就是说，所有连在一起的’1’算作一个岛屿，而单独的’1’或者被’0’分隔开的’1’群各自算作不同的岛屿。

首先，我需要想怎么遍历这个二维网格。常见的做法是使用深度优先搜索（DFS）或者广度优先搜索（BFS）。这两种方法都能遍历整个网格，当遇到一个’1’时，就将所有与之相连的’1’都标记为已访问，这样就不会重复计算同一个岛屿。

比如，上述图片中，共有三个岛屿：

左上角的四个’1’组成一个岛屿
中间的一个’1’是一个岛屿
右下角的两个’1’是第三个岛屿

使用深搜或广搜：当遇到一个’1’时，计数器加一，再将所有与之相连的’1’都标记为已访问，这样就不会重复计算同一个岛屿

方法思路

遍历网格：逐个检查每个格子
发现陆地：当遇到’1’时，表示发现一个新岛屿，计数器加 1
标记已访问：通过 DFS 将当前岛屿的所有相连陆地标记，当遇到已标记过的陆地节点和海洋节点直接跳过（避免重复计数）
递归边界：确保搜索时行和列不越界，且仅处理未被访问的陆地

需要初始化地图，然后使用深度优先搜索（DFS）或广度优先搜索（BFS）来遍历

代码#

1
function numIslands(grid) {
2
  if (!grid?.length) return 0
3

4
  const rows = grid.length
5
  const cols = grid[0].length
6

7
  const directions = [
8
    [0, 1],
9
    [1, 0],
10
    [0, -1],
11
    [-1, 0],
12
  ]
13
  const visited = new Array(rows).fill().map(() => new Array(cols).fill(false)) // 用于标记哪些节点已经访问过，避免重复访问
14

15
  let isLandCount = 0
16

17
  // 递归访问当前节点的所有相邻陆地节点
18
  const dfs = (x, y) => {
19
    // 每次递归调用时，标记当前节点为已访问
20
    visited[x][y] = true
21

22
    for (const [dx, dy] of directions) {
23
      const nextX = dx + x
24
      const nextY = dy + y
25
      if (
26
        nextX >= 0 &&
27
        nextX < rows &&
28
        nextY >= 0 &&
29
        nextY < cols &&
30
        !visited[nextX][nextY] &&
31
        grid[nextX][nextY] === '1'
32
      ) {
33
        dfs(nextX, nextY)
34
      }
35
    }
36
  }
37
  for (let i = 0; i < rows; i++) {
38
    for (let j = 0; j < cols; j++) {
39
      if (!visited[i][j] && grid[i][j] === '1') {
40
        isLandCount++
41
        dfs(i, j)
42
      }
43
    }
44
  }
45
  return isLandCount
46
}

展开收起

ACM 格式

1
const r1 = require('readline').createInterface({ input: process.stdin })
2
// 创建readline接口
3
let iter = r1[Symbol.asyncIterator]()
4
// 创建异步迭代器
5
const readline = async () => (await iter.next()).value
6

7
let graph
8
let N, M
9
let visited
10
let result = 0
11
const dir = [
12
  [0, 1],
13
  [1, 0],
14
  [0, -1],
15
  [-1, 0],
16
]
17

18
// 读取输入，初始化地图
19
const initGraph = async () => {
20
  let line = await readline()
21
  ;[N, M] = line.split(' ').map(Number)
22
  graph = new Array(N).fill(0).map(() => new Array(M).fill(0))
23
  visited = new Array(N).fill(false).map(() => new Array(M).fill(false))
24

25
  for (let i = 0; i < N; i++) {
26
    line = await readline()
27
    line = line.split(' ').map(Number)
28
    for (let j = 0; j < M; j++) {
29
      graph[i][j] = line[j]
30
    }
31
  }
32
}
33

34
/**
35
 * @description: 从节点x,y开始深度优先遍历
36
 * @param {*} graph 是地图，也就是一个二维数组
37
 * @param {*} visited 标记访问过的节点，不要重复访问
38
 * @param {*} x 表示开始搜索节点的下标
39
 * @param {*} y 表示开始搜索节点的下标
40
 * @return {*}
41
 */
42
const dfs = (graph, visited, x, y) => {
43
  for (let i = 0; i < 4; i++) {
44
    const nextx = x + dir[i][0]
45
    const nexty = y + dir[i][1]
46
    if (nextx < 0 || nextx >= N || nexty < 0 || nexty >= M) continue
47
    if (!visited[nextx][nexty] && graph[nextx][nexty] === 1) {
48
      visited[nextx][nexty] = true
49
      dfs(graph, visited, nextx, nexty)
50
    }
51
  }
52
}
53

54
;(async function () {
55
  // 读取输入，初始化地图
56
  await initGraph()
57

58
  // 统计岛屿数
59
  for (let i = 0; i < N; i++) {
60
    for (let j = 0; j < M; j++) {
61
      if (!visited[i][j] && graph[i][j] === 1) {
62
        // 标记已访问
63
        visited[i][j] = true
64

65
        // 遇到没访问过的陆地，+1
66
        result++
67

68
        // 深度优先遍历，将相邻陆地标记为已访问
69
        dfs(graph, visited, i, j)
70
      }
71
    }
72
  }
73
  console.log(result)
74
})()

展开收起

99. 岛屿数量广度优先搜索#

将上述问题改为广搜，主要在于 bfs 函数的改动

广搜和深搜的核心目标是相同的：找到所有相连的陆地并标记为已访问

1
const bfs = (x, y) => {
2
  const queue = []
3
  queue.push([x, y])
4
  visited[x][y] = true
5

6
  while (queue.length > 0) {
7
    const [curX, curY] = queue.shift()
8

9
    for (const [dx, dy] of directions) {
10
      const nextX = curX + dx
11
      const nextY = curY + dy
12

13
      if (
14
        nextX >= 0 &&
15
        nextX < rows &&
16
        nextY >= 0 &&
17
        nextY < cols &&
18
        !visited[nextX][nextY] &&
19
        grid[nextX][nextY] === '1'
20
      ) {
21
        queue.push([nextX, nextY])
22
        visited[nextX][nextY] = true
23
      }
24
    }
25
  }
26
}

展开收起

bfs 函数用于从当前节点开始，广度优先搜索所有相邻的陆地节点
使用队列存储当前需要访问的节点
每次从队列中取出一个节点，检查其四个方向的邻接节点
如果邻接节点是未访问的陆地，将其加入队列并标记为已访问

bfs 和 dfs 代码区别#

以示例为例

DFS：
- 从起始点出发，优先沿着一个方向深入搜索，直到无法继续，再回溯到上一个节点
- 搜索路径：(0,0) → (0,1) → (1,1) → (1,0)
BFS：
- 从起始点出发，按层次逐步扩展搜索范围
- 搜索路径：(0,0) → (0,1) → (1,0) → (1,1)

岛屿的最大面积#

之前已经计算出岛屿数量，现在需要进一步找到其中最大的岛屿面积

可以在计算岛屿数量的基础上稍作调整，核心思路保持一致，主要新增面积统计功能

与岛屿数量的差异#

新增面积统计：每次发现一个岛屿时，需计算其面积，并更新最大面积
逻辑调整
- 初始化当前岛屿面积 count = 0
- 每扩展一个相邻陆地节点，面积加 1
- 完成一个岛屿的遍历后，比较并更新全局最大值

其余部分（如网格遍历、队列操作、边界检查、标记已访问节点）与原问题完全一致

1
function maxAreaOfIsland(grid) {
2
  if (!grid || grid.length === 0) return 0
3

4
  const rows = grid.length
5
  const cols = grid[0].length
6
  const directions = [
7
    [0, 1], // 右
8
    [1, 0], // 下
9
    [0, -1], // 左
10
    [-1, 0], // 上
11
  ]
12

13
  let maxArea = 0
14

15
  // 深度优先搜索函数
16
  const dfs = (x, y) => {
17
    if (x < 0 || x >= rows || y < 0 || y >= cols || grid[x][y] === 0) {
18
      return 0
19
    }
20

21
    grid[x][y] = 0 // 标记为已访问
22
    let area = 1 // 当前节点的面积为 1
23

24
    for (const [dx, dy] of directions) {
25
      area += dfs(x + dx, y + dy) // 累加相邻陆地的面积
26
    }
27

28
    return area
29
  }
30

31
  // 遍历整个网格
32
  for (let i = 0; i < rows; i++) {
33
    for (let j = 0; j < cols; j++) {
34
      if (grid[i][j] === 1) {
35
        const area = dfs(i, j) // 计算当前岛屿的面积
36
        maxArea = Math.max(maxArea, area) // 更新最大面积
37
      }
38
    }
39
  }
40

41
  return maxArea
42
}

展开收起

跟着卡哥学算法Day 50：图论理论基础 & part1

Wed, 02 Apr 2025 00:00:00 GMT

图#

基本概念#

二维坐标中，两点可以连成线，多个点连成的线就构成了图。

图可以是一个节点，或没有节点（空图）

图的种类#

有向图

图的边有方向
无向图

图的边无方向
加权有向图

有向图并且边是有权值的
加权无向图

度#

无向图：连接该节点的边数就是度

image1

节点 4 的度为 5，其他节点度都是 3
有向图
- 入度：指向该节点的边数
- 出度：从该节点出发的边数
image2

节点 1 入度为 0，出度为 2

连通图/强连通图#

无向图所有节点都可以到达，称为连通图，否则为非联通图

如 image1，所有节点都可以到达，所以是连通图

image3

如图就是非连通图
有向图任何两个节点是可以相互到达，称为强连通图，否则为非强连通图

如 image2，节点 1 能到节点 2，但节点 2 无法到达节点 1，所以是非强连通图

image4

这个才是强连通图

连通分量/强连通分量#

无向图的极大连通子图称为该图的一个连通分量

如 image3 中
- 节点 1、2、5 构成的子图就是该无向图的一个连通分量
- 节点 3、4、6 构成的子图也是该无向图的另一个连通分量
- 节点 3、4 构成的子图不是连通分量，因为必须是极大连通子图
有向图的极大强连通子图称为该图的一个强连通分量

image5
- 节点 1、2、3、4、5 构成的子图就是该有向图的一个强连通分量，强连通图、极大
- 节点 6、7、8 构成的子图不是该有向图的一个强连通分量，不是强连通图
- 节点 1、3、5 构成的子图不是该有向图的一个强连通分量，不是极大连通子图

图的构造#

如何使用代码表示一个图？

三种方法：邻接表、列阶矩阵、类

类 “朴素存储”

有 n 条边就定义数组长度为 n*2

如图 5，图中有 8 条边，定义 8*2 的数组
```
1
let graphArr = [
2
  [6, 7],
3
  [6, 8],
4
  [7, 8],
5
  [1, 2],
6
  [2, 5],
7
  [5, 4],
8
  [4, 3],
9
  [3, 1],
10
]
```
数组第一行 6 7，表示节点 6 指向节点 7，以此类推

可以使用数组、map 或类表示
- 优点：直观，节点与节点的关系都很容易理解
- 缺点：不方便查找节点的关系，如节点 1 和节点 6 是否相连，需要全部遍历深搜和广搜都不会使用这种存储方式
邻接矩阵

用一个二维数组表示图的边，从节点的角度表示图，有多少节点就申请多大的二维数组

如图 5，需要申请 8*8 的二维数组

例如： grid[2][5] = 6，表示节点 2 连接节点 5 为有向图，节点 2 指向节点 5，边的权值为 6
- 节点 i 和节点 j 相连，graph[i][j] = true
- 节点 i 和节点 j 不相连，graph[i][j] = false
邻接矩阵的优点：
- 表达方式简单，易于理解
- 检查任意两个顶点间是否存在边的操作非常快
- 适合稠密图，在边数接近顶点数平方的图中，邻接矩阵是一种空间效率较高的表示方法。
缺点：
- 遇到稀疏图，会导致申请过大的二维数组造成空间浪费且遍历边的时候需要遍历整个 n * n 矩阵，造成时间浪费
邻接表

使用数组+链表表示，从边的角度表示图，有多少边才会申请对应大小的链表

image6
- 节点 1 指向节点 3 和节点 5
- 节点 2 指向节点 4、节点 3、节点 5
- 节点 3 指向节点 4
- 节点 4 指向节点 1
邻接表的优点：
- 对于稀疏图的存储，只需要存储边，空间利用率高
- 遍历节点连接情况相对容易
缺点：
- 检查任意两个节点间是否存在边，效率相对低，需要 O(V)时间，V 表示某节点连接其他节点的数量。
- 实现相对复杂，不易理解

示例：

1
let n = 5 // 节点数
2
let m = 5 // 边数
3
let edges = [
4
  [1, 3],
5
  [3, 5],
6
  [1, 2],
7
  [2, 4],
8
  [4, 5],
9
]
10

11
// 邻接矩阵构建
12
let graph = new Array(n + 1).fill(0).map(() => new Array(n + 1).fill(0))
13
for (let i = 0; i < m; i++) {
14
  let [x, y] = edges[i]
15
  graph[x][y] = 1
16
}
17
console.log('邻接矩阵:', graph)
18

19
// 邻接表构建
20
let graph1 = new Array(n + 1).fill(0).map(() => [])
21
for (let i = 0; i < m; i++) {
22
  let [x, y] = edges[i]
23
  graph1[x].push(y)
24
}
25
console.log('邻接表:', graph1)

展开收起

输出结果如下：

1
// 邻接矩阵
2
graph = [
3
  [0, 0, 0, 0, 0, 0],
4
  [0, 0, 0, 1, 0, 0],
5
  [0, 0, 0, 0, 1, 0],
6
  [0, 0, 0, 0, 0, 1],
7
  [0, 0, 0, 0, 0, 1],
8
  [0, 0, 0, 0, 0, 0],
9
]
10
// 邻接表
11
graph = [[], [3, 2], [4], [5], [5], []]

图的遍历方式#

深度优先搜索 dfs
广度优先搜索 bfs

如二叉树的遍历方式：

递归遍历，dfs
层序遍历，bfs

深度优先搜索#

dfs 和 bfs 区别#

广度优先搜索（BFS）从根节点开始，沿着树的宽度遍历所有节点，然后向下深入
深度优先搜索（DFS）从根节点开始，沿着树的深度遍历尽可能深的节点，然后回溯

dfs 搜索过程#

回忆下二叉树的深度搜索过程：

以前序遍历为例：

从根节点开始
- 首先访问根节点，记录或处理该节点的值
递归访问左子树
- 如果当前节点有左子节点，则递归进入左子树
- 在左子树中，重复步骤 1 和步骤 2，直到到达左子树的最底部（即左叶子节点）
回溯并访问右子树
- 当左子树访问完成后，回溯到当前节点
- 如果当前节点有右子节点，则递归进入右子树
- 在右子树中，重复步骤 1 和步骤 2
重复以上步骤
- 按照“先左后右”的顺序，递归访问每个节点的左子树和右子树
- 直到所有节点都被访问完

那么在图中的 dfs 过程是怎样的？

如图 1 中，搜索从节点 1 到节点 6 的所有路径，深搜的过程如下：

从节点 1 开始，访问节点 1，记录路径 [1]
访问节点 1 的邻接节点 2，记录路径 [1, 2]
访问节点 2 的邻接节点 3，记录路径 [1, 2, 3]
访问节点 3 的邻接节点 4，记录路径 [1, 2, 3, 4]
访问节点 4 的邻接节点 5，记录路径 [1, 2, 3, 4, 5]
访问节点 5 的邻接节点 6，记录路径 [1, 2, 3, 4, 5, 6]
到达节点 6，记录路径 [1, 2, 3, 4, 5, 6]，结束搜索
回溯到节点 5，继续搜索节点 5 的其他邻接节点，直到搜索完所有路径 …

因此，dfs 的过程关键就亮点：

搜索方向，认准一个方向，直到碰壁，再换方向继续搜索
回溯，搜索完一个方向后，回到上一个节点，继续搜索其他方向

代码结构#

dfs 的代码结构也就是回溯算法的代码结构：

1
function dfs(参数) {
2
    if (终止条件) {
3
        存放结果;
4
        return;
5
    }
6

7
    for (选择：本节点所连接的其他节点) {
8
        处理节点;
9
        dfs(图，选择的节点); // 递归
10
        回溯，撤销处理结果
11
    }
12
}

深搜三部曲#

确认递归函数、参数

1
function dfs(参数) {}

一般需要二维数组保存所有路径，一维数组保存单一路径，定义全局变量即可

1
let result = [] // 保存符合条件所有路径
2
let path = [] // 保存单一路径
3
function dfs(参数) {}

确认终止条件

1
if (终止条件) {
2
  result.push([...path]) // 复制路径
3
  return
4
}

处理目前搜索节点出发的路径

for 循环遍历目前搜索节点所连接的其他节点

1
for (选择：本节点所连接的其他节点) {
2
  path.push(选择的节点) // 处理节点
3
  dfs(图，选择的节点) // 递归
4
  path.pop() // 回溯，撤销处理结果
5
}

所有可达路径#

题目链接

题目描述#

【题目描述】

给定一个有 n 个节点的有向无环图，节点编号从 1 到 n。请编写一个程序，找出并返回所有从节点 1 到节点 n 的路径。每条路径应以节点编号的列表形式表示。

【输入描述】

第一行包含两个整数 N，M，表示图中拥有 N 个节点，M 条边

后续 M 行，每行包含两个整数 s 和 t，表示图中的 s 节点与 t 节点中有一条路径

【输出描述】

输出所有的可达路径，路径中所有节点的后面跟一个空格，每条路径独占一行，存在多条路径，路径输出的顺序可任意。

如果不存在任何一条路径，则输出 -1。

注意输出的序列中，最后一个节点后面没有空格！例如正确的答案是 1 3 5,而不是 1 3 5， 5 后面没有空格！

【输入示例】

【输出示例】

提示信息

alt

用例解释：

有五个节点，其中的从 1 到达 5 的路径有两个，分别是 1 -> 3 -> 5 和 1 -> 2 -> 4 -> 5。

因为拥有多条路径，所以输出结果为：

或

都算正确。

数据范围：

图中不存在自环
图中不存在平行边
1 <= N <= 100
1 <= M <= 500

解题思路#

相似题目：797.所有可能的路径

图的存储#

邻接矩阵存储

二维数组 n * n 表示图结构

本题节点标号从 1 开始，为了节点标号与下标对齐，定义 n + 1 * n + 1 表示图结构

1
let graph = new Array(n + 1).fill().map(() => new Array(n + 1).fill(0))

输入 m 条边，构造方式如下

1
while (m--) {
2
  let [x, y] = readline().split(' ').map(Number)
3
  // 1表示节点x指向节点y
4
  graph[x][y] = 1
5
}

邻接表存储

数组 + 链表，以边的数量表示图，有多少边申请对应大小的链表

构造数组，数组捏的元素是链表
```
1
let graph = new Array(N + 1).fill(0).map(() => new Array())
```
数入 m 个边，构造方式如下
```
1
while (m--) {
2
  let [x, y] = readline().split(' ').map(Number)
3
  graph[x].add(y)
4
}
```

深度优先搜索#

深搜三部曲：

确定递归函数、参数
- 参数 1：当前遍历节点 x
- 参数 2：终点 n，当 x===n 时搜索结束
定义全局变量 result 和 path
```
1
let result = []
2
let path = []
3
function dfs(x, n) {}
```
确定终止条件

当目前遍历的节点是最有一个节点 n 的时候，就找到了一条从出发点到终止点的路径
```
1
if (x === n) {
2
  result.push([...path])
3
  return
4
}
```

处理目前搜索节点出发的路径

遍历目前搜索节点 x 的所有邻接节点，递归调用 dfs 函数

1
for (let i = 1; i <= n; i++) {
2
  // 遍历目前搜索节点 x 的所有邻接节点
3
  if (graph[x][i] === 1) {
4
    // 邻接节点存在边
5
    path.push(i) // 遍历到的节点加入到路径
6
    dfs(i, n) // 递归调用 dfs
7
    path.pop() // 回溯，撤销处理结果
8
  }
9
}

代码#

ACM 格式

797. 所有可能的路径代码如下

1
var allPathsSourceTarget = function (graph) {
2
  const result = []
3
  const path = []
4
  const dfs = (node) => {
5
    path.push(node) // 将当前节点加入路径
6

7
    // 如果到达目标节点（最后一个节点），将路径加入结果
8
    if (node === graph.length - 1) {
9
      result.push([...path])
10
      path.pop() // 回溯，撤销当前节点
11
      return
12
    }
13

14
    // 遍历当前节点的所有邻接节点
15
    for (let i = 0; i < graph[node].length; i++) {
16
      dfs(graph[node][i]) // 递归访问邻接节点
17
    }
18
    path.pop() // 回溯，撤销当前节点
19
  }
20

21
  dfs(0)
22

23
  return result
24
}

展开收起

path.push(node) 放在递归调用之前，因为当前节点是路径的一部分，必须在递归调用之前加入路径
path.pop() 放在递归调用之后，是为了回溯到上一个节点，撤销当前节点的处理
如果将 path.push(node) 放在循环中，会导致路径中出现重复的节点，路径结果不正确

示例：

1
const graph = [
2
  [1, 2], // 节点 0 指向节点 1 和节点 2
3
  [3], // 节点 1 指向节点 3
4
  [3], // 节点 2 指向节点 3
5
  [], // 节点 3 无邻接节点
6
]

上述代码最终输出结果为：

1
[
2
  [0, 1, 3],
3
  [0, 2, 3]
4
]

如果将 path.push(node) 放在循环中，会导致路径中出现重复的节点，路径结果不正确

1
for (const neighbor of graph[node]) {
2
  path.push(node); // 错误：在循环中加入当前节点
3
  dfs(neighbor);
4
  path.pop(); // 回溯，撤销当前节点
5
}

输出为：

1
[
2
  [0, 0, 1, 3],
3
  [0, 0, 2, 3]
4
]

广度优先搜索#

使用场景#

寻找最短路径：在一个图中，从某个节点到另一个节点的最短路径。

在图中寻找最短路径，从起始点为中心一圈一圈进行搜索，一旦遇到终点，记录之前的路径就是最短路径。

广搜的过程#

回忆二叉树的层序遍历：

从根节点开始：
- 首先访问根节点，将其加入队列
- 队列用于存储当前层的节点，并逐层处理
逐层访问节点
- 从队列中取出一个节点，记录或处理该节点的值
- 将该节点的所有子节点（或邻接节点）加入队列
重复以上步骤
- 按照队列的顺序，依次处理每个节点
- 每次从队列中取出一个节点，访问其子节点，并将子节点加入队列
终止条件
- 当队列为空时，说明所有节点都已被访问，搜索结束

对于图的广度优先搜索

核心思想是从起点开始，按距离递增的顺序向外探索，确保最先到达终点的路径一定是最短路径

bfs 的“一圈一圈”搜索本质是逐层探索，距离起点越近的节点越先被访问。

代码框架#

用什么容器来遍历元素？

队列：先进先出，加入元素和弹出元素的顺序没有改变，保证每一圈都是一个方向转
栈：后进先出，加入元素和弹出元素的顺序相反，第一圈顺时针，第二圈逆时针…

1
const directions = [
2
  [0, 1], // 右
3
  [1, 0], // 下
4
  [-1, 0], // 上
5
  [0, -1], // 左
6
]
7

8
// grid 是地图（二维数组）
9
// visited 是标记访问过的节点的二维数组
10
// x, y 是起始节点的坐标
11
function bfs(grid, visited, x, y) {
12
  const rows = grid.length
13
  const cols = grid[0].length
14

15
  const queue = [] // 定义队列
16
  queue.push([x, y]) // 起始节点加入队列
17
  visited[x][y] = true // 标记起始节点为已访问
18

19
  while (queue.length > 0) {
20
    const [curX, curY] = queue.shift() // 从队列中取出当前节点
21

22
    // 遍历当前节点的四个方向
23
    for (const [dx, dy] of directions) {
24
      const nextX = curX + dx
25
      const nextY = curY + dy
26

27
      // 检查是否越界
28
      if (nextX < 0 || nextX >= rows || nextY < 0 || nextY >= cols) {
29
        continue
30
      }
31

32
      // 检查是否已经访问过
33
      if (!visited[nextX][nextY]) {
34
        queue.push([nextX, nextY]) // 将新节点加入队列
35
        visited[nextX][nextY] = true // 标记为已访问
36
      }
37
    }
38
  }
39
}

展开收起

方向数组 directions
- 用于表示四个方向（右、下、上、左）的坐标偏移量。
队列初始化
- 使用 queue 存储当前需要访问的节点
- 起始节点 (x, y) 加入队列，并标记为已访问
BFS 主循环
- 每次从队列中取出一个节点，检查其四个方向的邻接节点
- 如果邻接节点未越界且未访问过，则将其加入队列，并标记为已访问
终止条件
- 当队列为空时，说明所有可达节点都已访问，搜索结束

跟着卡哥学算法Day 49：单调栈 part2

Tue, 01 Apr 2025 00:00:00 GMT

42. 接雨水 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定 n 个非负整数表示每个宽度为 1 的柱子的高度图，计算按此排列的柱子，下雨之后能接多少雨水。

示例 1：

alt text

输入：height = [0,1,0,2,1,0,1,3,2,1,2,1]
输出：6
解释：上面是由数组 [0,1,0,2,1,0,1,3,2,1,2,1] 表示的高度图，在这种情况下，可以接 6 个单位的雨水（蓝色部分表示雨水）。

示例 2：

输入：height = [4,2,0,3,2,5]
输出：9

解题思路#

对每个柱子 i，找出其左侧最高柱子 leftMax 和右侧最高柱子 rightMax，当前柱子积水量取决于其左右两边最高柱子的较小值减去当前柱子的高度

1
Math.min(leftMax, rightMax) - height[i]

暴力法#

遍历每个位置 i，找到左边最大值和右边最大值，计算每个位置的积水量，累加总和。

左边最大值：从 0 到 i-1 中的最大值
右边最大值：从 i+1 到末尾的最大值
计算每个位置的积水量

1
var trap = function (height) {
2
  const len = height.length
3
  let total = 0
4

5
  for (let i = 1; i < len - 1; i++) {
6
    let leftMax = 0
7
    let rightMax = 0
8
    for (let j = 0; j < i; j++) {
9
      leftMax = Math.max(leftMax, height[j])
10
    }
11
    for (let j = i; j < len; j++) {
12
      rightMax = Math.max(rightMax, height[j])
13
    }
14

15
    const h = Math.min(leftMax, rightMax) - height[i]
16
    if (h > 0) total += h // 注意只有h大于零的时候，在统计到总和中
17
  }
18
  return total
19
}

展开收起

暴力法：O(n^2)

双指针优化#

是对暴力法的优化，暴力法需要得到柱子 i 两边的最高高度 leftMax 和 rightMax
maxLeft 数组用于记录每个柱子 i 左边的最高高度

从左到右遍历，每个柱子的左边最大高度是：
- 当前柱子的高度 height[i] 和
- 它左边柱子的最大高度 maxLeft[i - 1] 的较大值
maxRight 数组用于记录每个柱子 i 右边的最高高度

从右到左遍历，每个柱子的右边最大高度是：
- 当前柱子的高度 height[i] 和
- 它右边柱子的最大高度 maxRight[i + 1] 的较大值

1
//双指针
2
var trap = function (height) {
3
  const len = height.length
4
  if (len <= 2) return 0 // 如果柱子数量小于等于2，无法形成积水，直接返回0
5

6
  const maxLeft = new Array(len).fill(0) // 用于记录每个柱子左边的最大高度
7
  const maxRight = new Array(len).fill(0) // 用于记录每个柱子右边的最大高度
8

9
  // 记录每个柱子左边柱子的最大高度
10
  maxLeft[0] = height[0] // 第一个柱子的左边最大高度就是它自己
11
  for (let i = 1; i < len; i++) {
12
    maxLeft[i] = Math.max(height[i], maxLeft[i - 1]) // 当前柱子的左边最大高度是它左边柱子的最大高度和它自身高度的较大值
13
  }
14

15
  // 记录每个柱子右边柱子的最大高度
16
  maxRight[len - 1] = height[len - 1] // 最后一个柱子的右边最大高度就是它自己
17
  for (let i = len - 2; i >= 0; i--) {
18
    maxRight[i] = Math.max(height[i], maxRight[i + 1]) // 当前柱子的右边最大高度是它右边柱子的最大高度和它自身高度的较大值
19
  }
20

21
  // 求和
22
  let sum = 0 // 用于记录总的积水量
23
  for (let i = 0; i < len; i++) {
24
    let count = Math.min(maxLeft[i], maxRight[i]) - height[i] // 当前柱子上方的积水量是左右两边最大高度的较小值减去当前柱子的高度
25
    if (count > 0) sum += count // 如果积水量大于0，则累加到总积水量中
26
  }
27

28
  return sum // 返回总积水量
29
}

展开收起

单调栈#

与暴力法不同，单调栈是按照行来计算积水量
栈头到栈尾是递增的
- 一旦发现添加的柱子高度大于栈头元素，则出现凹槽
- 此时栈头元素就是凹槽的底部，栈头第二个元素就是凹槽的左柱子，当前元素就是凹槽的右柱子
遇到相同高度的柱子，则弹出旧的，加入新的，因为要求宽度的时候，需要有最右边的柱子来计算

处理逻辑：

当前遍历柱子高度小于栈顶元素高度 height[i] < height[stack.top()]

当前元素入栈
当前遍历柱子高度等于栈顶元素高度 height[i] == height[stack.top()]
- 需要先将旧元素出栈
- 新元素再入栈

当前遍历柱子高度大于栈顶元素高度 height[i] > height[stack.top()]

出现凹槽

alt text

弹出栈顶元素，弹出的元素就是凹槽的底部
弹出栈顶第二个元素，弹出的元素就是凹槽的左边柱子
当前元素就是凹槽的右边柱子

1
const min = stack.pop() // 弹出栈顶元素，凹槽底部
2
const left = stack[stack.length - 1] // 栈顶第二个元素，凹槽左边柱子
3
// 当前槽的高度
4
const h =
5
  Math.min(
6
    height[i],
7
    height[left] // 右边柱子和栈顶元素的较小值
8
  ) - height[mid]
9
// 当前槽的宽度 = 凹槽右边的下标 - 凹槽左边的下标 - 1
10
const w = i - left - 1
11
sum = h * w

1
var trap = function (height) {
2
  const len = height.length
3
  let total = 0
4
  const stack = []
5
  stack.push(0)
6

7
  for (let i = 1; i < len; i++) {
8
    while (stack.length && height[i] > height[stack[stack.length - 1]]) {
9
      const mid = stack.pop()
10
      if (stack.length) {
11
        const left = stack[stack.length - 1]
12
        const h = Math.min(height[i], height[left]) - height[mid]
13
        const w = i - stack[stack.length - 1] - 1 // 注意减一，只求中间宽度
14
        total += h * w
15
      }
16
    }
17
    stack.push(i)
18
  }
19

20
  return total
21
}

展开收起

84.柱状图中最大的矩形 🌟🌟#

力扣链接 🌟🌟

题目描述#

给给定 n 个非负整数，用来表示柱状图中各个柱子的高度。每个柱子彼此相邻，且宽度为 1 。

求在该柱状图中，能够勾勒出来的矩形的最大面积。

alt text

1 <= heights.length <=10^5
0 <= heights[i] <= 10^4

解题思路#

暴力法#

对每个柱子 i，向左右扩展找到第一个比它小的左边界 left 和右边界 right，当前柱子能形成的最大矩形面积为

1
var largestRectangleArea = function (heights) {
2
  const n = heights.length
3

4
  let sum = 0
5

6
  for (let i = 0; i < n; i++) {
7
    let left = i - 1
8
    while (left >= 0 && heights[left] >= heights[i]) left--
9
    let right = i + 1
10
    while (right < n && heights[right] >= heights[i]) right++
11

12
    const w = right - left - 1
13
    sum = Math.max(sum, heights[i] * w)
14
  }
15
  return sum
16
}

展开收起

双指针优化#

预处理每个柱子的左边界 left 和右边界 right，利用跳跃指针快速找到边界，避免重复遍历

1
function largestRectangleAreaOptimized(heights) {
2
  const n = heights.length
3
  if (n === 0) return 0
4
  const left = new Array(n).fill(-1)
5
  const right = new Array(n).fill(n)
6

7
  // 预处理左边界
8
  for (let i = 1; i < n; i++) {
9
    let p = i - 1
10
    while (p >= 0 && heights[p] >= heights[i]) p = left[p]
11
    left[i] = p
12
  }
13

14
  // 预处理右边界
15
  for (let i = n - 2; i >= 0; i--) {
16
    let p = i + 1
17
    while (p < n && heights[p] >= heights[i]) p = right[p]
18
    right[i] = p
19
  }
20

21
  // 计算最大面积
22
  let maxArea = 0
23
  for (let i = 0; i < n; i++) {
24
    const width = right[i] - left[i] - 1
25
    maxArea = Math.max(maxArea, heights[i] * width)
26
  }
27
  return maxArea
28
}

展开收起

单调栈#

区别：单调递减栈（栈头到栈底的顺序从大到小）
遇到比栈顶小的柱子时，弹出栈顶并计算以该高度为高的矩形面积，左边界为新的栈顶，右边界为当前索引

1
function largestRectangleAreaMonotonicStack(heights) {
2
  heights = [0, ...heights, 0] // 添加哨兵简化代码
3
  let stack = []
4
  let maxArea = 0
5
  for (let i = 0; i < heights.length; i++) {
6
    while (stack.length && heights[i] < heights[stack[stack.length - 1]]) {
7
      const top = stack.pop()
8
      const left = stack[stack.length - 1]
9
      const width = i - left - 1
10
      maxArea = Math.max(maxArea, heights[top] * width)
11
    }
12
    stack.push(i)
13
  }
14
  return maxArea
15
}

展开收起

跟着卡哥学算法Day 48：单调栈概念 & part1

Mon, 31 Mar 2025 00:00:00 GMT

单调栈#

单调栈是一种特殊的栈结构，常用于解决下一/前一个更大（小）元素相关的问题，能在 O(n)时间复杂度内完成处理，适用于区间性质的计算，如柱状图最大矩形面积、每日温度、接雨水等问题。

单调栈原理#

本质：空间换时间

单调栈的原理是通过维护一个单调递增或递减的栈（记录已经遍历过的元素），来快速找到当前元素的前一个或下一个更大（小）元素

单调递增栈：栈内元素从栈顶到栈底递增（用于求下一/前一个更大元素）
单调递减栈：栈内元素从栈顶到栈底递减（用于求下一/前一个更小元素）

当新元素入栈时，会不断弹出不符合单调性的元素，从而保持栈的单调性

739. 每日温度 🌟🌟#

力扣链接 🌟🌟

题目描述#

请根据每日气温列表，重新生成一个列表。对应位置的输出为：要想观测到更高的气温，至少需要等待的天数。如果气温在这之后都不会升高，请在该位置用 0 来代替。

例如，给定一个列表 temperatures = [73, 74, 75, 71, 69, 72, 76, 73]，你的输出应该是 [1, 1, 4, 2, 1, 1, 0, 0]。

提示：气温列表长度的范围是 [1, 30000]。每个气温的值的均为华氏度，都是在 [30, 100] 范围内的整数。

解题思路#

对于每天的温度 t[i]，找出未来温度比当前温度更高的最短天数

维护一个单调递增栈，存储温度索引，用于记录尚未找到更高温度的天数，默认添加第一个元素
维护结果数组 result，初始值全为 0，表示默认未来没有更高温度

主要有三个判断条件：

当前元素 t[i]大于栈顶元素 stack.pop()，弹出栈顶元素 i 再入栈，表示找到了一个更大的元素
当前元素等于栈顶元素，i 入栈
当前元素 t[i]小于栈顶元素 stack.pop()，i 入栈

代码#

1
var dailyTemperatures = function (temperatures) {
2
  const n = temperatures.length
3
  const result = new Array(n).fill(0)
4

5
  const stack = [0]
6

7
  for (let i = 1; i < n; i++) {
8
    while (
9
      stack.length &&
10
      temperatures[i] > temperatures[stack[stack.length - 1]]
11
    ) {
12
      const top = stack.pop()
13
      result[top] = i - top
14
    }
15

16
    stack.push(i)
17
  }
18

19
  return result
20
}

展开收起

496.下一个更大元素 I 🌟🌟#

力扣链接 🌟🌟

题目描述#

给你两个没有重复元素的数组 nums1 和 nums2 ，其中 nums1 是 nums2 的子集。

请你找出 nums1 中每个元素在 nums2 中的下一个比其大的值。

nums1 中数字 x 的下一个更大元素是指 x 在 nums2 中对应位置的右边的第一个比 x 大的元素。如果不存在，对应位置输出 -1 。

示例 1:

输入: nums1 = [4,1,2], nums2 = [1,3,4,2].
输出: [-1,3,-1]
解释:
对于 num1 中的数字 4 ，你无法在第二个数组中找到下一个更大的数字，因此输出 -1 。
对于 num1 中的数字 1 ，第二个数组中数字 1 右边的下一个较大数字是 3 。
对于 num1 中的数字 2 ，第二个数组中没有下一个更大的数字，因此输出 -1 。

示例 2:
输入: nums1 = [2,4], nums2 = [1,2,3,4].
输出: [3,-1]
解释:
对于 num1 中的数字 2 ，第二个数组中的下一个较大数字是 3 。
对于 num1 中的数字 4 ，第二个数组中没有下一个更大的数字，因此输出-1 。

提示：

1 <= nums1.length <= nums2.length <= 1000
0 <= nums1[i], nums2[i] <= 10^4
nums1 和 nums2 中所有整数互不相同
nums1 中的所有整数同样出现在 nums2 中

解题思路#

找到 nums1 中每个元素在 nums2 中的下一个更大元素，使用单调递增栈来解决

单调栈处理 nums2：遍历 nums2，记录每个元素右侧第一个更大的元素
哈希表记录结果：在处理 nums2 的过程中，使用哈希表记录每个元素的下一个更大元素 map(index -> value)
查询结果：遍历 nums1，根据哈希表生成结果列表

代码#

1
var nextGreaterElement = function (nums1, nums2) {
2
  const n = nums1.length
3
  const m = nums2.length
4

5
  const result = []
6
  const stack = [0]
7

8
  const map = new Map()
9
  for (let i = 1; i < m; i++) {
10
    while (stack.length && nums2[i] > nums2[stack[stack.length - 1]]) {
11
      const index = stack.pop()
12
      map.set(nums2[index], nums2[i])
13
    }
14
    stack.push(i)
15
  }
16

17
  for (let i = 0; i < n; i++) {
18
    result[i] = map.get(nums1[i]) || -1
19
  }
20

21
  return result
22
}

展开收起

503.下一个更大元素 II 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个循环数组（最后一个元素的下一个元素是数组的第一个元素），输出每个元素的下一个更大元素。数字 x 的下一个更大的元素是按数组遍历顺序，这个数字之后的第一个比它更大的数，这意味着你应该循环地搜索它的下一个更大的数。如果不存在，则输出 -1。

示例 1:

输入: [1,2,1]
输出: [2,-1,2]
解释: 第一个 1 的下一个更大的数是 2；数字 2 找不到下一个更大的数；第二个 1 的下一个最大的数需要循环搜索，结果也是 2。

提示:

1 <= nums.length <= 10^4
-10^9 <= nums[i] <= 10^9

解题思路#

类似739.每日温度，因为是循环数组，所以需要遍历两次（n * 2），使用单调栈来维护下一个更大元素

此时循环中的 i 需要取模，i % n，表示当前元素在 nums 中的位置

代码#

1
var nextGreaterElements = function (nums) {
2
  const n = nums.length
3
  const stack = [0]
4
  const result = new Array(n).fill(-1)
5

6
  for (let i = 1; i < n * 2; i++) {
7
    while (stack.length && nums[i % n] > nums[stack[stack.length - 1]]) {
8
      const index = stack.pop()
9
      result[index] = nums[i % n]
10
    }
11
    stack.push(i % n)
12
  }
13

14
  return result
15
}

展开收起

跟着卡哥学算法Day 46：动态规划part13

Sat, 29 Mar 2025 00:00:00 GMT

647. 回文子串 🌟🌟#

力扣链接 🌟🌟

题目描述#

给给定一个字符串，你的任务是计算这个字符串中有多少个回文子串。

具有不同开始位置或结束位置的子串，即使是由相同的字符组成，也会被视作不同的子串。

示例 1：

输入：“abc”
输出：3
解释：三个回文子串: “a”, “b”, “c”

示例 2：

输入：“aaa”
输出：6
解释：6 个回文子串: “a”, “a”, “a”, “aa”, “aa”, “aaa”

提示：输入的字符串长度不会超过 1000 。

解题思路#

暴力解法#

两层 for 循环，遍历区间起始位置和终止位置，然后还需要一层遍历判断这个区间是不是回文。所以时间复杂度：O(n^3)

1
var countSubstrings = function (s) {
2
  const isPalindrome = (left, right) => {
3
    while (left < right) {
4
      if (s[left] === s[right]) {
5
        left++
6
        right--
7
      } else {
8
        return false
9
      }
10
    }
11
    return true
12
  }
13

14
  let count = 0
15
  const n = s.length
16
  for (let i = 0; i < n; i++) {
17
    for (let j = i; j < n; j++) {
18
      if (isPalindrome(i, j)) count++
19
    }
20
  }
21

22
  return count
23
}

展开收起

动规解法#

动规五部曲：

确定 dp 数组及下标的含义

子序列 dp 数组的定义一般是题目求什么，就如何定义 dp 数组

如果本题 dp 数组定义为：dp[i]表示下标 i 结尾的字符串有 dp[i]个回文串，找不出 dp[i]与 dp[i - 1]的关系

查看回文串的性质

dynamic-programming-code131

因此判读一个子字符串 s[i, j]是否为回文串，依赖于子字符串 s[i+1, j-1]是否为回文串

由此，dp[i][j]表示 s[i…j]是否为回文串
确定递推公式
- s[i] 不等于 s[j]，则 s[i, j]不可能为回文串，dp[i][j] = false
- s[i] 等于 s[j]时，有以下三种情况：
  - i == j，单个字符，dp[i][j] = true
  - i + 1 == j，两个相同字符，dp[i][j] = true
  - i + 1 < j，需要判断 dp[i + 1][j - 1] 是否为回文串
```
1
if (s[i] === s[j]) {
2
  if (i === j || i + 1 === j) {
3
    dp[i][j] = true
4
    result++
5
  } else {
6
    dp[i][j] = dp[i + 1][j - 1]
7
    if (dp[i][j]) result++
8
  }
9
}
```
dp 数组初始化

dp[i][j]全部初始化为 false
确定遍历顺序

dp[i][j]由 dp[i+1][j-1]推出，因此需要从下到上遍历

举例推导 dp 数组

以输入：“aaa”，dp[i][j]数组如下：

1
dp = [
2
  [true, true, true],
3
  [false, true, true],
4
  [false, false, true],
5
]

代码#

1
var countSubstrings = function (s) {
2
  const n = s.length
3
  const dp = new Array(n).fill().map(() => new Array(n).fill(false))
4

5
  let result = 0
6
  for (let i = n - 1; i >= 0; i--) {
7
    for (let j = i; j < n; j++) {
8
      if (i === j || i + 1 === j) {
9
        if (i - j <= 1) {
10
          dp[i][j] = true
11
          result++
12
        } else {
13
          dp[i][j] = dp[i + 1][j - 1]
14
          if (dp[i][j]) result++
15
        }
16
      }
17
    }
18
  }
19
  console.log(dp)
20
  return result
21
}

展开收起

516.最长回文子序列 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个字符串 s ，找到其中最长的回文子序列，并返回该序列的长度。可以假设 s 的最大长度为 1000 。

示例 1: 输入: “bbbab” 输出: 4 一个可能的最长回文子序列为 “bbbb”。

示例 2: 输入:“cbbd” 输出: 2 一个可能的最长回文子序列为 “bb”。

提示：

1 <= s.length <= 1000
s 只包含小写英文字母

解题思路#

回文子序列不需要连续

动规五部曲：

确定 dp 数组及下标的含义

dp[i][j]表示 s[i, j]内最长的回文子序列长度
确定递推公式

两种情况：
- s[i] 等于 s[j]，子序列长度+2，dp[i][j] = dp[i + 1][j - 1] + 2
- s[i] 不等于 s[j]，同时加入 s[i]和 s[j]不能构成回文子序列，因此分别加入 s[i]和 s[j]看哪个组成的回文子序列更长，dp[i][j] = Math.max(dp[i + 1][j], dp[i][j - 1])
```
1
if (s[i] === s[j]) {
2
  dp[i][j] = dp[i + 1][j - 1] + 2
3
} else {
4
  dp[i][j] = Math.max(dp[i + 1][j], dp[i][j - 1])
5
}
```
dp 数组初始化
- 当 i===j 时，dp[i][j] = 1：单个字符的回文子序列长度为 1，必须初始化
- 当 i!=j 时，dp[i][j] = 0：初始化为 0，被覆盖
确定遍历顺序

从下到上，从左到右

举例推导 dp 数组

以 s:“cbbd” 为例，dp 数组如下：

1
dp = [
2
  [
3
    [1, 1, 2, 2],
4
    [0, 1, 2, 2],
5
    [0, 0, 1, 1],
6
    [0, 0, 0, 1],
7
  ],
8
]

代码#

1
var longestPalindromeSubseq = function (s) {
2
  const n = s.length
3
  const dp = new Array(n).fill().map(() => new Array(n).fill(0))
4

5
  for (let i = 0; i < n; i++) {
6
    dp[i][i] = 1
7
  }
8

9
  for (let i = n - 1; i >= 0; i--) {
10
    for (let j = i + 1; j < n; j++) {
11
      if (s[i] === s[j]) {
12
        dp[i][j] = dp[i + 1][j - 1] + 2
13
      } else {
14
        dp[i][j] = Math.max(dp[i + 1][j], dp[i][j - 1])
15
      }
16
    }
17
  }
18
  console.log(dp)
19

20
  return dp[0][n - 1]
21
}

展开收起

总结#

跟着卡哥学算法Day 45：动态规划part12

Fri, 28 Mar 2025 00:00:00 GMT

115.不同的子序列 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个字符串 s 和一个字符串 t ，计算在 s 的子序列中 t 出现的个数。

字符串的一个子序列是指，通过删除一些（也可以不删除）字符且不干扰剩余字符相对位置所组成的新字符串。（例如，“ACE” 是 “ABCDE” 的一个子序列，而 “AEC” 不是）

题目数据保证答案符合 32 位带符号整数范围。

dynamic-programming-code121

解题思路#

动规五部曲：

确定 dp 数组及下标的含义

dp[i][j]表示 s[0..i-1]的子序列中，t[0..j-1]出现的次数
确定递推公式

假设 s = "bagg" t = "bag"，可以看出 s 中有两个子序列等于 t：
1. 子序列 1：使用第一个 g → b(s[0]) + a(s[1]) + g(s[2]) → bag
2. 子序列 2：使用第二个 g → b(s[0]) + a(s[1]) + g(s[3]) → bag
看下过程，当处理到 s[3]（第二个 g）和 t[2]（g）时：
- 如果使用 s[3]：需要前 s[0..2](bag) 已经匹配了 t[0..1](ba)，此时已匹配上
- 不使用 s[3]：需要前 s[0..3](bagg) 已经匹配了 t[0..2](bag)，使用第一个 g 可以匹配
- 因此：1（使用） + 1（不使用但已存在）= 2 种方式
由上可知，虽然 s[3]（第二个 g）与 t[2]（g）匹配，但也可以选择不使用它，继续用前面的字符匹配，可以得出结论：
- 当 s[i-1]和 t[j-1]相等时, 需要求 s 的前面有多少个”ba” + 前面有多少个已经匹配好的”bag”，即用/不用当前字符
- 若 s[i-1]和 t[j-1]不相等, 只需要求 s 的前面有多少个已经匹配好的”bag”，即必须不用当前字符
递推公式：

当 s[i-1] === t[j-1] 时，dp[i][j] 由两部分组成：
1. 使用当前字符匹配 dp[i-1][j-1]：表示前 i-1 个字符已匹配前 j-1 个字符，现在加上 s[i-1] 完成匹配
2. 不使用当前字符匹配 dp[i-1][j]：表示即使 s[i-1] 可用，也选择忽略它，继续用前 i-1 个字符匹配前 j 个字符
两种可能相加
```
1
dp[i][j] = dp[i - 1][j - 1] + dp[i - 1][j]
```
当 s[i-1] !== t[j-1] 时,dp[i][j]只能由前面已经匹配好的子序列组成：
```
1
dp[i][j] = dp[i - 1][j]
```
dp 数组初始化
- dp[i][0] = 1（t 为空时，s 有 1 种方式匹配：删除所有字符）
- dp[0][j] = 0（j>0 时，s 为空无法匹配非空 t）
- dp[0][0] = 1
当 i=0 时，表示 s 的前 0 个字符（即空字符串），类似地 j=0 表示 t 的前 0 个字符，这时候如果 t 是空字符串，那么 s 中有一个子序列（空序列）与之匹配，所以 dp[0][0]应该是 1。
确定遍历顺序

dp[i][j]由 dp[i-1][j-1]、dp[i-1][j]推导出，所以必须从前往后、从上往下遍历
```
1
for (let i = 1; i < s.length; i++) {
2
  for (let j = 1; j < t.length; j++) {}
3
}
```

举例推导 dp 数组

以 s：“baegg”，t：“bag”为例，推导 dp 数组状态如下：

1
dp = [
2
  [1, 0, 0, 0],
3
  [1, 1, 0, 0],
4
  [1, 1, 1, 0],
5
  [1, 1, 1, 0],
6
  [1, 1, 1, 1],
7
  [1, 1, 1, 2],
8
]

代码#

1
var numDistinct = function (s, t) {
2
  const n = s.length
3
  const m = t.length
4

5
  const dp = new Array(n + 1).fill().map(() => new Array(m + 1).fill(0))
6

7
  for (let i = 0; i <= n; i++) {
8
    dp[i][0] = 1
9
  }
10

11
  for (let i = 1; i <= n; i++) {
12
    for (let j = 1; j <= m; j++) {
13
      if (s[i - 1] === t[j - 1]) {
14
        dp[i][j] = dp[i - 1][j - 1] + dp[i - 1][j]
15
      } else {
16
        dp[i][j] = dp[i - 1][j]
17
      }
18
    }
19
  }
20
  console.log(dp)
21

22
  return dp[n][m]
23
}

展开收起

583. 两个字符串的删除操作 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定两个单词 word1 和 word2，找到使得 word1 和 word2 相同所需的最小步数，每步可以删除任意一个字符串中的一个字符。

示例：

输入: “sea”, “eat”
输出: 2
解释: 第一步将”sea”变为”ea”，第二步将”eat”变为”ea”

解题思路#

本题和115.不同的子序列相比，两个字符串都可以删除，整体思路是一样的。

动规五部曲：

确定 dp 数组及下标的含义

dp[i][j]表示 word1[0, i-1]和 word2[0, j-1]达到相等所需要的最小删除次数
确定递推公式

如果 word1[i - 1]和 word2[j - 1]相等时：

考虑这两个元素的删除操作 和 不考虑这两个元素的删除操作，对两个字符串达到相等的最小删除次数是没有影响的
```
1
dp[i][j] = dp[i - 1][j - 1]
```
如果不相等，则需要删元素，有三种情况：
- 删 word1[i-1]，最少操作次数为 dp[i - 1][j] + 1
- 删 word2[j-1]，最少操作次数为 dp[i][j - 1] + 1
- 两个同时删除，最少操作次数为 dp[i - 1][j - 1] + 2
取三个最小值
```
1
dp[i][j] = Math.min(dp[i - 1][j] + 1, dp[i][j - 1] + 1, dp[i - 1][j - 1] + 2)
```
dp 数组初始化
- dp[i][0] = i：word2 为空字符串，word1[0…i-1]，需要删除所有元素，才能和 word2 相同
- dp[0][j] = j：word1 为空字符串，word2[0…j-1]，需要删除所有元素，才能和 word1 相同
确定遍历顺序

从前往后，从上到下遍历
举例推导 dp 数组

以 word1:“sea”，word2:“eat”为例，推导 dp 数组状态图如下：
```
1
dp = [
2
  [0, 1, 2, 3],
3
  [1, 2, 3, 4],
4
  [2, 1, 2, 3],
5
  [3, 2, 1, 2],
6
]
```

代码#

1
var minDistance = function (word1, word2) {
2
  const n = word1.length
3
  const m = word2.length
4

5
  const dp = new Array(n + 1).fill().map(() => new Array(m + 1).fill(0))
6

7
  for (let i = 0; i <= n; i++) dp[i][0] = i
8
  for (let j = 0; j <= m; j++) dp[0][j] = j
9

10
  for (let i = 1; i <= n; i++) {
11
    for (let j = 1; j <= m; j++) {
12
      if (word1[i - 1] === word2[j - 1]) {
13
        dp[i][j] = dp[i - 1][j - 1]
14
      } else {
15
        dp[i][j] = Math.min(
16
          dp[i - 1][j] + 1,
17
          dp[i][j - 1] + 1,
18
          dp[i - 1][j - 1] + 2
19
        )
20
      }
21
    }
22
  }
23
  console.log(dp)
24

25
  return dp[n][m]
26
}

展开收起

版本二：利用最长公共子序列#

1143.最长公共子序列，分别计算两个字符串的最长公共子序列长度，然后用两个字符串的长度减去两倍的最长公共子序列长度

1
var minDistance = function (word1, word2) {
2
  const n = word1.length
3
  const m = word2.length
4

5
  const dp = new Array(n + 1).fill().map(() => new Array(m + 1).fill(0))
6

7
  // 最长公共子序列
8
  for (let i = 1; i <= n; i++) {
9
    for (let j = 1; j <= m; j++) {
10
      if (word1[i - 1] === word2[j - 1]) {
11
        dp[i][j] = dp[i - 1][j - 1] + 1
12
      } else {
13
        dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1])
14
      }
15
    }
16
  }
17
  console.log(dp)
18

19
  return n + m - dp[n][m] * 2
20
}

展开收起

72. 编辑距离 🌟🌟#

力扣链接 🌟🌟

题目描述#

给你两个单词 word1 和 word2，请你计算出将 word1 转换成 word2 所使用的最少操作数。

你可以对一个单词进行如下三种操作：

插入一个字符
删除一个字符
替换一个字符
示例 1：
输入：word1 = “horse”, word2 = “ros”
输出：3
解释： horse -> rorse (将 ‘h’ 替换为 ‘r’) rorse -> rose (删除 ‘r’) rose -> ros (删除 ‘e’)
示例 2：
输入：word1 = “intention”, word2 = “execution”
输出：5
解释： intention -> inention (删除 ‘t’) inention -> enention (将 ‘i’ 替换为 ‘e’) enention -> exention (将 ‘n’ 替换为 ‘x’) exention -> exection (将 ‘n’ 替换为 ‘c’) exection -> execution (插入 ‘u’)

提示：

0 <= word1.length, word2.length <= 500
word1 和 word2 由小写英文字母组成

解题思路#

给定两个字符串 word1 和 word2，计算将 word1 转换为 word2 所需的最小操作次数。允许的操作包括：

插入一个字符
删除一个字符
替换一个字符

动规五部曲：

确定 dp 数组及下标的含义

dp[i][j]表示 word1[0…i-1]和 word2[0…j-1]的最小编辑距离
确定递归公式

如果 word1[i-1] 和 word2[j-1]相等时：

无需操作，直接继承前一步结果：
```
1
dp[i][j] = dp[i - 1][j - 1]
```
如果 word1[i-1] 和 word2[j-1]不相等时，可以有三种编辑方式：
- 删除：删除 word1 一个元素，就是 word1[0…i-2]和 word2[0…i-1]的最近编辑距离，再加一个操作，即 dp[i-1][j] + 1
- 插入：在 word1 中插入 word2[j-1]，此时操作次数为 dp[i][j-1] + 1
- 替换：将 word1 元素替换为 word2[j-1]，操作次数为 dp[i-1][j-1] + 1
  
  综上，递推公式为：
```
1
dp[i][j]=Math.min(dp[i][j−1],dp[i−1][j],dp[i−1][j−1])+1
```
dp 数组初始化
- dp[i][0] = i：将 word1 前 i 个字符转换为空字符串，需删除 i 次
- dp[0][j] = j：将空字符串转换为 word2 前 j 个字符，需插入 j 次
确定遍历顺序

从前往后，从上到下

举例推导 dp 数组

以示例 1 为例，输入：word1 = “horse”, word2 = “ros”为例，dp 状态如下：

1
dp = [
2
  [0, 1, 2, 3],
3
  [1, 1, 2, 3],
4
  [2, 2, 1, 2],
5
  [3, 2, 2, 2],
6
  [4, 3, 3, 2],
7
  [5, 4, 4, 3],
8
]

代码#

1
var minDistance = function (word1, word2) {
2
  const n = word1.length
3
  const m = word2.length
4

5
  const dp = new Array(n + 1).fill().map(() => new Array(m + 1).fill(0))
6

7
  for (let i = 0; i <= n; i++) dp[i][0] = i
8
  for (let j = 0; j <= m; j++) dp[0][j] = j
9
  for (let i = 1; i <= n; i++) {
10
    for (let j = 1; j <= m; j++) {
11
      if (word1[i - 1] === word2[j - 1]) {
12
        dp[i][j] = dp[i - 1][j - 1]
13
      } else {
14
        dp[i][j] = Math.min(
15
          dp[i - 1][j] + 1,
16
          dp[i][j - 1] + 1,
17
          dp[i - 1][j - 1] + 1
18
        )
19
      }
20
    }
21
  }
22
  console.log(dp)
23

24
  return dp[n][m]
25
}

展开收起

总结#

392.判断子序列：
- 仅需处理删除操作，验证 s 是否为 t 的子序列
- 双指针或动态规划解决，为编辑距离问题中的删除操作提供基础
115.不同的子序列：
- 计算 s 的子序列中出现 t 的次数
- 状态转移需考虑是否使用当前字符匹配，为编辑距离的“选择操作”提供思路
583.两个字符串的删除操作：
- 转化为求最长公共子序列（LCS），删除次数公式为：删除次数=len(s1)+len(s2)−2×LCS 长度
- 动态规划表设计为 dp[i][j] 表示 s1[0..i-1] 和 s2[0..j-1] 的 LCS 长度。

跟着卡哥学算法Day 44：动态规划part11

Thu, 27 Mar 2025 00:00:00 GMT

1143.最长公共子序列 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定两个字符串 text1 和 text2，返回这两个字符串的最长公共子序列的长度。

一个字符串的子序列是指这样一个新的字符串：它是由原字符串在不改变字符的相对顺序的情况下删除某些字符（也可以不删除任何字符）后组成的新字符串。

例如，“ace” 是 “abcde” 的子序列，但 “aec” 不是 “abcde” 的子序列。两个字符串的「公共子序列」是这两个字符串所共同拥有的子序列。

若这两个字符串没有公共子序列，则返回 0。

示例 1:

输入：text1 = “abcde”, text2 = “ace”
输出：3
解释：最长公共子序列是 “ace”，它的长度为 3。

示例 2:

输入：text1 = “abc”, text2 = “abc”
输出：3
解释：最长公共子序列是 “abc”，它的长度为 3。

示例 3:

输入：text1 = “abc”, text2 = “def”
输出：0
解释：两个字符串没有公共子序列，返回 0。

提示:

1 <= text1.length <= 1000
1 <= text2.length <= 1000 输入的字符串只含有小写英文字符。

解题思路#

字符串子序列：是一个新字符串，由原字符串在不改变字符的相对顺序的情况下删除或不删除某些自负后组成的

本题与最长公共子串的区别是：不需要连续

动规五部曲：

确定 dp 数组及下标的含义

dp[i][j]表示长度为[0, i-1]的字符串 text1 与长度为[0, j-1]的字符串 text2 的最长公共子序列

核心思想：dp[i][j]不是从[0, i]的字符串 text1 和[0, j]的字符串 text2 的最长公共子序列
1. 为了方便初始化
2. 为了方便处理边界条件
确定递推公式

如果 text1[i - 1]和 text2[j - 1]相同，则说明找到公共元素：
```
1
dp[i][j] = dp[i - 1][j - 1] + 1
```
如果不相同，则需要找 text1[i - 2]和 text2[j - 1]、text1[i - 1]和 text2[j - 2]的最长公共子序列中最大的：
```
1
dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1])
```
dp 数组初始化
- dp[i][0] = 0：text2 为空字符串，text1[0, i-1]和空字符串的最长公共子序列长度为 0
- dp[0][j] = 0：text1 为空字符串，text2[0, j-1]和空字符串的最长公共子序列长度为 0
- 其他下标会被覆盖，初始为 0 即可
这里体现了为什么要那么定义 dp 数组？简化初始化 dp 数组的过程
确定遍历顺序

dp[i][j]由 dp[i-1][j-1]、dp[i-1][j]和 dp[i][j-1]推导出，所以必须从前往后、从上往下遍历
```
1
for (let i = 1; i < text1.length; i++) {
2
  for (let j = 1; j < text2.length; j++) {}
3
}
```
举例推导 dp 数组

以输入：text1 = “abcde”, text2 = “ace” 为例，dp 结果如下：
```
1
dp = [
2
  [0, 0, 0, 0],
3
  [0, 1, 1, 1],
4
  [0, 1, 1, 1],
5
  [0, 1, 2, 2],
6
  [0, 1, 2, 2],
7
  [0, 1, 2, 3],
8
]
```
最终 dp[text1.length][text2.length]即为最长公共子序列长度

为什么结果是 dp[text1.length][text2.length]，而不是 Math.max(…dp)?
- 两个字符串越长，公共子序列可能就越长，最后返回的是 dp[text1.length][text2.length] 就一定是最大值
- 最长重复子数组，因为必须是连续的，所以可能出现在任意位置

代码#

1
var longestCommonSubsequence = function (text1, text2) {
2
  const n = text1.length
3
  const m = text2.length
4

5
  // 初始化全为0
6
  // dp[i][0] = 0 text2为空字符串
7
  // dp[0][j] = 0 text1为空字符串
8
  const dp = new Array(n + 1).fill().map(() => new Array(m + 1).fill(0))
9

10
  for (let i = 1; i <= n; i++) {
11
    for (let j = 1; j <= m; j++) {
12
      if (text1[i - 1] === text2[j - 1]) {
13
        dp[i][j] = dp[i - 1][j - 1] + 1
14
      } else {
15
        dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1])
16
      }
17
    }
18
  }
19
  console.log(dp)
20
  return dp[n][m]
21
}

展开收起

1035.不相交的线 🌟🌟#

力扣链接 🌟🌟

题目描述#

在两条独立的水平线上按给定的顺序写下 nums1 和 nums2 中的整数。

现在，可以绘制一些连接两个数字 nums1[i] 和 nums2[j] 的直线，这些直线需要同时满足：

nums1[i] == nums2[j]
且绘制的直线不与任何其他连线（非水平线）相交。

请注意，连线即使在端点也不能相交：每个数字只能属于一条连线。

以这种方法绘制线条，并返回可以绘制的最大连线数。

dynamic-programming-code111

解题思路#

在1143.最长公共子序列基本一致

两个数组的元素相等时，可以连接一条线，且不与其他线相交，就是在 num1 中找到一个与 nums2 相同的子序列，不能改变相对顺序
求绘制的最大连线数，其实就是求两个字符串的最长公共子序列的长度

动规五部曲：

确定 dp 数组及下标的含义

dp[i][j]表示 nums1[0, i-1]和 nums2[0, j- 1]的最长公共子序列
确定递推公式

如果 nums1[i - 1]和 nums2[j - 1]相等，则说明找到公共元素：
```
1
dp[i][j] = dp[i - 1][j - 1] + 1
```
如果不相等，则需要找 nums1[i - 2]和 nums2[j - 1]、nums1[i - 1]和 nums2[j - 2]的最长公共子序列中最大的：
```
1
dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1])
```
dp 数组初始化

初始化全为 0
确定遍历顺序

从前往后，从上到下遍历

举例推导 dp 数组

以 nums1 = [2,5,1,2,5]，nums2 =[10,5,2,1,5,2] 为例，得到的 dp 数组为：

1
dp = [
2
  [0, 0, 0, 0, 0, 0, 0],
3
  [0, 0, 0, 1, 1, 1, 1],
4
  [0, 0, 1, 1, 1, 2, 2],
5
  [0, 0, 1, 1, 2, 2, 2],
6
  [0, 0, 1, 2, 2, 2, 3],
7
  [0, 0, 1, 2, 2, 3, 3],
8
]

代码#

1
var maxUncrossedLines = function (nums1, nums2) {
2
  const n = nums1.length
3
  const m = nums2.length
4

5
  const dp = new Array(n + 1).fill().map(() => new Array(m + 1).fill(0))
6

7
  for (let i = 1; i <= n; i++) {
8
    for (let j = 1; j <= m; j++) {
9
      if (nums1[i - 1] === nums2[j - 1]) {
10
        dp[i][j] = dp[i - 1][j - 1] + 1
11
      } else {
12
        dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1])
13
      }
14
    }
15
  }
16
  console.log(dp)
17
  return dp[n][m]
18
}

展开收起

53. 最大子序和 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个整数数组 nums ，找到一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和。

示例:

输入: [-2,1,-3,4,-1,2,1,-5,4]
输出: 6
解释: 连续子数组 [4,-1,2,1] 的和最大，为 6。

解题思路#

之前使用贪心法解决：只要连续和为负数，就丢弃重新开始

动规五部曲：

确定 dp 数组及下标的含义

dp[i]表示以 nums[i]为结尾的最大子序和
确定递归公式

dp[i]由两个状态推导：
1. dp[i] = dp[i-1] + nums[i]，即：nums[i]加入当前连续子序和
2. dp[i] = nums[i]，即重新计算连续子序和
```
1
// 两者取最大
2
dp[i] = Math.max(dp[i - 1] + nums[i], nums[i])
```
dp 数组初始化

dp[0] = nums[0]，dp[0]必须初始化

确定遍历顺序

从前往后

1
for (let i = 1; i < nums.length; i++) {}

举例推导 dp 数组

以 nums = [-2,1,-3,4,-1,2,1,-5,4]为例，得到 dp 数组：
```
1
dp = [-2, 1, -2, 4, 3, 5, 6, 1, 5]
```

代码#

1
var maxSubArray = function (nums) {
2
  const n = nums.length
3
  const dp = new Array(n).fill(0)
4

5
  dp[0] = nums[0]
6

7
  for (let i = 1; i < n; i++) {
8
    dp[i] = Math.max(dp[i - 1] + nums[i], nums[i])
9
  }
10
  console.log(dp)
11
  return Math.max(...dp)
12
}

392.判断子序列 🌟#

力扣链接 🌟

题目描述#

给定字符串 s 和 t ，判断 s 是否为 t 的子序列。

字符串的一个子序列是原始字符串删除一些（也可以不删除）字符而不改变剩余字符相对位置形成的新字符串。（例如，“ace”是”abcde”的一个子序列，而”aec”不是）。

示例 1：

输入：s = “abc”, t = “ahbgdc”
输出：true

示例 2：

输入：s = “axc”, t = “ahbgdc”
输出：false

提示：

0 <= s.length <= 100
0 <= t.length <= 10^4

两个字符串都只由小写字符组成。

解题思路#

快慢指针：快指针指向原字符串，慢指针指向子序列字符串

动规五部曲：

确定 dp 数组及下标的含义

dp[i][j]表示以 s[i - 1]和 t[j - 1]为结尾的字符串，相同子序列的长度
确定递归公式

dp[i][j]有两种情况：
- s[i - 1] === t[j - 1]，t 中找到一个字符串在 s 中出现
```
1
dp[i][j] = dp[i - 1][j - 1] + 1
```
- s[i - 1] !== t[j - 1]，需要在 t 中删除元素继续匹配
  
  t 删除当前元素 t[j - 1]，dp[i][j]就等于 s[i - 1]和 t[j - 2]的比较结果
```
1
dp[i][j] = dp[i][j - 1]
```
  如果1143.最长公共子序列，s 和 t 都可以删除元素，需要求 s[i - 1]和 t[j - 2]、s[i - 2]和 t[j - 1]的最长公共子序列较大值
dp 数组初始化
- dp[i][0] = 0：t 为空字符串
- dp[0][j] = 0：s 为空字符串

确定遍历顺序

从上到下，从左往右

1
for (let i = 1; i < s.length; i++) {
2
  for (let j = 1; j < t.length; j++) {}
3
}

举例推导 dp 数组

以 s = “abc”，t = “ahbgdc” 为例，得到 dp 数组：

1
dp = [
2
  [0, 0, 0, 0, 0, 0, 0],
3
  [0, 1, 1, 1, 1, 1, 1],
4
  [0, 0, 0, 2, 2, 2, 2],
5
  [0, 0, 0, 0, 0, 0, 3],
6
]

计算 dp[n][m] === n，s 就是 t 的子序列

代码#

1
var isSubsequence = function (s, t) {
2
  const n = s.length
3
  const m = t.length
4
  const dp = new Array(n + 1).fill().map(() => new Array(m + 1).fill(0))
5

6
  for (let i = 1; i <= n; i++) {
7
    for (let j = 1; j <= m; j++) {
8
      if (s[i - 1] === t[j - 1]) {
9
        dp[i][j] = dp[i - 1][j - 1] + 1
10
      } else {
11
        dp[i][j] = dp[i][j - 1]
12
      }
13
    }
14
  }
15
  console.log(dp)
16
  return dp[n][m] === n
17
}

展开收起

跟着卡哥学算法Day 43：动态规划part10

Wed, 26 Mar 2025 00:00:00 GMT

300.最长递增子序列 🌟🌟#

力扣链接 🌟🌟

题目描述#

给你一个整数数组 nums ，找到其中最长严格递增子序列的长度。

子序列是由数组派生而来的序列，删除（或不删除）数组中的元素而不改变其余元素的顺序。例如，[3,6,2,7] 是数组 [0,3,1,6,2,2,7] 的子序列。

示例 1：

输入：nums = [10,9,2,5,3,7,101,18]
输出：4
解释：最长递增子序列是 [2,3,7,101]，因此长度为 4 。

示例 2：

输入：nums = [0,1,0,3,2,3]
输出：4

示例 3：

输入：nums = [7,7,7,7,7,7,7]
输出：1

提示：

1 <= nums.length <= 2500
-10^4 <= nums[i] <= 104

解题思路#

子序列：由数组派生而来的序列（子数组），删除（或不删除）数组中的元素而不改变其余元素的顺序
自增子序列：子序列中的元素是递增的

子序列问题是动态规划解决的经典问题，当前下标 i 的递增子序列长度，和 i 之前的下标为 0…i-1 的子序列长度有关系。

动规五部曲：

确定 dp 数组及下标的含义

dp[i] 表示 i 之前（包括 i），以 nums[i]为结尾的最长递增子序列长度
- ❌ 误解：dp[i] 表示从 nums[0] 到 nums[i] 的数组中的最长递增子序列长度
- ✅ 正解：dp[i] 表示 以 nums[i] 为结尾 的所有递增子序列中，最长子序列的长度
核心思想：
- 每个位置 i 的 dp[i] 仅关注以 nums[i] 结尾的子序列
- 必须满足 nums[i] > nums[j]，才能将 nums[i] 追加到以 nums[j] 结尾的子序列后，形成更长的子序列
确定递推公式

位置 i 的最长递增子序列等于 j 从 0 到 i-1 各个位置的最长递增子序列+1 的最大值
```
1
if (nums[i] > nums[j]) dp[i] = Math.max(dp[i], dp[j] + 1)
```
- 若 nums[i] > nums[j]，说明可将 nums[i] 接在以 nums[j] 结尾的子序列后，形成更长的子序列
- 取 max 是为了找到 j 从 0 到 i-1 所有可能的最大值
dp 数组初始化

dp[i] = 1：每个位置的初始长度为 1（单独一个元素本身就是一个长度为 1 的子序列）
确定遍历顺序

dp[i]由 dp[i-1]推导出，遍历 i 一定从前往后

j 遍历 0 到 i-1，从前往后或从后往前都可以，只要全遍历就行
```
1
for (let i = 1; i < nums.length; i++) {
2
  for (let j = 0; j < i; j++) {
3
    if (nums[i] > nums[j]) dp[i] = Math.max(dp[i], dp[j] + 1)
4
  }
5
}
```
为什么需要两层循环？
- 外层循环：遍历每个元素 nums[i]，作为当前子序列的结尾
- 内层循环：遍历所有 j < i，检查是否可以将 nums[i] 追加到以 nums[j] 结尾的子序列中
- 关键：子序列的最后一个元素 nums[j] 是该子序列的最大值，因此只需比较 nums[j] 和 nums[i]
举例推导 dp 数组

以示例 nums = [10,9,2,5,3,7,101,18] 逐步分析：
1. 初始化：dp = [1,1,1,1,1,1,1,1]
2. 计算过程：
  - i=0：无 j，保持 dp[0]=1
  - i=1：nums[1]=9，所有 j < 1 的数都比 9 大，无法追加 → dp[1]=1
  - i=2：nums[2]=2，前面没有更小的数 → dp[2]=1
  - i=3：nums[3]=5
    - j=2：nums[2]=2 <5 → dp[3] = dp[2]+1 = 2
  - i=4：nums[4]=3
    - j=2：nums[2]=2 <3 → dp[4] = dp[2]+1 = 2
  - i=5：nums[5]=7
    - j=2：nums[2]=2 <7 → dp[5]=dp[2]+1=2
    - j=3：nums[3]=5 <7 → dp[5]=dp[3]+1=3
    - j=4：nums[4]=3 <7 → dp[5]=dp[4]+1=3
      → 最终 dp[5]=3
  - i=6：nums[6]=101
    - 遍历所有 j <6，最长子序列来自 j=5 → dp[6]=dp[5]+1=4
  - i=7：nums[7]=18
    - 最长子序列来自 j=5（7 <18）→ dp[7]=dp[5]+1=4
3. 最终 dp 数组：[1,1,1,2,2,3,4,4] → 最大值为 4。

代码#

1
var lengthOfLIS = function (nums) {
2
  const n = nums.length
3
  // 初始各个位置最长递增子序列都是1
4
  const dp = new Array(n).fill(1)
5

6
  let result = 1
7
  for (let i = 1; i < n; i++) {
8
    // j是从0到i-1各个位置
9
    for (let j = 0; j < i; j++) {
10
      // 如果nums[i] > nums[j] 则可以追加nums[i] 形成更长的递增子序列
11
      // 找出从0到i-1中最长的一个
12
      if (nums[i] > nums[j]) dp[i] = Math.max(dp[i], dp[j] + 1)
13
    }
14
    console.log(dp)
15
    result = Math.max(result, dp[i])
16
  }
17
  return result
18
}

展开收起

674. 最长连续递增序列 🌟#

力扣链接 🌟

题目描述#

给定一个未经排序的整数数组，找到最长且连续递增的子序列，并返回该序列的长度。

连续递增的子序列可以由两个下标 l 和 r（l < r）确定，如果对于每个 l <= i < r，都有 nums[i] < nums[i + 1] ，那么子序列 [nums[l], nums[l + 1], …, nums[r - 1], nums[r]] 就是连续递增子序列。

示例 1：

输入：nums = [1,3,5,4,7]
输出：3
解释：最长连续递增序列是 [1,3,5], 长度为 3。尽管 [1,3,5,7] 也是升序的子序列, 但它不是连续的，因为 5 和 7 在原数组里被 4 隔开。

示例 2：

输入：nums = [2,2,2,2,2]
输出：1
解释：最长连续递增序列是 [2], 长度为 1。

提示：

0 <= nums.length <= 10^4
-10^9 <= nums[i] <= 10^9

解题思路#

在300.最长递增子序列的基础上，增加了连续的限制

动规五部曲：

确定 dp 数组及下标的含义

dp[i]表示以下标 i 为结尾的连续最长递增子序列长度
确定递推公式

与300.最长递增子序列的递推公式不同，此处只需与前一个元素比较：
```
1
if (nums[i] > nums[i - 1]) {
2
  dp[i] = dp[i - 1] + 1
3
} else {
4
  //  断开连续，重新开始计数
5
  dp[i] = 1
6
}
```
- 连续递增要求子序列在原数组中连续，因此只需检查 nums[i] 是否比 nums[i-1] 大
- 若满足条件，则当前长度继承前一个位置的长度加 1
- 否则重置为 1
dp 数组初始化

dp[i] = 1 ：每个位置的初始长度为 1（单独一个元素本身就是一个长度为 1 的子序列）
确定遍历顺序

从前往后遍历，只需要一层 for 循环，比较当前和前一个值的大小

每次只需检查当前元素与前一个元素的关系，无需遍历更早的历史状态
举例推导 dp 数组

以 nums = [1,3,5,4,1] 为例，得到的 dp 数组为：
```
1
dp = [1, 2, 3, 1, 2]
```
最后取 dp[i]中的最大值，即为最长连续递增子序列长度

代码#

1
var findLengthOfLCIS = function (nums) {
2
  const n = nums.length
3
  const dp = new Array(n).fill(1)
4

5
  let result = 1
6

7
  for (let i = 1; i < n; i++) {
8
    // 只需要与前一个数比较
9
    if (nums[i] > nums[i - 1]) {
10
      // 大于就追加
11
      dp[i] = dp[i - 1] + 1
12
    }
13
  }
14
  return Math.max(...dp)
15
}

展开收起

与最长递增子序列（LIS）的区别#

特性	LIS（非连续）	LCIS（连续）
子序列要求	元素递增，可不连续	元素递增且必须连续
状态定义	dp[i]：以 nums[i] 结尾的最长递增子序列长度	dp[i]：以 nums[i] 结尾的最长连续递增子序列长度
状态转移复杂度	O(n²)（需要两层循环）	O(n)（只需比较前一个元素）

718. 最长重复子数组 🌟🌟#

力扣链接 🌟🌟

题目描述#

给两个整数数组 A 和 B ，返回两个数组中公共的、长度最长的子数组的长度。

示例：

输入：

A: [1,2,3,2,1]
B: [3,2,1,4,7]
输出：3
解释：长度最长的公共子数组是 [3, 2, 1] 。

提示：

1 <= len(A), len(B) <= 1000
0 <= A[i], B[i] < 100

解题思路#

二维 dp 数组

第一个数组到 i - 1 位置，第二个数组到 j - 1 位置，最长的重复子数组长度为 dp[i][j]

动规五部曲：

确定 dp 数组及下标的含义

dp[i][j]表示以 nums1[i-1] 和 nums2[j-1] 为结尾的最长公共连续子数组的长度 （注：索引从 1 开始，便于处理边界条件）
确定递归公式

根据 dp[i][j]的定义，dp[i][j]的状态只能由 dp[i - 1][j - 1]推导而来

即当 nums1[i - 1]等于 nums2[j - 1]时：
```
1
dp[i][j] = dp[i - 1][j - 1] + 1
```
dp 数组初始化

创建一个二维数组 dp，大小为 (nums1.length+1) × (nums2.length+1)，初始值为 0

dp[i][j] 表示以 nums1[i-1] 和 nums2[j-1] 结尾的最长公共子数组长度，则：
- i 和 j 的取值范围为 [1, nums1.length] 和 [1, nums2.length]，对应原数组 nums1 和 nums2 的索引 [0, length-1]，所以需要额外加一行一列
- 通过增加一行一列，统一处理边界条件，避免索引越界
dp[i][0] 和 dp[0][j] 都初始化为 0，因为当一个数组长度为 0 时，最长公共子数组长度也为 0

确定遍历顺序

外层 for 循环遍历 nums1，内层 for 循环遍历 nums2

1
for (let i = 1; i < nums1.length; i++) {
2
  for (let j = 1; j < nums2.length; j++) {
3
    if (nums1[i - 1] === nums2[j - 1]) {
4
      dp[i][j] = dp[i - 1][j - 1] + 1
5
    }
6

7
    result = Math.max(result, dp[i][j])
8
  }
9
}

举例推导 dp 数组

拿示例 1 中，nums1: [1,2,3,2,1]，nums2: [3,2,1,4,7]为例，得到 dp 数组：

1
dp = [
2
  [0, 0, 0, 0, 0, 0],
3
  [0, 0, 0, 1, 0, 0],
4
  [0, 0, 1, 0, 0, 0],
5
  [0, 1, 0, 0, 0, 0],
6
  [0, 0, 2, 0, 0, 0],
7
  [0, 0, 0, 3, 0, 0],
8
]

代码#

1
var findLength = function (nums1, nums2) {
2
  const n1 = nums1.length
3
  const n2 = nums2.length
4
  const dp = new Array(n1 + 1).fill().map(() => new Array(n2 + 1).fill(0))
5
  let result = 0
6

7
  for (let i = 1; i <= n1; i++) {
8
    for (let j = 1; j <= n2; j++) {
9
      // 遇到A[i - 1] === B[j - 1]，则更新dp数组
10
      if (nums1[i - 1] === nums2[j - 1]) {
11
        dp[i][j] = dp[i - 1][j - 1] + 1
12
      }
13
      result = Math.max(result, dp[i][j])
14
    }
15
  }
16
  console.log(dp)
17
  return result
18
}

展开收起

为什么是 nums1[i-1] 和 nums2[j-1]，而不是 num1[i] 和 nums2[j]？#

简化初始化逻辑#

定义为 nums1[i-1]时，初始化时全为 0，额外加一行一列，无需额外代码处理 i=0 或 j=0 的边界情况

定义为 nums1[i] 时，第一行第一列需要初始化，即当 nums1[i]和 nums2[0]相同时，对应的 dp[i][0]需要初始化为 1

1
// 要对第一行，第一列经行初始化
2
for (int i = 0; i < nums1.length; i++) if (nums1[i] == nums2[0]) dp[i][0] = 1;
3
for (int j = 0; j < nums2.length; j++) if (nums1[0] == nums2[j]) dp[0][j] = 1;

避免索引越界#

当 nums1[i-1] == nums2[j-1] 时，状态转移方程为：

1
dp[i][j] = dp[i - 1][j - 1] + 1

定义为 nums1[i-1] 和 nums2[j-1]，无需判断 i-1 是否越界
如果定义为 nums1[i] 和 nums2[j]，则需要判断 i-1 和 j-1 是否越界
```
1
if i > 0 and j > 0:
```

滚动数组#

dp[i][j]只和 dp[i-1][j-1]有关，可以使用滚动数组优化空间

dp[j]只能由 dp[j-1]推出，也就是可以把上一层 dp[i-1][j]拷贝到下一层 dp[i][j]来继续用

1
const findLength = (nums1, nums2) => {
2
  let n1 = nums1.length,
3
    n2 = nums2.length
4
  let dp = new Array(n2 + 1).fill(0)
5
  let res = 0
6
  for (let i = 1; i <= n1; i++) {
7
    for (let j = n2; j > 0; j--) {
8
      if (nums1[i - 1] === nums2[j - 1]) {
9
        dp[j] = dp[j - 1] + 1
10
      } else {
11
        dp[j] = 0
12
      }
13
      res = Math.max(res, dp[j])
14
    }
15
  }
16
  return res
17
}

展开收起

跟着卡哥学算法Day 42：动态规划part9

Tue, 25 Mar 2025 00:00:00 GMT

188.买卖股票的最佳时机 IV 🌟🌟🌟#

力扣链接 🌟🌟🌟

题目描述#

给定一个整数数组 prices ，它的第 i 个元素 prices[i] 是一支给定的股票在第 i 天的价格。

设计一个算法来计算你所能获取的最大利润。你最多可以完成 k 笔交易。

注意：你不能同时参与多笔交易（你必须在再次购买前出售掉之前的股票）。

示例 1：
输入：k = 2, prices = [2,4,1]
输出：2 解释：在第 1 天 (股票价格 = 2) 的时候买入，在第 2 天 (股票价格 = 4) 的时候卖出，这笔交易所能获得利润 = 4-2 = 2。
示例 2：
输入：k = 2, prices = [3,2,6,5,0,3]
输出：7 解释：在第 2 天 (股票价格 = 2) 的时候买入，在第 3 天 (股票价格 = 6) 的时候卖出, 这笔交易所能获得利润 = 6-2 = 4。随后，在第 5 天 (股票价格 = 0) 的时候买入，在第 6 天 (股票价格 = 3) 的时候卖出, 这笔交易所能获得利润 = 3-0 = 3 。

提示：

0 <= k <= 100
0 <= prices.length <= 1000
0 <= prices[i] <= 1000

解题思路#

动态规划：123.买卖股票的最佳时机 III的进阶版，股票买卖可以 k 次交易

延续之前的思路，每天有多种状态：

dp[i][0] 表示第 i 天没有任何操作
dp[i][1] 表示第 i 天第一次买入股票
dp[i][2] 表示第 i 天第一次卖出股票
dp[i][3] 表示第 i 天第二次买入股票
dp[i][4] 表示第 i 天第二次卖出股票
…

除了 0 以外，偶数就是卖出，奇数就是买入
最多 k 笔交易，j 的最大值为 2k+1，即 k=3 需要计算到 dp[i][6]，以此类推

动规五部曲：

确定 dp 数组及下标的含义

dp[i][j] 中 i 表示第 i 天，j 表示多种状态[0-2k+1]，所以 dp[i][j]表示第 i 天状态 j 下所剩最大金额

确定递推公式

想要达到 dp[i][1]，有两种情况：

第 i 天买入股票，即 dp[i][1] = dp[i-1][0] - prices[i]
第 i 天没操作，即 dp[i][1] = dp[i-1][1]

取两者最大值：

1
dp[i][1] = Math.max(dp[i - 1][0] - prices[i], dp[i - 1][1])

想要达到 dp[i][2]，有两种状态：

第 i 天卖出股票，即 dp[i][2] = dp[i-1][1] + prices[i]
第 i 天没操作，即 dp[i][2] = dp[i-1][2]

取两者最大值：

1
dp[i][2] = Math.max(dp[i - 1][2], dp[i - 1][1] + prices[i])

以此类推：

1
for (let j = 0; j < 2 * k + 1; j += 2) {
2
  dp[i][j + 1] = Math.max(dp[i - 1][j + 1], dp[i - 1][j] - prices[i])
3
  dp[i][j + 2] = Math.max(dp[i - 1][j + 2], dp[i - 1][j + 1] + prices[i])
4
}

dp 数组初始化
- dp[0][0] = 0，第 0 天不做操作，金额为 0
- dp[0][1] = -prices[0]，第 0 天买入股票，所得最金额为 -prices[0]
- dp[0][2] = 0，第 0 天卖出股票，所得最金额为 0
- 以此类推，
```
1
// 奇数为买入，价格为 -prices[0]
2
// 偶数卖出，都是0
3
for (let j = 1; j < 2 * k + 1; j += 2) {
4
  dp[0][j] = -prices[0]
5
}
```
确定遍历顺序

从前往后

举例推导 dp 数组

以 prices = [1,2,3,4,5]，k=2 为例，得到的 dp 数组为：

1
dp = [
2
  [0, -1, 0, -1, 0],
3
  [0, -1, 1, -1, 1],
4
  [0, -1, 2, -1, 2],
5
  [0, -1, 3, -1, 3],
6
  [0, -1, 4, -1, 4],
7
]

代码#

1
var maxProfit = function (k, prices) {
2
  const n = prices.length
3
  const max = 2 * k + 1
4
  const dp = new Array(n).fill().map(() => new Array(max).fill(0))
5

6
  for (let j = 1; j < max; j += 2) {
7
    dp[0][j] = -prices[0]
8
  }
9

10
  for (let i = 1; i < n; i++) {
11
    for (let j = 0; j < max - 1; j += 2) {
12
      dp[i][j + 1] = Math.max(dp[i - 1][j + 1], dp[i - 1][j] - prices[i])
13
      dp[i][j + 2] = Math.max(dp[i - 1][j + 2], dp[i - 1][j + 1] + prices[i])
14
    }
15
  }
16
  console.log(dp)
17

18
  return dp[n - 1][max - 1]
19
}

展开收起

309.最佳买卖股票时机含冷冻期 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个整数数组，其中第 i 个元素代表了第 i 天的股票价格。

设计一个算法计算出最大利润。在满足以下约束条件下，你可以尽可能地完成更多的交易（多次买卖一支股票）:

你不能同时参与多笔交易（你必须在再次购买前出售掉之前的股票）。
卖出股票后，你无法在第二天买入股票 (即冷冻期为 1 天)。

示例:

输入: [1,2,3,0,2]
输出: 3
解释: 对应的交易状态为: [买入, 卖出, 冷冻期, 买入, 卖出]

解题思路#

在动态规划：122.买卖股票的最佳时机 II的基础上，增加了冷冻期的概念

之前共有两种状态：

第 i 天持有股票（今天买入，或之前就买入后没有操作）
第 i 天不持有股票（今天卖出，或之前卖出后没有操作）

那么，此题加了冷冻期的概念，状态可以有以下四种情况：

第 i 天持有股票（和上面一样）
第 i 天不持有股票
1. 第 i 天保持卖出股票状态（i-2 天卖出股票，度过一天冷冻期；或者 i-2 就是卖出状态，没有操作）
2. 第 i 天卖出股票，与之前买卖股票的不同点
第 i 天为冷冻期，冷冻期状态不可持续，只有一天

与之前买卖股票的不同点：第 i 天卖出股票单独列为一个状态，为什么？

此题包含冷冻期，需要清楚的知道前一天是否卖出股票，才能知道当天是否为冷冻期

动规五部曲：

确定 dp 数组及下标的含义
- dp[i][0] 表示第 i 天持有股票所得最多现金
- dp[i][1] 表示第 i 天不持有股票所得最多现金
- dp[i][2] 表示第 i 天卖出股票所得最多现金
- dp[i][3] 表示第 i 天为冷冻期所得最多现金
确定递推公式

dp[i][0] 即第 i 天持有股票的最大金额，可以由两个状态推出：
1. dp[i - 1][0] 即第 i-1 天持有股票的最大金额
2. dp[i - 1][3] - prices[i] 即第 i - 1 天为冷冻期，今日买入
3. dp[i - 1][1] - prices[i] 即第 i- 1 天为保持卖出股票状态，今日买入
dp[i][0] 在两者中选最大的：
```
1
dp[i][0] = Math.max(
2
  dp[i - 1][0],
3
  dp[i - 1][1] - prices[i],
4
  dp[i - 1][3] - prices[i]
5
)
```
dp[i][1] 即第 i 天不持有股票的最大金额，可以由两个状态推出：
1. dp[i - 1][1] 即第 i-1 天不持有股票的最大金额
2. dp[i - 1][3] 即第 i-1 天为冷冻期
取两者最大值：
```
1
dp[i][1] = Math.max(dp[i - 1][1], dp[i - 1][3])
```
dp[i][2] 即第 i 天卖出股票的最大金额，只能由一个状态推出，i-1 天必须时持有股票状态：
```
1
dp[i][2] = dp[i - 1][0] + prices[i]
```
dp[i][3] 即第 i 天为冷冻期，冷冻期状态不可持续，只有一天，只能由一个状态推出，i-1 天必须卖出股票：
```
1
dp[i][3] = dp[1 - 1][2]
```
因此，递推公式为：
```
1
dp[i][0] = Math.max(
2
  dp[i - 1][0],
3
  dp[i - 1][1] - prices[i],
4
  dp[i - 1][3] - prices[i]
5
)
6
dp[i][1] = Math.max(dp[i - 1][1], dp[i - 1][3])
7
dp[i][2] = dp[i - 1][0] + prices[i]
8
dp[i][3] = dp[i - 1][2]
```
dp 数组初始化
- dp[0][0] = -prices[0]，第 0 天持有股票，即买入，所得现金为 -prices[0]
- dp[0][1] = 0，第 0 天不持有股票
- dp[0][2] = 0，第 0 天卖出股票
确定遍历顺序

从前往后
举例推导 dp 数组

以 prices = [1,2,3,0,2] 为例，得到的 dp 数组为：
```
1
dp = [
2
  [-1, 0, 0, 0],
3
  [-1, 0, 1, 0],
4
  [-1, 0, 2, 1],
5
  [1, 1, -1, 2],
6
  [1, 2, 3, -1],
7
]
```
最后取 dp[i][1]、dp[i][2] 和 dp[i][3] 中的最大值，即为最大利润

代码#

1
var maxProfit = function (prices) {
2
  const n = prices.length
3
  const dp = new Array(n).fill().map(() => [0, 0, 0, 0])
4

5
  dp[0][0] = -prices[0]
6

7
  for (let i = 1; i < n; i++) {
8
    const price = prices[i]
9
    dp[i][0] = Math.max(
10
      dp[i - 1][0],
11
      dp[i - 1][1] - price,
12
      dp[i - 1][3] - price
13
    )
14
    dp[i][1] = Math.max(dp[i - 1][1], dp[i - 1][3])
15
    dp[i][2] = dp[i - 1][0] + price
16
    dp[i][3] = dp[i - 1][2]
17
  }
18

19
  console.log(dp)
20

21
  return Math.max(dp[n - 1][1], dp[n - 1][2], dp[n - 1][3])
22
}

展开收起

714.买卖股票的最佳时机含手续费 🌟🌟#

力扣链接 🌟🌟

题目描述#

定一个整数数组 prices，其中第 i 个元素代表了第 i 天的股票价格；非负整数 fee 代表了交易股票的手续费用。

你可以无限次地完成交易，但是你每笔交易都需要付手续费。如果你已经购买了一个股票，在卖出它之前你就不能再继续购买股票了。

返回获得利润的最大值。

注意：这里的一笔交易指买入持有并卖出股票的整个过程，每笔交易你只需要为支付一次手续费。

示例 1:

输入: prices = [1, 3, 2, 8, 4, 9], fee = 2
输出: 8

解释: 能够达到的最大利润:

在此处买入 prices[0] = 1
在此处卖出 prices[3] = 8
在此处买入 prices[4] = 4
在此处卖出 prices[5] = 9
总利润: ((8 - 1) - 2) + ((9 - 4) - 2) = 8.

注意:

0 < prices.length <= 50000.
0 < prices[i] < 50000.
0 <= fee < 50000.

解题思路#

在动态规划：122.买卖股票的最佳时机 II的基础上，增加了手续费

那么，只需要在卖出的时候减去手续费就可以

动规五部曲：

确定 dp 数组及下标的含义
- dp[i][0] 表示第 i 天持有股票的状态
- dp[i][1] 表示第 i 天不持有股票的状态
确定递归公式

达到 dp[i][0] 状态有两种情况：
1. 第 i 天买入股票，那么 dp[i][0] = dp[i-1][1] - prices[i]
2. 第 i 天保持现状，沿用前一天买入股票的状态，即：dp[i][0] = dp[i-1][0]
两者选择最大的：
```
1
dp[i][0] = Math.max(dp[i - 1][1] - prices[i], dp[i - 1][0])
```
同理，达到 dp[i][1] 状态有两种情况：
1. 第 i 天卖出股票，那么 dp[i][1] = dp[1 - 1][0] + prices[i] - fee，需要减去手续费
2. 第 i 天保持现状，沿用前一天卖出股票的状态，即：dp[i][1] = dp[i-1][1]
```
1
dp[i][1] = Math.max(dp[i - 1][1], dp[i - 1][0] + prices[i] - fee)
```
dp 数组初始化
- dp[0][0] = -prices[i]，第 0 天买入股票，所得现金为 -prices[0]
- dp[0][1] = 0，第 0 天第一次买入股票，金额为 -prices[0]
确定遍历顺序

从前往后

举例推导 dp 数组

以 prices = [1, 3, 2, 8, 4, 9], fee = 2 为例，得到的 dp 数组为：

1
dp = [
2
  [
3
    [-1, 0],
4
    [-1, 0],
5
    [-1, 0],
6
    [-1, 5],
7
    [1, 5],
8
    [1, 8],
9
  ],
10
]

代码#

1
var maxProfit = function (prices, fee) {
2
  const n = prices.length
3
  const dp = new Array(n).fill().map(() => [0, 0])
4

5
  // 0持有
6
  // 1不持有
7
  dp[0][0] = -prices[0]
8

9
  for (let i = 1; i < n; i++) {
10
    const price = prices[i]
11
    dp[i][0] = Math.max(dp[i - 1][0], dp[i - 1][1] - price)
12
    dp[i][1] = Math.max(dp[i - 1][1], dp[i - 1][0] + price - fee)
13
  }
14
  console.log(dp)
15

16
  return Math.max(...dp[n - 1])
17
}

展开收起

买卖股票问题总结#

动态规划通用思路#

股票问题的动态规划解法，状态由以下两个核心维度定义：

天数（i 表示第 i 天）。
持有状态（0 表示不持有股票，1 表示持有股票）。
附加维度（交易次数 k、冷冻期、手续费等，根据题目添加）。

状态转移方程#

1. 基础模板（无附加约束）#

状态定义：

dp[i][k][0/1]：第 i 天，最多完成 k 次交易，当前是否持有股票时的最大利润。
（实际应用中可简化维度，如 k 固定或通过滚动数组优化空间）
转移方程：
- dp[i][k][0] = max(dp[i-1][k][0], dp[i-1][k][1] + prices[i])
  （不持有股票：前一天不持有，或当天卖出）
- dp[i][k][1] = max(dp[i-1][k][1], dp[i-1][k-1][0] - prices[i])
  （持有股票：前一天持有，或当天买入，需消耗一次交易机会）

2. 不同题型的变体#

题目	附加约束	状态转移调整要点
121. 买卖一次	k=1	简化状态：dp[i][0/1]，买入时只能从初始状态转移
122. 买卖多次	k= +∞	移除 k 维度：dp[i][0/1]，买入时直接继承前一天的利润
123. 买卖两次	k=2	显式定义 k 维度，遍历 k 从 1 到 2
188. 买卖 K 次	k 任意	通用化 k 维度，注意 k 上限优化（当 k > n/2 时退化为无限次交易）
309. 含冷冻期	卖出后等待一天	引入冷冻期状态：卖出后跳过一天才能买入
714. 含手续费	每次交易扣手续费	在买入或卖出时扣除手续费（通常统一在卖出时扣除）

五、通用解题步骤#

定义状态：根据题目约束，明确状态维度（持有状态、交易次数、冷冻期等）。
推导转移方程：基于题目规则，分情况讨论状态转移。
初始化边界：设置第 0 天的初始值（如 dp[0][1] = -prices[0]）。
处理特殊约束：如冷冻期需延迟状态更新，手续费在交易时扣除。

跟着卡哥学算法Day 41：动态规划part8

Mon, 24 Mar 2025 00:00:00 GMT

121. 买卖股票的最佳时机 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个数组 prices ，它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。

你只能选择某一天买入这只股票，并选择在未来的某一个不同的日子卖出该股票。设计一个算法来计算你所能获取的最大利润。

返回你可以从这笔交易中获取的最大利润。如果你不能获取任何利润，返回 0 。

示例 1：
输入：[7,1,5,3,6,4]
输出：5
解释：在第 2 天（股票价格 = 1）的时候买入，在第 5 天（股票价格 = 6）的时候卖出，最大利润 = 6-1 = 5 。注意利润不能是 7-1 = 6, 因为卖出价格需要大于买入价格；同时，你不能在买入前卖出股票。
示例 2：
输入：prices = [7,6,4,3,1]
输出：0
解释：在这种情况下, 没有交易完成, 所以最大利润为 0。

解题思路#

暴力方法：两层 for 循环贪心法：取最左侧最小价格，取右边最大值，计算最大利润

1
var maxProfit = function (prices) {
2
  let lowerPrice = prices[0]
3
  let profit = 0
4
  for (let i = 0; i < prices.length; i++) {
5
    lowerPrice = Math.min(lowerPrice, prices[i])
6
    profit = Math.max(profit, prices[i] - lowerPrice)
7
  }
8

9
  return profit
10
}

某些股票买卖具体场景下可以使用贪心或其他思路解决，但动态规划是解决这一系列的题目的通用方法

动规五部曲：

确定 dp 数组及下标的含义

每天有两种状态：
- 持有这只股股票所得的最多现金
- 不持有这只股股票所得的最多现金
因此 dp 数组必须是个二维数组表示
- dp[i][0]：表示第 i 天持有股票所得最多现金
- dp[i][1]：表示第 i 天不持有股票所得最多现金
“持有”不代表当天买入，也有可能昨天已经买入，今天保持持有的状态
确定递推公式

dp[i][0]即第 i 天持有股票可以由两个状态推出：
1. dp[i-1][0] 即第 i-1 天已经持有该股票，今天保持现状，所得现金
2. 第 i 天买入，所得现金就是今天买入股票后所得现金 0 - prices[i] = -prices[i]，初始现金为 0
dp[i][0]在两者中选最大的：
```
1
`dp[i][0]` = Math.max(dp[i - 1][0], -prices[i])
```
dp[i][1]即第 i 天不持有股票，也由两个状态推出来
1. dp[i-1][1] 即第 i-1 天不持有股票，今天保持现状，所得现金
2. 第 i 天卖出股票，所得现金为 dp[i-1][0] + prices[i]
```
1
`dp[i][1]` = Math.max(dp[i - 1][1], dp[i - 1][0] + prices[i])
```
dp 数组初始化

从递推公式得出需要考虑 dp[i-1][0] 和 dp[i-1][1]，所以必须初始化 dp[0][0]和 dp[0][1]
- dp[0][0] = -prices[0]，第 0 天持有股票，即买入，所得现金为 -prices[0]
- dp[0][1] = 0, 第 0 天不持有股票
确定遍历顺序

从前往后

举例推导 dp 数组

以 prices = [7,1,5,3,6,4] 为例，得到的 dp 数组为：

1
dp = [
2
  [-7, 0],
3
  [-1, 0],
4
  [-1, 4],
5
  [-1, 4],
6
  [-1, 5],
7
  [-1, 5],
8
]

代码#

1
var maxProfit = function (prices) {
2
  const n = prices.length
3

4
  const dp = new Array(n).fill().map(() => [0, 0])
5

6
  dp[0][0] = -prices[0]
7

8
  for (let i = 1; i < n; i++) {
9
    // 第i天持有
10
    dp[i][0] = Math.max(dp[i - 1][0], -prices[i])
11
    // 第i天不持有
12
    dp[i][1] = Math.max(dp[i - 1][1], dp[i - 1][0] + prices[i])
13
  }
14
  console.log(dp)
15

16
  return Math.max(...dp[n - 1])
17
}

展开收起

122.买卖股票的最佳时机 II 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个数组，它的第 i 个元素是一支给定股票第 i 天的价格。

设计一个算法来计算你所能获取的最大利润。你可以尽可能地完成更多的交易（多次买卖一支股票）。

注意：你不能同时参与多笔交易（你必须在再次购买前出售掉之前的股票）。

示例 1:
输入: [7,1,5,3,6,4]
输出: 7
解释: 在第 2 天（股票价格 = 1）的时候买入，在第 3 天（股票价格 = 5）的时候卖出, 这笔交易所能获得利润 = 5-1 = 4。随后，在第 4 天（股票价格 = 3）的时候买入，在第 5 天（股票价格 = 6）的时候卖出, 这笔交易所能获得利润 = 6-3 = 3 。
示例 2:
输入: [1,2,3,4,5]
输出: 4
解释: 在第 1 天（股票价格 = 1）的时候买入，在第 5 天（股票价格 = 5）的时候卖出, 这笔交易所能获得利润 = 5-1 = 4 。注意你不能在第 1 天和第 2 天接连购买股票，之后再将它们卖出。因为这样属于同时参与了多笔交易，你必须在再次购买前出售掉之前的股票。
示例 3:
输入: [7,6,4,3,1]
输出: 0
解释: 在这种情况下, 没有交易完成, 所以最大利润为 0。

提示：

1 <= prices.length <= 3 * 10 ^ 4
0 <= prices[i] <= 10 ^ 4

解题思路#

在贪心算法：买卖股票的最佳时机讲过

1
prices[3] - prices[0]
2
= (prices[3] - prices[2]) + (prices[2] - prices[1]) + (prices[1] - prices[0])

所以只要今天比昨天高，就卖出 prices[i] - prices[i-1] > 0

动规五部曲：

确定 dp 数组及下标的含义
- dp[i][0] 表示第 i 天持有股票所得最多现金
- dp[i][1] 表示第 i 天不持有股票所得最多现金
确定递推公式

股票可以买卖多次与只能买卖一次的区别在于：第 i 天买入时，现金可能不是 0

dp[i][0] 即第 i 天持有股票的最大金额，可以由两个状态推出：
1. dp[i - 1][0] 即第 i-1 天持有股票的最大金额
2. dp[i - 1][1] - prices[i] 即第 i 天买入股票，所得最的金额
dp[i][0] 在两者中选最大的：
```
1
dp[i][0] = Math.max(dp[i - 1][0], dp[i - 1][1] - prices[i])
```
这里与买卖股票的最佳时机的区别是：
- 第 i 天买入股票，所得现金为 -prices[i]，即初始金额为 0，第一次买入
- 此处第 i 天买入股票，所得现金为 dp[i - 1][1] - prices[i]，初始金额为前一天不持有此股票的最大金额
dp 数组初始化
- dp[0][0] = -prices[0]，第 0 天持有股票，即买入，所得现金为 -prices[0]
- dp[0][1] = 0，第 0 天不持有股票
确定遍历顺序

从前往后

举例推导 dp 数组

以 prices = [7,1,5,3,6,4] 为例，得到的 dp 数组为：

1
dp = [
2
  [-7, 0],
3
  [0, 0],
4
  [0, 4],
5
  [2, 4],
6
  [2, 7],
7
  [3, 7],
8
]

代码#

1
var maxProfit = function (prices) {
2
  const n = prices.length
3
  const dp = new Array(n).fill().map(() => [0, 0])
4

5
  // 第0天持有股票
6
  dp[0][0] = -prices[0]
7
  dp[0][1] = 0
8

9
  for (let i = 1; i < n; i++) {
10
    // 第i天持有股票
11
    dp[i][0] = Math.max(dp[i - 1][0], dp[i - 1][1] - prices[i])
12
    // 第i天不持有股票
13
    dp[i][1] = Math.max(dp[i - 1][1], dp[i - 1][0] + prices[i])
14
  }
15
  console.log(dp)
16
  return Math.max(...dp[n - 1])
17
}

展开收起

123.买卖股票的最佳时机 III 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个数组，它的第 i 个元素是一支给定的股票在第 i 天的价格。

设计一个算法来计算你所能获取的最大利润。你最多可以完成两笔交易。

注意：你不能同时参与多笔交易（你必须在再次购买前出售掉之前的股票）。

示例 1:
输入：prices = [3,3,5,0,0,3,1,4]
输出：6 解释：在第 4 天（股票价格 = 0）的时候买入，在第 6 天（股票价格 = 3）的时候卖出，这笔交易所能获得利润 = 3-0 = 3 。随后，在第 7 天（股票价格 = 1）的时候买入，在第 8 天（股票价格 = 4）的时候卖出，这笔交易所能获得利润 = 4-1 = 3。
示例 2：
输入：prices = [1,2,3,4,5]
输出：4 解释：在第 1 天（股票价格 = 1）的时候买入，在第 5 天（股票价格 = 5）的时候卖出, 这笔交易所能获得利润 = 5-1 = 4。注意你不能在第 1 天和第 2 天接连购买股票，之后再将它们卖出。因为这样属于同时参与了多笔交易，你必须在再次购买前出售掉之前的股票。
示例 3：
输入：prices = [7,6,4,3,1]
输出：0 解释：在这个情况下, 没有交易完成, 所以最大利润为 0。
示例 4：
输入：prices = [1] 输出：0

提示：

1 <= prices.length <= 10^5
0 <= prices[i] <= 10^5

解题思路#

至多买卖两次，意味着可以买卖一次，买卖两次，也可以不买卖

一天可以有五种状态：

没有操作
第一次持有股票
第一次不持有股票
第二次持有股票
第二次不持有股票

动规五部曲：

确定 dp 数组及下标的含义

dp[i][j] 中 i 表示第 i 天，j 表示五种状态[0-4]，所以 dp[i][j]表示第 i 天状态 j 下所剩最大金额

如：dp[i][1] 表示第 i 天持有股票的状态，并不是第 i 天一定买入，有可能第 i-1 天就买入了
确定递归公式

达到 dp[i][1] 状态有两种情况：
1. 第 i 天买入股票，那么 dp[i][1] = dp[i-1][0] - prices[i]
2. 第 i 天保持现状，沿用前一天买入股票的状态，即：dp[i][1] = dp[i-1][1]
两者选择最大的：
```
1
dp[i][1] = Math.max(dp[i - 1][0] - prices[i], dp[i - 1][1])
```
同理，达到 dp[i][2] 状态有两种情况：
1. 第 i 天卖出股票，那么 dp[i][2] = dp[1 - 1][1] + prices[i]
2. 第 i 天保持现状，沿用前一天卖出股票的状态，即：dp[i][2] = dp[i-1][2]
```
1
dp[i][2] = Math.max(dp[i - 1][2], dp[i - 1][1] + prices[i])
```
同理，达到 dp[i][3] 和 dp[i][4] 也分别有两种情况：
1. 第 i 天买入/卖出
2. 第 i 天保持现状，沿用前一天状态
```
1
dp[i][3] = Math.max(dp[i - 1][3], dp[i - 1][2] - prices[i])
2
dp[i][4] = Math.max(dp[i - 1][4], dp[i - 1][3] + prices[i])
```
dp 数组初始化
- dp[0][0] = 0，第 0 天不做操作，金额为 0
- dp[0][1] = -prices[0]，第 0 天第一次买入股票，金额为 -prices[0]
- dp[0][2] = 0，第 0 天第一次卖出股票，即当天买入当天卖出，金额为 0
- dp[0][3] = -prices[0]，第 0 天第二次买入股票，即第一次买入又卖出又重新买入，金额为 -prices[0]
- dp[0][4] = 0，第 0 天第二次卖出股票，即第一次买入又卖出又重新卖出，金额为 0
确定遍历顺序

从前往后

举例推导 dp 数组

以 prices = [1,2,3,4,5] 为例，得到的 dp 数组为：

1
dp = [
2
  [0, -1, 0, -1, 0],
3
  [0, -1, 1, -1, 1],
4
  [0, -1, 2, -1, 2],
5
  [0, -1, 3, -1, 3],
6
  [0, -1, 4, -1, 4],
7
]

代码#

1
var maxProfit = function (prices) {
2
  const n = prices.length
3
  const dp = new Array(n).fill().map(() => new Array(5).fill(0))
4

5
  dp[0][1] = -prices[0]
6
  dp[0][3] = -prices[0]
7

8
  // j
9
  // 1 第一次持有
10
  // 2 第一次卖出
11
  // 3 第二次持有
12
  // 4 第二次卖出
13
  for (let i = 1; i < n; i++) {
14
    const price = prices[i]
15
    dp[i][0] = dp[i - 1][0]
16
    dp[i][1] = Math.max(dp[i - 1][1], dp[i - 1][0] - price)
17
    dp[i][2] = Math.max(dp[i - 1][2], dp[i - 1][1] + price)
18
    dp[i][3] = Math.max(dp[i - 1][3], dp[i - 1][2] - price)
19
    dp[i][4] = Math.max(dp[i - 1][4], dp[i - 1][3] + price)
20
  }
21
  console.log(dp)
22
  return dp[n - 1][4]
23
}

展开收起

跟着卡哥学算法Day 39：动态规划part7

Sat, 22 Mar 2025 00:00:00 GMT

198.打家劫舍 🌟🌟#

力扣链接 🌟🌟

题目描述#

你是一个专业的小偷，计划偷窃沿街的房屋。每间房内都藏有一定的现金，影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统，如果两间相邻的房屋在同一晚上被小偷闯入，系统会自动报警。

给定一个代表每个房屋存放金额的非负整数数组，计算你不触动警报装置的情况下，一夜之内能够偷窃到的最高金额。

示例 1：
输入：[1,2,3,1]
输出：4

解释：偷窃 1 号房屋 (金额 = 1) ，然后偷窃 3 号房屋 (金额 = 3)。偷窃到的最高金额 = 1 + 3 = 4 。

示例 2：
输入：[2,7,9,3,1]
输出：12 解释：偷窃 1 号房屋 (金额 = 2), 偷窃 3 号房屋 (金额 = 9)，接着偷窃 5 号房屋 (金额 = 1)。偷窃到的最高金额 = 2 + 9 + 1 = 12 。

提示：

0 <= nums.length <= 100
0 <= nums[i] <= 400

解题思路#

递推关系：当前房间偷与不偷，依赖前一个和前二个房间是否被偷的状态

动规五部曲：

确定 dp 数组及下标的含义

dp[i]：表示包含下标 i 之前的房间，最多可以偷窃的金额
确定递推公式

假如当前房间为 i，有两种状态：
1. 偷 i
  
  i-1 个房间不能偷，找出前 i-2（包含 i-2）之前的房间，最多可以偷窃的金额 + 第 i 个房间偷到的金额
```
1
dp[i] = dp[i - 2] + nums[i]
```
2. 不偷 i
  
  前 i-1 个房间最多可以偷窃的金额
```
1
dp[i] = dp[i - 1]
```
```
1
// 递推公式为
2
dp[j] = Math.max(dp[j - 2] + nums[j], dp[j - 1])
```
dp 数组初始化

从递推公式得出需要考虑 dp[i-1]和 dp[i-2]，所以必须初始化 dp[0]和 dp[1]
- dp[0] = nums[0]，dp[0]一定是 nums[0]，一定偷第一个房间
- dp[1] = Math.max(nums[0], nums[1]), 选 1 和 2 之间的最大值
确定遍历顺序

i 从 2 开始遍历
举例推导 dp 数组

以 nums = [2,7,9,3,1] 为例，得到的 dp 数组为：
```
1
dp = [2, 7, 11, 11, 12]
```

代码#

1
function rob(nums) {
2
  const n = nums.length
3
  const dp = new Array(n).fill(0)
4

5
  dp[0] = nums[0]
6
  dp[1] = Math.max(nums[0], nums[1])
7

8
  for (let i = 2; i < n; i++) {
9
    dp[i] = Math.max(dp[i - 1], dp[i - 2] + nums[i])
10
  }
11
  console.log(dp)
12

13
  return dp[n - 1]
14
}

213.打家劫舍 II 🌟🌟#

力扣链接 🌟🌟

题目描述#

你是一个专业的小偷，计划偷窃沿街的房屋，每间房内都藏有一定的现金。这个地方所有的房屋都围成一圈，这意味着第一个房屋和最后一个房屋是紧挨着的。同时，相邻的房屋装有相互连通的防盗系统，如果两间相邻的房屋在同一晚上被小偷闯入，系统会自动报警。

给定一个代表每个房屋存放金额的非负整数数组，计算你在不触动警报装置的情况下，能够偷窃到的最高金额。

示例 1：

输出：3
解释：你不能先偷窃 1 号房屋（金额 = 2），然后偷窃 3 号房屋（金额 = 2）, 因为他们是相邻的。
示例 2：
输出：4
解释：你可以先偷窃 1 号房屋（金额 = 1），然后偷窃 3 号房屋（金额 = 3）。偷窃到的最高金额 = 1 + 3 = 4 。
示例 3：
输出：0

提示：

1 <= nums.length <= 100

解题思路#

首尾连成环，意味着首位相邻，所以选择首，就不能选择尾，两者只能选其一，或都不选择

以 nums=[1,6,1,9,1]为例：

情况一：不考虑首尾元素

此时 nums=[6,1,9]
情况二：不考虑尾元素

此时 nums=[1,6,1,9]
情况三：不考虑首元素

此时 nums=[6,1,9,1]

情况二和情况三已经包含情况一了，接下来就类似于打家劫舍思路

代码#

1
var rob = function (nums) {
2
  const robRange = (nums, start, end) => {
3
    if (end === start) return nums[start]
4
    const dp = new Array(nums.length).fill(0)
5
    dp[start] = nums[start]
6
    dp[start + 1] = Math.max(nums[start], nums[start + 1])
7

8
    for (let i = start + 2; i <= end; i++) {
9
      dp[i] = Math.max(dp[i - 1], dp[i - 2] + nums[i])
10
    }
11
    console.log(dp)
12
    return dp[end]
13
  }
14

15
  const n = nums.length
16
  const result1 = robRange(nums, 0, n - 2)
17
  const result2 = robRange(nums, 1, n - 1)
18

19
  return Math.max(result1, result2)
20
}

展开收起

337.打家劫舍 III 🌟🌟#

力扣链接 🌟🌟

题目描述#

在上次打劫完一条街道之后和一圈房屋后，小偷又发现了一个新的可行窃的地区。这个地区只有一个入口，我们称之为“根”。除了“根”之外，每栋房子有且只有一个“父“房子与之相连。一番侦察之后，聪明的小偷意识到“这个地方的所有房屋的排列类似于一棵二叉树”。如果两个直接相连的房子在同一天晚上被打劫，房屋将自动报警。

计算在不触动警报的情况下，小偷一晚能够盗取的最高金额。

dynamic-programming-code71

解题思路#

递归#

1
const memo = new WeakMap(); // 使用 WeakMap 防止内存泄漏
2
function rob(root) {
3
  if (root === null) return 0
4
  if (memo.has(root)) return memo.get(root);
5

6
  if (root.left === null && root.right === null) return root.val
7

8
  // 偷当前节点的情况
9
  let stealCurrent = root.val
10
  if (root.left) {
11
    stealCurrent += rob(root.left.left) + rob(root.left.right)
12
  }
13
  if (root.right) {
14
    stealCurrent += rob(root.right.left) + rob(root.right.right)
15
  }
16

17
  // 不偷当前节点的情况
18
  const skipCurrent = rob(root.left) + rob(root.right)
19
  const maxVal = Math.max(stealCurrent, skipCurrent)
20
  memo.set(root, maxVal);
21
  return maxVal
22
}

展开收起

动态规划#

树形结构偷钱，树形结构状态转移

本题一定是要后序遍历，因为通过递归函数的返回值来做下一步计算

每个节点只有两种状态：偷、不偷，可以使用一个长度为 2 的数组，记录当前节点获取的最大金额

dp[0]记录不偷当前节点的最大金额
dp[1]记录偷当前节点的最大金额

不用定义每个节点的 dp 数组：每层递归都有一个长度为 2 的 dp 数组，当前层的 dp 数组表示当前节点的状态

递归三部曲：

确定递归函数的参数和返回值
- 参数：当前节点
- 返回值：长度为 2 的数组，表示当前节点偷和不偷的最大金额
取定递归的终止条件
- 如果当前节点为 null，返回[0, 0]
确定单层递归的逻辑
- 递归左子树，得到左孩子偷与不偷的最大金额
- 递归右子树，得到右孩子偷与不偷的最大金额
- 偷当前节点，左右孩子只能不偷 val1 = left[0] + right[0] + root.val
- 不偷当前节点，左右孩子就可以偷，左右孩子偷与不偷，取决于左孩子 left[0]和 left[1]的最大值，右孩子 right[0]和 right[1]的最大值 val2 = Math.max(left[0], left[1]) + Math.max(right[0], right[1])

代码#

1
var rob = function (root) {
2
  const postOrder = (root) => {
3
    // 空节点 返回dp数组为 偷与不偷的金额[0, 0]
4
    if (!root) return [0, 0]
5

6
    // 遍历左右子树 得到偷与不偷的最大金额
7
    const left = postOrder(root.left)
8
    const right = postOrder(root.right)
9

10
    // dp[0]不偷 dp[1] 偷
11
    // 不偷当前 左右节点取偷与不偷的最大值
12
    const val1 = Math.max(left[0], left[1]) + Math.max(right[0], right[1])
13
    // 偷当前节点 那么不偷左右节点
14
    const val2 = left[0] + right[0] + root.val
15

16
    // [不偷, 偷]
17
    return [val1, val2]
18
  }
19
  const res = postOrder(root)
20

21
  return Math.max(...res)
22
}

展开收起

跟着卡哥学算法Day 38：动态规划part6

Fri, 21 Mar 2025 00:00:00 GMT

322. 零钱兑换 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定不同面额的硬币 coins 和一个总金额 amount。编写一个函数来计算可以凑成总金额所需的最少的硬币个数。如果没有任何一种硬币组合能组成总金额，返回 -1。

你可以认为每种硬币的数量是无限的。

示例 1：

输入：coins = [1, 2, 5], amount = 11
输出：3
解释：11 = 5 + 5 + 1

示例 2：

输入：coins = [2], amount = 3
输出：-1

示例 3：

输入：coins = [1], amount = 0
输出：0

示例 4：

输入：coins = [1], amount = 1
输出：1

示例 5：

输入：coins = [1], amount = 2
输出：2

提示：

1 <= coins.length <= 12
1 <= coins[i] <= 2^31 - 1
0 <= amount <= 10^4

解题思路#

装满这个背包，最少物品是多少？

题意可得：每种硬币数量是无限的，典型的完全背包问题

动规五部曲：

确定 dp 数组及下标的含义

dp[j]凑足总额为 j 所使用的最少钱币个数
确定递推公式
- 凑足总额为 j - coins[i]的钱币最少个数为 dp[j - coins[i]]
- 所以凑足 dp[j] 通过 dp[j - coins[i]] + 1（只需要一个钱币 coins[i]）
- dp[j]要取所有的 dp[j - coins[i]] + 1 中最小的
```
1
// 递推公式为
2
dp[j] = Math.min(dp[j], dp[j - coins[i]] + 1)
```
dp 数组初始化
- dp[0] = 0，凑足总额为 0 的钱币最少个数为 0
- dp[j] = Infinity, 其余位置必须初始化为最大值，否则在 Math.min(dp[j], dp[j - coins[i]] + 1)时会被覆盖
确定遍历顺序
- 本题求组合数，所以外层遍历物品，内层遍历背包
- 完全背包问题：内层 for 循环正序遍历
举例推导 dp 数组

以 coins = [1, 2, 5]，amount = 5 为例：
```
1
dp = [0, 1, 1, 2, 2, 1]
```

代码#

1
var coinChange = function (coins, amount) {
2
  if (!amount) return 0
3
  const dp = new Array(amount + 1).fill(Infinity)
4

5
  dp[0] = 0
6

7
  for (let i = 0; i < coins.length; i++) {
8
    const coin = coins[i]
9
    for (let j = coin; j <= amount; j++) {
10
      dp[j] = Math.min(dp[j], dp[j - coin] + 1)
11
    }
12
    console.log(dp)
13
  }
14

15
  return dp[amount] === Infinity ? -1 : dp[amount]
16
}

展开收起

注意#

如果求组合数就是外层 for 循环遍历物品，内层 for 遍历背包。
如果求排列数就是外层 for 遍历背包，内层 for 循环遍历物品。

如零钱兑换：coins = [1, 2], amount = 3

求组合数：1+1+1 和 1+2（共 2 种，顺序无关）
求排列数：1+1+1、1+2、2+1（共 3 种，顺序不同视为不同方案）

求组合数（外层遍历物品，内层遍历背包）
```
1
for (let i = 0; i < coins.length; i++) {
2
  const coin = coins[i]
3
  for (let j = coin; j <= amount; j++) {
4
    dp[j] = dp[j] + dp[j - coin]
5
  }
6
}
```
- 外层遍历硬币：确保每个硬币的处理是独立的
- 内层遍历金额：更新金额时只基于当前及之前处理过的硬币
例如，计算 dp[3] 时：
- 处理硬币 2 时，dp[3] 通过 1+2 更新
- 硬币的顺序固定（始终先处理 1 后处理 2），不会出现 2+1 的情况
- 结果为组合数 2
求排列数（外层遍历背包，内层遍历物品）
```
1
for (let j = 1; j <= amount; j++) {
2
  for (let i = 0; i < coins.length; i++) {
3
    const coin = coins[i]
4
    if (j >= coin) {
5
      dp[j] = dp[j] + dp[j - coin]
6
    }
7
  }
8
}
```
- 外层遍历金额：对每个金额 j，考虑所有可能的硬币
- 内层遍历硬币：允许不同顺序的组合
例如，计算 dp[3] 时：
- 使用 1：继承 dp[2]（包含 1+1 和 2）
- 使用 2：继承 dp[1]（包含 1）
- 此时，1+2 和 2+1 被视为不同方案，结果为排列数 3

279.完全平方数 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定正整数 n，找到若干个完全平方数（比如 1, 4, 9, 16, …）使得它们的和等于 n。你需要让组成和的完全平方数的个数最少。

给你一个整数 n ，返回和为 n 的完全平方数的最少数量。

完全平方数是一个整数，其值等于另一个整数的平方；换句话说，其值等于一个整数自乘的积。例如，1、4、9 和 16 都是完全平方数，而 3 和 11 不是。

示例 1：

输入：n = 12
输出：3
解释：12 = 4 + 4 + 4

示例 2：

输入：n = 13
输出：2
解释：13 = 4 + 9

提示：

1 <= n <= 10^4

解题思路#

题意：完全平方数就是物品（可无限使用），凑成正整数 n 就是背包，问凑满这个背包最少有多少物品

动规五部曲：

确定 dp 数组及下标的含义

dp[j]表示和为 j 的完全平方数的最少数量为 dp[j]
确定递推公式
- dp[j]由 dp[j - i * i] 推出，dp[j - i * i] + 1 就可以凑出 dp[j]
- 需要选择最小的 dp[j]
```
1
dp[j] = Math.min(dp[j], dp[j - i * i] + 1)
```
dp 数组初始化
- 根据递推公式，需要初始化 dp[0] = 0（和为 0 的完全平方数的最小数量），这样才能推导出其他
- 其他位置初始化为 Infinity
确定遍历顺序

先遍历物品，再遍历背包
举例推导 dp 数组

假设 n = 5：
```
1
dp = [0, 1, 2, 3, 1, 2]
```

代码#

1
var numSquares = function (n) {
2
  const dp = new Array(n + 1).fill(Infinity)
3
  dp[0] = 0
4

5
  for (let i = 1; i * i <= n; i++) {
6
    for (let j = i * i; j <= n; j++) {
7
      dp[j] = Math.min(dp[j], dp[j - i * i] + 1)
8
    }
9
    console.log(dp)
10
  }
11
  return dp[n]
12
}

139.单词拆分 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个非空字符串 s 和一个包含非空单词的列表 wordDict，判定 s 是否可以被空格拆分为一个或多个在字典中出现的单词。

说明：

拆分时可以重复使用字典中的单词。

你可以假设字典中没有重复的单词。

示例 1：

输入: s = “leetcode”, wordDict = [“leet”, “code”]
输出: true
解释: 返回 true 因为 “leetcode” 可以被拆分成 “leet code”。

示例 2：

输入: s = “applepenapple”, wordDict = [“apple”, “pen”]
输出: true
解释: 返回 true 因为 “applepenapple” 可以被拆分成 “apple pen apple”。
注意你可以重复使用字典中的单词。

示例 3：

输入: s = “catsandog”, wordDict = [“cats”, “dog”, “sand”, “and”, “cat”]
输出: false

解题思路#

单词类比为物品，字符串 s 就是背包，单词能否组成字符串，即物品能不能把背包装满。

动规五部曲：

确定 dp 数组及下标的含义

dp[i]：字符串长度为 i 时，dp[i]为 true，表示可以拆分为一个或多个在字典中出现的单词
确定递推公式
初始化 dp 数组
确定遍历顺序
举例推导 dp 数组

代码#

01 背包对比完全背包#

01 背包问题#

定义#

特点：每个物品只能选择 0 次或 1 次
问题模型：在背包容量限制下，求最大价值或组合数
状态定义：dp[j] 表示容量为 j 的背包能装的最大价值（或组合数）

状态转移方程#

1
dp[j] = max(dp[j], dp[j - weight[i]] + value[i]) // 求最大价值
2
// 或
3
dp[j] += dp[j - nums[i]] // 求组合数（如目标和问题）

初始化#

求最大价值：dp 数组初始化为 0
求组合数：dp[0] = 1（表示空背包有一种方式），其余初始化为 0

遍历顺序#

1
for (物品 i = 0; i < n; i++) {
2
  for (容量 j = maxWeight; j >= weight[i]; j--) { // 倒序遍历
3
    dp[j] = Math.max(dp[j], dp[j - weight[i]] + value[i]);
4
  }
5
}

典型例题#

完全背包问题#

定义#

特点：每个物品可以选无限次
问题模型：在背包容量限制下，求装满背包的组合数或最小物品数
状态定义：dp[j] 表示容量为 j 的背包的组合数或最小物品数

状态转移方程#

1
dp[j] = Math.max(dp[j], dp[j - nums[i]] + value[i]) // 求最大价值
2
dp[j] += dp[j - nums[i]] // 求组合数（如零钱兑换 II）
3
dp[j] = Math.min(dp[j], dp[j - coins[i]] + 1) // 求最小物品数（如零钱兑换）

初始化#

求组合数：dp[0] = 1，其余初始化为 0
求最小物品数：dp[0] = 0，其余初始化为 Infinity

遍历顺序#

1
for (物品 i) {
2
  for (容量 j = nums[i]; j <= maxWeight; j++) { // 正序遍历
3
    dp[j] = Math.max(dp[j], dp[j - nums[i]] + value[i]);
4
    dp[j] += dp[j - nums[i]]; // 组合数
5
    dp[j] = Math.min(dp[j], dp[j - coins[i]] + 1);// 最小物品数
6
  }
7
}

典型例题#

总结#

01 背包：物品唯一，倒序遍历容量，解决“是否选择”的问题
完全背包：物品无限，正序遍历容量，解决“多次选择”的问题
核心技巧：根据问题特点选择遍历顺序，区分组合数或最值问题的初始化方式

跟着卡哥学算法Day 37：动态规划part5

Thu, 20 Mar 2025 00:00:00 GMT

完全背包理论基础#

完全背包问题是 01 背包问题的变种，不同之处在于每种物品可以取无限次。

完全背包动态规划解法（二维数组解法）#

	重量	价值
物品 0	1	15
物品 1	3	20
物品 2	4	30

以此题为例，手动计算结果如下：

dynamic-programming-code51

假如求 dp[1][4]，有两种情况：

不放物品 1
- 背包价值就是 dp[0][4]，即容量为 4 的背包，只放物品 0 的情况
放物品 1
- 背包需要预留物品 1 的容量，背包容量为 4，物品 1 重量为 3，价值为 20，此时剩余容量为 1
- 容量为 1 时，最大价值为 dp[1][1] = 15，即背包容量 1，放入物品 0 和物品 1 （物品 1 可重复放入）的最大价值，01 背包只能是 dp[0][1]，不能重复放入
- 因此放物品 1 的情况 = dp[1][1] + 物品 1 的价值，即：dp[1][4] = 15 + 20

两种情况取最大值：

1
dp[1][4] = Math.max(dp[0][4], dp[1][1] + 20)
2
// 推导递推公式
3
dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - weight[i]] + value[i])

再看 01 背包递推公式

1
dp[i][j] = Math.max(dp[i - 1][j], dp[i - 1][j - weight[i]] + value[i])

区别就是当放入物品 i 时，背包的最大价值是 dp[i][j - weight[i]]，而不是 dp[i - 1][j - weight[i]]，因为完全背包问题可以重复放入物品 i

动规五部曲：

确定 dp 数组以及下标的含义

dp[i][j] 表示[0… i - 1]的物品，可以去无限次，放进容量为 j 的背包的最大价值

确定递推公式

1
dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - weight[i]] + value[i])

dp 数组初始化
- dp[i][0] = 0：背包容量为 0，价值为 0
由状态转移方程可知，i 是由 i-1 推导出来，因此 i 为 0 时也需要初始化
- dp[0][j]：存放物品 0 时，各个容量的背包所能存放的最大价值
  - 当 j < weight 时，dp[0][j] = 0
  - 当 j >= weight，dp[0][j]如果能放下物品 0，就可以无限装
    1 for (let j = weight[0]; j <= bagWeight; j++) { 2 dp[0][j] = dp[0][j - weight[0]] + value[0] 3 }
此时，初始化情况如下：
dynamic-programming-code52

其他地方都初始化为 0，因为 dp[i][j] 都是由上方和作坊数值推导而出
确定遍历顺序

先遍历物品，再遍历背包
举例推导 dp 数组

如最初的手动计算结果

代码#

1
function knapsackComplete2D(weights, values, bagWeight) {
2
  const n = weights.length
3
  const dp = new Array(n).fill().map(() => new Array(bagWeight + 1).fill(0))
4

5
  for (let j = weights[0]; j <= bagSize; j++) {
6
    dp[0][j] = dp[0][j - weights[0]] + values[0]
7
  }
8

9
  for (let i = 1; i < n; i++) {
10
    for (j = 1; j <= bagSize; j++) {
11
      const weight = weights[i]
12
      const value = values[i]
13
      if (j >= weight) {
14
        // 可以放入背包：比较不放入和放入后的最大价值
15
        dp[i][j] = Math.max(
16
          dp[i - 1][j], // 不放入当前物品
17
          dp[i][j - weight] + value // 放入当前物品（注意是dp[i]，不是i-1）
18
        )
19
      } else {
20
        // 当前物品无法放入背包：继承前i-1个物品的结果
21
        dp[i][j] = dp[i - 1][j]
22
      }
23
    }
24
  }
25
  console.log(dp)
26
  return dp[n - 1][bagSize]
27
}

展开收起

完全背包（一维数组）#

和 01 背包推导一致，使用滚动数组

递归五部曲：

确定 dp 数组及下标的含义

dp[j] 表示容量为 j 的背包的最大价值

确定递推公式

1
dp[i][j] = max(dp[i][j], dp[i][j - weight[i]] + value[i])
2
// 压缩成一维数组，去掉i
3
dp[j] = Math.max(dp[j], dp[j - weight[i]] + value[i])

dp 数组初始化

只需初始化dp[0] = 0，背包容量为 0，价值为 0
确定遍历顺序
- 01 背包的一维数组解法需要先遍历物品，再逆序遍历背包，逆序遍历确保每个物品只能使用一次
- 完全背包让物品可以无限次使用，所以使用正序遍历背包
- 01 背包先遍历物品，再逆序遍历背包
- 完全背包先遍历物品，后遍历背包或先遍历背包，后遍历物品
举例推导 dp 数组

1
function knapsackComplete1D(weights, values, bagWeight) {
2
  const n = weights.length
3

4
  const dp = new Array(bagWeight + 1).fill(0)
5

6
  for (let i = 0; i < n; i++) {
7
    for (j = 0; j <= bagWeight; j++) {
8
      const weight = weights[i]
9
      const value = values[i]
10
      if (j >= weight) {
11
        dp[j] = Math.max(dp[j], dp[j - weight] + value)
12
      }
13
    }
14
    console.log(dp)
15
  }
16

17
  return dp[bagWeight]
18
}

展开收起

518.零钱兑换 II 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定不同面额的硬币和一个总金额。写出函数来计算可以凑成总金额的硬币组合数。假设每一种面额的硬币有无限个。

示例 1:

输入: amount = 5, coins = [1, 2, 5]
输出: 4

解释: 有四种方式可以凑成总金额:

5=5
5=2+2+1
5=2+1+1+1
5=1+1+1+1+1

示例 2:

输入: amount = 3, coins = [2]
输出: 0
解释: 只用面额 2 的硬币不能凑成总金额 3。

示例 3:

输入: amount = 10, coins = [10]
输出: 1

注意，你可以假设：

0 <= amount (总金额) <= 5000
1 <= coin (硬币面额) <= 5000
硬币种类不超过 500 种
结果符合 32 位符号整数

解题思路#

类似这种题目：给出一个总数，一些物品，问能否凑成这个总数。典型的背包问题

本题与目标和十分类似。

目标和求装满背包有多少种方法，本题求装满背包有多少种组合

动规五部曲：

确定 dp 数组及下标的含义

dp[i][j] 表示在[0,…i-1]的硬币中，凑成金额 j 的组合数
确定递推公式

组合数等于不装硬币 i 和装硬币 i 的组合数之和
```
1
dp[i][j] = dp[i - 1][j] + dp[i][j - coins[i]]
```
dp 数组初始化

第一行和第一列必须初始化，因为中间的值都是由上面和左边的值推导出来的
- dp[0][j]：使用第一个硬币凑成金额 j 的组合数，即如果 j 能被 coins[0]整除，那么就为 0，否则为 1
- dp[i][0] = 1：使用 i 个硬币凑成金额 0 的组合数，不装就可以，所以时 1 种
确定遍历顺序

先遍历硬币，再遍历金额

举例推导 dp 数组

以 amount 为 5，coins 为：[2,3,5] 为例：

1
dp = [
2
  [1, 0, 1, 0, 1, 0],
3
  [1, 0, 1, 1, 1, 1],
4
  [1, 0, 1, 1, 1, 2],
5
]

代码#

1
function change(amount, coins) {
2
  const n = coins.length
3

4
  const dp = new Array(n).fill().map(() => new Array(amount + 1).fill(0))
5

6
  for (i = 0; i < n; i++) {
7
    dp[i][0] = 1
8
  }
9
  for (let j = 0; j <= amount; j++) {
10
    dp[0][j] = j % coins[0] === 0 ? 1 : 0
11
  }
12

13
  for (let i = 1; i < n; i++) {
14
    const coin = coins[i]
15
    for (let j = 1; j <= amount; j++) {
16
      if (j >= coin) {
17
        dp[i][j] = dp[i - 1][j] + dp[i][j - coin]
18
      } else {
19
        dp[i][j] = dp[i - 1][j]
20
      }
21
    }
22
  }
23
  console.log(dp)
24

25
  return dp[n - 1][amount]
26
}

展开收起

一维 dp#

动规五部曲：

确定 dp 数组及下标的含义

dp[j] 表示能凑成金额 j 的硬币组合数

确定递推公式

1
// 二维dp递推公式为
2
dp[i][j] = dp[i - 1][j] + dp[i][j - coins[i]]
3
// 压缩成一维
4
dp[j] = dp[j] + dp[j - coins[i]]
5
// 推导
6
dp[j] += dp[j - coins[i]]

dp 数组初始化

dp[0] = 1，凑成金额 0 的硬币组合数为 1，即不放入
确定遍历顺序

先遍历硬币，再遍历金额
举例推导 dp 数组

代码#

1
function change(amount, coins) {
2
  const n = coins.length
3
  const dp = new Array(amount + 1).fill(0)
4

5
  dp[0] = 1
6

7
  for (let i = 0; i < n; i++) {
8
    const coin = coins[i]
9
    for (let j = coin; j <= amount; j++) {
10
      dp[j] += dp[j - coin]
11
    }
12

13
    console.log(dp)
14
  }
15

16
  return dp[amount]
17
}

展开收起

377. 组合总和 Ⅳ 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个由正整数组成且不存在重复数字的数组，找出和为给定目标正整数的组合的个数。

示例:

nums = [1, 2, 3]
target = 4

所有可能的组合为： (1, 1, 1, 1) (1, 1, 2) (1, 2, 1) (1, 3) (2, 1, 1) (2, 2) (3, 1)

请注意，顺序不同的序列被视作不同的组合。

因此输出为 7。

解题思路#

本题与上题的区别是：本题求排列数

求装满背包有几种方法，递归公式都是一样的，没有什么差别，但关键在于遍历顺序！

动规五部曲：

确定 dp 数组及下标的含义

dp[j]表示和为 j 的排列数
确定递推公式

装满背包的递推公式都一致：
```
1
dp[j] += dp[j - nums[i]]
```
dp 数组初始化

根据递推公式，需要初始化 dp[0] = 1（和为 0 的排列数为 1），这样才能推导出其他
确定遍历顺序
- 如果求组合数就是外层 for 循环遍历物品，内层 for 遍历背包
- 如果求排列数就是外层 for 遍历背包，内层 for 循环遍历物品
- 如果先遍历物品 nums，再遍历背包 target 时，如果计算 dp[4]时，只能得到(1, 3)，无法得到(3, 1),因为 nums 先遍历，dp[4]已经定为(1,3)
- 所以需要先遍历背包 target，再遍历物品 nums，计算 dp[4]时，可以得到(3,1)和(1,3)

举例推导 dp 数组

假设 target 为 4，nums 为 [1, 2, 3]：

1
dp = [
2
  [1, 1, 0, 0, 0],
3
  [1, 1, 2, 0, 0],
4
  [1, 1, 2, 4, 0],
5
  [1, 1, 2, 4, 7],
6
]

代码#

1
function combinationSum4(nums, target) {
2
  const dp = new Array(target + 1).fill(0)
3

4
  dp[0] = 1
5

6
  for (let j = 1; j <= target; j++) {
7
    for (let i = 0; i < nums.length; i++) {
8
      const num = nums[i]
9
      if (j >= num) {
10
        dp[j] += dp[j - num]
11
      }
12
    }
13
    console.log(dp)
14
  }
15
  return dp[target]
16
}

展开收起

二维 dp 数组解法#

动规五部曲：

确定 dp 数组及下标的含义

dp[i][j] 使用前 i 种硬币（即 coins[0…i-1]）凑成金额 j 的组合数

确定递推公式

1
dp[i][j] = dp[i - 1][j] + dp[i][j - nums[i]]

dp 数组初始化
- dp[i][0] = 1，表示前 i 个数和为 1 时，不放入，有一种组合
- dp[0][j] = nums[0] === j ? 1 : 0，表示只有第一个数时，和为 j 的组合数，只有当 nums[0] === j 时，才有一种组合
确定遍历顺序

先遍历背包，再遍历物品
举例推导 dp 数组

1
function combinationSum4(nums, target) {
2
  const n = nums.length
3
  const dp = new Array(n).fill().map(() => new Array(target + 1).fill(0))
4

5
  for (let i = 0; i < n; i++) {
6
    dp[i][0] = 1
7
  }
8

9
  for (let j = 1; j <= target; j++) {
10
    for (let i = 1; i < n; i++) {
11
      if (j >= nums[i]) {
12
        // 不放nums[i]
13
        // i = 0 时，dp[-1][j]恰好为0，所以没有特殊处理
14
        dp[i][j] =
15
          dp[i - 1][j] +
16
          // 放nums[i]。对于和为j的组合，只有试过全部物品，才能知道有几种组合方式。所以取最后一个物品dp[-1][j-nums[i]]
17
          dp[i][j - nums[i]]
18
      } else {
19
        dp[i][j] = dp[i - 1][j]
20
      }
21
    }
22
  }
23

24
  console.log(dp)
25
  return dp[n - 1][target]
26
}

展开收起

70. 爬楼梯（进阶版） 🌟🌟#

题目描述#

假设你正在爬楼梯。需要 n 阶你才能到达楼顶。

每次你可以爬至多 m (1 <= m < n)个台阶。你有多少种不同的方法可以爬到楼顶呢？

注意：给定 n 是一个正整数。

输入描述：输入共一行，包含两个正整数，分别表示 n, m

输出描述：输出一个整数，表示爬到楼顶的方法数。

输入示例：3 2

输出示例：3

提示：

当 m = 2，n = 3 时，n = 3 这表示一共有三个台阶，m = 2 代表你每次可以爬一个台阶或者两个台阶。

此时你有三种方法可以爬到楼顶。

1 阶 + 1 阶 + 1 阶段
1 阶 + 2 阶
2 阶 + 1 阶

解题思路#

最初的爬楼梯一层最多爬两层台阶，而这里可以爬 1-m 个台阶，因此问题就转成了完全背包问题。

动规五部曲：

确定 dp 数组及下标的含义

dp[i]表示爬到第 i 阶楼梯的方法数
确定递推公式

求装满背包的递推公式都是：dp[i] += dp[i - nums[j]]

本体 j 指的是步数，及 dp[i] = dp[i-1] + dp[i-2] + … + dp[i-j]，所以可得递推公式为：
```
1
dp[i] += dp[i - j]
```
初始化 dp 数组

dp[0] = 1，爬到第 0 阶楼梯的方法数为 1，dp[i]是由 dp[i-j]推导出来的，所以 dp[0]必须初始化
确定遍历顺序
- 完全背包问题：先遍历背包，再遍历物品
- 在这里，先遍历 target，再遍历 nums
举例推导 dp 数组

代码#

1
var climbStairs = function (n, m) {
2
  let dp = new Array(n + 1).fill(0)
3
  dp[0] = 1
4
  // 排列题，注意循环顺序，背包在外物品在内
5
  for (let j = 1; j <= n; j++) {
6
    //遍历背包
7
    for (let i = 1; i <= m; i++) {
8
      //遍历物品
9
      if (j - i >= 0) dp[j] = dp[j] + dp[j - i]
10
    }
11
    console.log(dp)
12
  }
13
  return dp[n]
14
}

01 背包对比完全背包#

01 背包问题#

定义#

特点：每个物品只能选择 0 次或 1 次
问题模型：在背包容量限制下，求最大价值或组合数
状态定义：dp[j] 表示容量为 j 的背包能装的最大价值（或组合数）

状态转移方程#

1
dp[j] = max(dp[j], dp[j - weight[i]] + value[i]) // 求最大价值
2
// 或
3
dp[j] += dp[j - nums[i]] // 求组合数（如目标和问题）

初始化#

求最大价值：dp 数组初始化为 0
求组合数：dp[0] = 1（表示空背包有一种方式），其余初始化为 0

遍历顺序#

1
for (物品 i = 0; i < n; i++) {
2
  for (容量 j = maxWeight; j >= weight[i]; j--) { // 倒序遍历
3
    dp[j] = Math.max(dp[j], dp[j - weight[i]] + value[i]);
4
  }
5
}

典型例题#

完全背包问题#

定义#

特点：每个物品可以选无限次
问题模型：在背包容量限制下，求装满背包的组合数或最小物品数
状态定义：dp[j] 表示容量为 j 的背包的组合数或最小物品数

状态转移方程#

1
dp[j] = Math.max(dp[j], dp[j - nums[i]] + value[i]) // 求最大价值
2
dp[j] += dp[j - nums[i]] // 求组合数（如零钱兑换 II）
3
dp[j] = Math.min(dp[j], dp[j - coins[i]] + 1) // 求最小物品数（如零钱兑换）

初始化#

求组合数：dp[0] = 1，其余初始化为 0
求最小物品数：dp[0] = 0，其余初始化为 Infinity

遍历顺序#

1
for (物品 i) {
2
  for (容量 j = nums[i]; j <= maxWeight; j++) { // 正序遍历
3
    dp[j] = Math.max(dp[j], dp[j - nums[i]] + value[i]);
4
    dp[j] += dp[j - nums[i]]; // 组合数
5
    dp[j] = Math.min(dp[j], dp[j - coins[i]] + 1);// 最小物品数
6
  }
7
}

典型例题#

总结#

01 背包：物品唯一，倒序遍历容量，解决“是否选择”的问题
完全背包：物品无限，正序遍历容量，解决“多次选择”的问题
核心技巧：根据问题特点选择遍历顺序，区分组合数或最值问题的初始化方式

跟着卡哥学算法Day 36：动态规划part4

Wed, 19 Mar 2025 00:00:00 GMT

找问题最好的方式就是把 dp 数组打印出来，看看是不是和我们推导的公式一致。

做动规题目前，一定要把状态转移在 dp 数组上的具体情况模拟一遍，确定最后推出的是想要的结果。

1049.最后一块石头的重量 II 🌟🌟#

力扣链接 🌟🌟

题目描述#

有一堆石头，每块石头的重量都是正整数。

每一回合，从中选出任意两块石头，然后将它们一起粉碎。假设石头的重量分别为 x 和 y，且 x <= y。那么粉碎的可能结果如下：

如果 x == y，那么两块石头都会被完全粉碎；

如果 x != y，那么重量为 x 的石头将会完全粉碎，而重量为 y 的石头新重量为 y-x。

最后，最多只会剩下一块石头。返回此石头最小的可能重量。如果没有石头剩下，就返回 0。

示例：

输入：[2,7,4,1,8,1]
输出：1

解释：

组合 2 和 4，得到 2，所以数组转化为 [2,7,1,8,1]，
组合 7 和 8，得到 1，所以数组转化为 [2,1,1,1]，
组合 2 和 1，得到 1，所以数组转化为 [1,1,1]，
组合 1 和 1，得到 0，所以数组转化为 [1]，这就是最优值。

提示：

1 <= stones.length <= 30
1 <= stones[i] <= 1000

解题思路#

尽量让石头分成重量相同的两堆（尽可能相同），这样相撞之后剩下的石头就是最小的。

转换为 01 背包问题：有一堆石头 stores，每块石头的重量和价值多是 stores[i]，问是否能装满最大重量为 sum/2 的背包。

动规五部曲：

确定 dp 数组及下标的含义
- dp[j] 表示容量为 j 的背包最多可以背的最大重量
确定递推公式

dp[j]的最大重量等于不放入石头（当前背包重量 dp[j]）和放入石头（dp[j - stores[i]] + stores[i]）的最大值
```
1
dp[j] = Math.max(dp[j], dp[j - stores[i]] + stores[i])
```
dp 数组初始化

dp 数组的大小等于 sum/2

dp 数组初始化都为 0，因为通过递推公式 dp[j] = Math.max(dp[j], dp[j - stores[i]] + stores[i])都会被覆盖
```
1
dp = new Array(sum / 2 + 1).fill(0)
```
以[2,7,4,1,8,1]为例，初始化 dp 数组为[0,0,0,0,0,0,0,0,0,0,0]

确定遍历顺序

如果使用一维数组，先正序遍历物品，再逆序遍历背包

1
for (let i = 0; i < stores.length; i++) {
2
  for (let j = sum / 2; j >= 0; j--)
3
}

举例推导 dp 数组

以[2,7,4,1,8,1]为例，dp 数组最终输出为：

1
dp = [
2
  // 遍历2
3
  [0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
4
  // 遍历7
5
  [0, 0, 2, 2, 2, 2, 2, 7, 7, 9, 9, 9],
6
  // 遍历4
7
  [0, 0, 2, 2, 4, 4, 6, 7, 7, 9, 9, 11],
8
  // 遍历1
9
  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
10
  // 遍历8
11
  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
12
  // 遍历1
13
  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
14
]

最后 dp[target]里是容量为 target 的背包所能背的最大重量

那么分成两堆石头，一堆石头的总重量是 dp[target]，另一堆就是 sum - dp[target]

在计算 target 的时候，target = sum / 2 因为是向下取整，所以 sum - dp[target] 一定是大于等于 dp[target]的

代码#

1
var lastStoneWeightII = function (stores) {
2
  const sum = stores.reduce((acc, cur) => acc + cur)
3
  const target = Math.floor(sum / 2)
4
  const len = stores.length
5

6
  const dp = new Array(target + 1).fill(0)
7

8
  for (let i = 0; i < len; i++) {
9
    const store = stores[i]
10
    for (let j = target; j >= store; j--) {
11
      dp[j] = Math.max(dp[j], dp[j - store] + store)
12
    }
13
    console.log(dp)
14
  }
15

16
  return sum - dp[target] - dp[target]
17
}

展开收起

二维 dp 数组版本代码#

1
// 1. dp[i][j]表示[0, i - 1]个石头放入背包容量为j的情况下的最大重量
2
// 2. 每块石头可选可不选 dp[i][j] = Math.max(dp[i - 1][j], dp[i - 1][j - stores[i]] + stores[i])
3
// 3. 初始化 dp[i][0] = 0 背包容量为0，最大重量为0；dp[0][j] = stores[0]，背包容量为j时，装入第一块石头的重量
4
var lastStoneWeightII = function (stores) {
5
  const sum = stores.reduce((acc, cur) => acc + cur)
6
  const target = Math.floor(sum / 2)
7
  const len = stores.length
8

9
  const dp = new Array(len).fill().map(() => new Array(target + 1).fill(0))
10

11
  // 处理第一个石头的情况
12
  for (let j = 0; j <= stores[0]; j++) {
13
    dp[0][j] = stores[0]
14
  }
15

16
  for (let i = 1; i < len; i++) {
17
    const store = stores[i]
18
    for (let j = 1; j <= target; j++) {
19
      if (j >= store) {
20
        dp[i][j] = Math.max(dp[i - 1][j], dp[i - 1][j - store] + store)
21
      } else {
22
        dp[i][j] = dp[i - 1][j]
23
      }
24
    }
25
  }
26
  console.log(dp)
27

28
  return sum - dp[len - 1][target] - dp[len - 1][target]
29
}

展开收起

494.目标和 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个非负整数数组，a1, a2, …, an, 和一个目标数，S。现在你有两个符号 + 和 -。对于数组中的任意一个整数，你都可以从 + 或 -中选择一个符号添加在前面。

返回可以使最终数组和为目标数 S 的所有添加符号的方法数。

示例：

输入：nums: [1, 1, 1, 1, 1], S: 3
输出：5

解释：

-1+1+1+1+1 = 3
+1-1+1+1+1 = 3
+1+1-1+1+1 = 3
+1+1+1-1+1 = 3
+1+1+1+1-1 = 3

一共有 5 种方法让最终目标和为 3。

提示：

数组非空，且长度不会超过 20 。
初始的数组的和不会超过 1000 。
保证返回的最终结果能被 32 位整数存下。

解题思路#

回溯#

动规#

假设数组是 [1, 1, 1, 1, 1]，目标值 target = 3

计算总和

数组总和 sum = 1 + 1 + 1 + 1 + 1 = 5。
建立方程
- 数组可分为：正数部分的和为 left，负数部分的和的绝对值为 right
- 根据题意，正负号后的和为 target，即 left - right = target = 3
- 数组总和为 sum = left + right = 5

推导

方程 1：left - right = target
方程 2：left + right = sum

1
(left - right) + (left + right) = target + sum
2
2 * left = target + sum
3
left = (target + sum)/2

验证结果：

1
// 正数部分和为 4
2
left = (3 + 5) / 2 = 4
3
// 负数部分绝对值和为 1
4
right = sum - left = 5 - 4 = 1
5
// 最终和为
6
4 - 1 = 3

那么，此题可转换为：找出数组中子集的和等于 (target + sum) / 2 的情况，对应 01 背包就是：即用 nums 装满容量为 (target + sum) / 2 的背包有多少种方法

前提：

target 值不能超过 sum
target + sum 必须是偶数，如果 sum + target 是奇数，那么无法得到整数 left，向上或向下取整都是无解的

动规五部曲：

确定 dp 数组及下标的含义

dp[i][j] 表示下标[0, i]的元素中，和为 j 的情况下的方法数
确定递推公式

对于第 i 个元素 num，可以选择放入或不放入
- 不选当前元素：组合数继承自前 i-1 个元素的结果 dp[i-1][j]
- 选当前元素：组合数等于前 i-1 个元素凑出 j - nums[i] 的组合数 dp[i-1][j - nums[i]]
- 总组合数是两种选择的组合数之和(与 01 背包问题不同，01 背包求最大价值，而此处求组合数)：
```
1
dp[i][j] = dp[i - 1][j] + dp[i - 1][j - nums[i]]
```
dp 数组如何初始化
- dp[i][0]: 背包容量为 0，只有一种方法装满，即不放入任何物品
- dp[0][j]：只放物品 0 时，只有背包容量为物品 0 重量的时候，放好填满
确定遍历顺序

先遍历物品，再遍历背包

举例推导 dp 数组

输入：nums: [1, 1, 1, 1, 1], target: 3，dp 数组状态变化如下：

1
dp = [
2
  [1, 0, 0, 0, 0],
3
  [1, 1, 0, 0, 0],
4
  [1, 2, 1, 0, 0],
5
  [1, 3, 3, 1, 0],
6
  [1, 4, 6, 4, 1],
7
  [1, 5, 10, 10, 5],
8
]

代码#

1
function findTargetSumWays(nums, target) {
2
  const sum = nums.reduce((a, b) => a + b, 0)
3

4
  // 目标和大于sum
5
  if (Math.abs(target) > sum) return 0
6
  // 目标与总数之和必须为偶数
7
  if (（sum + target) % 2 !== 0) return 0
8

9
  const target = (sum + target) / 2
10
  if (target < 0) return 0 // 确保target非负
11

12
  const len = nums.length
13
  // 初始化二维数组（len行 * target + 1列）
14
  const dp = new Array(len).fill().map(() => new Array(target + 1).fill(0))
15

16
  // 初始化第一行 处理第一个元素
17
  if (nums[0] <= target) {
18
    // 第一个元素恰好等于背包容量时 有一种方法
19
    dp[0][nums[0]] = 1
20
  }
21
  dp[0][0] = 1 // 初始状态：和为0有一种方式（不选任何元素）
22

23
  for (let i = 1; i < len; i++) {
24
    for (let j = 0; j <= target; j++) {
25
      if (nums[i] <= j) {
26
        // 放入背包： 不放入的组合数+放入的组合数
27
        dp[i][j] = dp[i - 1][j] + dp[i - 1][j - nums[i]]
28
      } else {
29
        // 不放入背包
30
        dp[i][j] = dp[i - 1][j]
31
      }
32
    }
33
  }
34
  console.log(dp)
35

36
  return dp[len - 1][target]
37
}

展开收起

一维数组代码#

动规五部曲：

确定 dp 数组及下标的含义

dp[j] 表示容量为 j 的背包中，子集的和为 target 的情况
确定递推公式
```
1
dp[j] = dp[j] + dp[j - nums[i]]
```
dp 数组初始化
- dp[0] 初始为 1 ,即装满背包为 0 的方法有一种，放 0 件物品。
确定遍历顺序

先遍历物品，再逆序遍历背包

举例推导 dp 数组

nums = [1, 1, 1, 1, 1], target = 3 时

1
dp = [
2
  [1, 1, 0, 0, 0],
3
  [1, 2, 1, 0, 0],
4
  [1, 3, 3, 1, 0],
5
  [1, 4, 6, 4, 1],
6
  [1, 5, 10, 10, 5],
7
]

1
var findTargetSumWays = function (nums, target) {
2
  const sum = nums.reduce((a, b) => a + b, 0)
3
  if (Math.abs(target) > sum || (target + sum) % 2 !== 0) return 0
4
  const bagSize = (target + sum) / 2
5
  if (bagSize < 0) return 0
6

7
  const dp = new Array(bagSize + 1).fill(0)
8
  dp[0] = 1 // 初始状态
9

10
  for (const num of nums) {
11
    for (let j = bagSize; j >= num; j--) {
12
      dp[j] += dp[j - num]
13
    }
14
    console.log(dp)
15
  }
16
  return dp[bagSize]
17
}

展开收起

474.一和零 🌟🌟#

力扣链接 🌟🌟

题目描述#

给你一个二进制字符串数组 strs 和两个整数 m 和 n 。

请你找出并返回 strs 的最大子集的大小，该子集中最多有 m 个 0 和 n 个 1 。

如果 x 的所有元素也是 y 的元素，集合 x 是集合 y 的子集。

示例 1：

输入：strs = [“10”, “0001”, “111001”, “1”, “0”], m = 5, n = 3
输出：4
解释：最多有 5 个 0 和 3 个 1 的最大子集是 {“10”,“0001”,“1”,“0”} ，因此答案是 4 。其他满足题意但较小的子集包括 {“0001”,“1”} 和 {“10”,“1”,“0”} 。{“111001”} 不满足题意，因为它含 4 个 1 ，大于 n 的值 3 。

示例 2：

输入：strs = [“10”, “0”, “1”], m = 1, n = 1
输出：2
解释：最大的子集是 {“0”, “1”} ，所以答案是 2 。

提示：

1 <= strs.length <= 600
1 <= strs[i].length <= 100
strs[i] 仅由 ‘0’ 和 ‘1’ 组成
1 <= m, n <= 100

解题思路#

代码#

跟着卡哥学算法Day 35：动态规划part3

Tue, 18 Mar 2025 00:00:00 GMT

找问题最好的方式就是把 dp 数组打印出来，看看是不是和我们推导的公式一致。

做动规题目前，一定要把状态转移在 dp 数组上的具体情况模拟一遍，确定最后推出的是想要的结果。

01 背包理论基础#

01 背包问题是指有 n 件物品和一个最多能背重量为 w 的背包。第 i 件物品的重量为 weight[i]，价值为 value[i]，每个物品只能选择一次，在不超过背包容量的情况下，使得物品的总价值最大。比如：旅行时行李箱大小有限，如何选择最有价值的物品装满行李箱。

首先思考如何使用暴力解法？

每件物品的状态有两种：放入背包或不放入背包，有 2^n 种状态，可以使用回溯法搜索出所有的情况，时间复杂度为 O(2^n)。

回溯三部曲：

初始化 maxValue = 0 表示总价值

回溯函数返回值以及参数
- 参数 1：startIndex 表示当前处理的物品索引
- 参数 2：currentWeight 表示当前已选物品的总重量
- 参数 3：currentValue 表示已选物品的总价值
回溯函数终止条件

当 startIndex 等于物品数量 n 时，比较并更新最大价值

单层搜索的过程

不选当前物品：直接处理下一个物品（index + 1），重量和价值不变
选当前物品：如果加入后不超过容量，则更新重量和价值，再处理下一个物品

1
// 不选当前物品，直接处理下一个
2
backtrack(startIndex + 1, currentWeight, currentValue)
3

4
// 选当前物品（需检查容量）
5
if (currentWeight + weight[startIndex] <= W) {
6
  backtrack(
7
    startIndex + 1,
8
    currentWeight + weight[startIndex],
9
    currentValue + value[startIndex]
10
  )
11
}

1
function knapsack01Backtrack(W, weight, value) {
2
  let maxValue = 0
3
  const n = weight.length
4

5
  const backtracking = (startIndex, currentWeight, currentValue) => {
6
    if (startIndex === n) {
7
      maxValue = Math.max(maxValue, currentValue)
8
      return
9
    }
10

11
    // 不选当前物品，直接处理下一个
12
    backtracking(startIndex + 1, currentWeight, currentValue)
13

14
    // 选当前物品（需检查容量）
15
    if (currentWeight + weight[startIndex] <= W) {
16
      backtracking(
17
        startIndex + 1,
18
        currentWeight + weight[startIndex],
19
        currentValue + value[startIndex]
20
      )
21
    }
22
  }
23

24
  backtracking(0, 0, 0)
25
  return maxValue
26
}

展开收起

暴力解法是指数级别的时间复杂度，所以需要动态规划的解法来优化

01 背包动态规划解法（常规解法）#

以下面的输入为例：

背包最大重量为 4。

物品为：

	重量	价值
物品 0	1	15
物品 1	3	20
物品 2	4	30

问背包能背的物品最大价值是多少？

二维 dp 数组 01 背包#

动规五部曲：

确定 dp 数组以及下标的含义

需要定义二维数组：一个维度表示背包容量，一个维度表示表示物品，即 dp[i][j] 表示前 i 个物品放入容量为 j 的背包时的最大价值。
1. 处理物品 0（重量 1，价值 15）
  
  当 j = 0（容量为 0）时，无法放入，价值为 0；若 j ≥ 1，可以放入物品 0，价值为 15。
  
  背包容量 0 1 2 3 4
  物品 0 0 15 15 15 15
2. 处理物品 1（重量 3，价值 20）
  - 容量 1-2：无法放入物品 1，继承物品 0 的值 15
  - 容量 3：
    - 不放入物品 1：那么背包的价值应该是 dp[1][3] = dp[0][3] = 15，即容量为 3 的背包，只放物品 0 的情况
    - 放入物品 1：那么背包要先留出物品 1 的容量，目前容量为 3，物品 1 的重量为 3，背包剩余容量为 0 时的价值为 dp[0][0] = 0，所以 dp[1][3] = dp[0][3-3] + 20 = 0 + 20 = 20
    - 取最大值 20
  - 容量 4：
    - 不放入物品 1：那么背包的价值应该是 dp[1][4] = dp[0][4] = 15，即容量为 4 的背包，只放物品 0 的情况
    - 放入物品 1：目前容量为 4，物品 1 的重量为 3，背包剩余容量为 1，背包容量为 1 时的价值为 dp[0][1] = 15, 所以dp[1][4] = dp[0][4-3] + 20 = 15 + 20 = 35
    - 取最大值 35
    背包容量 0 1 2 3 4
    物品 0 0 15 15 15 15
    物品 1 0 15 15 20 35
3. 处理物品 2（重量 4，价值 30）
  - 容量 1-3：无法放入物品 2，继承物品 1 的值。
  - 容量 4：
    - 不放入物品 2：dp[2][4] = dp[1][4] = 35，即容量为 4 的背包，放入物品 0 和 1 的情况
    - 放入物品 2：目前容量为 4，物品重量为 4，放入后背包剩余 0 的价值为 dp[0][0] = 0，所以dp[2][4] = dp[1][4-4] + 30 = 0 + 30 = 30
    - 取最大值 35
  背包容量 0 1 2 3 4
  物品 0 0 15 15 15 15
  物品 1 0 15 15 20 35
  物品 2 0 15 15 20 35
确认递推公式

通过上面的示例，我们可以得出不放入第 i 个物品和放入第 i 个物品的最大价值：
1. 不放入第 i 个物品：背包容量为 j，里面不放物品 i 的最大价值是 dp[i][j] = dp[i-1][j]
2. 放入第 i 个物品：背包空出物品 i 的容量后，背包容量为 j - weight[i]，dp[i-1][j-weight[i]] 为背包容量为 j - weight[i] 且不放物品 i 的最大价值， dp[i][j] = dp[i-1][j-weight[i]] + value[i] 就是背包放入物品 i 得到的最大价值
两者取最大值：dp[i][j] = Math.max(dp[i-1][j], dp[i-1][j-weight[i]] + value[i])
dp 数组初始化

初始化一定要和 dp 数组的定义吻合，否则到递推公式的时候会越来越乱
- 当 j = 0（背包容量为 0）时，背包价值为 0，即dp[i][0] = 0
- 由状态转移方程可知，i 是由 i-1 推导出来的，所以 i 为 0 需要初始化
  - 当 j < weight[0] 时，dp[0][j] = 0，背包容量比编号 0 的物品重量小
  - 当 j >= weight[0] 时，dp[0][j] = value[0]，背包容量比编号 0 的物品重量大，可以放入，此时价值就是 value[0]
此时，dp 数组初始化应该如下：

背包容量 0 1 2 3 4
物品 0 0 15 15 15 15
物品 1 0
物品 2 0

由递推公式可以 dp[i][j] 都会由左上方的值决定，所以初始化任何数都可以，统一填充为 0

背包容量	0	1	2	3	4
物品 0	0	15	15	15	15

背包容量	0	1	2	3	4
物品 0	0	15	15	15	15
物品 1	0	15	15	20	35

背包容量	1	2	3	4
物品 0	15	15	15	15
物品 1	15	15	20	35
物品 2	15	15	20	35

背包容量	1	2	3	4
物品 0	15	15	15	15
物品 1
物品 2

确定遍历顺序

有两个维度，物品和背包容量，先遍历物品还是先遍历背包容量呢？

先遍历物品，再遍历背包容量，就类似于上面的推导过程，比较好理解

1
for (let i = 1; i < weight.length; i++) {
2
  // 物品
3
  for (let j = 0; j <= W; j++) {
4
    // 背包容量
5
    // 1. 不放入物品 i
6
    if (j < weight[i]) {
7
      dp[i][j] = dp[i - 1][j]
8
    } else {
9
      // 2. 放入物品 i
10
      dp[i][j] = Math.max(dp[i - 1][j], dp[i - 1][j - weight[i]] + value[i])
11
    }
12
  }
13
}

举例推导 dp 数组

上述示例的 dp 数组应该是：

1
[
2
  [0, 15, 15, 15, 15],
3
  [0, 15, 15, 20, 35],
4
  [0, 15, 15, 20, 35]
5
]

代码#

1
function knapsack01(W, weight, value) {
2
  const n = weight.length
3
  const dp = new Array(n).fill().map(() => new Array(W + 1).fill(0))
4

5
  // 初始化 dp 数组
6
  for (let j = 0; j <= W; j++) {
7
    if (j >= weight[0]) {
8
      dp[0][j] = value[0]
9
    }
10
  }
11

12
  for (let i = 1; i < n; i++) {
13
    for (let j = 0; j <= W; j++) {
14
      if (j < weight[i]) {
15
        dp[i][j] = dp[i - 1][j]
16
      } else {
17
        dp[i][j] = Math.max(dp[i - 1][j], dp[i - 1][j - weight[i]] + value[i])
18
      }
19
    }
20
  }
21

22
  console.log(dp)
23
  return dp[n - 1][W]
24
}

展开收起

01 背包动态规划解法（滚动数组）#

上面二维数组的解法中，每个状态 dp[i][j] 依赖于上一行的数据，dp[i-1][j] 和 dp[i-1][j-weight[i]]

这说明其实每次处理新物品的时候，只需要前一行的数据，而不需要保留之前所有行的信息。这样的话，理论上可以用一维数组来滚动更新，减少空间使用。

二维数组的递推公式为：dp[i][j] = Math.max(dp[i - 1][j], dp[i - 1][j - weight[i]] + value[i])

把 dp[i - 1]拷贝到 dp[i]，表达式可以是 dp[i][j] = Math.max(dp[i][j], dp[i][j - weight[i]] + value[i])

因此可以使用滚动数组：如果上一层可以重复利用，直接拷贝到当前层

动规五部曲：

确定 dp 数组以及下标的含义

在上面的二维数组中，dp[i][j] 表示从下标为[0-i]的物品里任意取，放进容量为 j 的背包的最大价值

一维数组：dp[j] 表示背包容量为 j 时的最大价值
确定递推公式

当把 dp[i - 1] 拷贝到 dp[i] 的时候，递推公式可以简化为：dp[i][j] = Math.max(dp[i][j], dp[i][j - weight[i]] + value[i])

此时去掉 i，dp[j] = Math.max(dp[j], dp[j - weight[i]] + value[i])
- dp[j]：相当于二维 dp 数组中的 dp[i-1][j]，即不放物品 i
- dp[j - weight[i]] + value[i]：容量为 j - weight[i]的背包所背的最大价值 + 当前物品 i 的价值，即放物品 i
dp 数组初始化

dp[0] = 0，即容量为 0 的背包，不放任何物品，最大价值为 0

初始化为全 0，表示没有物品时的价值为 0。
确定遍历顺序

二维遍历的时候，背包从小到大，而一维遍历时，背包应从大到小

示例：
- 物品 0：重量 weight[0] = 1，价值 value[0] = 15
- 背包容量：W = 2
- 一维数组初始化：dp = [0, 0, 0]（容量 0、1、2）
1. 正序遍历容量（错误方式）
  
  遍历顺序：容量从小到大（j = 1 → 2）
  
  执行步骤：
  1. j = 1：
    - dp[1] = max(0, dp[0] + 15) = 15
    - 此时 dp = [0, 15, 0]
  2. j = 2：
    - dp[2] = max(0, dp[1] + 15) = 15 + 15 = 30
    - 此时 dp = [0, 15, 30]
  结果分析：
  - dp[2] = 30 此时物品 0 被放入两次
  - 错误原因：正序遍历时，dp[j - weight[i]] 已经被当前物品的更新污染，导致重复选择
2. 逆序遍历容量（正确方式）
  
  遍历顺序：容量从大到小（j = 2 → 1）
  
  执行步骤：
  1. j = 2：
    - dp[2] = max(0, dp[1] + 15)，但此时 dp[1] 尚未更新，仍为 0。
    - 因此 dp[2] = 0 + 15 = 15
    - 此时 dp = [0, 0, 15]
  2. j = 1：
    - dp[1] = max(0, dp[0] + 15) = 15
    - 此时 dp = [0, 15, 15]
  结果分析：
  - dp[2] = 15 表示物品 0 仅被放入一次
  - 正确原因：逆序遍历时，较大的容量 j 优先处理，此时较小的容量 j - weight[i] 尚未被修改，仍保留上一轮的值，避免重复计算
举例推导 dp 数组
1. 物品 0 遍历背包：dp = [0, 15, 15, 15, 15]
2. 物品 1 遍历背包：dp = [0, 15, 15, 20, 35]
3. 物品 2 遍历背包：dp = [0, 15, 15, 20, 35]

代码#

1
function knapsack01(W, weight, value) {
2
  const dp = new Array(W + 1).fill(0) // 初始化一维数组
3
  const n = weight.length
4

5
  for (let i = 0; i < n; i++) {
6
    // 遍历物品
7
    for (let j = W; j >= weight[i]; j--) {
8
      // 逆序遍历容量
9
      dp[j] = Math.max(dp[j], dp[j - weight[i]] + value[i])
10
    }
11
    console.log(dp)
12
  }
13
  return dp[W]
14
}

416. 分割等和子集 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个只包含正整数的非空数组。是否可以将这个数组分割成两个子集，使得两个子集的元素和相等。

注意: 每个数组中的元素不会超过 100 数组的大小不会超过 200

示例 1:

输入: [1, 5, 11, 5]
输出: true
解释: 数组可以分割成 [1, 5, 5] 和 [11].

示例 2:

输入: [1, 2, 3, 5]
输出: false
解释: 数组不能分割成两个元素和相等的子集.

提示：

1 <= nums.length <= 200
1 <= nums[i] <= 100

解题思路#

前提：

数组和为偶数（否则无法等分）
数组长度大于 2（否则无法分割子集）
最大元素必须小于总和的一半（否则剩下的所有元素和一定小于总和的一半，不可能等分）

满足以上三个条件，如[1, 5, 11, 5]，总和为 22，可以等分为 [1, 5, 5] 和 [11]

此题关键点是将这个问题视为一个背包问题，不仅可以求背包能背的最大价值，还可以求这个背包是否可以装满，其中背包的容量是数组总和的一半。如果能找到一个子集的和等于总和的一半，那么剩下的元素自然也能组成另一半，这样就满足了题目的条件。

即求合集内是否出现总和为 sum/2 的子集。

转为 01 背包问题，求背包容量为 sum/2 时，物品的重量和价值都是数字本身，这些数字能否把背包装满（和为 sum/2）

二维 dp 数组#

动规五部曲：

确定 dp 数组和下标的含义
- 01 背包中，dp[i][j] 表示在[0, i - 1]范围内的物品放入容量为 j 的背包，所背物品的最大价值
- 本题中，dp[i][j] 表示在[0, i - 1]范围内是否存在和为 j 的子集
确定递推公式
- 01 背包二维数组的递推公式为：dp[i][j] = Math.max(dp[i - 1][j], dp[i - 1][j - weight[i]] + value[i]])
- 此题的递推公式为：dp[i][j] = dp[i - 1][j]（不选） || dp[i - 1][j - nums[i]]（选择）
初始化 dp 数组
- 初始化所有dp[i][0]为 true，因为不选择任何元素时，和为 0 总是成立的
- 初始化dp[0][nums[0]]为 true，只选第一个数字时，和为 nums[0] 总是成立的
- 其他位置填充为 false
dynamic-programming-code31

确定遍历顺序

先遍历数字，再遍历每一个可能的和 [1…sum/2]

1
for (let i = 1; i < nums.length; i++) {
2
  // 数字
3
  for (let j = 1; j <= sum / 2; j++) {
4
    // 和
5
    // 1. 不选择数字
6
    // 不选择当前元素，继承上一行的结果
7
    if (j < nums[i]) {
8
      dp[i][j] = dp[i - 1][j]
9
    } else {
10
      // 2. 选择数字
11
      // 如果当前元素的值小于等于j，则`dp[i][j]`取决于是否选择当前元素
12
      dp[i][j] = dp[i - 1][j] || dp[i - 1][j - num[i]]
13
    }
14
  }
15
}

展开收起

举例推导 dp 数组

dynamic-programming-code32

1
function canPartition(nums) {
2
  const sum = nums.reduce((a, b) => a + b)
3
  if (sum % 2 !== 0) return false
4

5
  const target = sum / 2
6
  const len = nums.length
7
  const dp = new Array(len).fill().map(() => new Array(target + 1).fill(false))
8

9
  // 初始化第一列为true 不选择任何元素时和为0总是成立的
10
  for (let i = 0; i < len; i++) {
11
    dp[i][0] = true
12
  }
13
  // 只选第一个数字时，和为nums[0] 总是成立的
14
  if (nums[0] <= target) {
15
    dp[0][nums[0]] = true
16
  }
17

18
  for (let i = 1; i < len; i++) {
19
    const num = nums[i]
20
    for (let j = 1; j <= target; j++) {
21
      if (j < num) {
22
        dp[i][j] = dp[i - 1][j]
23
      } else {
24
        dp[i][j] = dp[i - 1][j] || dp[i - 1][j - num]
25
      }
26
    }
27
  }
28
  console.log(dp)
29

30
  return dp[len - 1][target]
31
}

展开收起

滚动数组#

即 dp[sum/2] === sum/2。

按照上题，只要找出 dp[11] 等于 11，则返回 true。

动规五部曲：

确定 dp 数组和下标的含义
- 01 背包中，dp[j]指的是容量为 j 的背包，所背物品的最大价值为 dp[j]
- 本题中， dp[j]指的是容量为 j 的背包，所背数字的最大和为 dp[j]
当 dp[j] === j 时，表示背包容量为 j 时，背包刚好装满

如 dp[6] === 1 + 5，表示容量为 6 的背包，放入 1 和 5 后，刚好装满，即和为 6
确定递推公式
- 01 背包的递推公式为：dp[j] = Math.max(dp[j], dp[j - weight[i]] + value[i])
- 本题重量和价值都是数字本身，所以递推公式：dp[j] = Math.max(dp[j], dp[j - nums[i]] + nums[i])
dp 数组初始化
- 根据 dp 的定义，dp[0] = 0
- dp[1…sum/2]初始化也设为 0
确定遍历顺序

如果使用一维数组，需要先遍历物品，再遍历背包，且背包按逆序遍历

举例推导 dp 数组

输入[1,5,11,5]，得到的 dp 数组为：

1
// 1
2
dp = [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
3
// 5
4
dp = [0, 1, 1, 1, 1, 5, 6, 6, 6, 6, 6, 6]
5
// 11
6
dp = [0, 1, 1, 1, 1, 5, 6, 6, 6, 6, 6, 11]
7
// 5
8
dp = [0, 1, 1, 1, 1, 5, 6, 6, 6, 6, 10, 11]

最后 dp[11] === 11，返回 true

代码#

1
function canPartition(nums) {
2
  const sum = nums.reduce((acc, cur) => acc + cur, 0)
3
  if (!sum % 2) return false
4

5
  const dp = new Array(sum / 2 + 1).fill(0)
6

7
  for (let i = 0; i < nums.length; i++) {
8
    // 先遍历物品
9
    for (let j = sum / 2; j >= nums[i]; j--) {
10
      // 逆序遍历背包
11
      dp[j] = Math.max(dp[j], dp[j - nums[i]] + nums[i])
12
    }
13
  }
14
  console.log(dp)
15

16
  if (dp[sum / 2] === sum / 2) return true
17
}

展开收起

跟着卡哥学算法Day 34：动态规划part2

Mon, 17 Mar 2025 00:00:00 GMT

找问题最好的方式就是把 dp 数组打印出来，看看是不是和我们推导的公式一致。

做动规题目前，一定要把状态转移在 dp 数组上的具体情况模拟一遍，确定最后推出的是想要的结果。

62.不同路径 🌟#

力扣链接 🌟

题目描述#

一个机器人位于一个 m x n 网格的左上角（起始点在下图中标记为 “Start” ）。

机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角（在下图中标记为 “Finish” ）。

问总共有多少条不同的路径？

示例 1：

dynamic-programming-code21

输入：m = 3, n = 7
输出：28

示例 2：

输入：m = 2, n = 3
输出：3

解释：从左上角开始，总共有 3 条路径可以到达右下角。

向右 -> 向右 -> 向下
向右 -> 向下 -> 向右
向下 -> 向右 -> 向右

示例 3：

输入：m = 7, n = 3
输出：28

示例 4：

输入：m = 3, n = 3
输出：6

提示：

1 <= m, n <= 100
题目数据保证答案小于等于 2 * 10^9

解题思路#

题意：机器人从 (0, 0) 出发，到 (m - 1, n -1) 终点，只能向右或向下移动，问有多少种不同的路径（注意路径，不是步数）。

动规五部曲

确定 dp 数组及下标的含义

dp[i][j] 表示从(0,0)出发，到达(i, j)有 dp[i][j] 种不同的路径
确认递推公式

机器人只能向右或向下移动，所以到达(i, j)的路径数等于从上方 (i-1,j) 向下移动一步和从左方 (i,j-1) 向右移动一步的路径数之和，即dp[i][j] = dp[i-1][j] + dp[i][j-1]
dp 数组初始化

需要初始化第一行和第一列，即 dp[i][0]、dp[0][j]，初始化的路径数都是 1，因为从 (0,0) 出发，到达 (i，0) 或者 (0, j) 都只有一种路径
```
1
for (let i = 0; i < m; i++) dp[i][0] = 1
2
for (let j = 0; j < n; j++) dp[0][j] = 1
```
确定遍历顺序

从左到右、从上到下一层一层遍历
举例推导 dp 数组

当 m = 3, n= 7 时，dp 数组为：
```
1
[
2
  [1,1,1,1,1,1,1],
3
  [1,2,3,4,5,6,7],
4
  [1,3,6,10,15,21,28]
5
]
```
最后看打印出的 dp 数组是否和我们推导的一致

代码#

1
var uniquePaths = function (m, n) {
2
  const dp = new Array(m).fill().map(() => new Array(n))
3
  for (let i = 0; i < m; i++) dp[i][0] = 1
4
  for (let j = 0; j < n; j++) dp[0][j] = 1
5

6
  for (let i = 1; i < m; i++) {
7
    for (let j = 1; j < n; j++) {
8
      dp[i][j] = dp[i - 1][j] + dp[i][j - 1]
9
    }
10
  }
11
  console.log(dp)
12
  return dp[m - 1][n - 1]
13
}

63. 不同路径 II 🌟🌟#

力扣链接 🌟🌟

题目描述#

一个机器人位于一个 m x n 网格的左上角（起始点在下图中标记为 “Start” ）。

机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角（在下图中标记为 “Finish” ）。

现在考虑网格中有障碍物。问总共有多少条不同的路径？

dynamic-programming-code21

网格中的障碍物和空位置分别用 1 和 0 来表示。

示例 1：

dynamic-programming-code22

输入：obstacleGrid = [[0,0,0],[0,1,0],[0,0,0]]
输出：2 解释：
3x3 网格的正中间有一个障碍物。
从左上角到右下角一共有 2 条不同的路径：
1. 向右 -> 向右 -> 向下 -> 向下
2. 向下 -> 向下 -> 向右 -> 向右

示例 2:

dynamic-programming-code23

输入：obstacleGrid = [[0,1],[0,0]]
输出：1

解题思路#

与 62.不同路径类似，只是增加了障碍物，障碍物的位置值为 1，空位置值为 0。

动规五部曲：

确定 dp 数组以及下标的含义

dp[i][j] 表示从(0,0)出发，到达(i, j)有 dp[i][j] 种不同的路径

确定递推公式

与上题的递推公式一样，只是需要判断当前位置是否有障碍物

1
if (obstacleGrid[i][j] === 0) {
2
  // 当(i, j)没有障碍物，再推导dp[i][j]的值
3
  dp[i][j] = dp[i - 1][j] + dp[i][j - 1]
4
}

dp 数组初始化

与上题一样，只不过再次基础上加了障碍，障碍之后（包括障碍）都是走不到的位置了，所以障碍之后的 dp[i][0]或者dp[0][j]都为 0

1
for (let i = 0; i < m; i++) {
2
  if (obstacleGrid[i][0] === 0) {
3
    dp[i][0] = 0
4
  }
5
}
6
for (let j = 0; j < n; j++) {
7
  if (obstacleGrid[0][j] === 0) {
8
    dp[0][j] = 0
9
  }
10
}

确定遍历顺序
1. 从左到右、从上到下一层一层遍历
2. 遍历的时候，需要判断当前位置是否有障碍物
举例推导 dp 数组

输入 obstacleGrid = [[0,0,0],[0,1,0],[0,0,0]]时，dp 数组为：
```
1
 [
2
   [1,1,1],
3
 ],
4
 [
5
   [1,0,1],
6
 ],
7
 [
8
   [1,1,2],
9
 ]
```

1
var uniquePathsWithObstacles = function (obstacleGrid) {
2
  const m = obstacleGrid.length
3
  const n = obstacleGrid[0].length
4

5
  const dp = new Array(m).fill().map(() => new Array(n).fill(0))
6

7
  for (let i = 0; i < m && obstacleGrid[i][0] === 0; i++) {
8
    dp[i][0] = 1
9
  }
10
  for (let j = 0; j < n && obstacleGrid[0][j] === 0; j++) {
11
    dp[0][j] = 1
12
  }
13

14
  for (let i = 1; i < m; i++) {
15
    for (let j = 1; j < n; j++) {
16
      if (obstacleGrid[i][j] === 0) {
17
        dp[i][j] = dp[i - 1][j] + dp[i][j - 1]
18
      }
19
    }
20
  }
21

22
  console.log(dp)
23
  return dp[m - 1][n - 1]
24
}

展开收起

343. 整数拆分 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个正整数 n，将其拆分为至少两个正整数的和，并使这些整数的乘积最大化。返回你可以获得的最大乘积。

示例 1:

输入: 2
输出: 1
解释: 2 = 1 + 1, 1 × 1 = 1。

示例 2:

输入: 10
输出: 36
解释: 10 = 3 + 3 + 4, 3 × 3 × 4 = 36。
说明: 你可以假设 n 不小于 2 且不大于 58。

解题思路#

应该如何拆分得到最大值呢？

比如 6 可以拆分为：

1 + 1 + 1 + 1 + 1 + 1，乘积为 1
2 + 1 + 1 + 1 + 1，乘积为 2
2 + 2 + 2，乘积为 8
2 + 3 + 1，乘积为 6
2 + 4, 乘积为 8
3 + 1 + 1 + 1，乘积为 3
3 + 3，乘积为 9
…

那么此处拆 6 的方式有很多种，那么如何得到最大值？

对于整数 i，尝试将其拆分为 j 和 i-j，此时有两种情况：

不继续拆分：乘积为 j * (i-j)
继续拆分：乘积为 j * dp[i-j]（dp[i-j] 是拆分 i-j 的最大乘积）

示例：n = 4

dp[2] = 1
dp[3] = Math.max(1 * 2, 1 * dp[2]) = max(2, 1) = 2
dp[4] = Math.max(1 * 3, 1 * dp[3], 2 * 2, 2 * dp[2]) = max(3, 2, 4, 2) = 4

实际拆分方式：2+2，乘积为 2×2 = 4。

动规五部曲

确定 dp 数组以及下标的含义

dp[i] 表示拆分数字 i，可以得到的最大乘积
确定递推公式

由上可知，取 j * dp[i-j] 和 j * (i - j) 的最大值，即 dp[i] = Math.max(j * dp[i-j], j * (i - j), dp[i])
dp 数组初始化

dp[2] = 1：数字 2 只能拆分为 1+1，乘积为 1×1 = 1。
确定遍历顺序：从前往后，先有 dp[i - j]再有 dp[i]。
举例推导 dp 数组

当 n 为 10 的时候，dp 数组里的数值为：
```
1
[0, 1, 1, 2, 4, 6, 9, 12, 18, 27, 36]
```

1
var integerBreak = function (n) {
2
  const dp = new Array(n + 1).fill(0)
3
  dp[2] = 1
4

5
  for (let i = 3; i <= n; i++) {
6
    for (let j = 1; j < i; j++) {
7
      dp[i] = Math.max(dp[i], j * (i - j), j * dp[i - j])
8
    }
9
  }
10

11
  console.log(dp)
12
  return dp[n]
13
}

96.不同的二叉搜索树 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个整数 n，求以 1 … n 为节点组成的二叉搜索树有多少种？

示例 1:

dynamic-programming-code24

跟着卡哥学算法Day 32：动态规划理论 & part1

Sat, 15 Mar 2025 00:00:00 GMT

动态规划#

概念#

动态规划（Dynamic Programming），因此常用 DP 指代动态规划。如果某一问题有很多重叠子问题，那么使用动态规划是最有效的。

通过将问题分解为相互重叠的子问题，并利用子问题的解来高效求解原问题（利用历史记录，来避免我们重复的计算）

状态定义
- 用数组表示问题的某个阶段或子问题的解，一定要明确 dp 数组dp[i][j] 代表的含义
- 如在背包问题中，dp[i][j] 表示前 i 个物品放入容量为 j 的背包的最大价值
确定状态转移方程
- 明确如何从子问题的解推导出当前问题的解，即找出数组间关系式，最难最重要的一步
- 通俗讲就是找出 dp[i] 与 dp[i-1]、dp[i-2]之间的关系
- 如斐波那契数列的转移方程：dp[i] = dp[i-1] + dp[i-2]
初始化边界条件
- 确定初始状态的值，dp 数组的第 n 项结果由状态转移方程求解得到，所以需要知道第 n-1 项，第 n-2 项…第 1 项的值
- 初始化 dp 数组的值，如斐波那契数列中 dp[0] = 0, dp[1] = 1

解题步骤#

动规五部曲

确定 dp 数组（dp table）以及下标的含义
确定递推公式
dp 数组如何初始化
确定遍历顺序
举例推导 dp 数组

为何先确定递推公式，在初始化 dp 数组呢？

因为一些情况的递推公式决定了 dp 数组要如何初始化！

动态规划如何 debug#

找问题最好的方式就是把 dp 数组打印出来，看看是不是和我们推导的公式一致。

做动规题目前，一定要把状态转移在 dp 数组上的具体情况模拟一遍，确定最后推出的是想要的结果。

509. 斐波那契数 🌟#

力扣链接 🌟

题目描述#

斐波那契数，通常用 F(n) 表示，形成的序列称为斐波那契数列。该数列由 0 和 1 开始，后面的每一项数字都是前面两项数字的和。也就是： F(0) = 0，F(1) = 1 F(n) = F(n - 1) + F(n - 2)，其中 n > 1 给你 n ，请计算 F(n) 。

示例 1：

输入：2
输出：1
解释：F(2) = F(1) + F(0) = 1 + 0 = 1

示例 2：

输入：3
输出：2
解释：F(3) = F(2) + F(1) = 1 + 1 = 2

示例 3：

输入：4
输出：3
解释：F(4) = F(3) + F(2) = 2 + 1 = 3

提示：

0 <= n <= 30

解题思路#

动规五部曲

确定 dp 数组以及下标的含义

dp[i] 代表第 i 个斐波那契数的值
确定递推公式

斐波那契很简单：dp[i] = dp[i-1] + dp[i-2]
dp 数组初始化

dp[0] = 0, dp[1] = 1
确定遍历顺序

根据递推公式，可以看出 dp[i]依赖 dp[i - 1]和 dp[i - 2]，所以从前往后遍历
举例推导 dp 数组

按照递推公式，我们推导下 n=10 的时候，dp 数组应该是这个数列：[0,1,1,2,3,5,8,13,21,34,55]

写代码时打印 dp 数组，看和我们推导的数组是否一致

1
var fib = function (n) {
2
  const dp = [0, 1]
3

4
  for (let i = 2; i <= n; i++) {
5
    dp[i] = dp[i - 1] + dp[i - 2]
6
  }
7

8
  console.log(dp)
9
  return dp[n]
10
}

70. 爬楼梯 🌟#

力扣链接 🌟

题目描述#

假设你正在爬楼梯。需要 n 阶你才能到达楼顶。

每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢？

注意：给定 n 是一个正整数。

示例 1：

输入： 2
输出： 2
解释：有两种方法可以爬到楼顶。
- 1 阶 + 1 阶
- 2 阶

示例 2：

输入： 3
输出： 3
解释：有三种方法可以爬到楼顶。
- 1 阶 + 1 阶 + 1 阶
- 1 阶 + 2 阶
- 2 阶 + 1 阶

解题思路#

注意此处是求到达第 i 层的方法数，而不是具体的步数或花费

先确定条件，每次只能爬一层或两层楼梯，那么

第一层 1 种方法：1
第二层 2 种方法：1+1、2

爬到第三层楼梯时，只有两种方法：

爬到第一层，再爬两层到第三层：1+1+1、1+2
爬到第二层，直接一层到第三层：2+1
那么总方法数 = 2 + 1 = 3

爬到第四层楼梯时，只有两种方法：

爬到第二层，再爬两层到第四层：1+1+2、2+2
爬到第三层，直接一层到第四层：1+1+1+1、1+2+1、2+1+1
总方法数：2 + 3 = 5

因此，爬到第 i 层楼梯时，也只有两种方法：

爬到第 i-2 层，再爬两层到第 i 层：i-2 + 2
爬到第 i-1 层，直接一层到第 i 层：i-1 + 1
总方法数：dp(i - 2) + dp(i - 1)

因为每一步可以选择爬 1 或 2 层，所以到达第 i 层的方法数等于到达第 i-1 层和第 i-2 层的方法数之和，所以可得递推公式 dp(i) = dp(i-2) + dp(i-1)

动规五部曲：

确定 dp 数组以及下标的含义

dp[i] 表示爬到第 i 层楼梯的方法数 （注意：是方法数，不是步数或体力消耗）
确定递推公式

dp[i] = dp[i-2] + dp[i-1]
dp 数组初始化

dp[1] = 1, dp[2] = 2
确定遍历顺序从前往后
举例推导 dp 数组

当 n=5 时，dp 数组为：[1,2,3,5,8]，代码中打印一下

1
var climbStairs = function (n) {
2
  const dp = [1, 2]
3

4
  for (let i = 2; i < n; i++) {
5
    dp[i] = dp[i - 2] + dp[i - 1]
6
  }
7

8
  console.log(dp)
9
  return dp[n - 1]
10
}

746. 使用最小花费爬楼梯 🌟#

力扣链接 🌟

题目描述#

给你一个整数数组 cost ，其中 cost[i] 是从楼梯第 i 个台阶向上爬需要支付的费用。一旦你支付此费用，即可选择向上爬一个或者两个台阶。

你可以选择从下标为 0 或下标为 1 的台阶开始爬楼梯。

请你计算并返回达到楼梯顶部的最低花费。

示例 1：

**输入：**cost = [10,15,20] **输出：**15 **解释：**你将从下标为 1 的台阶开始。

支付 15 ，向上爬两个台阶，到达楼梯顶部。总花费为 15 。

示例 2：

**输入：**cost = [1,100,1,1,1,100,1,1,100,1] **输出：**6 **解释：**你将从下标为 0 的台阶开始。

支付 1 ，向上爬两个台阶，到达下标为 2 的台阶。
支付 1 ，向上爬两个台阶，到达下标为 4 的台阶。
支付 1 ，向上爬两个台阶，到达下标为 6 的台阶。
支付 1 ，向上爬一个台阶，到达下标为 7 的台阶。
支付 1 ，向上爬两个台阶，到达下标为 9 的台阶。
支付 1 ，向上爬一个台阶，到达楼梯顶部。总花费为 6 。

提示：

2 <= cost.length <= 1000
0 <= cost[i] <= 999

解题思路#

先确定条件，每次只能爬一个或两个台阶，并且需要花费相应的体力，如何到达楼梯顶部。

以[1,100,1,1,1,100,1,1,100,1]为例：

想要到达第三个台阶，可以选择：

从第一个台阶开始，花费 1，到达第三个台阶
从第二个台阶开始，花费 100，到达第三个台阶

此时选择花费较小的第一个选择，即 1

想要到达第四个台阶，可以选择：

从第二个台阶开始，花费 100，到达第四个台阶
从第三个台阶开始，花费 1，到达第四个台阶

此时选择花费较小的第二个选择，即 1 + 1 = 2

那么，想要到达第 i 个台阶时，可以选择：

从第 i-2 个台阶开始，花费 cost[i-2]，到达第 i 个台阶
从第 i-1 个台阶开始，花费 cost[i-1]，到达第 i 个台阶

选择花费较小的选择，即 dp[i-2] + cost[i-2] 或者 dp[i-1] + cost[i-1]

因此可以得到递推公式：dp(i) = Math.min(dp(i-2) + cost[i-2], dp(i-1) + cost[i-1])

动规五部曲

确定 dp 数组以及下标的含义

dp[i] 表示到达第 i 个台阶的最小花费
确定递推公式

dp[i] = Math.min(dp[i-2] + cost[i-2], dp[i-1] + cost[i-1])
dp 数组初始化

可以从下标为 0 或者下标为 1 的台阶开始爬楼梯，即dp[0] = 0, dp[1] = 0
确定遍历顺序：从前往后
举例推导 dp 数组

如 cost = [1,100,1,1,1,100,1,1,100,1]，dp 数组为：[0,0,1,2,2,3,3,4,4,5,6]

1
var minCostClimbingStairs = function (cost) {
2
  const dp = [0, 0]
3
  for (let i = 2; i <= cost.length; i++) {
4
    dp[i] = Math.min(dp[i - 2] + cost[i - 2], dp[i - 1] + cost[i - 1])
5
  }
6

7
  console.log(dp)
8
  return dp[cost.length]
9
}

跟着卡哥学算法Day 31：贪心算法part5

Fri, 14 Mar 2025 00:00:00 GMT

56. 合并区间 🌟🌟#

力扣链接 🌟🌟

题目描述#

给出一个区间的集合，请合并所有重叠的区间。

示例 1:

输入: intervals = [[1,3],[2,6],[8,10],[15,18]]
输出: [[1,6],[8,10],[15,18]]
解释: 区间 [1,3] 和 [2,6] 重叠, 将它们合并为 [1,6].

示例 2:

输入: intervals = [[1,4],[4,5]]
输出: [[1,5]]
解释: 区间 [1,4] 和 [4,5] 可被视为重叠区间。
注意：输入类型已于 2019 年 4 月 15 日更改。请重置默认代码定义以获取新方法签名。

解题思路#

类似上篇 452. 用最少数量的箭引爆气球和435. 无重叠区间

题解：

按起始点从小到大排序
如果 intervals[i][0] <= intervals[i - 1][1]，即当前左边界小于上一个右边界，则一定有重叠
合并区间，更新右边界为 Math.max(intervals[i][1], intervals[i - 1][1])，合并为 [intervals[i - 1][0], max(intervals[i - 1][1], intervals[i][1])]
没有重叠，则直接添加进数组

1
var merge = function (intervals) {
2
  intervals.sort((a, b) => a[0] - b[0])
3
  const result = []
4
  // 初始化前一个区间为排序后的第一个区间
5
  let preInterval = intervals[0]
6
  for (let i = 1; i < intervals.length; i++) {
7
    const curInterval = intervals[i]
8

9
    // 判断当前区间是否与前一个区间重叠
10
    if (curInterval[0] <= preInterval[1]) {
11
      // 合并区间：更新前一个区间的结束点为两者中的较大值
12
      preInterval[1] = Math.max(curInterval[1], preInterval[1])
13
    } else {
14
      // 无重叠时，将前一个区间加入结果，并更新为当前区间
15
      result.push(preInterval)
16
      preInterval = curInterval
17
    }
18
  }
19

20
  // 将最后一个合并后的区间加入结果
21
  result.push(preInterval)
22
  return result
23
}

展开收起

示例#

输入：[[1,3],[2,6],[8,10],[15,18]]
执行过程：

排序后顺序不变
合并 [1,3] 和 [2,6] → [1,6]
[8,10] 与前一个区间无重叠，[1,6]加入结果
[15,18] 无重叠，[8,10]加入结果
[15,18]加入结果

输出：[[1,6],[8,10],[15,18]]

738.单调递增的数字 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个非负整数 N，找出小于或等于 N 的最大的整数，同时这个整数需要满足其各个位数上的数字是单调递增。

（当且仅当每个相邻位数上的数字 x 和 y 满足 x <= y 时，我们称这个整数是单调递增的。）

示例 1:

输入: N = 10
输出: 9

示例 2:

输入: N = 1234
输出: 1234

示例 3:

输入: N = 332
输出: 299

说明: N 是在 [0, 10^9] 范围内的一个整数。

解题思路#

暴力法#

从当前数字递减，挨个判断是否为递增

1
// 判断一个数字的各位上是否是递增
2
const checkNum = (num) => {
3
  let max = 10
4
  while (num) {
5
    let t = num % 10
6
    if (max >= t) max = t
7
    else return false
8
    num = Math.floor(num / 10)
9
  }
10
  return true
11
}
12

13
const monotoneIncreasingDigits = (N) => {
14
  for (let i = N; i > 0; i--) {
15
    // 从大到小遍历
16
    if (this.checkNum(i)) return i
17
  }
18
  return 0
19
}

展开收起

贪心法#

举例：如果 N=98，一旦出现 num[i - 1] > num[i]时，首先给 num[i-1]—，然后 num[i]给为 9，这个数就是 89，满足最大的单调递增整数。

遍历方式如何确定？

思考如果从前往后遍历，遇到 num[i - 1] > num[i] 时，如果让 num[i - 1]--，此时可能出现 num[i - 1] < num[i - 2]，如数字 332，从前往后遍历会变为 329，不符合
从后往前遍历，遇到 num[i] < num[i + 1] 时，如果让 num[i]--，此时不会影响前面的数字，如数字 332，从后往前遍历先变为 329，继续遍历为 299，符合

注意：找到最前面是递减的位置，然后让这个位置的数减一，后面位置都为 9，这样保证数值尽可能大

如：100，从后往前遍历，找到递减的位置为 1，后面位置都为 9，即为 99

1
var monotoneIncreasingDigits = function (n) {
2
  n = n
3
    .toString()
4
    .split('')
5
    .map((item) => +item)
6

7
  const len = n.length
8
  // 第一个递减的位置flag
9
  let flag = Infinity
10
  for (let i = len - 1; i > 0; i--) {
11
    if (n[i - 1] > n[i]) {
12
      flag = i
13
      n[i - 1]--
14
      n[i] = 9
15
    }
16
  }
17
  // 将flag 之后的所有位设为9，保证数值尽可能大
18
  for (let i = flag; i < n.length; i++) {
19
    n[i] = 9
20
  }
21

22
  return +n.join('')
23
}

展开收起

968.监控二叉树 🌟🌟🌟#

力扣链接 🌟🌟🌟

题目描述#

给定一个二叉树，我们在树的节点上安装摄像头。

节点上的每个摄影头都可以监视其父对象、自身及其直接子对象。

计算监控树的所有节点所需的最小摄像头数量。

示例 1：

greedy-algorithmc-code5

输入：[0,0,null,0,0]
输出：1
解释：如图所示，一台摄像头足以监控所有节点。

示例 2：

greedy-algorithmc-code5

输入：[0,0,null,0,null,0,null,null,0]
输出：2
解释：需要至少两个摄像头来监视树的所有节点。上图显示了摄像头放置的有效位置之一。

提示：

给定树的节点数的范围是 [1, 1000]。
每个节点的值都是 0。

解题思路#

二叉树与贪心法的结合 ❗️❗️❗️

如何放置摄像头？#

摄像头覆盖上中下三层
摄像头不会放在头节点，浪费一个
摄像头不会放在叶子节点，浪费一堆
摄像头放在叶子节点的父节点，充分利用摄像头

应使用后序遍历

1
function traverse(root) {
2
  if (!root) return
3

4
  traverse(root.left)
5
  traverse(root.right)
6

7
  // 处理中间节点
8
}

局部最优：让叶子节点的父节点安装摄像头，所有摄像头最少 全局最优：放置最少的摄像头

如何隔两个节点放一个摄像头#

需要状态转移，首先有三种状态：

0: 该节点无覆盖
1: 该节点被覆盖，但没有安装摄像头
2: 该节点被覆盖，且安装摄像头

为使摄像头最少，应该叶子节点的父节点安装摄像头，那么空节点就应该是有覆盖状态

如果空节点为无覆盖状态，那么叶子节点需要放置摄像头
如果空节点为有摄像头状态，那么叶子节点的父节点就没必要放置摄像头

递归的终止条件

1
// 空节点，有覆盖
2
if (!cur) return 1

单层处理逻辑
- 情况 1：左右节点都有覆盖
  
  左右孩子都有覆盖，那么此时中间节点就应该是无覆盖状态
```
1
if (left === 1 && right === 1) return 0
```
- 左右节点至少一个无覆盖状态
  
  中间节点必须安装摄像头
```
1
if (left === 0 || right === 0) {
2
  result++
3
  return 2
4
}
```
- 左右节点至少一个有摄像头
  
  此时中间节点应该是有覆盖状态
```
1
if (left === 2 || right === 2) return 1
```
- 头节点无覆盖状态
  
  递归结束后，需要判断根节点覆盖状态，如果无覆盖，则 result++
```
1
if (root === 0) result++
```

1
var minCameraCover = function (root) {
2
  let result = 0
3
  const traverse = (cur) => {
4
    // 空节点，该节点有覆盖
5
    if (cur === null) return 1
6

7
    let left = traverse(cur.left)
8
    let right = traverse(cur.right)
9
    // 左右节点都被覆盖
10
    if (left === 1 && right === 1) return 0
11
    // 至少一个无覆盖
12
    if (left === 0 || right === 0) {
13
      result++
14
      return 2
15
    }
16
    // 至少一个有摄像头
17
    if (left === 2 || right === 2) return 1
18
  }
19

20
  // 根节点无覆盖状态
21
  if (traverse(root) === 0) {
22
    result++
23
  }
24

25
  return result
26
}

展开收起

跟着卡哥学算法Day 30：贪心算法part4

Thu, 13 Mar 2025 00:00:00 GMT

452. 用最少数量的箭引爆气球 🌟🌟#

力扣链接 🌟🌟

题目描述#

在二维空间中有许多球形的气球。对于每个气球，提供的输入是水平方向上，气球直径的开始和结束坐标。由于它是水平的，所以纵坐标并不重要，因此只要知道开始和结束的横坐标就足够了。开始坐标总是小于结束坐标。

一支弓箭可以沿着 x 轴从不同点完全垂直地射出。在坐标 x 处射出一支箭，若有一个气球的直径的开始和结束坐标为 xstart，xend，且满足 xstart ≤ x ≤ xend，则该气球会被引爆。可以射出的弓箭的数量没有限制。弓箭一旦被射出之后，可以无限地前进。我们想找到使得所有气球全部被引爆，所需的弓箭的最小数量。

给你一个数组 points ，其中 points[i] = [xstart,xend] ，返回引爆所有气球所必须射出的最小弓箭数。

示例 1：

输入：points = [[10,16],[2,8],[1,6],[7,12]]
输出：2
解释：对于该样例，x = 6 可以射爆 [2,8],[1,6] 两个气球，以及 x = 11 射爆另外两个气球

示例 2：

输入：points = [[1,2],[3,4],[5,6],[7,8]]
输出：4

示例 3：

输入：points = [[1,2],[2,3],[3,4],[4,5]]
输出：2

示例 4：

输入：points = [[1,2]]
输出：1

示例 5：

输入：points = [[2,3],[2,3]]
输出：1

提示：

0 <= points.length <= 10^4
points[i].length == 2
-2^31 <= xstart < xend <= 2^31 - 1

解题思路#

题意：有很多气球，每个气球占据的区间用 xstart 和 xend 表示。如果一支箭射到位置 x，那么所有 xstart ≤ x ≤ xend 的气球都会被引爆（如一个在[1,3]，另一个在[2,4]，那么射在 2 或者 3 的位置，可以同时引爆这两个）。问最少需要多少支箭才能把所有气球射爆。

如何使用最少的弓箭射爆所有气球？

局部最优：当气球重叠时，一起射穿
全局最优：射穿所有气球，用的弓箭最少

为了让气球尽可能的重叠，需要对数组进行排序

按照起始位置从小到大排序
从前向后遍历，如果气球重叠了，重叠气球中右边边界的最小值之间的区间一定需要一只弓箭

greedy-algorithmc-code41

题解：

按起始点从小到大排序
初始化弓箭数为 1（至少需要一支箭）
遍历气球，如果当前气球的起始点 > 前一个气球的结束点；需要新增一支箭
如果不大于时，说明两个气球重叠了，合并区间，更新当前气球的结束点为当前气球结束点和前一个气球结束点的最小值

假设输入为 [[10,16],[2,8],[1,6],[7,12]]：

按起始点排序后得到 [[1,6], [2,8], [7,12], [10,16]]
从第 2 个气球起开始遍历气球
第 2 个气球的起始点 2 不大于前一个气球的结束点 6，合并区间，更新当前气球的结束点为 6，即 [2,6]
遍历第 3 个气球，起始点 7 大于前一个气球的结束点 6，新增一支箭
遍历第 4 个气球，起始点 10 不于前一个气球的结束点 12，合并区间
最终箭数为 2

1
var findMinArrowShots = function (points) {
2
  // 按气球的起始点生序排序
3
  points.sort((a, b) => a[0] - b[0])
4

5
  let result = 1 // 初始化需要一只弓箭
6

7
  for (let i = 1; i <= points.length - 1; i++) {
8
    const point = points[i]
9
    const prePoint = points[i - 1]
10
    // 当前气球的起始点 > 前一个气球的结束点：需要新增一支箭
11
    if (point[0] > prePoint[1]) {
12
      result++
13
    } else {
14
      // 否则合并区间，更新当前气球的结束点为最小的值
15
      point[1] = Math.min(point[1], prePoint[1])
16
    }
17
  }
18
  return result
19
}

展开收起

435. 无重叠区间 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个区间的集合，找到需要移除区间的最小数量，使剩余区间互不重叠。

注意: 可以认为区间的终点总是大于它的起点。区间 [1,2] 和 [2,3] 的边界相互“接触”，但没有相互重叠。

示例 1:

输入: [ [1,2], [2,3], [3,4], [1,3] ]
输出: 1
解释: 移除 [1,3] 后，剩下的区间没有重叠。

示例 2:

输入: [ [1,2], [1,2], [1,2] ]
输出: 2
解释: 你需要移除两个 [1,2] 来使剩下的区间没有重叠。

示例 3:

输入: [ [1,2], [2,3] ]
输出: 0
解释: 你不需要移除任何区间，因为它们已经是无重叠的了。

解题思路#

类似 452. 用最少数量的箭引爆气球

将移除区间的最小数量转换为保留区间的最大数量

解题思路：

按区间的起始位置从小到大排序
初始 count 为 1（至少保留第一个区间），end 记录当前区间左边界，初始化为最后一个区间的左边界
从后往前遍历：从倒数第二个区间开始遍历，若当前区间的右边界 <= end，
返回结果：总区间数减去保留的区间数即为需要移除的最少数量

局部最优：倒序遍历优先选择左边界较大的区间，要求当前区间的右边界 ≤ 前一个选中区间的左边界 全局最优：移除区间数最小

如：[[2,3], [4,6], [1,5], [7,8]]

排序[[1,5], [2,3], [4,6], [7,8]]
end 记录当前区间左边界，初始为 7
遍历：倒数第二个元素是[4,6]，其右边界 6 <= end 7，count++，end 调整为 4
倒数第三元素是[2,3]，右边界 3 <= end 4， count++，end 调整为 2
第一个元素[1,5]，右边界 5 > end 2，跳过
count=3，总长度 4-3=1。正确。

代码#

1
var eraseOverlapIntervals = function (intervals) {
2
  // 按左边界升序排序
3
  intervals.sort((a, b) => a[0] - b[0])
4
  let count = 1 // 记录最大非重叠区间数即保留区间
5
  let end = intervals[intervals.length - 1][0] // 初始化为最后一个区间的左边界
6
  // 倒序遍历
7
  for (let i = intervals.length - 2; i >= 0; i--) {
8
    if (intervals[i][1] <= end) {
9
      // 当前区间的右边界 ≤ 前一个区间的左边界
10
      count++
11
      end = intervals[i][0] // 更新前一个区间的左边界
12
    }
13
  }
14
  // 需移除的区间数 = 总区间数 - 非重叠区间数
15
  return intervals.length - count
16
}

展开收起

763.划分字母区间 🌟🌟#

力扣链接 🌟🌟

题目描述#

字符串 S 由小写字母组成。我们要把这个字符串划分为尽可能多的片段，同一字母最多出现在一个片段中。返回一个表示每个字符串片段的长度的列表。

示例：

输入：S = “ababcbacadefegdehijhklij”
输出：[9,7,8] 解释：划分结果为 “ababcbaca”, “defegde”, “hijhklij”。每个字母最多出现在一个片段中。像 “ababcbacadefegde”, “hijhklij” 的划分是错误的，因为划分的片段数较少。

提示：

S 的长度在[1, 500]之间。
S 只包含小写字母 ‘a’ 到 ‘z’ 。

解题思路#

如何将同一个字母都圈在同一个区间？

遍历字符串过程中，不断找每一个字母的边界，如果找到之前遍历过的所有字母的最远边界，说明这个边界就是分割点。

遍历字符串，记录每个字符最后一次出现的索引位置
初始化 start 和 end 为 0，表示当前子串的起始和结束位置
再次遍历字符串，不断更新结束位置 end 为当前字符的最后位置和当前 end 的最大值
当遍历到 end 时，表示当前子串可以分割，记录长度，重置 start

返回结果：所有子串的长度列表即为最终结果。

1
var partitionLabels = function (S) {
2
  const lastPos = {} // 记录每个字符的最后出现位置
3
  for (let i = 0; i < S.length; i++) {
4
    lastPos[S[i]] = i
5
  }
6
  let start = 0,
7
    end = 0 // 当前子串的起始和结束位置
8
  const result = []
9
  for (let i = 0; i < S.length; i++) {
10
    end = Math.max(end, lastPos[S[i]]) // 更新当前子串的结束位置
11
    if (i === end) {
12
      // 当前遍历位置等于结束位置，分割子串
13
      result.push(end - start + 1)
14
      start = i + 1 // 重置起始位置为下一个字符
15
    }
16
  }
17
  return result
18
}

展开收起

跟着卡哥学算法Day 29：贪心算法part3

Wed, 12 Mar 2025 00:00:00 GMT

134. 加油站 🌟🌟#

力扣链接 🌟🌟

题目描述#

在一条环路上有 N 个加油站，其中第 i 个加油站有汽油 gas[i] 升。

你有一辆油箱容量无限的的汽车，从第 i 个加油站开往第 i+1 个加油站需要消耗汽油 cost[i] 升。你从其中的一个加油站出发，开始时油箱为空。

如果你可以绕环路行驶一周，则返回出发时加油站的编号，否则返回 -1。

说明:

如果题目有解，该答案即为唯一答案。
输入数组均为非空数组，且长度相同。
输入数组中的元素均为非负数。

示例 1: 输入:

gas = [1,2,3,4,5]
cost = [3,4,5,1,2]

输出: 3 解释:

从 3 号加油站(索引为 3 处)出发，可获得 4 升汽油。此时油箱有 = 0 + 4 = 4 升汽油
开往 4 号加油站，此时油箱有 4 - 1 + 5 = 8 升汽油
开往 0 号加油站，此时油箱有 8 - 2 + 1 = 7 升汽油
开往 1 号加油站，此时油箱有 7 - 3 + 2 = 6 升汽油
开往 2 号加油站，此时油箱有 6 - 4 + 3 = 5 升汽油
开往 3 号加油站，你需要消耗 5 升汽油，正好足够你返回到 3 号加油站。
因此，3 可为起始索引。

示例 2: 输入:

gas = [2,3,4]
cost = [3,4,3]
输出: -1
解释: 你不能从 0 号或 1 号加油站出发，因为没有足够的汽油可以让你行驶到下一个加油站。我们从 2 号加油站出发，可以获得 4 升汽油。此时油箱有 = 0 + 4 = 4 升汽油。开往 0 号加油站，此时油箱有 4 - 3 + 2 = 3 升汽油。开往 1 号加油站，此时油箱有 3 - 3 + 3 = 3 升汽油。你无法返回 2 号加油站，因为返程需要消耗 4 升汽油，但是你的油箱只有 3 升汽油。因此，无论怎样，你都不可能绕环路行驶一周。

解题思路#

从哪站出发走一圈可以回来？

gas：每个加油站可补充油的单位
cost：从当前站到下一站消耗的汽油单位

暴力法#

遍历每一个加油站为起点的情况，计算剩余油量rest，模拟一圈
如果中途没有断，并且最终油量 >= 0，返回当前加油站

for 循环适合模拟从头到尾的遍历，而 while 循环适合模拟环形遍历，要善于使用 while！

1
function canCompleteCircuit(gas, cost) {
2
  const len = gas.length
3
  for (let i = 0; i < len; i++) {
4
    const rest = gas[i] - cost[i]
5
    const index = (i + 1) % n
6
    while (rest > 0 && index !== i) {
7
      rest += gas[index] - cost[index]
8
      index = (index + 1) % n
9
    }
10
    if (rest >= 0 && index === i) return i
11
  }
12
  return -1
13
}

贪心法#

如果总油量 - 总消耗大于等于零则一定可以跑完一圈，说明各个站点的剩余油量 rest[i] = gas[i] - cost[i] 一定大于等于 0。

i 从零开始，累计 rest[i]，记录总和 curSum，如果 curSum 小于 0，说明从 0 到 i 都不行，从 i+1 开始重新计算。

局部最优：当前累加 rest[i]的和 curSum 一旦小于 0，起始位置至少要是 i+1，因为从 i 之前开始一定不行

全局最优：找到可以跑一圈的起始位置

1
var canCompleteCircuit = function (gas, cost) {
2
  // 当前剩余 总剩余 好理解
3
  let curRest = 0
4
  let totalRest = 0
5
  let start = 0
6
  let len = gas.length
7
  for (let i = 0; i < len; i++) {
8
    const rest = gas[i] - cost[i]
9
    curRest += rest
10
    totalRest += rest
11
    if (curRest < 0) {
12
      start = i + 1
13
      curRest = 0
14
    }
15
  }
16
  return totalRest >= 0 ? start : -1
17
}

展开收起

135. 分发糖果 🌟🌟#

力扣链接 🌟🌟

题目描述#

老师想给孩子们分发糖果，有 N 个孩子站成了一条直线，老师会根据每个孩子的表现，预先给他们评分。

你需要按照以下要求，帮助老师给这些孩子分发糖果：

每个孩子至少分配到 1 个糖果。
相邻的孩子中，评分高的孩子必须获得更多的糖果。

那么这样下来，老师至少需要准备多少颗糖果呢？

示例 1:

输入: [1,0,2]
输出: 5
解释: 你可以分别给这三个孩子分发 2、1、2 颗糖果。

示例 2:

输入: [1,2,2]
输出: 4
解释: 你可以分别给这三个孩子分发 1、2、1 颗糖果。第三个孩子只得到 1 颗糖果，这已满足上述两个条件。

解题思路#

两边同时比较？

应该确定一边之后再确定另一边，如：比较每一个孩子的右边，完成后再比较每一个孩子的左边

右孩子比左孩子得分高（从前往后遍历）
- 局部最优：只要右 > 左，则右边孩子多一个糖果
- 全局最优：相邻孩子，评分高的右孩子获得比左边孩子更多的糖果
```
1
// 右大于左，则右边孩子多一个糖果
2
for (let i = 0; i < ratings.length; i++) {
3
  if (ratings[i] > ratings[i - 1]) {
4
    candies[i] = candies[i - 1] + 1
5
  }
6
}
```
如：[1,3,4,5,2]，从左往右后得到糖果数 [1, 2, 3, 4, 1]

左孩子比右孩子得分高（从后往前遍历）（利用之前结果）

局部最优：左 > 右时，取右边糖果数 + 1 和当前糖果数比较取较大值，保证当前孩子糖果数在相邻中最大
全局最优：相邻孩子，评分高的左孩子获得更多的糖果

1
// 左大于右时，取右边糖果数 + 1 和当前糖果数比较取较大值
2
for (let i = ratings.length - 2; i >= 0; i--) {
3
  if (ratings[i] > ratings[i + 1]) {
4
    // 如果只取右侧糖果数 + 1，会出现 [1, 2, 3, 2, 1] 从左往右的结果会被修改
5
    candies[i] = Math.max(candies[i], candies[i + 1] + 1)
6
  }
7
}

从右往左得到 [1, 2, 3, 4, 1]

代码#

1
function candy(ratings) {
2
  const n = ratings.length
3
  const candies = new Array(n).fill(1)
4

5
  // 左到右：处理右边评分更高的情况
6
  for (let i = 1; i < n; i++) {
7
    if (ratings[i] > ratings[i - 1]) {
8
      candies[i] = candies[i - 1] + 1
9
    }
10
  }
11

12
  // 右到左：处理左边评分更高的情况，并取最大值
13
  for (let i = n - 2; i >= 0; i--) {
14
    if (ratings[i] > ratings[i + 1]) {
15
      candies[i] = Math.max(candies[i], candies[i + 1] + 1)
16
    }
17
  }
18

19
  return candies.reduce((sum, num) => sum + num, 0)
20
}

展开收起

860.柠檬水找零 🌟#

力扣链接 🌟

题目描述#

在柠檬水摊上，每一杯柠檬水的售价为 5 美元。

顾客排队购买你的产品，（按账单 bills 支付的顺序）一次购买一杯。

每位顾客只买一杯柠檬水，然后向你付 5 美元、10 美元或 20 美元。你必须给每个顾客正确找零，也就是说净交易是每位顾客向你支付 5 美元。

注意，一开始你手头没有任何零钱。

如果你能给每位顾客正确找零，返回 true ，否则返回 false 。

示例 1：

输入：[5,5,5,10,20]
输出：true
解释：
- 前 3 位顾客那里，我们按顺序收取 3 张 5 美元的钞票。
- 第 4 位顾客那里，我们收取一张 10 美元的钞票，并返还 5 美元。
- 第 5 位顾客那里，我们找还一张 10 美元的钞票和一张 5 美元的钞票。
- 由于所有客户都得到了正确的找零，所以我们输出 true。

示例 2：

输入：[5,5,10]
输出：true

示例 3：

输入：[10,10]
输出：false

示例 4：

输入：[5,5,10,10,20]
输出：false
解释：
- 前 2 位顾客那里，我们按顺序收取 2 张 5 美元的钞票。
- 对于接下来的 2 位顾客，我们收取一张 10 美元的钞票，然后返还 5 美元。
- 对于最后一位顾客，我们无法退回 15 美元，因为我们现在只有两张 10 美元的钞票。
- 由于不是每位顾客都得到了正确的找零，所以答案是 false。

提示：

0 <= bills.length <= 10000
bills[i] 不是 5 就是 10 或是 20

解题思路#

分析情况：

遇到 5 元，直接收下即可
遇到 10 元，消耗一个 5 元，增加一个 10
遇到 20 元，优先消耗一个 10 和一个 5，如果不够，再消耗三个 5

局部最优：遇到账单 20，优先消耗美元 10，完成本次找零

全局最优：完成全部账单的找零

1
var lemonadeChange = function (bills) {
2
  let fiveCount = 0
3
  let tenCount = 0
4
  for (let bill of bills) {
5
    if (bill === 5) {
6
      fiveCount++
7
    } else if (bill === 10) {
8
      if (fiveCount > 0) {
9
        fiveCount--
10
        tenCount++
11
      } else {
12
        return false
13
      }
14
    } else {
15
      if (tenCount > 0 && fiveCount > 0) {
16
        tenCount--
17
        fiveCount--
18
      } else if (fiveCount > 3) {
19
        fiveCount -= 3
20
      } else {
21
        return false
22
      }
23
    }
24
  }
25
  return true
26
}

展开收起

406.根据身高重建队列 🌟🌟#

力扣链接 🌟🌟

题目描述#

假设有打乱顺序的一群人站成一个队列，数组 people 表示队列中一些人的属性（不一定按顺序）。每个 people[i] = [hi, ki] 表示第 i 个人的身高为 hi ，前面正好有 ki 个身高大于或等于 hi 的人。

请你重新构造并返回输入数组 people 所表示的队列。返回的队列应该格式化为数组 queue ，其中 queue[j] = [hj, kj] 是队列中第 j 个人的属性（queue[0] 是排在队列前面的人）。

示例 1：

输入：people = [[7,0],[4,4],[7,1],[5,0],[6,1],[5,2]]
输出：[[5,0],[7,0],[5,2],[6,1],[4,4],[7,1]]
解释：
- 编号为 0 的人身高为 5 ，没有身高更高或者相同的人排在他前面。
- 编号为 1 的人身高为 7 ，没有身高更高或者相同的人排在他前面。
- 编号为 2 的人身高为 5 ，有 2 个身高更高或者相同的人排在他前面，即编号为 0 和 1 的人。
- 编号为 3 的人身高为 6 ，有 1 个身高更高或者相同的人排在他前面，即编号为 1 的人。
- 编号为 4 的人身高为 4 ，有 4 个身高更高或者相同的人排在他前面，即编号为 0、1、2、3 的人。
- 编号为 5 的人身高为 7 ，有 1 个身高更高或者相同的人排在他前面，即编号为 1 的人。
- 因此 [[5,0],[7,0],[5,2],[6,1],[4,4],[7,1]] 是重新构造后的队列。

示例 2：

输入：people = [[6,0],[5,0],[4,0],[3,2],[2,2],[1,4]]
输出：[[4,0],[5,0],[2,2],[3,2],[1,4],[6,0]]

提示：

1 <= people.length <= 2000
0 <= hi <= 10^6
0 <= ki < people.length

题目数据确保队列可以被重建

解题思路#

类似135.分发糖果，有两个维度 h 和 k，所以应该先确定一个维度，再按照另一个维度重新排列。

哪个维度优先呢？

按照 k 来排序，排完之后，k 和 h 的排列都不符合条件，两个维度都没法确定

1
// 按照k排序完后
2
// k为4时，说明4前面有4个h大于4的，然而此时有6个，那么k的排序不符合条件
3
// h的排序肉眼可见不符合条件
4
people = [
5
  [5, 0],
6
  [7, 0],
7
  [6, 1],
8
  [7, 1],
9
  [5, 2],
10
  [4, 4],
11
]

按照 h 来排序，排完之后，h 一定是从大到小，h 的排列符合条件，再确定 k 的排序（对于每个排好序的人，他的 k 值就是他在队列中的位置，因为前面已经有 k 个比他高或相等的人，但此时已经处理的人都是比他高或者相等的，所以插入到 k 的位置就能满足条件）
```
1
// 按照h排序完后
2
// h的排序符合条件
3
// 再确定k的排序（只需要按照k为下标重新插入队列）
4
people = [
5
  [7, 0],
6
  [7, 1],
7
  [6, 1],
8
  [5, 0],
9
  [5, 2],
10
  [4, 4],
11
]
```
greedy-algorithmc-code
- 局部最优：优先按身高高的 people 的 k 来插入。插入操作过后的 people 满足队列属性
- 全局最优：最后都做完插入操作，整个队列满足题目队列属性

1
var reconstructQueue = function (people) {
2
  let queue = []
3
  people.sort((a, b) => {
4
    if (b[0] !== a[0]) {
5
      return b[0] - a[0]
6
    } else {
7
      // 如果身高相同则按k值升序排列
8
      return a[1] - b[1]
9
    }
10
  })
11

12
  for (let p of people) {
13
    queue.splice(p[1], 0, p)
14
  }
15

16
  return queue
17
}

展开收起

跟着卡哥学算法Day 28：贪心算法part2

Tue, 11 Mar 2025 00:00:00 GMT

122.买卖股票的最佳时机 II 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个数组，它的第 i 个元素是一支给定股票第 i 天的价格。

设计一个算法来计算你所能获取的最大利润。你可以尽可能地完成更多的交易（多次买卖一支股票）。

注意：你不能同时参与多笔交易（你必须在再次购买前出售掉之前的股票）。

示例 1:

输入: [7,1,5,3,6,4]
输出: 7
解释: 在第 2 天（股票价格 = 1）的时候买入，在第 3 天（股票价格 = 5）的时候卖出, 这笔交易所能获得利润 = 5-1 = 4。随后，在第 4 天（股票价格 = 3）的时候买入，在第 5 天（股票价格 = 6）的时候卖出, 这笔交易所能获得利润 = 6-3 = 3 。

示例 2:

输入: [1,2,3,4,5]
输出: 4
解释: 在第 1 天（股票价格 = 1）的时候买入，在第 5 天（股票价格 = 5）的时候卖出, 这笔交易所能获得利润 = 5-1 = 4 。注意你不能在第 1 天和第 2 天接连购买股票，之后再将它们卖出。因为这样属于同时参与了多笔交易，你必须在再次购买前出售掉之前的股票。

示例 3:

输入: [7,6,4,3,1]
输出: 0
解释: 在这种情况下, 没有交易完成, 所以最大利润为 0。

提示：

1 <= prices.length <= 3 * 10 ^ 4
0 <= prices[i] <= 10 ^ 4

解题思路#

选低点买入，选高点卖出，再选低点买入，高点卖出…循环

1
// [7,1,5,3,6,4]
2
// 第一天买入 -> 第三天卖出
3
price[2] - price[0] = -2
4
// 第一天买入 -> 第二天卖出 + 第二天买入 => 第三天卖出
5
price[1] - price[0] + (price[2] - price[1]) = -2
6
// 两种方式结果一样，所以这种情况下，不管怎么分，只要把每天的利润加起来，总和都是一样的

因此，可以把利润分解为每天为单位的维度

局部最优：计算每天利润，只要正利润，正数收集 全局最优：收集所有的正数之和

代码#

1
var maxProfit = function (prices) {
2
  let result = 0
3
  for (let i = 0; i < prices.length; i++) {
4
    const price = prices[i + 1] - prices[i]
5
    if (price > 0) {
6
      result += price
7
    }
8
  }
9
  return result
10
}

55. 跳跃游戏 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个非负整数数组，你最初位于数组的第一个位置。

数组中的每个元素代表你在该位置可以跳跃的最大长度。

判断你是否能够到达最后一个位置。

示例 1:

输入: [2,3,1,1,4]
输出: true
解释: 我们可以先跳 1 步，从位置 0 到达位置 1, 然后再从位置 1 跳 3 步到达最后一个位置。

示例 2:

输入: [3,2,1,0,4]
输出: false
解释: 无论怎样，你总会到达索引为 3 的位置。但该位置的最大跳跃长度是 0 ，所以你永远不可能到达最后一个位置。

解题思路#

当前位置为 3 时，跳一步、两步还是三步呢？

其实跳几步无所谓，关键在于可跳的覆盖范围！即最大的跳跃步数就是可跳跃的覆盖范围，在这个范围内，不管怎么调，一定可以跳过来。

那么这个问题就转化为跳跃覆盖范围可不可以覆盖到终点

局部最优：每次移动取最大跳跃步数，不断更新覆盖范围 整体最优：得到最大的覆盖范围，看是否到达终点

初始化覆盖范围 cover = 0
遍历 cover：计算当前步可覆盖范围 i+nums[i],不断更新 cover
cover 能到数组最后一项，则返回 true

代码#

1
var canJump = function (nums) {
2
  if (nums.length === 1) return true
3
  let cover = 0
4
  for (let i = 0; i <= cover; i++) {
5
    cover = Math.max(cover, i + nums[i])
6
    // 检查是否到达终点
7
    if (cover >= nums.length - 1) return true
8
  }
9
  return false
10
}

45.跳跃游戏 II 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个非负整数数组，你最初位于数组的第一个位置。

数组中的每个元素代表你在该位置可以跳跃的最大长度。

你的目标是使用最少的跳跃次数到达数组的最后一个位置。

示例:

输入: [2,3,1,1,4]
输出: 2
解释: 跳到最后一个位置的最小跳跃数是 2。从下标为 0 跳到下标为 1 的位置，跳 1 步，然后跳 3 步到达数组的最后一个位置。

说明: 假设你总是可以到达数组的最后一个位置。

解题思路#

每次在当前的跳跃范围内，找到能跳的最远的位置，然后跳到那个位置，这样每一步都尽可能跳得远，从而减少总次数。

局部最优：每次移动取最大跳跃步数，如果还没到终点，步数再加一 整体最优：一步尽可能多走，得到最小的跳跃步数

初始化变量：jumps 记录跳跃次数，currentEnd 表示当前跳跃的边界，farthest 记录全局最远可达位置
遍历数组：从第一个位置遍历到倒数第二个位置（最后一个位置无需处理）
更新最远可达位置：每一步计算当前位置能到达的最远位置 i + nums[i]，并更新 farthest
到达边界时跳跃：当遍历到当前跳跃的边界 currentEnd 时，增加跳跃次数，并将边界更新为全局最远位置 farthest
提前终止条件：若更新后的边界已超过或等于终点，提前终止循环
返回结果：最终返回最小跳跃次数 jumps

1
var jump = function (nums) {
2
  let jumps = 0
3
  let currentEnd = 0
4
  let farthest = 0
5
  for (let i = 0; i < nums.length - 1; i++) {
6
    farthest = Math.max(i + num[i], farthest)
7
    if (i === currentEnd) {
8
      jumps++
9
      currentEnd = farthest
10
      // 提前终止条件：若更新后的边界已超过或等于终点，提前终止循环。
11
      if (currentEnd >= nums.length - 1) break
12
    }
13
  }
14
  return jumps
15
}

展开收起

1005.K 次取反后最大化的数组和 🌟#

力扣链接 🌟

题目描述#

给定一个整数数组 A，我们只能用以下方法修改该数组：我们选择某个索引 i 并将 A[i] 替换为 -A[i]，然后总共重复这个过程 K 次。（我们可以多次选择同一个索引 i。）

以这种方式修改数组后，返回数组可能的最大和。

示例 1：

输入：A = [4,2,3], K = 1
输出：5
解释：选择索引 (1) ，然后 A 变为 [4,-2,3]。

示例 2：

输入：A = [3,-1,0,2], K = 3
输出：6
解释：选择索引 (1, 2, 2) ，然后 A 变为 [3,1,0,2]。

示例 3：

输入：A = [2,-3,-1,5,-4], K = 2
输出：13
解释：选择索引 (1, 4) ，然后 A 变为 [2,3,-1,5,4]。

提示：

1 <= A.length <= 10000
1 <= K <= 10000
-100 <= A[i] <= 100

解题思路#

此题需要使用两次贪心算法

使数组和最大，那么尽可能将最小的负数变为正数

局部最优：让最小的负数变为正数，当前数值和达到最大 整体最优：整个数组和达到最大
当负数都为正数，且 K 还不为 0 时

局部最优：让最小的正数变为负数，当前数值和达到最大 整体最优：整个数组和达到最大
排序数组：按绝对值从大到小排序，确保优先处理绝对值大的负数
翻转负数：遍历数组，尽可能将负数翻转为正数，同时减少剩余次数 k
处理剩余次数：若剩余的 k 为奇数，翻转绝对值最小的元素（即第一个元素）以使损失最小
计算总和：累加数组所有元素得到最大和

1
var largestSumAfterKNegations = function (nums, K) {
2
  nums.sort((a, b) => Math.abs(a) - Math.abs(b))
3

4
  for (let i = nums.length - 1; i >= 0; i--) {
5
    const num = nums[i]
6
    if (num < 0) {
7
      nums[i] = -num
8
      K--
9
      if (K === 0) break
10
    }
11
  }
12

13
  while (K > 0) {
14
    nums[0] = -nums[0]
15
    k--
16
  }
17

18
  return nums.reduce((a, b) => a + b)
19
}

展开收起

跟着卡哥学算法Day 27：贪心算法理论 & part1

Mon, 10 Mar 2025 00:00:00 GMT

贪心算法#

贪心的本质是选择每一阶段的局部最优，从而达到全局最优。

核心思想#

局部最优选择：每一步只考虑当前最优解，不关系后序步骤的影响
不可逆性：没有类似回溯的步骤

举例：有一堆钞票，只能拿 10 张，如果想要达到最大金额，应该怎么拿？

指定每次拿最大的，最终结果就是拿走最大数额的钱。

什么时候用贪心#

没有固定套路

贪心法适用于满足以下两个条件的问题：

贪心选择性质（Greedy Choice Property）：通过每一步的局部最优选择，最终能构造出全局最优解
最优子结构（Optimal Substructure）：问题的最优解包含其子问题的最优解

贪心法经典场景#

活动选择问题
- 问题：从多个时间不重叠的活动中选出最多的活动
- 贪心策略：每次选择结束时间最早的活动，为后续留出更多时间
霍夫曼编码（Huffman Coding）
- 问题：用最短的二进制编码表示字符，实现数据压缩
- 贪心策略：优先合并频率最低的两个节点，生成最优前缀码
最小生成树（Prim/Kruskal 算法）
- 问题：在带权图中找连接所有顶点的最小权值和的树
- 贪心策略
  - Prim：每次选当前已选顶点到未选顶点的最小边
  - Kruskal：每次选全图未选的最小边，且不形成环
最短路径问题（Dijkstra 算法）
- 问题：在带权图中找单源最短路径
- 贪心策略：每次从未处理的顶点中选择距离起点最近的顶点，更新其邻居的最短路径
零钱兑换问题（部分场景）
- 问题：用最少的硬币数凑出某个金额
- 贪心策略：优先使用面值最大的硬币（需满足硬币面值满足贪心条件，如美元中的 1, 5, 10, 25 分）

贪心法解题步骤#

一般分为如下四步：

将问题分解为若干个子问题
找出适合的贪心策略
求解每一个子问题的最优解
将局部最优解堆叠成全局最优解

455.分发饼干 🌟#

力扣链接 🌟

题目描述#

假设你是一位很棒的家长，想要给你的孩子们一些小饼干。但是，每个孩子最多只能给一块饼干。

对每个孩子 i，都有一个胃口值 g[i]，这是能让孩子们满足胃口的饼干的最小尺寸；并且每块饼干 j，都有一个尺寸 s[j] 。如果 s[j] >= g[i]，我们可以将这个饼干 j 分配给孩子 i ，这个孩子会得到满足。你的目标是尽可能满足越多数量的孩子，并输出这个最大数值。

示例 1:

输入: g = [1,2,3], s = [1,1]
输出: 1
解释:你有三个孩子和两块小饼干，3 个孩子的胃口值分别是：1,2,3。虽然你有两块小饼干，由于他们的尺寸都是 1，你只能让胃口值是 1 的孩子满足。所以你应该输出 1。

示例 2:

输入: g = [1,2], s = [1,2,3]
输出: 2
解释:你有两个孩子和三块小饼干，2 个孩子的胃口值分别是 1,2。你拥有的饼干数量和尺寸都足以让所有孩子满足。所以你应该输出 2.

提示：

1 <= g.length <= 3 * 10^4
0 <= s.length <= 3 * 10^4
1 <= g[i], s[j] <= 2^31 - 1

解题思路#

局部最优：大饼干尽量满足胃口大的小孩，充分利用饼干尺寸喂饱一个 全局最优：喂饱尽可能多的小孩

局部最优能满足全局最优，并且找不出反例否决我们的想法

排序：对胃口数组 g 和饼干数组 s 排序
双指针遍历：两个数组都从尾部可是递减，如果 g[i] <= s[j]，则满足一个小孩，两个指针前移

代码#

1
var findContentChildren = function (g, s) {
2
  g.sort((a, b) => a - b)
3
  s.sort((a, b) => a - b)
4

5
  let result = 0
6
  let j = s.length - 1
7

8
  // 遍历胃口  无论是否满足，移动到上一个胃口
9
  for (let i = g.length - 1; i >= 0; i--) {
10
    // 遍历饼干 当前孩子被满足，移动到上一个饼干
11
    if (j >= 0 && g[i] <= s[j]) {
12
      result++
13
      j--
14
    }
15
  }
16

17
  return result
18
}

展开收起

376. 摆动序列 🌟🌟#

力扣链接 🌟🌟

题目描述#

如果连续数字之间的差严格地在正数和负数之间交替，则数字序列称为摆动序列。第一个差（如果存在的话）可能是正数或负数。少于两个元素的序列也是摆动序列。

例如， [1,7,4,9,2,5] 是一个摆动序列，因为差值 (6,-3,5,-7,3) 是正负交替出现的。相反, [1,4,7,2,5] 和 [1,7,4,5,5] 不是摆动序列，第一个序列是因为它的前两个差值都是正数，第二个序列是因为它的最后一个差值为零。

给定一个整数序列，返回作为摆动序列的最长子序列的长度。通过从原始序列中删除一些（也可以不删除）元素来获得子序列，剩下的元素保持其原始顺序。

示例 1:

输入: [1,7,4,9,2,5]
输出: 6
解释: 整个序列均为摆动序列。

示例 2:

输入: [1,17,5,10,13,15,10,5,16,8]
输出: 7
解释: 这个序列包含几个长度为 7 摆动序列，其中一个可为[1,17,10,13,10,16,8]。

示例 3:

输入: [1,2,3,4,5,6,7,8,9]
输出: 2

解题思路#

难度一下飙升

局部最优：删除单调坡上节点（非顶点），那么这个坡度就有两个局部峰值 整体最优：整个序列有最多的局部峰值，从而达到最长摆动序列

初始化处理：直接处理数组长度小于等于 1 的情况
遍历数组：计算当前差值 currDiff
符号交替判断：比较 prevDiff 和 currDiff，增加计数并更新 prevDiff

可分为三种情况

情况一：上下坡中有平坡

如[1,2,2,2,2,1]
i 指向第一个 2，currDiff = 0，prevDiff > 0
i 指向第二个 2，currDiff = 0，prevDiff = 0
i 指向最后一个 2，currDiff < 0，prevDiff = 0
可以得到条件如下

1
for (i = 2; i < nums.length; i++) {
2
  const currDiff = nums[i + 1] - nums[i]
3
  if ((preDiff <= 0 && currDiff > 0) || (preDiff >= 0 && currDiff < 0)) {
4
    count++
5
  }
6
  prevDiff = currDiff
7
}

情况二：数组首尾两端
情况三：单调坡中有平坡
- 如[1,2,2,2,3,4]
- 按照情况一每次遍历都会更新 prevDiff
- 到 3 时，此时 prevDiff = 0，currDiff = 1 > 0，满足上述条件，count++，导致误统计
- 如何更新 prevDiff？
- 每次坡度摆动变化的时候，在更新 prevDiff 即可
```
1
for (let i = 2; i < nums.length; i++) {
2
  const currDiff = nums[i + 1] - nums[i]
3
  if ((prevDiff <= 0 && currDiff > 0) || (prevDiff >= 0 && currDiff < 0)) {
4
    count++
5
    prevDiff = currDiff
6
  }
7
}
```

代码#

1
var wiggleMaxLength = function (nums) {
2
  if (nums.length <= 1) return nums.length
3
  let prevDiff = 0
4
  let count = 1
5
  for (let i = 0; i < nums.length; i++) {
6
    const currDiff = nums[i + 1] - nums[i]
7
    if ((prevDiff >= 0 && currDiff < 0) || (prevDiff <= 0 && currDiff > 0)) {
8
      count++
9
      prevDiff = currDiff
10
    }
11
  }
12
  return count
13
}

53. 最大子序和 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个整数数组 nums ，找到一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和。

示例:

输入: [-2,1,-3,4,-1,2,1,-5,4]
输出: 6
解释: 连续子数组 [4,-1,2,1] 的和最大，为 6

解题思路#

暴力法：#

两层 for 循环
外层 for 循环控制起始位置
内层 for 循环遍历子数组，计算和，并更新最大和

1
var maxSubArray = function (nums) {
2
  let maxSum = -Infinity
3
  for (let i = 0; i < nums.length; i++) {
4
    let sum = 0
5
    for (let j = i; j < nums.length; j++) {
6
      sum += nums[j]
7
      maxSum = Math.max(maxSum, sum)
8
    }
9
  }
10
  return maxSum
11
}

暴力法时间复杂度为 O(n^2)，在 leetcode 中会超时

贪心法#

局部最优：当前连续和为负数，则丢弃，从下一个元素开始重新计算，因为负数加上下一个元素，连续和会越来越小 全局最优：最大连续子数组和

以[-2,1,-3,4,-1,2,1,-5,4]为例：

遍历 nums，[-2,1,-3]相加连续和为负数，此时就需要从 4 开始重新计算

1
var maxSubArray = function (nums) {
2
  let maxSum = -Infinity
3
  let currentSum = 0
4
  for (let i = 0; i < nums.length; i++) {
5
    currentSum += nums[i]
6

7
    maxSum = Math.max(maxSum, currentSum)
8
    if (currentSum < 0) currentSum = 0
9
  }
10
  return maxSum
11
}

跟着卡哥学算法Day 25：回溯算法part4

Sat, 08 Mar 2025 00:00:00 GMT

491.递增子序列 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个整型数组, 你的任务是找到所有该数组的递增子序列，递增子序列的长度至少是 2。

示例:

输入: [4, 6, 7, 7]
输出: [[4, 6], [4, 7], [4, 6, 7], [4, 6, 7, 7], [6, 7], [6, 7, 7], [7,7], [4,7,7]]

说明:

给定数组的长度不会超过 15。
数组中的整数范围是 [-100,100]。
给定数组中可能包含重复数字，相等的数字应该被视为递增的一种情况。

解题思路#

求递增子序列，并且不能有重复的递增子序列，去重很容易联想到90.子集 II，通过对数组排序去重。

此处不能对原数组进行排序，排序完就全是递增子序列了，所以不能使用之前的去重逻辑，记录一个 set，判断当前元素是否已经出现过，出现过就 continue，避免重复。

回溯法解题步骤#

用数组 result 来保存结果，依旧是收集所有节点的值，要求个数大于 2

回溯三部曲：

回溯函数返回值以及参数
- 参数：startIndex，元素不能重复使用，所以需要 startIndex
```
1
void backtracking(startIndex)
```
回溯函数终止条件
- 类似求子集问题，收集树上的每一个节点，所以不需要终止条件，直接收集
```
1
if (path.length >= 2) {
2
  result.push([...path])
3
}
```

单层搜索的过程

for 循环从 startIndex 开始
- 剪枝 1: 如果当前元素已经在同层出现过，continue
- 剪枝 2: 如果当前元素小于路径中的最后一个元素，continue
path 添加当前元素
递归处理下一个位置
回溯

1
const used = new Set()
2
for (let i = startIndex; i < nums.length; i++) {
3
  const num = nums[i]
4
  if (used.has(num)) continue
5
  if (path.length > 0 && num < path[path.length - 1]) continue
6

7
  path.push(num)
8
  used.add(num)
9
  backtracking(i + 1)
10
  path.pop()
11
}

代码#

1
var findSubsequences = function (nums) {
2
  const result = []
3
  const path = []
4

5
  const backtracking = (startIndex) => {
6
    const set = new Set()
7
    if (path.length >= 2) {
8
      result.push([...path])
9
    }
10
    for (let i = startIndex; i < nums.length; i++) {
11
      const num = nums[i]
12
      if (set.has(num)) continue
13
      if (path.length > 0 && num < path[path.length - 1]) continue
14

15
      path.push(num)
16
      set.add(num)
17
      backtracking(i + 1)
18
      path.pop()
19
    }
20
  }
21
  backtracking(0)
22
  return result
23
}

展开收起

46.全排列 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个没有重复数字的序列，返回其所有可能的全排列。

示例:

输入: [1,2,3]
输出: [ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], [3,2,1] ]

解题思路#

和组合问题很像，都是从数组中选择元素，但是组合问题要求元素不能重复，而排列问题可以重复。

回溯三部曲：

排列问题不需要 startIndex，因为可以重复使用

回溯函数返回值以及参数
- 参数 1：used 数组，表示已经选择的元素，避免重复选择
回溯函数终止条件

收集元素的数组 path 长度等于 nums 数组时，说明找到了一个全排列，记录
```
1
if (path.length === nums.length) {
2
  result.push([...path])
3
  return
4
}
```

单层搜索的过程

与组合问题不同，每次 for 循环都从 0 开始
如果 used 中包含存在的元素，continue

1
for (let i = 0; i < nums.length; i++) {
2
  if (used[i]) continue
3
  path.push(nums[i]) // 选择当前元素
4
  used[i] = true
5
  backtrack(path) // 递归处理下一层
6
  path.pop() // 撤销选择
7
  used[i] = false
8
}

代码#

1
var permute = function (nums) {
2
  const result = []
3
  const path = []
4

5
  const used = new Array(nums.length).fill(false)
6
  const backtracking = (used) => {
7
    if (path.length === nums.length) {
8
      result.push([...path])
9
      return
10
    }
11

12
    for (let i = 0; i < nums.length; i++) {
13
      // 跳过已使用的元素
14
      if (used[i]) continue
15

16
      used[i] = true
17
      path.push(nums[i])
18
      backtracking(used)
19
      path.pop()
20
      used[i] = false
21
    }
22
  }
23
  backtracking(used)
24

25
  return result
26
}

展开收起

47.全排列 II 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个可包含重复数字的序列 nums ，按任意顺序返回所有不重复的全排列。

示例 1：

输入：nums = [1,1,2] -输出： [[1,1,2], [1,2,1], [2,1,1]]

示例 2：

输入：nums = [1,2,3]
输出：[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]]

提示：

1 <= nums.length <= 8
-10 <= nums[i] <= 10

解题思路#

这与上一题的区别：去重

去重：去重需要对元素进行排序，如果当前元素等于上一个元素，则跳过

1
/**
2
 * @param {number[]} nums
3
 * @return {number[][]}
4
 */
5
var permuteUnique = function (nums) {
6
  const result = []
7
  const path = []
8
  const used = new Array(nums.length).fill(false)
9

10
  nums = nums.sort((a, b) => a - b)
11

12
  const backtracking = (used) => {
13
    if (path.length === nums.length) {
14
      result.push([...path])
15
      return
16
    }
17

18
    for (let i = 0; i < nums.length; i++) {
19
      const num = nums[i]
20
      // 跳过已使用的元素
21
      if (used[i]) continue
22
      // 若当前元素与前一个元素相同且前一个元素未被使用，则跳过，避免同一层级重复选择
23
      if (i > 0 && nums[i] === nums[i - 1] && !used[i - 1]) continue
24

25
      path.push(num)
26
      used[i] = true
27
      backtracking(used)
28
      path.pop()
29
      used[i] = false
30
    }
31
  }
32
  backtracking(used)
33
  return result
34
}

展开收起

跟着卡哥学算法Day 24：回溯算法part3

Fri, 07 Mar 2025 00:00:00 GMT

93.复原 IP 地址 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个只包含数字的字符串，复原它并返回所有可能的 IP 地址格式。

有效的 IP 地址正好由四个整数（每个整数位于 0 到 255 之间组成，且不能含有前导 0），整数之间用 ’.’ 分隔。

例如：“0.1.2.201” 和 “192.168.1.1” 是有效的 IP 地址，但是 “0.011.255.245”、“192.168.1.312” 和 “192.168@1.1” 是无效的 IP 地址。

示例 1：

输入：s = “25525511135”
输出：[“255.255.11.135”,“255.255.111.35”]

示例 2：

输入：s = “0000”
输出：[“0.0.0.0”]

示例 3：

输入：s = “1111”
输出：[“1.1.1.1”]

示例 4：

输入：s = “010010”
输出：[“0.10.0.10”,“0.100.1.0”]

示例 5：

输入：s = “101023”
输出：[“1.0.10.23”,“1.0.102.3”,“10.1.0.23”,“10.10.2.3”,“101.0.2.3”]

提示：

0 <= s.length <= 3000
s 仅由数字组成

解题思路#

本题按照 131.分割回文串切割法思路解决。

回溯法解题步骤#

用数组 result 来保存结果

回溯三部曲：

回溯函数返回值以及参数
- 参数 1：str，记录当前字符串
- 参数 2：startIndex，不能重复分割，记录下一层递归分割的起始位置
- 参数 3：pointNum，用来记录已经添加逗号的数量
```
1
void backtracking(str, startIndex, pointNum)
```
回溯函数终止条件
- 已经存在三个逗号（说明已经分成 4 段了），分割结束，验证第 4 段子串是否合法，合法添加进 result
```
1
if (pointNum === 3) {
2
  if (isValid(str, startIndex, str.length - 1)) {
3
    result.push(str)
4
  }
5
  return
6
}
```
单层搜索的过程
- for 循环从 startIndex 开始，截取到当前位置 i，判断[startIndex, i]子串是否合法
- 合法，str 添加.，表示已经分割
- 不合法结束本层循环
- 下层递归从 i+2 开始（因为需要在字符串中加入分割符），pointNum++
- 回溯需要删除.，pointNum—
```
1
for (let i = startIndex; i < candidates.length; i++) {
2
  const candidate = candidates[i]
3
  path.push(candidate)
4
  sum += candidate
5
  // 不用i+1了，表示可以重复读取当前的数
6
  backtracking(sum, i)
7
  sum -= candidate
8
  path.pop()
9
}
```

判断子串是否合法#

子串长度大于 1 时，不能以 0 开头
子串数字在 0-255 之间，必须为整数

1
const isValid = (str, startIndex, endIndex) => {
2
  if (startIndex > endIndex) return false
3

4
  if (str[startIndex] === '0' && startIndex !== endIndex) return false
5

6
  let num = 0
7
  for (let i = startIndex; i <= endIndex; i++) {
8
    if (str[i] > '9' || str[i] < '0') return false
9

10
    num = num * 10 + (str[i] - '0')
11
    if (num > 255) return false
12
  }
13

14
  return true
15
}

展开收起

代码#

1
var restoreIpAddresses = function (s) {
2
  const res = []
3
  const backtrack = (segments, pos) => {
4
    if (segments.length === 4) {
5
      if (pos === s.length) {
6
        res.push(segments.join('.'))
7
      }
8
      return
9
    }
10
    // 尝试截取1到3个字符
11
    for (let i = 1; i <= 3; i++) {
12
      if (pos + i > s.length) break
13
      const segment = s.substring(pos, pos + i)
14
      // 检查有效性
15
      if (segment.length > 1 && segment[0] === '0') {
16
        continue // 前导零无效
17
      }
18
      if (parseInt(segment) > 255) {
19
        continue // 数值超过255
20
      }
21
      segments.push(segment)
22
      backtrack(segments, pos + i)
23
      segments.pop() // 回溯
24
    }
25
  }
26
  backtrack([], 0)
27
  return res
28
}

展开收起

78.子集 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一组不含重复元素的整数数组 nums，返回该数组所有可能的子集（幂集）。

说明：解集不能包含重复的子集。

示例: 输入: nums = [1,2,3] 输出: [ [3], [1], [2], [1,2,3], [1,3], [2,3], [1,2], [] ]

解题思路#

组合问题和分割问题都是收集树的叶子节点
子集问题需要收集树的所有节点

回溯三部曲：

回溯函数返回值以及参数
- 参数 1：startIndex，用于记录当前递归的起始位置
回溯函数终止条件

当 startIndex 大于 nums.length 时，说明递归已经到了叶子节点，就终止了

收集结果，只要进入递归，就收集
```
1
result.push([...path])
2
if (startIndex >= nums.length) return
```

单层搜索的过程

最基本的逻辑

收集
递归
回溯

1
for (let i = startIndex; i < nums.length; i++) {
2
  path.push(nums[i])
3
  backtracking(i + 1)
4
  path.pop()
5
}

代码#

1
var subsets = function (nums) {
2
  const result = []
3
  const path = []
4

5
  const backtracking = (startIndex) => {
6
    result.push([...path])
7
    if (startIndex >= nums.length) return
8

9
    for (let i = startIndex; i < nums.length; i++) {
10
      path.push(nums[i])
11
      backtracking(i + 1)
12
      path.pop()
13
    }
14
  }
15
  backtracking(0)
16
  return result
17
}

展开收起

90.子集 II 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个可能包含重复元素的整数数组 nums，返回该数组所有可能的子集（幂集）。

说明：解集不能包含重复的子集。

示例:

输入: [1,2,2]
输出: [ [2], [1], [1,2,2], [2,2], [1,2], [] ]

解题思路#

同 78.子集和 40.组合总和 II的结合

收集所有的子集
for 循环遇到重复元素时，跳过
排序

代码#

1
var subsetsWithDup = function (nums) {
2
  const result = []
3
  const path = []
4

5
  nums.sort((a, b) => a - b)
6
  const backtracking = (startIndex) => {
7
    result.push([...path])
8
    if (startIndex >= nums.length) return
9

10
    for (let i = startIndex; i < nums.length; i++) {
11
      if (i > startIndex && nums[i] === nums[i - 1]) continue
12
      path.push(nums[i])
13
      backtracking(i + 1)
14
      path.pop()
15
    }
16
  }
17
  backtracking(0)
18
  return result
19
}

展开收起

跟着卡哥学算法Day 23：回溯算法part2

Thu, 06 Mar 2025 00:00:00 GMT

39. 组合总和 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个无重复元素的数组 candidates 和一个目标数 target ，找出 candidates 中所有可以使数字和为 target 的组合。

candidates 中的数字可以无限制重复被选取。

说明：

所有数字（包括 target）都是正整数。
解集不能包含重复的组合。

示例 1：

输入：candidates = [2,3,6,7], target = 7,
所求解集为： [ [7], [2,2,3] ]

示例 2：

输入：candidates = [2,3,5], target = 8,
所求解集为： [ [2,2,2,2], [2,3,3], [3,5] ]

解题思路#

本题与 77. 组合区别是：无数量要求、可无限重复，限制总和。

无限递归，直到总和大于 target，使用 result 收集。
每次递归都是整个 candidates

回溯法解题步骤#

一维数组 path 来存放符合条件的结果，二维数组 result 来存放结果集

回溯三部曲：

何时使用 startIndex？

如果是一个集合求组合，就需要 startIndex；如果多个集合求组合，就不用 startIndex（各个集合相互不影响）

回溯函数返回值以及参数
- 参数 1：sum，记录 path 总和
- 参数 2：startIndex，用于记录当前递归 for 循环的起始位置
```
1
void backtracking(sum, startIndex)
```
回溯函数终止条件
- sum 大于 target 时，终止
- sum 等于 target 时，使用 result 收集
```
1
if (sum > target) {
2
  return
3
}
4
if (sum == target) {
5
  result.push(path)
6
  return
7
}
```

单层搜索的过程

从 startIndex 开始，搜索 candidates 集合

1
for (let i = startIndex; i < candidates.length; i++) {
2
  const candidate = candidates[i]
3
  path.push(candidate)
4
  sum += candidate
5
  // 不用i+1了，表示可以重复读取当前的数
6
  backtracking(sum, i)
7
  sum -= candidate
8
  path.pop()
9
}

代码#

1
var combinationSum = function (candidates, target) {
2
  let result = []
3
  let path = []
4
  const backtracking = (sum, startIndex) => {
5
    if (sum > target) {
6
      return
7
    }
8
    if (sum === target) {
9
      result.push([...path])
10
      return
11
    }
12

13
    for (let i = startIndex; i < candidates.length; i++) {
14
      const candidate = candidates[i]
15
      path.push(candidate)
16
      sum += candidate
17
      backtracking(sum, i)
18
      sum -= candidate
19
      path.pop()
20
    }
21
  }
22
  backtracking(0, 0)
23
  return result
24
}

展开收起

剪枝优化#

未剪枝的情况

进入 backtracking 后判断 sum>target 后返回，此时已经进入下一次递归。
剪枝后的情况

在 for 循环内，如果下一层 sum>target 时，就可以提前结束本轮 for 循环遍历

1
var combinationSum = function (candidates, target) {
2
  let result = []
3
  let path = []
4
  candidates.sort((a, b) => a - b) // 排序
5
  const backtracking = (sum, startIndex) => {
6
    if (sum === target) {
7
      result.push([...path])
8
      return
9
    }
10

11
    for (let i = startIndex; i < candidates.length; i++) {
12
      const candidate = candidates[i]
13
      // 提前结束
14
      if (sum + candidate > target) break
15
      path.push(candidate)
16
      sum += candidate
17
      backtracking(sum, i)
18
      sum -= candidate
19
      path.pop()
20
    }
21
  }
22
  backtracking(0, 0)
23
  return result
24
}

展开收起

总结#

剪枝操作写在回溯函数的开头 和 循环内部提前 break的区别：

1. 剪枝位置对比分析#

通过以下代码片段展示两种方式的差异：

方式一：在循环内提前 `break`（更优）#

1
const backtrack = (start, path, sum) => {
2
  if (sum === target) {
3
    /* 记录结果 */
4
  }
5
  for (let i = start; i < candidates.length; i++) {
6
    const num = candidates[i]
7
    if (sum + num > target) break // ✅ 剪枝：后续元素更大，无需尝试
8
    path.push(num)
9
    backtrack(i, path, sum + num) // 允许重复选当前元素
10
    path.pop()
11
  }
12
}

方式二：在函数开头判断 `sum > target`#

1
const backtrack = (start, path, sum) => {
2
  if (sum > target) return // ❌ 剪枝：无法阻止无效递归
3
  if (sum === target) {
4
    /* 记录结果 */
5
  }
6
  for (let i = start; i < candidates.length; i++) {
7
    const num = candidates[i]
8
    path.push(num)
9
    backtrack(i, path, sum + num)
10
    path.pop()
11
  }
12
}

2. 核心差异解析#

特性	循环内 `break`	函数开头 `return`
剪枝时机	在尝试添加元素前预判	在递归进入后检测
作用范围	阻止当前及后续元素的递归	仅终止当前递归路径
是否依赖排序	需要数组有序	不依赖排序
效率	更高（提前阻断无效分支）	较低（允许进入无效递归）

3. 实例对比演示#

以 candidates = [2,3,6,7], target = 7 为例：

场景：当前路径和为 `sum = 5`，尝试添加 `3`#

方式一（循环内 break）：
计算 sum + 3 = 8 > 7 → 直接 break，跳过 3 及后续更大的 6,7，不再递归。节省 3 次无效递归调用。
方式二（函数开头 return）：
先添加 3 → sum = 8 → 进入递归后触发 sum > target 返回。浪费了 1 次递归调用，且后续更大的元素 6,7 仍会被递归。

4. 数学原理#

假设数组已排序（升序），对于任意 i，有 candidates[i] <= candidates[i+1]。
当 sum + candidates[i] > target 时，对任意 j > i，必然有：

1
sum + candidates[j] >= sum + candidates[i] > target

因此，在循环内 break 可以 安全跳过所有后续元素，而函数开头的判断无法阻止进入这些无效分支。

5. 性能对比数据#

指标	循环内 `break`	函数开头 `return`
递归调用次数	8	11
无效路径处理	立即终止	延迟终止
时间复杂度	O(2^N)	O(2^N) 但常数更大

1
...
2
let count = 0  // 添加计数器
3
const backtracking = (sum, startIndex) => {
4
  count++  // 每次调用递归函数时计数加1
5
  ...
6
}
7
...
8

9
// 生成测试数据
10
function generateTestCase(size) {
11
  const candidates = Array.from(
12
    { length: size },
13
    () => Math.floor(Math.random() * 20) + 1
14
  )
15
  const target = 5
16
  return { candidates, target }
17
}
18

19
// 执行性能测试
20
function runPerformanceTest() {
21
  const testCases = [{ size: 40, label: '数据量(40个数)' }]
22

23
  testCases.forEach(({ size, label }) => {
24
    console.log(`\n测试${label}：`)
25
    const { candidates, target } = generateTestCase(size)
26
    console.log(`输入数组: [${candidates}]`)
27
    console.log(`目标值: ${target}`)
28

29
    console.time('方法1耗时(判断sum>target)')
30
    const result1 = combinationSum1(candidates, target)
31
    console.timeEnd('方法1耗时(判断sum>target)')
32
    console.log(`方法1递归调用次数: ${result1.recursionCount}`)
33

34
    console.time('方法2耗时(循环内break)')
35
    const result2 = combinationSum2(candidates, target)
36
    console.timeEnd('方法2耗时(循环内break)')
37
    console.log(`方法2递归调用次数: ${result2.recursionCount}`)
38
  })
39
}
40

41
// 运行测试
42
runPerformanceTest()

展开收起

back-tracking2

这里的测试用例，将 target 设置为 5，数组较大时，提前 break 耗时远远小于函数开头的判断，递归次数也远小于函数开头的判断。

6. 如何选择剪枝方式#

优先循环内 break：
需先对数组排序，但能最大化剪枝效果，适合处理有序数据集（如组合总和问题）
函数开头 return：
适用于无序数组，或无法预判路径和的情况（如子集问题），但效率较低

40.组合总和 II 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个数组 candidates 和一个目标数 target ，找出 candidates 中所有可以使数字和为 target 的组合。

candidates 中的每个数字在每个组合中只能使用一次。

说明：所有数字（包括目标数）都是正整数。解集不能包含重复的组合。

示例 1:
输入: candidates = [10,1,2,7,6,1,5], target = 8,
所求解集为:

1
;[
2
  [1, 7],
3
  [1, 2, 5],
4
  [2, 6],
5
  [1, 1, 6],
6
]

示例 2:
输入: candidates = [2,5,2,1,2], target = 5,
所求解集为:

1
;[[1, 2, 2], [5]]

解题思路#

本题与 39. 组合总和区别是：不能重复、集合有重复元素

重点：集合重复元素进行去重操作，跳过同一层中重复的元素，避免生成重复组合

回溯三部曲：

回溯函数返回值以及参数
- 参数 1：startIndex，用于记录当前递归的起始位置
- 参数 2：sum，存储当前路径的和，path 内元素的总和
```
1
void backtracking(startIndex, sum)
```

回溯函数终止条件

1
if (sum > target) {
2
  return
3
}
4
if (sum == target) {
5
  result.push_back(path)
6
  return
7
}

单层搜索的过程

这里需要进行去重操作，判断同一层相同的元素是否已经使用过。
- 需要对数组排序
- 判断 candidates[i] === candidates[i - 1]，则说明已经使用过，continue

代码#

去重条件：确保在同一层递归中检测重复元素，i > start 在同一层级中尝试选择后续元素，candidates[i] === candidates[i-1] 检测重复元素
剪枝操作：若当前路径和加上候选元素超过目标，终止后续递归

1
var combinationSum2 = function (candidates, target) {
2
  const result = []
3
  const path = []
4

5
  candidates.sort((a, b) => a - b)
6
  const backtracing = (startIndex, sum) => {
7
    if (sum === target) {
8
      result.push([...path])
9
      return
10
    }
11

12
    for (let i = startIndex; i <= candidates.length; i++) {
13
      if (i > startIndex && candidates[i] === candidates[i - 1]) continue
14

15
      const num = candidates[i]
16
      sum += num
17
      if (sum > target) break
18
      path.push(num)
19
      backtracing(i + 1, sum)
20
      sum -= num
21
      path.pop()
22
    }
23
  }
24
  backtracing(0, 0)
25
  return result
26
}

展开收起

131.分割回文串 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个字符串 s，将 s 分割成一些子串，使每个子串都是回文串。

返回 s 所有可能的分割方案。

示例: 输入: “aab” 输出: [ [“aa”,“b”], [“a”,“a”,“b”] ]

解题思路#

切割问题类似组合问题

组合问题：选取一个 a 之后，在 ab 中再去选取第二个，选取 a 之后在 b 中选取第三个…
切割问题：切割一个 a 之后，在 ab 中再去切割第二个，切割 a 之后在 b 中切割第三个…

back-tracking3

回溯三部曲：

回溯函数返回值以及参数
- 参数 1：startIndex 表示切割的位置（不能重复切割，所以需要）
回溯函数终止条件

当切割线切到字符串最后面，说明找到了一种切割方法，此时就是本层递归的终止条件

在处理组合问题的时候，递归参数需要传入 startIndex，表示下一轮递归遍历的起始位置，这个 startIndex 就是切割线
```
1
if (start === n) {
2
  // 分割到末尾
3
  result.push([...path])
4
  return
5
}
```

单层搜索的过程

for 循环中从 startIndex 到 i 就是要截取的子串，判断子串是否为回文，如果是，则加入到 path 中，不是则跳过

1
for (let end = start; end < n; end++) {
2
  if (isPalindrome(start, end)) {
3
    // 当前子串是回文
4
    path.push(s.slice(start, end + 1)) // 记录回文子串
5
    backtracking(end + 1) // 递归处理剩余部分
6
    path.pop() // 回溯
7
  }
8
}

代码#

1
var partition = function (s) {
2
  const result = []
3
  const path = []
4
  const n = s.length
5

6
  // 判断子串 s[left..right] 是否为回文
7
  const isPalindrome = (left, right) => {
8
    while (left < right) {
9
      if (s[left] !== s[right]) return false
10
      left++
11
      right--
12
    }
13
    return true
14
  }
15

16
  const backtracking = (start) => {
17
    if (start === n) {
18
      // 分割到末尾
19
      result.push([...path])
20
      return
21
    }
22
    for (let end = start; end < n; end++) {
23
      if (isPalindrome(start, end)) {
24
        // 当前子串是回文
25
        path.push(s.slice(start, end + 1)) // 记录回文子串
26
        backtracking(end + 1) // 递归处理剩余部分
27
        path.pop() // 回溯
28
      }
29
    }
30
  }
31

32
  backtracking(0)
33
  return result
34
}

展开收起

示例演示#

输入 s = "aab" 的执行流程：

复制

1
回溯树：
2
start=0
3
├─ end=0 ("a") → 有效
4
│  ├─ start=1
5
│  │  ├─ end=1 ("a") → 有效
6
│  │  │  └─ start=2 ("b") → 记录 ["a","a","b"]
7
│  │  └─ end=2 ("ab") → 非回文，跳过
8
│  └─ ...其他分支
9
├─ end=1 ("aa") → 有效
10
│  └─ start=2 ("b") → 记录 ["aa","b"]
11
└─ end=2 ("aab") → 非回文，跳过
12
输出：[["a","a","b"], ["aa","b"]]

跟着卡哥学算法Day 22：回溯算法理论 & 题目一

Wed, 05 Mar 2025 00:00:00 GMT

回溯算法#

回溯法也叫做回溯搜索法
回溯是递归算法的一种：本质是穷举，通过深度优先搜索遍历所有可能的解空间，并在发现当前路径无法得到有效解时，回退到上一步尝试其他分支

理解：类似于走迷宫，一条路走到底发现没有出口，继续返回到前一步的另一个路径，直到找到出口。

回溯法的效率#

回溯法暴力穷举时，可以通过剪枝来优化，即剪掉不需要处理的路径，从而减少不必要的搜索。

回溯法核心理解#

回溯法可以抽象为一个 n 叉树结构，树的宽度表示处理的集合的大小，树的高度表示递归的深度。

解空间树模型
- 将问题转化为树形结构的决策过程，每个节点代表一个决策步骤
- 叶子节点对应问题的候选解，路径代表决策序列
三要素
- 路径：记录做出的选择
- 选择列表：当前可做的选择，通常而言，用数组存储可以选择的操作
- 结束条件：到达决策树底层，就是递归的结束点，也就是搜索的结束点

回溯法模板#

回溯三部曲#

回溯函数返回值以及参数
- 回溯算法返回值一般为 void
```
1
void backtracking(参数)
```
回溯算法终止条件

既然是树形结构，那么搜到叶子节点，也就找到了满足条件的一条答案，收集结果，结束本层递归
```
1
if (满足结束条件) {
2
  收集结果
3
  return
4
}
```

单层搜索的过程

回溯法一般是在集合中递归搜索，集合的大小构成了树的宽度，递归的深度构成的树的深度。

for 循环可以理解是横向遍历每个元素，backtracking（递归）就是纵向遍历，这样就把这棵树全遍历完了

1
for (let i in 选择列表) {
2
  // 对一个选择列表做相应的选择
3

4
  做选择
5
  路径.push(选择)
6

7
  backtrack(新路径, 新选择列表)
8

9
  // 既然是回溯算法,那么在一次分岔路做完选择后
10
  // 需要回退我们之前做的操作
11
  // 保持路径状态一致性，确保不同分支间不互相干扰
12

13
  撤销选择
14
  路径.pop()
15
}

展开收起

回溯模板#

1
result = []
2

3
function backtrack(路径, 选择列表) {
4
  if ('满足结束条件') {
5
    // 记录结果
6
    result.push(路径)
7
    return
8
  } else {
9
    for (let i in 选择列表) {
10
      // 对一个选择列表做相应的选择
11

12
      做选择
13
      路径.push(选择)
14

15
      backtrack(新路径, 新选择列表)
16

17
      // 既然是回溯算法,那么在一次分岔路做完选择后
18
      // 需要回退我们之前做的操作
19
      // 保持路径状态一致性，确保不同分支间不互相干扰
20

21
      撤销选择
22
      路径.pop()
23
    }
24
  }
25
}

展开收起

关键优化技巧#

剪枝策略
- 可行性剪枝：提前终止不可能产生解的分支
```
1
if 当前选择导致不可行: continue
```
- 最优性剪枝：放弃非最优路径
```
1
if 当前路径已劣于已知最优解: continue
```
记忆化搜索
- 使用哈希表记录已访问状态，避免重复计算
- 适用于存在重叠子问题的情况
决策顺序优化
- 优先选择约束强的决策，减少搜索空间
- 例如数独求解时优先填充候选数少的格子

77. 组合 🌟🌟#

组合：[1, 2, 3]、[1, 3, 2]、[2, 3, 1]等都是同一个组合
排列：[1, 2, 3]、[1, 3, 2]、[2, 3, 1]等都是不同的排列

力扣链接 🌟🌟

题目描述#

给定两个整数 n 和 k，返回 1 … n 中所有可能的 k 个数的组合。

示例: 输入: n = 4, k = 2 输出: [ [2,4], [3,4], [2,3], [1,2], [1,3], [1,4], ]

解题思路#

暴力法：两层 for 循环

1
for (let i = 0; i < n; i++) {
2
  for (let j = i + 1; j < n; j++) {
3
    result.push([i + 1, j + 1])
4
  }
5
}

但如果有 k>2 时，就需要多层 for 循环，暴力解法多层 for 循环嵌套很难写出来。

此时就需要使用回溯法来解决，用递归来解决多层嵌套循环的问题

回溯法解题步骤#

画图，将需要解决的问题抽象为 n 叉树

back-tracking1

可以看出：n 相当于树的宽度，k 相当于树的高度

一维数组 path 来存放符合条件的结果，二维数组 result 来存放结果集

回溯三部曲：

回溯函数返回值以及参数
- 参数 1：n
- 参数 2：k
- 参数 3：startIndex，用于记录当前递归的起始位置
```
1
void backtracking(int n, int k, int startIndex)
```
回溯函数终止条件

到达叶子节点时结果递归函数，那么何时到底叶子节点呢？

收集结果的数组大小等于 k 时，说明已经找到了子集大小为 k 的组合，结果中保存的就是根节点到叶子结点的路径。
```
1
if (path.length == k) {
2
  result.push(path)
3
  return
4
}
```

单层搜索的过程

for 循环可以理解是横向遍历每个元素，backtracking（递归）就是纵向遍历，这样就把这棵树全遍历完了

1
for (int i = startIndex; i <= n; i++) { // 控制树的横向遍历
2
    path.push(i); // 处理节点
3
    backtracking(n, k, i + 1); // 递归：控制树的纵向遍历，注意下一层搜索要从i+1开始
4
    path.pop(); // 回溯，撤销处理的节点
5
}

代码#

1
function combine(n, k) {
2
  let result = []
3
  let path = []
4

5
  const backtracking = (n, k, startIndex) => {
6
    if (path.length == k) {
7
      result.push([...path])
8
      return
9
    }
10

11
    for (let i = startIndex; i <= n; i++) {
12
      path.push(i)
13
      backtracking(n, k, i + 1)
14
      path.pop()
15
    }
16
  }
17
  backtracking(n, k, 1)
18
  return result
19
}

展开收起

剪枝优化#

以 n=5，k=3 来详细拆解剪枝优化的逻辑

当剩余元素不足以完成组合时，提前终止循环。例如，若还需选 k - path.length 个元素，则循环上限为 n - (k - path.length) + 1。

未剪枝的情况

1
所有可能的第一个元素：1,2,3,4,5
2
但选4或5会导致后续无法完成组合：
3
          root
4
        /  |  |  \  \
5
        1   2  3  4  5  → 4和5的分支无法生成有效组合
6
      /|\  ...
7
      ...（大量无效递归）

剪枝后的情况

1
只允许第一个元素选1,2,3：
2
        root
3
        /  |  \
4
      1   2   3  → 每个分支都能保证后续有足够元素
5
      /|\ /|\ /|\
6
    ...（有效路径）

1
function combine(n, k) {
2
  let result = []
3
  let path = []
4

5
  const backtracking = (n, k, startIndex) {
6
    if (path.length === k) {
7
      result.push([...path])
8
      return
9
    }
10
    const remaining = k - path.length
11
    for (let i = startIndex; i <= n - remaining + 1; i++) {
12
      path.push(i)
13
      backtracking(n, k, i + 1)
14
      path.pop()
15
    }
16
  }
17
  backtracking(n, k, 1)
18
  return result
19
}

展开收起

216.组合总和 III 🌟🌟#

力扣链接 🌟🌟

题目描述#

找出所有相加之和为 n 的 k 个数的组合。组合中只允许含有 1 - 9 的正整数，并且每种组合中不存在重复的数字。

说明：

所有数字都是正整数。
解集不能包含重复的组合。

示例 1: 输入: k = 3, n = 7 输出: [[1,2,4]]

示例 2: 输入: k = 3, n = 9 输出: [[1,2,6], [1,3,5], [2,3,4]]

解题思路#

本题：k 相当于树的深度，9 就是树的宽度，即在组合[1,2,3,4,5,6,7,8,9]中求 k 个数和为 n 的组合。

此时依然使用一维数组 path 来存放符合条件的结果，二维数组 result 来存放结果集

回溯三部曲：

回溯函数返回值以及参数
- 参数 1：n
- 参数 2：k
- 参数 3：startIndex，用于记录当前递归的起始位置
- 参数 4：sum，存储当前路径的和，path 内元素的总和
```
1
void backtracking(n, k, startIndex, sum)
```
回溯函数终止条件

到达叶子节点时结果递归函数，那么何时到底叶子节点呢？

收集结果的数组大小等于 k 时，并且 sum 等于 n，使用 result 收集。
```
1
if (path.length == k) {
2
  if (sum === n) result.push(path)
3
  return
4
}
```

单层搜索的过程

for 循环可以理解是横向遍历每个元素，backtracking（递归）就是纵向遍历，这样就把这棵树全遍历完了

1
for (int i = startIndex; i <= 9; i++) { // 控制树的横向遍历
2
    path.push(i); // 处理节点
3
    sum += i
4
    backtracking(n, k, i + 1, sum); // 递归：控制树的纵向遍历，注意下一层搜索要从i+1开始
5
    path.pop(); // 回溯，撤销处理的节点
6
    sum -= i
7
}

代码#

1
var combinationSum3 = function (k, n) {
2
  let result = []
3
  let path = []
4

5
  const backtracking = (startIndex, sum) => {
6
    if (path.length === k) {
7
      if (n === sum) result.push([...path])
8
      return
9
    }
10

11
    for (let i = startIndex; i <= 9; i++) {
12
      path.push(i)
13
      sum += i
14
      backtracking(i + 1, sum)
15

16
      sum -= i
17
      path.pop()
18
    }
19
  }
20
  backtracking(1, 0)
21

22
  return result
23
}

展开收起

剪枝优化#

和超过目标值：若当前路径和超过目标值 sum > n，直接返回，减少递归次数
剩余数字不足：若剩余可选数字不足以填满所需数量 for 循环，提前终止

1
var combinationSum3 = function (k, n) {
2
  let result = []
3
  let path = []
4

5
  const backtracking = (startIndex, sum) => {
6
    // 剪枝：和超过目标值
7
    if (sum > n) return
8
    if (path.length === k) {
9
      if (n === sum) result.push([...path])
10
      return
11
    }
12
    // 计算剩余需要的数字数量
13
    const need = k - path.length
14
    // 剪枝：i的上界为 9 - need + 1
15
    for (let i = startIndex; i <= 9 - need + 1; i++) {
16
      path.push(i)
17
      sum += i
18
      backtracking(i + 1, sum)
19

20
      sum -= i
21
      path.pop()
22
    }
23
  }
24
  backtracking(1, 0)
25

26
  return result
27
}

展开收起

17.电话号码的字母组合 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个仅包含数字 2-9 的字符串，返回所有它能表示的字母组合。

给出数字到字母的映射如下（与电话按键相同）。注意 1 不对应任何字母。

示例:

输入：“23”
输出：[“ad”, “ae”, “af”, “bd”, “be”, “bf”, “cd”, “ce”, “cf”].

说明：尽管上面的答案是按字典序排列的，但是你可以任意选择答案输出的顺序

解题思路#

本题：输入数字的个数相当于树的深度，每个按键对应的字母就是树的宽度

此时依然使用字符串 s 来存放符合条件的结果，数组 result 来存放结果集

回溯三部曲：

回溯函数返回值以及参数
- 参数 1：index 当前处理的数字位置
回溯函数终止条件

当 index 等于数字个数，那么使用 result 收集结果
```
1
if (index === digits.length) {
2
  result.push(currentStr)
3
  return
4
}
```
单层搜索的过程

for 循环可以理解是遍历当前数字对应的所有字母，backtracking（递归）就是纵向遍历，处理下一个数字
```
1
for (let char in letters) {
2
}
```

代码#

1
function letterCombinations(digits) {
2
  if (!digits?.length) return []
3

4
  const result = []
5
  const path = []
6
  const map = {
7
    2: 'abc',
8
    3: 'def',
9
    4: 'ghi',
10
    5: 'jkl',
11
    6: 'mno',
12
    7: 'pqrs',
13
    8: 'tuv',
14
    9: 'wxyz',
15
  }
16

17
  const backtracking = (index) => {
18
    if (path.length === digits.length) {
19
      result.push(path.join(''))
20
      return
21
    }
22

23
    const letters = map[digits[index]]
24
    for (let char of letters) {
25
      path.push(char)
26
      backtracking(index + 1)
27
      path.pop()
28
    }
29
  }
30
  backtracking(0)
31
  return result
32
}

展开收起

跟着卡哥学算法Day 21：二叉树常见题目8

Tue, 04 Mar 2025 00:00:00 GMT

669. 修剪二叉搜索树 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个二叉搜索树，同时给定最小边界 L 和最大边界 R。通过修剪二叉搜索树，使得所有节点的值在[L, R]中 (R>=L) 。你可能需要改变树的根节点，所以结果应当返回修剪好的二叉搜索树的新的根节点。

示例 1:

binary-tree-node-trim

示例 2:

binary-tree-node-trim1

解题思路#

修剪二叉搜索树的关键：当某个节点的值不在范围内时，应该如何调整其子树，使得调整后的树仍然保持 BST 的结构。

递归#

当前节点值小于 low，其左子树的所有节点值更小，都不在范围内，这时候递归处理右子树，并返回处理后的节点作为当前节点
当前节点值大于 high，其右子树的所有节点值更大，都不在范围内，递归处理左子树，并返回处理后的节点作为当前节点
当前节点值在 low 和 high 之间时，需要同时处理左右子树，并将处理后的节点作为当前节点的左右孩子

递归三部曲：

明确递归函数的参数和返回值
- 参数 1：当前节点
- 参数 2：low
- 参数 3：high
- 返回值：处理后的节点
明确终止条件
- 当节点为 null 返回 null

确定单层递归逻辑

node.val < low，左子树都小于 low，递归处理右子树

1
if (node.val < low) {
2
  return trimBST(root.right, low, high)
3
}

node.val > high，右子树都大于 high，递归处理左子树

1
if (node.val > high) {
2
  return trimBST(root.left, low, high)
3
}

否则，node.val 在范围内，递归左右子树

1
node.left = trimBST(root.left, low, high)
2
node.right = trimBST(root.right, low, high)
3
return node

1
function trimBST(root, low, high) {
2
  if (!root) return null
3

4
  if (root.val < low) {
5
    return trimBST(root.right, low, high)
6
  }
7
  if (root.val > high) {
8
    return trimBST(root.left, low, high)
9
  }
10

11
  root.left = trimBST(root.left, low, high)
12
  root.right = trimBST(root.right, low, high)
13
  return root
14
}

迭代#

迭代方法通过队列遍历所有节点，逐步调整结构：

调整根节点：找到第一个符合范围的节点作为新根。
层序处理每个节点：
- 处理左子节点：若左子节点的值小于 low，则用其右子树替换，直到符合条件。
- 处理右子节点：若右子节点的值大于 high，则用其左子树替换，直到符合条件。

1
function trimBST(root, low, high) {
2
  // 1. 调整根节点
3
  while (root && (root.val < low || root.val > high)) {
4
    root = root.val < low ? root.right : root.left
5
  }
6
  if (!root) return null
7

8
  // 2. 层序遍历处理所有节点
9
  const queue = [root]
10
  while (queue.length) {
11
    const node = queue.shift()
12

13
    // 处理左子节点
14
    while (node.left && node.left.val < low) {
15
      node.left = node.left.right
16
    }
17
    if (node.left) queue.push(node.left)
18

19
    // 处理右子节点
20
    while (node.right && node.right.val > high) {
21
      node.right = node.right.left
22
    }
23
    if (node.right) queue.push(node.right)
24
  }
25

26
  return root
27
}

展开收起

108.将有序数组转换为二叉搜索树 🌟#

力扣链接 🌟

题目描述#

将一个按照升序排列的有序数组，转换为一棵高度平衡二叉搜索树。

本题中，一个高度平衡二叉树是指一个二叉树每个节点的左右两个子树的高度差的绝对值不超过 1。

sort-array-to-bst

解题思路#

升序数组：二叉搜索树的中序遍历结果就是一个升序数组

利用升序数组构造二叉搜索树#

不能随便选节点作为根，而是需要让左右子树的节点数尽可能接近，这样高度差才会小

如：[-10, -3, 0, 5, 9]

数字长度为奇数，中间元素为 0，作为根节点，左右各两个节点[-10, -3]

此时左右节点长度为偶数，根节点选择中间任何一个节点都可以

1
// 例如4个元素，索引是0到3
2
// 中间位置的计算是(0+3)/2=1.5
3
// Math.floor得到1，所以mid=1
4
// 或Math.ceil的话得到2
5
// 这两种取法都会导致不同的树结构，但都是平衡的

递归#

递归三部曲：

确定递归函数的参数和返回值
- 参数 1：有序数组
- 参数 2：left 区间
- 参数 3：right 区间
- 返回值：树节点（用于构造中节点的左右孩子）
确定终止条件

当左区间 left>右区间 right 时，就是空节点
```
1
if (left > right) return null
```
确定单层递归逻辑
- 取中间节点 const mid = left + ((right - left) / 2)
- 构造树节点 const root = new TreeNode(nums[mid])
- 根据区间，继续构造左右子树

1
function sortedArrayToBST(nums) {
2
  const buildTree = (nums, left, right) => {
3
    if (left > right) return null
4

5
    const mid = Math.floor(left + (right - left) / 2)
6
    const root = new TreeNode(nums[mid])
7

8
    root.left = buildTree(nums, left, mid - 1)
9
    root.right = buildTree(nums, mid + 1, right)
10
    return root
11
  }
12

13
  return buildTree(nums, 0, nums.length - 1)
14
}

538.把二叉搜索树转换为累加树 🌟🌟#

力扣链接 🌟🌟

题目描述#

给出二叉搜索树的根节点，该树的节点值各不相同，请你将其转换为累加树（Greater Sum Tree），使每个节点 node 的新值等于原树中大于或等于 node.val 的值之和。

提醒一下，二叉搜索树满足下列约束条件：

节点的左子树仅包含键小于节点键的节点。节点的右子树仅包含键大于节点键的节点。左右子树也必须是二叉搜索树。

示例 1：

convert-BST

提示：

树中的节点数介于 0 和 104 之间。
每个节点的值介于 -104 和 104 之间。
树中的所有值互不相同。
给定的树为二叉搜索树。

解题思路#

累加树：每个节点的值变成该树中所有大于或等于该节点值的总和

因此，应该从最大的节点开始累加
二叉搜索树，最右侧的节点是最大的
逆中序遍历：右 -> 中 -> 左

递归#

递归三部曲：

确定递归函数的参数和返回值
- 参数 1：根节点
- 返回值：不需要
确定终止条件

遇到空节点终止，返回
```
1
if (!root) return
```
确定单层递归逻辑
- 右 -> 中 -> 左顺序
- 中节点处理逻辑：root.val += sum

1
function convertBST(root) {
2
  let sum = 0
3
  const traverse = (root) => {
4
    if (!root) return
5

6
    root.right && traverse(root.right)
7
    sum += root.val
8
    root.val = sum
9
    root.left && traverse(root.left)
10
  }
11

12
  traverse(root)
13

14
  return root
15
}

展开收起

迭代#

步骤解析：

栈模拟遍历：用栈实现反向中序遍历。
循环处理右子树：先将所有右子节点压入栈中，再逐个处理并转向左子树。

1
const convertBST = function (root) {
2
  let sum = 0
3
  let stack = []
4
  let curr = root
5

6
  while (curr || stack.length) {
7
    // 将当前节点的所有右子节点入栈
8
    while (curr) {
9
      stack.push(curr)
10
      curr = curr.right
11
    }
12
    curr = stack.pop() // 处理当前节点
13
    sum += curr.val
14
    curr.val = sum
15
    curr = curr.left // 转向左子树
16
  }
17
  return root
18
}

展开收起

跟着卡哥学算法Day 20：二叉树常见题目7

Mon, 03 Mar 2025 00:00:00 GMT

235. 二叉搜索树的最近公共祖先 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个二叉搜索树, 找到该树中两个指定节点的最近公共祖先。

百度百科中最近公共祖先的定义为：“对于有根树 T 的两个结点 p、q，最近公共祖先表示为一个结点 x，满足 x 是 p、q 的祖先且 x 的深度尽可能大（一个节点也可以是它自己的祖先）。”

例如，给定如下二叉搜索树: root = [6,2,8,0,4,7,9,null,null,3,5]

示例 1:

输入: root = [6,2,8,0,4,7,9,null,null,3,5], p = 2, q = 8
输出: 6
解释: 节点 2 和节点 8 的最近公共祖先是 6。

示例 2:

输入: root = [6,2,8,0,4,7,9,null,null,3,5], p = 2, q = 4
输出: 2
解释: 节点 2 和节点 4 的最近公共祖先是 2, 因为根据定义最近公共祖先节点可以为节点本身。

说明:

所有节点的值都是唯一的。
p、q 为不同节点且均存在于给定的二叉搜索树中。

1
// 输出 树根节点
2
//       6
3
//      / \
4
//     2   8
5
//    / \ / \
6
//   0  4 7 9
7
//     / \
8
//    3  5

解题思路#

二叉搜索树

p 和 q 值都小于当前节点值时，p 和 q 的最近公共祖先就在左子树
p 和 q 值都大于当前节点值时，p 和 q 的最近公共祖先就在右子树
否则，当前节点就是 p 和 q 的最近公共祖先（此时 p 和 q 分布在当前节点的两侧，或其中一个等于当前节点）

如上述二叉搜索树：如果 2 处于[p, q]之间时，此时 p 就在节点 2 的左子树，q 在节点 2 的右子树，那么 2 就一定是 p 和 q 的最近公共祖先。

递归三部曲：

明确递归函数的参数和返回值
- 参数 1：当前节点
- 参数 2：p
- 参数 3
- 返回值：最近公共节点
明确终止条件
- 当节点为 null 返回 null
确定单层递归逻辑
- p 和 q 值都大于当前节点值时，继续遍历左子树
- p 和 q 值都小于当前节点值时，继续遍历右子树
- 否则，返回当前节点
```
1
if (cur.val > p.val && cur.val > q.val)
2
  if (cur.val < p.val && cur.val < q.val)
3
    // 遍历左子树
4
    // 遍历右子树
5
    return cur
```

1
function lowestCommonAncestor(root, p, q) {
2
  if (!root) return null
3

4
  if (root.val > p.val && root.val > q.val) {
5
    return lowestCommonAncestor(root.left, p, q)
6
  } else if (root.val < p.val && root.val < q.val) {
7
    return lowestCommonAncestor(root.right, p, q)
8
  } else {
9
    return root
10
  }
11
}

1
// 迭代法
2
var lowestCommonAncestor = function (root, p, q) {
3
  if (!root) return null
4
  while (root) {
5
    if (root.val < p.val && root.val < q.val) {
6
      return lowestCommonAncestor(root.right, p, q)
7
    }
8
    if (root.val > p.val && root.val > q.val) {
9
      return lowestCommonAncestor(root.left, p, q)
10
    }
11
    return root
12
  }
13
}

701.二叉搜索树中的插入操作 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定二叉搜索树（BST）的根节点和要插入树中的值，将值插入二叉搜索树。返回插入后二叉搜索树的根节点。输入数据保证，新值和原始二叉搜索树中的任意节点值都不同。

注意，可能存在多种有效的插入方式，只要树在插入后仍保持为二叉搜索树即可。你可以返回任意有效的结果。

示例:

1
// 给定二叉搜索树：
2
//       4
3
//      / \
4
//     2  7
5
//    / \
6
//   1  3
7
// 和 插入的值：5
8

9
// 返回二叉树
10
//       4
11
//      / \
12
//     2   7
13
//    /\  /
14
//   1 3 5
15
// 或者这个树也是有效的
16
//       5
17
//      / \
18
//     2   7
19
//    / \
20
//   1  3
21
//      \
22
//      4

展开收起

提示：

给定的树上的节点数介于 0 和 10^4 之间
每个节点都有一个唯一整数值，取值范围从 0 到 10^8
-10^8 <= val <= 10^8
新值和原始二叉搜索树中的任意节点值都不同

450.删除二叉搜索树中的节点 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个二叉搜索树的根节点 root 和一个值 key，删除二叉搜索树中的 key 对应的节点，并保证二叉搜索树的性质不变。返回二叉搜索树（有可能被更新）的根节点的引用。

一般来说，删除节点可分为两个步骤：

首先找到需要删除的节点；如果找到了，删除它。说明：要求算法时间复杂度为 O(h)O(h)O(h)，h 为树的高度。

示例:

binary-tree-node-delete

解题思路#

删除节点情况：

没找到删除节点，则返回 null
删除节点是叶子节点，直接删除，不影响其他节点
删除节点只有一个子节点，删除节点，并用子节点替换删除节点
删除节点有两个子节点，则将删除节点的左子树头结点（左孩子）放到删除节点的右子树的最左面节点的左孩子上（右子树中最小值），返回删除节点右孩子为新的根节点

递归#

递归三部曲：

确定递归函数的参数和返回值
- 参数 1：根节点
- 参数 2：要删除的值
- 返回值：搜索的值所在的节点
确定终止条件

如果 root 为 null 则说明没找到删除的节点，返回 root
```
1
if (!root) return root
```
确定单层递归逻辑
- 要删除的值大于 root.val，则继续递归右子树
- 要删除的值小于 root.val，则继续递归左子树
- 要删除的值就是当前节点时：
  - 节点是叶子结点
  - 节点只有一个子节点，则返回
  - 左右节点都存在，将将当前节点的左子树头节点指向右子树最左边节点，并将右子树指向删除节点的父节点

1
function deleteNode(root, key) {
2
  if (!root) return root
3
  if (root.val > key) {
4
    root.left = deleteNode(root.left, key)
5
  } else if (root.val < key) {
6
    root.right = deleteNode(root.right, key)
7
  } else {
8
    if (!root.left && !root.right) return null
9
    if (!root.left && root.right) return root.right
10
    if (!root.right && root.left) return root.left
11

12
    const rightNode = root.right
13
    const minNode = getMinNode(root.right)
14
    root.val = minNode.val
15
    root.right = deleteNode(rightNode, minNode.val)
16
  }
17
  return root
18
}
19
function getMinNode(node) {
20
  while (node.left) node = node.left;
21
  return node;
22
}

展开收起

迭代#

1
function deleteNodeIterative(root, key) {
2
  let parent = null;
3
  let current = root;
4

5
  // 查找目标节点
6
  while (current && current.val !== key) {
7
    parent = current;
8
    current = key < current.val ? current.left : current.right;
9
  }
10

11
  if (!current) return root; // 未找到
12

13
  // Case 1: 无子节点
14
  if (!current.left && !current.right) {
15
    if (!parent) return null; // 删除根节点
16
    parent[current === parent.left ? 'left' : 'right'] = null;
17
    return root;
18
  }
19

20
  // Case 2: 单个子节点
21
  if (!current.left || !current.right) {
22
    const child = current.left || current.right;
23
    if (!parent) return child; // 删除根节点
24
    parent[current === parent.left ? 'left' : 'right'] = child;
25
    return root;
26
  }
27

28
  // Case 3: 两个子节点
29
  const successorParent = current;
30
  let successor = current.right;
31
  while (successor.left) {
32
    successorParent = successor;
33
    successor = successor.left;
34
  }
35

36
  current.val = successor.val;
37
  if (successorParent === current) {
38
    successorParent.right = successor.right;
39
  } else {
40
    successorParent.left = successor.right;
41
  }
42

43
  return root;
44
}

展开收起

跟着卡哥学算法Day 18：二叉树常见题目6

Sat, 01 Mar 2025 00:00:00 GMT

530.二叉搜索树的最小绝对差 🌟#

力扣链接 🌟

题目描述#

给你一棵所有节点为非负值的二叉搜索树，请你计算树中任意两节点的差的绝对值的最小值。

示例：

minimum-difference

解题思路#

利用中序遍历，得到一个有序数组
求有序数组，相邻元素的最小差值

时间复杂度和空间复杂度都是 O(n)

优化：不需要存储整个数组，而是在中序遍历的过程中，记录前一个节点的值，然后每次计算当前节点与前一个节点的差值，并维护一个最小值

递归#

递归三部曲：

明确递归函数的参数和返回值
- 参数 1：根节点
- 返回值：不需要返回值，实时更新最小值
明确终止条件
- 节点不存在时，终止

确定单层递归逻辑

递归左子树

处理中间节点逻辑

1
// 前一个节点值
2
if (prev) {
3
  minDiff = Math.min(minDiff, node.val - prev)
4
}
5
prev = node.val

递归右子树

1
function getMinimumDifference(root) {
2
  let minDiff = Infinity
3
  let prev = null
4

5
  const traverse = (root) => {
6
    if (!root) return
7

8
    traverse(root.left)
9
    if (prev) minDiff = Math.min(minDiff, root.val - prev.val)
10
    prev = root
11
    traverse(root.right)
12
  }
13

14
  traverse(root)
15
  return minDiff
16
}

展开收起

迭代#

初始化战，先将所有左子节点入栈
依次弹出节点处理，处理完当前节点后转向右子树
同样维护 prev 和 minDiff，实时计算相邻节点差值

1
var getMinimumDifference = function (root) {
2
  let stack = []
3
  let curr = root
4
  let prev = null
5
  let minDiff = Infinity
6

7
  while (curr || stack.length) {
8
    while (curr) {
9
      stack.push(curr)
10
      curr = curr.left
11
    }
12
    curr = stack.pop()
13
    if (prev !== null) {
14
      minDiff = Math.min(minDiff, curr.val - prev)
15
    }
16
    prev = curr.val
17
    curr = curr.right
18
  }
19
  return minDiff
20
}

展开收起

501.二叉搜索树中的众数 🌟#

力扣链接 🌟

题目描述#

给定一个有相同值的二叉搜索树（BST），找出 BST 中的所有众数（出现频率最高的元素）。

假定 BST 有如下定义：

结点左子树中所含结点的值小于等于当前结点的值
结点右子树中所含结点的值大于等于当前结点的值
左子树和右子树都是二叉搜索树

例如：

给定 BST [1,null,2,2],

1
//       1
2
//        \
3
//        2
4
//       /
5
//      2

返回[2].

提示：如果众数超过 1 个，不需考虑输出顺序

进阶：你可以不使用额外的空间吗？（假设由递归产生的隐式调用栈的开销不被计算在内）

解题思路#

递归#

如果不是二叉搜索树，遍历树节点，用 map 统计频率

如果是二叉搜索树，中序遍历时统计当前值的出现次数，每访问一个节点，比较节点值和 currentVal。如果相同，currentCount 加 1；否则，重置 currentVal 和 currentCount 为 1

递归三部曲：

确定递归函数的参数和返回值
- 参数：根节点
- 返回值：不需要
确定终止条件

遇到空节点返回
```
1
if (!root) return
```
确定单层递归逻辑
- 递归处理左子树
- 中间节点处理逻辑
  - 当前值 currentVal 等于 root.val 时，当前节点的频率 currentCount++
  - 否则重置 currentCount=1，currentVal=root.val
  - 比较当前节点的频率和最大频率 maxCount
    - 相同，将当前节点加入结果数组；
    - 大于最大频率，更新最大频率和结果数组
- 递归处理右子树

1
function findMode(root) {
2
  let maxCount = 0
3
  let result = []
4
  let currentVal = null
5
  let currentCount = 0
6

7
  const inOrderTraverse = (root) => {
8
    if (!root) return
9
    inOrderTraverse(root.left)
10

11
    if (node.val === currentVal) {
12
      currentCount++
13
    } else {
14
      currentVal = node.val // 发现新数值
15
      currentCount = 1 // 重置计数器
16
    }
17
    if (currentCount > maxCount) {
18
      maxCount = currentCount // 刷新最高纪录
19
      result = [currentVal] // 清空旧结果
20
    } else if (currentCount === maxCount) {
21
      result.push(currentVal) // 并列众数加入
22
    }
23

24
    inOrderTraverse(root.right)
25
  }
26

27
  inOrderTraverse(root)
28

29
  return result
30
}

展开收起

迭代#

1
const findMode = function (root) {
2
  let currentVal = null
3
  let currentCount = 0
4
  let maxCount = 0
5
  let result = []
6
  const stack = []
7
  let node = root
8

9
  while (node || stack.length) {
10
    // 深入左子树
11
    while (node) {
12
      stack.push(node)
13
      node = node.left
14
    }
15

16
    node = stack.pop() // 取出当前节点
17

18
    // 统计频率
19
    if (node.val === currentVal) {
20
      currentCount++
21
    } else {
22
      currentVal = node.val
23
      currentCount = 1
24
    }
25

26
    // 更新结果
27
    if (currentCount > maxCount) {
28
      maxCount = currentCount
29
      result = [currentVal]
30
    } else if (currentCount === maxCount) {
31
      result.push(currentVal)
32
    }
33

34
    // 转向右子树
35
    node = node.right
36
  }
37

38
  return result
39
}

展开收起

236. 二叉树的最近公共祖先 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。

例如，给定如下二叉树: root = [3,5,1,6,2,0,8,null,null,7,4]

示例:

1
//        3
2
//       / \
3
//      5   1
4
//     / \ / \
5
//    6  2 0 8
6
//      / \
7
//     7  4

示例 1: 输入: root = [3,5,1,6,2,0,8,null,null,7,4], p = 5, q = 1 输出: 3 解释: 节点 5 和节点 1 的最近公共祖先是节点 3。

示例 2: 输入: root = [3,5,1,6,2,0,8,null,null,7,4], p = 5, q = 4 输出: 5 解释: 节点 5 和节点 4 的最近公共祖先是节点 5。因为根据定义最近公共祖先节点可以为节点本身。

说明:

所有节点的值都是唯一的。
p、q 为不同节点且均存在于给定的二叉树中

解题思路#

二叉树中两个节点的公共祖先可能有多个（比如，根节点肯定是所有节点的公共祖先。），但最近的那个就是离他们最近的共同父节点。

采用后序遍历

递归#

递归三部曲：

确定递归函数的参数和返回值
- 参数 1：根节点
- 参数 2：p
- 参数 3：q
- 返回值：找到 p 或 q 就返回
确定终止条件

如果 root 为 null 或者找到数值了，返回 root
```
1
if (!root || node === q || root === p) return root
```
确定单层递归逻辑
- 递归遍历左子树
- 递归遍历右子树
- 处理中间逻辑
  - 如果左右都不为 null，则说明 q 和 p 分别在左子树和右子树中找到了，当前 root 节点就是要找的最近公共祖先
  - 如果单侧找到目标，则返回找到结果

1
const lowestCommonAncestor = function (root, p, q) {
2
  // 递归终止条件：空节点或找到目标节点
3
  if (!root || root === p || root === q) return root
4

5
  // 递归查找左右子树
6
  const left = lowestCommonAncestor(root.left, p, q)
7
  const right = lowestCommonAncestor(root.right, p, q)
8

9
  // 情况判断
10
  if (left && right) return root // 当前节点为LCA
11
  return left || right // 返回非空子节点
12
}

跟着卡哥学算法Day 17：二叉树常见题目5

Fri, 28 Feb 2025 00:00:00 GMT

654.最大二叉树 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个不含重复元素的整数数组。一个以此数组构建的最大二叉树定义如下：

二叉树的根是数组中的最大元素。
左子树是通过数组中最大值左边部分构造出的最大二叉树。
右子树是通过数组中最大值右边部分构造出的最大二叉树。

通过给定的数组构建最大二叉树，并且输出这个树的根节点。

示例：

输入：[3, 2, 1, 6, 0, 5]

1
// 输出 树根节点
2
//       6
3
//      / \
4
//     3   5
5
//     \   /
6
//     2  0
7
//     \
8
//     1

解题思路#

关键：构造二叉树一定是前序遍历，先有根节点，递归构造左右子树

递归三部曲：

明确递归函数的参数和返回值
- 参数 1：传入的数组
- 返回值：根节点
明确终止条件
- 数组长度为 1 时，就是叶子节点，直接构造叶子节点并返回

确定单层递归逻辑

找最大值和对应下标，值用来构造根节点，下标用来分割数组（左右子树）

1
let max = nums[0]
2
let maxIndex = 0
3
for (let i = 1; i < nums.length; i++) {
4
  if (nums[i] > max) {
5
    max = nums[i]
6
    maxIndex = i
7
  }
8
}
9
const root = new TreeNode(max)

分割数组

用左区间构造左子树

1
root.left = constructMaximumBinaryTree(nums.slice(0, maxIndex))

用右区间构造右子树

1
root.right = constructMaximumBinaryTree(nums.slice(maxIndex + 1))

1
function constructMaximumBinaryTree(nums) {
2
  if (!nums.length) return null
3

4
  const max = num[0]
5
  const maxIndex = 0
6
  for (let i = i; i < nums.length; i++) {
7
    if (nums[i] > max) {
8
      max = nums[i]
9
      maxIndex = i
10
    }
11
  }
12

13
  const root = new TreeNode(max)
14
  root.left = constructMaximumBinaryTree(nums.slice(0, maxIndex))
15
  root.right = constructMaximumBinaryTree(nums.slice(maxIndex + 1))
16

17
  return root
18
}

展开收起

617.合并二叉树 🌟#

力扣链接 🌟

题目描述#

给定两个二叉树，想象当你将它们中的一个覆盖到另一个上时，两个二叉树的一些节点便会重叠。

你需要将他们合并为一个新的二叉树。合并的规则是如果两个节点重叠，那么将他们的值相加作为节点合并后的新值，否则不为 NULL 的节点将直接作为新二叉树的节点。

示例:

1
//     Tree 1                     Tree 2
2
//       1                         2
3
//      / \                       / \
4
//     3  2                      1   3
5
//    /                           \   \
6
//   5                            4    7
7

8
// 合并后
9
//     3
10
//    / \
11
//   4  5
12
//  /\   \
13
// 5 4   7

解题思路#

采用前序遍历最直观，与遍历一个树的逻辑一样

递归#

递归三部曲：

确定递归函数的参数和返回值
- 参数 1：Tree 1
- 参数 2：Tree 2
- 返回值：新二叉树的 root
确定终止条件

遍历同一个节点时，Tree 1 为空，返回 Tree 2；Tree 2 为空，返回 Tree 1
```
1
if (!root1) return root2
2
if (!root2) return root1
```
确定单层递归逻辑
- 将两个树节点值相加 root.val += root2.val
- 递归处理左子树
- 递归处理右子树

1
function mergeTrees(root1, root2) {
2
  if (!root1) return root2
3
  if (!root2) return root1
4

5
  root1.val += root2.val
6
  root1.left = mergeTrees(root1.left, root2.left)
7
  root1.right = mergeTrees(root1.right, root2.right)
8

9
  return root1
10
}

迭代#

步骤：

初始化队列：root1 和 root2 进入队列
遍历队列：弹出 root1 和 root2，累加 root1.val += root2.val
压入左子节点：同时压入 root1.left 和 root2.left，都不为 null 时
压入右子节点：同时压入 root1.right 和 root2.right，都不为 null 时
注意：如果 root1.left 或 root1.right 为 null 时，直接将 root2.left 或 root2.right 替换为 root1.left 或 root1.right

1
function mergeTrees(root1, root2) {
2
  if (!root1) return root2
3
  if (!root2) return root1
4

5
  const queue = [root1, root2]
6
  while (queue.length) {
7
    const node1 = queue.shift()
8
    const node2 = queue.shift()
9

10
    node1.val += node2.val
11

12
    if (node1.left && node2.left) {
13
      queue.push(node1.left)
14
      queue.push(node2.left)
15
    }
16
    if (node1.right && node2.right) {
17
      queue.push(node1.right)
18
      queue.push(node2.right)
19
    }
20
    if (!node1.left && node2.left) {
21
      node1.left = node2.left
22
    }
23
    if (!node1.right && node2.right) {
24
      node1.right = node2.right
25
    }
26
  }
27
  return root1
28
}

展开收起

700.二叉搜索树中的搜索 🌟#

力扣链接 🌟

题目描述#

给定二叉搜索树（BST）的根节点和一个值。你需要在 BST 中找到节点值等于给定值的节点。返回以该节点为根的子树。如果节点不存在，则返回 NULL。

示例:

1
// 给定二叉搜索树:
2
//       4
3
//      / \
4
//     2  7
5
//    / \
6
//   1  3
7
// 和值：2
8

9
// 返回
10
//     2
11
//    / \
12
//   1  3

解题思路#

二叉搜索树：根节点比左子树所有节点的值都大、比右子树所有节点的值都小，同时左右子树都是二叉搜索树

递归#

递归三部曲：

确定递归函数的参数和返回值
- 参数 1：根节点
- 参数 2：要搜索的值
- 返回值：搜索的值所在的节点
确定终止条件

如果 root 为 null 或者找到数值了，返回 root
```
1
if (!root || node.val === val) return root
```
确定单层递归逻辑

这里与普通二叉树的递归不同
- 若目标值小于当前节点值，递归搜索左子树
- 若目标值大于当前节点值，递归搜索右子树

1
function searchBST(root, val) {
2
  if (!root || root.val === val) return root
3

4
  if (root.val > val) {
5
    return searchBST(root.left, val)
6
  }
7
  if (root.val < val) {
8
    return searchBST(root.right, val)
9
  }
10
}

迭代#

使用循环代替递归，从根节点开始遍历
根据当前节点值与目标值的比较结果，移动到左子节点或右子节点
找到匹配的节点时立即返回，否则遍历结束返回 null

1
function searchBST(root, val) {
2
  while (root) {
3
    if (root.val === val) return root
4

5
    if (root.val > val) {
6
      root = root.left
7
    }
8
    if (root.val < val) {
9
      root = root.right
10
    }
11
  }
12
  return root
13
}

98.验证二叉搜索树 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个二叉树，判断其是否是一个有效的二叉搜索树。

假设一个二叉搜索树具有如下特征：

节点的左子树只包含小于当前节点的数。
节点的右子树只包含大于当前节点的数。
所有左子树和右子树自身必须也是二叉搜索树。

1
//       2
2
//      / \
3
//     1  3
4
// 输出 true

解题思路#

常见错误：只比较每个节点与其左右节点的关系，没有考虑全局上节点的关系，如：某个右子树的左节点可能比父节点小，同时比根节点小

需要一个区间[min, max]来确定当前节点值是否在这个区间

递归#

三部曲

确定递归函数的参数和返回值
- 参数 1：根节点
- 参数 2：最小值，从根节点开始为-Infinity，右子树需要不断更新最小值为当前值
- 参数 3：最大值，从节点为最大值，左子树需要不断更新最大值为当前值
- 返回值：根节点
确定终止条件
- 根节点为 null 时，返回 true
- 当前值不在[min, max]区间时，返回 false
确定单层递归逻辑
- 递归左右子树

代码#

1
function isValidBST(root) {
2
  const traverse = (root, min, max) => {
3
    if (!root) return true
4
    if (root.val <= min || root.val >= max) return false
5

6
    return (
7
      traverse(root.left, min, root.val) && traverse(root.right, root.val, max)
8
    )
9
  }
10

11
  return traverse(root, -Infinity, Infinity)
12
}

迭代#

思路：

使用栈存储节点及其允许的上下界
遍历时检查节点值是否在范围内，并更新子节点的范围

1
function isValidBST(root) {
2
  if (!root) return true
3

4
  const stack = [[root, -Infinity, Infinity]]
5

6
  while (stack.length) {
7
    const [node, min, max] = stack.pop()
8
    if (node.val <= min || node.val >= max) return false
9
    node.left && stack.push([node.left, min, node.val])
10
    node.right && stack.push([node.right, node.val, max])
11
  }
12

13
  return true
14
}

跟着卡哥学算法Day 16：二叉树常见题目4

Thu, 27 Feb 2025 00:00:00 GMT

110.平衡二叉树 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个二叉树，在q树的最后一行找到最左边的值。

示例 1:

给定二叉树 [2, 1, 3]

1
//       2
2
//      / \
3
//     1  3

输出：1

示例 2:

给定二叉树 [1, 2, 3, 4, 5, 6, 7]

1
//       1
2
//      / \
3
//     2  3
4
//    /  / \
5
//   4  5  6
6
//      /
7
//     7

输出：7

解题思路#

关键：在树的最底层找到最左边的值
最底层：二叉树最大深度的一层
最左边：该层中最靠左边的节点

递归#

递归三部曲：

明确递归函数的参数和返回值
- 参数 1：当前传入节点
- 参数 2：当前节点的深度
- 返回值：无
明确终止条件
- 遇到叶子节点 !root.left && !root.right，当前深度与最大深度比较，大于最大深度，则更新最大深度 maxDepth 和最大深度最左边的值 result
确定单层递归逻辑
- 分别计算左子树和右子树最大深度

1
function findBottomLeftValue(root) {
2
  let result = 0
3
  let maxDepth = 0
4

5
  const traverse = (node, depth) => {
6
    if (!node) return
7

8
    if (!node.left && !node.right) {
9
      if (depth > maxDepth) {
10
        maxDepth = depth
11
        result = node.val
12
      }
13
    }
14

15
    traverse(node.left, depth + 1)
16
    traverse(node.right, depth + 1)
17
  }
18

19
  traverse(root, 0)
20
}

展开收起

迭代#

求最后一行第一个节点的数值

1
function findBottomLeftValue(root) {
2
  if (!root) return null
3
  let result = 0
4
  const queue = [root]
5

6
  while (queue.length) {
7
    const length = queue.length
8
    for (let i = 0; i < length; i++) {
9
      const cur = queue.shift()
10
      if (i === 0) result = cur.val
11
      cur.left && queue.push(cur.left)
12
      cur.right && queue.push(cur.right)
13
    }
14
  }
15

16
  return result
17
}

展开收起

112. 路径总和 🌟#

力扣链接 🌟

题目描述#

给定一个二叉树和一个目标和，判断该树中是否存在根节点到叶子节点的路径，这条路径上所有节点值相加等于目标和。

说明: 叶子节点是指没有子节点的节点。

示例: 给定如下二叉树，以及目标和 sum = 22，

1
//       5
2
//      / \
3
//     4  8
4
//    /  / \
5
//   11 13 4
6
//   /\     \
7
//  7 2     1

返回 true, 因为存在目标和为 22 的根节点到叶子节点的路径 5->4->11->2。

解题思路#

递归#

递归三部曲：

确定递归函数的参数和返回值
- 参数 1：根节点
- 参数 2：计数器，用来计算二叉树的一条边之和是否等于目标值
- 返回值：bool
确定终止条件

从根节点开始目标值递减，直到叶子节点时判断是否为 0
```
1
if (!node.left && !node.right) {
2
  return count === 0
3
}
```
确定单层递归逻辑
- 递归左右子节点，传递剩余和 count - cur.left.val count - cur.right.val

1
function hasPathSum(root, count) {
2
  if (!root) return false
3

4
  if (!root.left && !root.right) {
5
    return count === root.val
6
  }
7

8
  return (
9
    hasPathSum(root.left, count - root.val) ||
10
    hasPathSum(root.right, count - root.val)
11
  )
12
}

迭代#

与递归不同，迭代记录当前路径和，再与目标值进行比较

步骤：

初始化栈：根节点和初始和存入栈
遍历栈：弹出节点及当前和，若为叶子且和等于目标值，返回 true
压入子节点：将左右子节点及更新后的和压入栈

1
function hasPathSum(root, count) {
2
  if (!root) return false
3

4
  const stack = [[root, root.val]]
5
  while (stack.length) {
6
    const [node, currentCount] = stack.pop()
7

8
    if (!node.left && !node.right && count === currentCount) {
9
      return true
10
    }
11

12
    node.left && stack.push([node.left, currentCount + node.left.val])
13
    node.right && stack.push([node.right, currentCount + node.right.val])
14
  }
15

16
  return false
17
}

展开收起

113. 路径总和 II 🌟🌟#

力扣链接 🌟🌟

题目描述#

给你二叉树的根节点 root 和一个整数目标和 targetSum ，找出所有从根节点到叶子节点路径总和等于给定目标和的路径。

叶子节点是指没有子节点的节点。

示例: 给定如下二叉树，以及目标和 sum = 22，

1
//       5
2
//      / \
3
//     4  8
4
//    /  / \
5
//   11 13 4
6
//   /\   / \
7
//  7 2   5 1

输出：[[5,4,11,2],[5,8,4,5]]

解题思路#

递归#

递归三部曲：

确定递归函数的参数和返回值
- 参数 1：根节点
- 参数 2：计数器，用来计算二叉树的一条边之和是否等于目标值
- 返回值：void
确定终止条件

从根节点开始目标值递减，当前节点是叶子节点且剩余和等于节点值 → 保存路径。
```
1
if (!node.left && !node.right && node.val === count) {
2
}
```
确定单层递归逻辑
- 递归左右子节点，传递剩余和 count - cur.val count - cur.val
- 递归结束后回溯（从路径中移除当前节点）

1
function pathSum(root, count) {
2
  if (!root) return
3
  const result = []
4
  const currentPath = []
5

6
  const traverse = (node, targetNum) => {
7
    if (!node) return
8

9
    currentPath.push(node.val)
10
    if (!node.left && !node.right && node.val === targetNum) {
11
      result.push([...currentPath]) // 深拷贝 避免后续影响
12
    }
13

14
    node.left && traverse(node.left, targetNum - node.left.val)
15
    node.right && traverse(node.right, targetNum - node.right.val)
16
    currentPath.pop() // 回溯：移除当前节点
17
  }
18

19
  traverse(root, count)
20

21
  return result
22
}

展开收起

迭代#

用栈存储节点、剩余和及当前路径。遍历时更新路径和剩余和，遇到叶子节点且满足条件则保存路径。

步骤：

初始化栈：根节点、目标和、空路径入栈
遍历栈：弹出节点，若为叶子且剩余和等于节点值，保存路径
压入子节点：将左右子节点、更新后的剩余和及新路径压入栈

1
function pathSum(root, targetSum) {
2
  if (!root) return []
3

4
  const result = []
5
  const stack = [[root, targetSum, []]]
6
  while (stack.length) {
7
    const [node, currentCount, path] = stack.pop()
8

9
    const currentPath = [...path, node.val]
10
    if (!node.left && !node.right && node.val === currentCount) {
11
      result.push(currentPath)
12
    }
13

14
    node.left && stack.push([node.left, currentCount - node.val, currentPath])
15
    node.right && stack.push([node.right, currentCount - node.val, currentPath])
16
  }
17

18
  return result
19
}

展开收起

106. 从中序与后序遍历序列构造二叉树 🌟🌟#

力扣链接 🌟🌟

题目描述#

根据一棵树的中序遍历与后序遍历构造二叉树。

注意: 你可以假设树中没有重复的元素。

例如，给出

中序遍历 inorder = [9,3,15,20,7] 后序遍历 postorder = [9,15,7,20,3] 返回如下的二叉树：

1
//       3
2
//      / \
3
//     9  20
4
//       / \
5
//      15 7

解题思路#

构造二叉树流程：

binary-tree-node

如果后序数组大小为零，说明时空节点，停止
如果不为空，取后序数组最后一个元素就是根节点（后序确定根节点）
找到后序数组最后一个元素在中序数组中的位置，作为切割点（中序分割左右子树）
切割中序数组，中序左数组作为左子树，中序右数组作为右子树
根据中序左数组长度
切割后序数组，切成后序左数组作为左子树，和后序右数组作为右子树
递归 1 - 5 步骤

递归三部曲#

确定递归函数的参数和返回值
- 参数 1：中序数组
- 参数 2：后序数组
- 返回值：根节点
确定终止条件
- 数组长度为空时，返回 null
确定单层递归逻辑
- 获取后序数组最后一个元素，作为根节点 const rootVal = postorder.pop()
- 获取中序数组中根节点的 index const rootIndex = inorder.indexOf(rootVal)
- 以根节点创建树 const root = new TreeNode(rootVal)
- 递归构造左子树 root.left = buildTree(inorder.slice(0, rootIndex), postorder.slice(0, rootIndex))
- 递归构造右子树 root.right = buildTree(inorder.slice(rootIndex + 1), postorder.slice(rootIndex))

代码#

1
function buildTree(inorder, postorder) {
2
  if (inorder.length === 0) return null
3

4
  const rootVal = postorder.pop()
5
  const rootIndex = inorder.indexOf(rootVal)
6
  const root = new TreeNode(rootVal)
7

8
  root.left = buildTree(
9
    inorder.slice(0, rootIndex),
10
    postorder.slice(0, rootIndex)
11
  )
12
  root.right = buildTree(
13
    inorder.slice(rootIndex + 1),
14
    postorder.slice(rootIndex)
15
  )
16

17
  return root
18
}

展开收起

105. 从前序与中序遍历序列构造二叉树 🌟🌟#

力扣链接 🌟🌟

题目描述#

给给定两个整数数组 preorder 和 inorder ，其中 preorder 是二叉树的先序遍历， inorder 是同一棵树的中序遍历，请构造二叉树并返回其根节点。

解题思路#

代码#

1
var buildTree = function (preorder, inorder) {
2
  if (!preorder.length) return null
3
  const rootVal = preorder.shift()
4
  const rootIndex = inorder.indexOf(rootVal)
5
  const root = new TreeNode(rootVal)
6

7
  root.left = buildTree(
8
    preorder.slice(0, rootIndex),
9
    inorder.slice(0, rootIndex)
10
  )
11
  root.right = buildTree(
12
    preorder.slice(rootIndex),
13
    inorder.slice(rootIndex + 1)
14
  )
15
  return root
16
}

展开收起

前端COE-文档协同服务卡顿

Wed, 26 Feb 2025 00:00:00 GMT

一、现象#

打开 One 文档一直处于加载中（现象 cpu 会飙升到 100%+）

二、原因#

排查方向 1：回溯近期变更#

因为这个服务很久没动过了，所以怀疑是前端代码问题，回溯了近期的需求变更

结论：与近期前后端代码无关

排查方向 2：子进程分配逻辑#

观察服务器状态，发现有一个子进程的 cpu 占有率明显高于其它，内存区别不大

之前的子进程分配是按照内存占有率来的，因为 cpu 的占有率无法计算。新连接分配给内存占有最小的子进程，子进程接管之后把自己的内存状态通知给主进程，主进程对进程池重新做排序。

且这种写法会导致服务重启后，所有重连上来的连接都被分配到了一个进程，因为这时子进程还没来得及更新自己的内存。

最后通过 process.cpuUsage() 来计算进程消耗的 cpu 时间、基于 setImmediate 算一次事件循环的耗时，来间接的估算 cpu 占有率。并优化了进程池的分配逻辑。

结果：

各子进程 cpu 占有率差不多，但卡顿并没有缓解。

排查方向 3：在测试环境通过 clinic.js 拿一份性能报告，但在测试环境没能复现问题#

排查方向 4：关键节点耗时检查，怀疑是数据问题，因为某个文档导致 cpu 飙升#

求助于后端同事，并了解了另一个查看服务状态的指令 top

Terminal window

1
ps auxw | sort -rn -k3 | head -5
2
- 用从进程启动开始到当前时间点所消耗的总CPU时间与系统运行时间的比例来计算的CPU使用率
3
top
4
- 最近的一个时间间隔（通常是几秒）内的瞬时CPU使用率
5
- ps命令提供的是一个静态快照，且基于ps的计算规则，如果进程已经运行了很长时间，其CPU使用率可能会被稀释
6
- top指令会自动更新，可以精确地捕捉到CPU使用的峰值和波动，所以排查这个问题应该使用top而不是ps

通过这个指令发现 node 的 cpu 占有率还是很高。怀疑是某个文档导致 cpu 飙升。

对握手、协议升级、redis 访问、数据下发的耗时加日志

发现导致 cpu 飙升的文档并不固定，redis 中最大的文档 f861a1acaebb1618a4db3a6983ee2cd315998 也并不一定会导致 cpu 飙升，几乎是随机的。

排查方向 5：redis 存储量过大，导致 node 在使用时 cpu 过载#

怀疑是 redis 太大（1.7G）导致 node 在处理时 cpu 逐渐被吃满，为了验证问题，停止 node 服务后，清空了 redis。运行到现在没有再出现过 cpu 过载

三、修正及优化#

以最大的文档为例，redis 中的大小为 200M+，后端接口中的数据量为 405562 字节，0.4M

Node：根据子进程 cpu 内存情况优化进程池分配

1
// cpu使用率计算
2
class CpuUsage {
3
  constructor() {
4
    this.startUsage = process.cpuUsage()
5
    this.startTime = Date.now()
6
  }
7
  reset() {
8
    this.startUsage = process.cpuUsage()
9
    this.startTime = Date.now()
10
  }
11
  computed() {
12
    const endUsage = process.cpuUsage(this.startUsage)
13
    let cpuUsage =
14
      (endUsage.user + endUsage.system) / (Date.now() - this.startTime)
15
    const cpuCount = require('os').cpus().length
16
    cpuUsage = Math.round((cpuUsage / cpuCount) * 100)
17
    return cpuUsage
18
  }
19
}
20
// 内存使用率计算
21
exports.getMemoryUsage = function getMemoryUsage() {
22
  const { heapTotal, heapUsed } = process.memoryUsage()
23
  let memoryUsage = heapUsed / heapTotal
24
  memoryUsage = Math.round(memoryUsage * 100)
25
  return memoryUsage
26
}

展开收起

Node：在房间销毁时清空 redis 数据，且在清空 redis 数据时，禁止新连接握手

1
    rdb?.closeDoc(docName)?.catch(() => {})
2
    if (!minSize) return
3
    if (bigSize / minSize < 2) return
4
    logger.info('清除rdb缓存:', docName, ', bigSize:', bigSize, ', minSize:', minSize)
5
    setCleaningDoc(docName)
6
    return rdb
7
      ?.clearDocument(docName)
8
      ?.catch(() => {})
9
      ?.finally(() => {
10
        logger.info('清除完成:', docName)
11
        delCleaningDoc(docName)
12
      })
13
  },
14
/**
15
 * 连接的是否为清库中的文档
16
 */
17
exports.checkIsConnectCleaningDoc = function (request) {
18
  const { roomid } = request.query
19
  if (cleaningDoc.has(roomid)) {
20
    request.socket.end()
21
    return true
22
  }
23
  return false
24
}
25
// 在清空redis数据时，禁止新连接握手
26
      const { request, head } = message
27
      if (!request.headers) request.headers = message.headers
28
      // const timeDiff = new TimeDiff('升级协议|' + request.query.roomid + '|' + request.query.uuid)
29
      request.socket = socket
30
      if (checkIsConnectResumingDoc(request)) return
31
      if (checkIsConnectCleaningDoc(request)) return
32
      wss.handleUpgrade(request, socket, head, async function done(ws) {
33
        if (checkIsHistoryResuming(request, ws)) return
34
        if (await checkLocalVersion(request, ws)) return
35
        // logger.info(timeDiff.tips, timeDiff.diff(), timeDiff.hrtime)
36
        wss.emit('connection', ws, request)
37
      })
38
      syncProcessUsage()

展开收起

前端：在 Socket 房间关闭且没有等提交的变更时，尽量清空 indexdb

1
export function recordLastEditPosition() {
2
  const eleScrollWarp = document.querySelector('.editor-container')
3
  if (!editor.value || !eleScrollWarp) return
4
  const val = { doc_id: doc.value.doc_id, scrollTop: eleScrollWarp.scrollTop }
5
  storageLocal.set(storageLocal.KEY.LastEditorPosition, val)
6
  editor.value?.extensionStorage?.realtimeExtension?.ySocket?.provider?.destroy()
7
}
8
window.addEventListener('beforeunload', recordLastEditPosition)
9
class YWebsocket {
10
  ...
11
  destroy() {
12
    const synced = this.provider.synced
13
    this.provider.destroy()
14
    this.provider.awareness.destroy()
15
    this.provider = null
16
    clearNativeEvents()
17
    if (synced &amp;&amp; !this.isSyncing) this.indexeddb.clearData()
18
  }
19
}

展开收起

前端：失活的页面不要反复握手，以减少连接数（有风险）

1
provider.on('connection-close', ({ code, reason }) => {
2
  if (!defineErrCodes.includes(code)) {
3
    // 其它异常掉线
4
    provider.off('synced', otherOfflineCb)
5
    provider.on('synced', otherOfflineCb)
6
    console.warn(
7
      '其它异常掉线',
8
      document.visibilityState,
9
      new Date().toLocaleTimeString()
10
    )
11
    if (document.visibilityState === 'hidden') {
12
      provider.shouldConnect = false
13
      document.addEventListener('visibilitychange', () => provider.connect(), {
14
        once: true,
15
      })
16
    }
17
  }
18
})

展开收起

四、改进#

梳理代码发现在 2 年前写过未处理的类似代码，但可能由于后期的业务需求调整未能继续完善

1、做好 log 日志各重要环节节点输出，以便排查问题

2、对可疑的逻辑和未完成的优化做好记录

跟着卡哥学算法Day 15：二叉树常见题目3

Wed, 26 Feb 2025 00:00:00 GMT

110.平衡二叉树 🌟#

力扣链接 🌟

题目描述#

给定一个二叉树，判断它是否是高度平衡的二叉树。

本题中，一棵高度平衡二叉树定义为：一个二叉树每个节点的左右两个子树的高度差的绝对值不超过 1。

示例 1:

给定二叉树 [3,9,20,null,null,15,7]

1
//       3
2
//      / \
3
//     9  20
4
//       / \
5
//      15 7

返回 true

解题思路#

递归#

递归三部曲：

明确递归函数的参数和返回值
- 参数：当前传入节点
- 返回值：当前节点作为根节点的树高度
明确终止条件
- 节点为 null，返回 0
- 左右子树不平衡，直接返回
确定单层递归逻辑
- 计算左子树高度和右子树高度
- 如果已经返回 -1，则子树不平衡，直接返回 -1
- 如果左右子树平衡，计算左右子树高度差是否大于 1，如果大于 1 则不平衡，返回-1
- 继续返回当前子树的高度

1
function isBalanced(root) {
2
  const getDepth = (root) => {
3
    if (!node) return 0
4
    let leftDepth = getDepth(root.left)
5
    let rightDepth = getDepth(root.right)
6
    if (leftDepth === -1 || rightDepth === -1) return -1
7

8
    if (Math.abs(leftDepth - rightDepth) > 1) return -1
9

10
    return Math.max(leftDepth, rightDepth) + 1
11
  }
12

13
  return getDepth(root) !== -1
14
}

257. 二叉树的所有路径 🌟#

力扣链接 🌟

题目描述#

给定一个二叉树，返回所有从根节点到叶子节点的路径。

说明: 叶子节点是指没有子节点的节点。

示例：

1
//       1
2
//      / \
3
//     2  3
4
//      \
5
//      5

输出：['1 -> 2 -> 5','1 -> 3']

解题思路#

必须使用前序遍历：获取从根节点到叶子节点的路径

递归三部曲：

确定递归函数的参数和返回值
- 参数 1：根节点
- 参数 2：要递归记录每一条路径的 path，所以需要传入 path
- 返回值：不需要
确定终止条件

路径是从根到叶子节点，所以遇到叶子节点时，就需要记录
```
1
if (!node.left && !node.right) {
2
  // 路径已经到叶子结点，记录并返回
3
}
```
确定单层递归逻辑
- 将当前节点加入路径 const currentPath = path ? path + ' -> ' + node.val : node.val
- 递归处理左右子树

代码#

递归#

1
function binaryTreePaths(root) {
2
  if (!root) return []
3
  const result = []
4

5
  const traverse = (node, path) => {
6
    const currentPath = path ? `${path}->${node.val}` : node.val
7

8
    if (!node.left && !node.right) {
9
      result.push(currentPath)
10
      return
11
    }
12

13
    node.left && traverse(node.left, currentPath)
14
    node.right && traverse(node.right, currentPath)
15
  }
16

17
  traverse(root, '')
18

19
  return result
20
}

展开收起

404.左叶子之和 🌟#

力扣链接 🌟

题目描述#

给计算给定二叉树的所有左叶子之和。

示例：

1
//       3
2
//      / \
3
//     9  20
4
//       / \
5
//      15 7

输出：24（有两个左叶子节点 9 和 15）

解题思路#

关键：如何判断一个节点是左叶子节点

采用后序遍历，先处理叶子节点，再处理父节点，从而就能识别是否为左叶子节点

递归三部曲#

确定递归函数的参数和返回值
- 参数：当前节点
- 返回值：左叶子之和
确定终止条件
- 节点为 null ，返回 0
确定单层递归逻辑
- 计算左子树左叶子之和
- 计算右子树高度左叶子之和
- 如果当前节点的左子节点为左叶子节点 node.left && node.left.left === null && node.left.right === null，则加上当前节点值，否则不加
- 返回 左子树左叶子之和 + 右子树左叶子之和 + 当前节点是否为左叶子节点

代码#

递归#

1
var sumOfLeftLeaves = function (root) {
2
  const nodeSum = (node) => {
3
    if (!node) return 0
4

5
    const leftSum = nodeSum(node.left)
6
    const rightSum = nodeSum(node.right)
7

8
    let midSum = 0
9
    if (node.left && !node.left.left && !node.left.right) {
10
      midSum += node.left.val
11
    }
12

13
    return leftSum + rightSum + midSum
14
  }
15

16
  return nodeSum(root)
17
}

展开收起

222.完全二叉树的节点个数 🌟#

力扣链接 🌟

题目描述#

给出一个完全二叉树，求出该树的节点个数。

示例 1:

输入: root = [1,2,3,4,5,6]
输出: 6

示例 2:

输入: root = []
输出: 0

示例 3:

输入: root = [1]
输出: 1

提示:

树中节点的数目范围是[0, 5 * 10^4]
0 <= Node.val <= 5 * 10^4
题目数据保证输入的树是完全二叉树

解题思路#

普通二叉树#

递归三部曲：

确定递归函数的参数和返回值
- 参数：当前节点
- 返回值：当前树的节点数
确定终止条件
- 节点为 null ，返回高度为 0
确定单层递归逻辑
- 求左子树节点数
- 求右子树节点数
- 返回左子树节点数 + 右子树节点数 + 1

代码#

1
function countNodes(root) {
2
  const nodeNums = (node) => {
3
    if (!node) return 0
4

5
    const leftNums = nodeNums(node.left)
6
    const rightNums = nodeNums(node.right)
7
    return leftNums + rightNums + 1
8
  }
9

10
  return nodeNums(root)
11
}

完全二叉树#

完全二叉树的特点是最后一层节点尽可能靠左排列，这使得我们可以通过判断子树是否为满二叉树来快速计算节点数（2 ** n - 1）

1
function countNodes(root) {
2
  if (!root) return 0
3

4
  let left = root.left
5
  let right = root.right
6
  let leftDepth = 0, rightDepth = 0
7
  while (lett) {
8
    left = left.left
9
    leftDepth++
10
  }
11
  while (right) {
12
    right = right.right
13
    rightDepth++
14
  }
15

16
  if (leftDepth === rightDepth) {
17
    return Math.pow(2, leftDepth + 1) - 1
18
  }
19
  return countNodes(root.left) + countNodes(root.right) + 1
20
}

展开收起

跟着卡哥学算法Day 14：二叉树常见题目2

Tue, 25 Feb 2025 00:00:00 GMT

226.翻转二叉树 🌟#

力扣链接 🌟

题目描述#

给你一棵二叉树的根节点 root ，翻转这棵二叉树，并返回其根节点。

解题思路#

翻转：将每个节点的左右子节点进行交换

通常可以用前序或后序，因为可以在访问中节点的时候直接交换左右子树
中序遍历，先处理完左子树之后交换左右，可能会导致原来的左子树被处理两次

如：

1
//       1
2
//      / \
3
//     2   3
4
//    / \
5
//   4   5

前序遍历：
1. 处理中间节点 1（交换 2 和 3）
2. 再处理左节点（此时为 3）
3. 最后右节点（此时为 2）
中序遍历
1. 处理左子树（节点 4）
2. 回到中间节点 2，交换左右子树（4 和 5 互换位置）
3. 处理新的右子树（原左子树 4），导致节点 4 被重复处理，而节点 5 未被处理

递归#

1
// 前序遍历
2
function invertTree(root) {
3
  if (!root) return null
4
  ;[root.right, root.left] = [root.left, root.right]
5
  invertTree(root.left)
6
  invertTree(root.right)
7

8
  return root
9
}

迭代#

1
// 统一模板的前序遍历
2
function invertTree(root) {
3
  if (!root) return root
4
  const invertNode = (root, left, right) => {
5
    const temp = right
6
    right = left
7
    left = temp
8
    root.left = left
9
    root.right = right
10
  }
11

12
  const stack = [root]
13

14
  while (stack.length) {
15
    let node = stack.pop()
16
    if (!node) {
17
      node = stack.pop()
18
      invertNode(node, node.left, node.right)
19
    } else {
20
      node.right && stack.push(node.right)
21
      node.left && stack.push(node.left)
22
      stack.push(node)
23
      stack.push(null)
24
    }
25
  }
26
  return root
27
}

展开收起

层序#

1
function invertTree(root) {
2
  const invertNode = (root, left, right) => {
3
    const temp = right
4
    right = left
5
    left = temp
6
    root.left = left
7
    root.right = right
8
  }
9
  if (!root) return root
10
  const queue = [root]
11
  while (queue.length) {
12
    let node = queue.shift()
13
    invertNode(node, node.left, node.right)
14
    node.left && queue.push(node.left)
15
    node.right && queue.push(node.right)
16
  }
17
  return root
18
}

展开收起

101. 对称二叉树 🌟#

力扣链接 🌟

题目描述#

给定一个二叉树，检查它是否是镜像对称的。

解题思路#

必须使用后序遍历：需要先获取左右子树的信息，才能确定当前节点是否满足对称条件
如果前序遍历：先处理根节点，此时左右节点都还没有处理，那么就无法判断是否对称

递归三部曲：

确定递归函数的参数和返回值
- 参数：比较左右子树是不是对称树，所以参数自然是左子树节点和右子树节点
- 返回值：bool

确定终止条件

比较两个节点数值是否相同，一共三种情况：

左右同时为 null，对称
一个为 null，另一个不为 null，不对称
都不为 null，值不想等，不对称

1
// 同时为空，对称
2
if (!left && !right) return true
3
// 一个为空，另一个非空，不对称
4
if (!left || !right) return false
5
// 值不相等，直接返回 false
6
if (left.val !== right.val) return false

确定单层递归逻辑
- 比较左节点的左孩子和右节点的右孩子 compare(left.left, right.right)
- 以及左节点的右孩子和右节点的左孩子 compare(left.right, right.left)
- 同时为 true，则相等

代码#

递归#

1
function isSymmetric(root) {
2
  if (!root) return true
3

4
  const compare = (left, right) => {
5
    // 左右都为null
6
    if (!left && !right) return true
7
    // 左右一个为null
8
    if (!left || !right) return false
9
    // 左右都不为null，值不想等
10
    if (left.val !== right.val) return false
11

12
    return compare(left.left, right.right) && compare(left.right, right.left)
13
  }
14

15
  return compare(root.left, root.right)
16
}

展开收起

迭代#

1
function isSymmetric(root) {
2
  if (!root) return true
3
  const stack = []
4
  stack.push(root.left)
5
  stack.push(root.right)
6

7
  while (stack.length) {
8
    let left = stack.pop()
9
    let right = stack.pop()
10
    if (!left && !right) continue
11
    if (!left || !right || left.val !== right.val) {
12
      return false
13
    }
14

15
    stack.push(left.left)
16
    stack.push(right.right)
17
    stack.push(left.right)
18
    stack.push(right.left)
19
  }
20

21
  return true
22
}

展开收起

二叉树的最大深度#

力扣链接

题目描述#

给定一个二叉树 root ，返回其最大深度。

二叉树的最大深度是指从根节点到最远叶子节点的最长路径上的节点数。

说明: 叶子节点是指没有子节点的节点。

示例：给定二叉树 [3,9,20,null,null,15,7]，

1
//       3
2
//      / \
3
//     9  20
4
//       / \
5
//      15 7

返回它的最大深度 3

解题思路#

二叉树节点深度：从根节点到该节点的路径长度
二叉树节点高度：指从该节点到叶子节点的最长路径

遍历方式#

二叉树节点深度

使用前序遍历 中 -> 左 -> 右，节点的深度由其父节点的深度决定（深度 = 父节点深度 + 1）。在遍历时，需要先访问当前节点（记录其深度），再递归处理子节点。
二叉树节点高度

使用后序遍历 左 -> 右 -> 中，节点的高度取决于其左右子树的高度。必须先知道左右子树的高度，才能计算当前节点的高度（当前高度 = max(左子树高度, 右子树高度) + 1）。

根节点的高度就是二叉树的最大深度

递归三部曲#

确定递归函数的参数和返回值
- 参数：当前节点
- 返回值：当前树的高度
确定终止条件
- 节点为 null ，返回高度为 0
确定单层递归逻辑
- 求左子树高度
- 求右子树高度
- 返回左右子树高度的较大值 + 1

代码#

递归#

1
function maxDepth(root) {
2
  if (!root) return 0
3
  return Math.max(maxDepth(root.left), maxDepth(root.right)) + 1
4
}

迭代#

1
function maxDepth(root) {
2
  if (!root) return 0
3
  let queue = [root]
4
  let depth = 0
5
  while (queue.length) {
6
    depth++
7
    let len = queue.length
8
    while (len) {
9
      const node = queue.shift()
10
      node.left && queue.push(node.left)
11
      node.right && queue.push(node.right)
12
      len--
13
    }
14
  }
15
  return depth
16
}

展开收起

二叉树的最小深度#

力扣链接

题目描述#

给定一个二叉树，找出其最小深度。

最小深度是从根节点到最近叶子节点的最短路径上的节点数量。

说明: 叶子节点是指没有子节点的节点。

示例:

给定二叉树 [3,9,20,null,null,15,7],

1
//       3
2
//      / \
3
//     9  20
4
//       / \
5
//      15 7

返回它的最大深度 2

解题思路#

二叉树节点深度：指从根节点到该节点的最长简单路径边的节点数
二叉树节点高度：指从该节点到叶子节点的最长简单路径边的节点数

根节点的高度就是二叉树的最大深度

递归三部曲#

确定递归函数的参数和返回值
- 参数：当前节点
- 返回值：当前树的高度
确定终止条件
- 节点为 null ，返回高度为 0
确定单层递归逻辑
- 求左子树高度
- 求右子树高度
- 左子树为空，右子树不为空，返回右子树高度 + 1
- 右子树为空，左子树不为空，返回左子树高度 + 1
- 左右子树都不为空，返回左右子树高度的较小值 + 1

代码#

递归#

1
function minDepth(root) {
2
  if (!root) return 0
3
  // 到叶子节点 返回 1
4
  if (!root.left && !root.right) return 1
5
  // 只有右节点时 递归右节点
6
  if (!root.left) return 1 + minDepth(root.right)
7
  // 只有左节点时 递归左节点
8
  if (!root.right) return 1 + minDepth(root.left)
9
  return Math.min(minDepth(root.left), minDepth(root.right)) + 1
10
}

迭代#

1
function minDepth(root) {
2
  if (root === null) return 0
3
  let queue = [root]
4
  let depth = 0
5
  while (queue.length) {
6
    let length = queue.length
7
    depth++
8
    while (length) {
9
      const node = queue.shift()
10

11
      if (!node.left && !node.right) {
12
        return depth
13
      }
14

15
      node.left && queue.push(node.left)
16
      node.right && queue.push(node.right)
17
      length--
18
    }
19
  }
20
  return depth
21
}

展开收起

跟着卡哥学算法Day 13：二叉树 & 遍历

Mon, 24 Feb 2025 00:00:00 GMT

二叉树基础#

树形结构，每个节点最多有两个子节点，称为左子节点和右子节点。

根节点：顶级节点，没有父节点
叶子结点：没有子节点的节点
子树：每个节点的左、右子节点分别构成左子树和右子树
深度：从根节点到最远叶子节点的最长路径上的节点数

分类#

1
// 构建示例树:
2
//       1
3
//      / \
4
//     2   3
5
//    / \
6
//   4   5

普通二叉树#

任意节点最多有两个子节点

满二叉树#

所有叶子结点都在同一层
深度为 k 的满二叉树，最多有 2^k - 1 个节点

完全二叉树#

除最后一层外，其他层节点必须填满，并且最后一层叶子节点必须靠左
若最底层为第 h 层（h 从 1 开始），则该层包含 1~ 2^(h-1) 个节点。

二叉搜索树 BST#

左子树所有节点值 < 根节点值
右子树所有节点值 > 根节点值

平衡二叉搜索树 AVL#

任意节点的左右子树高度差不超过 1
左右子树都会平衡二叉树

二叉树的存储方式#

链式存储
顺序存储

一般使用链式存储

二叉树的遍历#

深度优先遍历#

先往深走，遇到叶子结点再往回走

前序遍历：中左右
中序遍历：左中右
后序遍历：左右中

如下图例子所示：

binary-tree-sort

这里的前中后，指的是中间节点的遍历顺序

广度优先遍历#

一层一层遍历

二叉树的定义#

1
// ES5
2
function TreeNode(val) {
3
  this.val = val // 节点值
4
  this.left = null // 左子节点（默认为空）
5
  this.right = null // 右子节点（默认为空）
6
}
7

8
// ES6
9
class TreeNode {
10
  constructor(val) {
11
    this.val = val
12
    this.left = null
13
    this.right = null
14
  }
15
}

展开收起

二叉树递归排序#

递归方法论：

确定递归的参数和返回值
确定终止条件，如果没有终止，会导致栈溢出
确定单层递归的逻辑

以前序遍历（根 -> 左 -> 右）为例：

确定递归的参数和返回值
- 递归参数：当前遍历节点
- 返回值：存储遍历节点的数组
确定终止条件
- 如果本层遍历节点为空，则直接 return
确定单层递归的逻辑
- 前序遍历：中左右

1
// 前序遍历
2
function preorderTraversal(root) {
3
  if (!root) return []
4
  return [
5
    root.val,
6
    ...perorderTraversal(root.left),
7
    ...preorderTraversal(root.right),
8
  ]
9
}
10

11
// 中序遍历
12
function inorderTraversal(root) {
13
  if (!root) return []
14
  return [
15
    ...perorderTraversal(root.left),
16
    root.val,
17
    ...preorderTraversal(root.right),
18
  ]
19
}
20

21
// 后序遍历
22
function postorderTraversal(root) {
23
  if (!root) return []
24
  return [
25
    ...perorderTraversal(root.left),
26
    ...preorderTraversal(root.right),
27
    root.val,
28
  ]
29
}

展开收起

二叉树迭代遍历（非递归）#

递归在底层也是通过栈来实现的

通过栈来模拟现二叉树的迭代遍历，避免递归造成的溢出风险

前序遍历#

初始化栈，将根节点入栈
循环处理：
1. 弹出栈顶元素，数值保存到数组中
2. 如果有右子节点，入栈（先右后左，保证左子树先出栈）
3. 如果有左子节点，入栈
如果栈为空，则遍历结束

1
function preorderTraversal(root) {
2
  if (!root) return []
3
  const stack = [root]
4
  const result = []
5

6
  while (stack.length) {
7
    const current = stack.pop()
8
    result.push(current.val)
9

10
    if (current.right) stack.push(current.right)
11
    if (current.left) stack.push(current.left)
12
  }
13
  return result
14
}

中序遍历#

遍历二叉树的迭代过程，主要有两个操作：

访问：遍历节点
处理：将元素放进 result 数组中

中序遍历和前序遍历不同的是：

前序遍历：先访问中间节点，同时处理的也是中间节点，即访问和处理的元素顺序一致
中序遍历：先访问根结点，然后一层一层向下访问，直到到达左子树的最底部，再进行处理

1
function inorderTraversal(root) {
2
  if (!root) return []
3
  const result = []
4
  const stack = []
5

6
  let cur = root
7
  while (cur || stack.length) {
8
    // 一直访问左子树，直到左子树为空
9
    while (cur) {
10
      stack.push(cur)
11
      cur = cur.left
12
    }
13

14
    // 循环处理栈
15
    cur = stack.pop()
16
    result.push(cur.val)
17
    // 处理右子树
18
    cur = cur.right
19
  }
20

21
  return result
22
}

展开收起

后序遍历#

前序遍历是中 -> 左 -> 右
后序遍历是左 -> 右 -> 中
只需要把前序遍历修改顺序成中 -> 右 -> 左的顺序，即先入栈左子树，再入栈右子树
再将数组结果进行反转（数指针）

1
function postorderTraversal(root) {
2
  if (!root) return []
3
  const result = []
4
  const stack = [root]
5

6
  while (stack.length) {
7
    const current = stack.pop()
8
    result.push(current.val)
9

10
    if (current.left) stack.push(current.left)
11
    if (current.right) stack.push(current.right)
12
  }
13

14
  return result.reverse()
15
}

展开收起

二叉树的统一迭代法#

上面写出的中序遍历与其他两个的迭代法风格不统一，其主要原因是：要访问和要处理的节点不一致。

此时可以将访问的节点放入栈中，再把要处理的节点也放入栈中但是需要另外做标记

如何标记#

空指针标记法：要处理的节点放入栈后，紧接这放入一个空指针作为标记，当栈中弹出 null 时，表示下一个节点需要被处理（即加入结果）。

那么此时压栈顺序应该如下：

前序遍历：中 -> 左 -> 右，压栈顺序为：右 -> 左 -> 中 -> null
中序遍历：左 -> 中 -> 右，压栈顺序为：右 -> 中 -> null -> 左
后序遍历：左 -> 右 -> 中，压栈顺序为：中 -> null -> 右 -> 左

如：

1
// 构建示例树:
2
//       1
3
//      / \
4
//     2   3
5
//    / \
6
//   4   5

前序遍历：中 -> 左 -> 右，压栈顺序为：右 -> 左 -> 中 -> null

初始化栈，将 1 压入栈
循环处理：
1. 弹出栈顶元素
  1. 为 null，则下个元素就是要处理的元素，添加到结果中，继续处理下一个元素
  2. 不为 null，则继续处理当前元素
2. 压入 3，先右后左
3. 压入 2
4. 压入 null
返回结果

1
/**
2
 * 前序遍历统一迭代法
3
 * 顺序：中 -> 左 -> 右
4
 * 压栈顺序：右 -> 左 -> 中 -> null
5
 */
6
function preorderTraversal(root) {
7
  const result = []
8
  const stack = [root]
9
  while (stack.length) {
10
    const cur = stack.pop()
11

12
    if (!cur) {
13
      result.push(cur.pop().val)
14
      continue
15
    }
16

17
    if (cur.right) stack.push(cur.right)
18
    if (cur.left) stack.push(cur.left)
19
    stack.push(cur)
20
    stack.push(null)
21
  }
22
  return result
23
}

展开收起

通过入栈顺序调整处理时机#

入栈顺序决定了根节点的处理时机：

前序遍历：

1
stack.push(node)
2
stack.push(null) // 根节点标记为待处理
3
stack.push(node.right) // 右子节点入栈（后处理）
4
stack.push(node.left) // 左子节点入栈（先处理）

根节点先被处理（标记后立即弹出 null）。

中序遍历：

1
stack.push(node.right) // 右子节点入栈（后处理）
2
stack.push(node)
3
stack.push(null) // 根节点标记为待处理
4
stack.push(node.left) // 左子节点入栈（先处理）

根节点在左子树处理后处理。

后序遍历：

1
stack.push(node)
2
stack.push(null) // 根节点标记为待处理
3
stack.push(node.right) // 右子节点入栈（后处理）
4
stack.push(node.left) // 左子节点入栈（先处理）

根节点在左右子树均处理后处理。

统一迭代法的核心逻辑#

通过 空指针标记 和 入栈顺序控制，将三种遍历统一为同一框架：

标记待处理的根节点：将根节点与空指针一起入栈(在统一迭代法中，无论是哪种遍历方式，处理节点的时机都是在中节点的位置)，表示该节点需要后续处理。
控制子节点的入栈顺序：调整左右子节点的入栈顺序，间接决定根节点的处理时机。

二叉树的层序遍历#

深度优先遍历：递归和迭代都使用栈来实现
广度优先遍历：二叉树的层序遍历（一层一层遍历二叉树），需要借助队列来实现

思路#

初始化队列：将根节点加入队列
循环处理队列：
1. 记录当前层的节点数量（队列长度）
2. 依次取出当前层的所有节点，并将它们的值存入当前层的结果列表
3. 将每个节点的非空左、右子节点加入队列
逐层收集结果：将每层的节点值列表合并为最终结果

1
//       1
2
//     /   \
3
//    2     3
4
//   / \     \
5
//  4   5     6

层序遍历过程：

初始队列：[1] → 处理第 1 层 → result = [[1]]，子节点入队 [2, 3]
处理第 2 层：弹出 2 和 3 → result = [[1], [2, 3]]，子节点入队 [4, 5, 6]
处理第 3 层：弹出 4、5、6 → result = [[1], [2, 3], [4, 5, 6]]

代码实现#

1
function levelOrder(root) {
2
  if (!root) return []
3
  const result = []
4
  const queue = [root]
5

6
  while (queue.length) {
7
    const size = queue.length
8
    const curLevel = []
9

10
    for (let i = 0; i < size; i++) {
11
      const cur = queue.shift()
12
      curLevel.push(cur.val)
13

14
      if (cur.left) queue.push(cur.left)
15
      if (cur.right) queue.push(cur.right)
16
    }
17

18
    result.push(curLevel)
19
  }
20
  return result
21
}

展开收起

leetcode 相关题目：

102.二叉树的层序遍历
107.二叉树的层次遍历 II 二叉树层序遍历后结果反转
199.二叉树的右视图二叉树层序遍历后遍历结果，拿子数组最后一个
637.二叉树的层平均值二叉树层序遍历不记录节点值，记录每层总和的平均值
429.N 叉树的层序遍历二叉树层序遍历往队列 push 下层节点时，不再是 left 和 right，而是遍历 children
515.在每个树行中找最大值二叉树层序遍历不记录节点值，记录每层最大值
116.填充每个节点的下一个右侧节点指针二叉树层序遍历如果不是每层最后一个节点，则将它的 next 指针指向队首，返回二叉树头节点
117.填充每个节点的下一个右侧节点指针 II 和 116 代码一摸一样
104.二叉树的最大深度二叉树层序遍历，记录一下遍历的层数就是二叉树的深度
111.二叉树的最小深度与 104 相似，只是当当前节点左右节点都为 null 时，提前返回 depth 深度

跟着卡哥学算法Day 11：栈与队列中等题目

Sat, 22 Feb 2025 00:00:00 GMT

150. 逆波兰表达式求值 🌟🌟#

力扣链接 🌟🌟

题目描述#

根据逆波兰表示法，求表达式的值。

有效的运算符包括 + , - , * , / 。每个运算对象可以是整数，也可以是另一个逆波兰表达式。

说明：

整数除法只保留整数部分。给定逆波兰表达式总是有效的。换句话说，表达式总会得出有效数值且不存在除数为 0 的情况。

示例 1：

输入: [“2”, “1”, ”+”, “3”, ” * ”]
输出: 9
解释: 该算式转化为常见的中缀算术表达式为：((2 + 1) * 3) = 9

示例 2：

输入: [“4”, “13”, “5”, ”/”, ”+”]
输出: 6
解释: 该算式转化为常见的中缀算术表达式为：(4 + (13 / 5)) = 6

示例 3：

输入: [“10”, “6”, “9”, “3”, ”+”, “-11”, ” * ”, ”/”, ” * ”, “17”, ”+”, “5”, ”+”]
输出: 22

解释:该算式转化为常见的中缀算术表达式为：

1
((10 * (6 / ((9 + 3) * -11))) + 17) + 5
2
= ((10 * (6 / (12 * -11))) + 17) + 5
3
= ((10 * (6 / -132)) + 17) + 5
4
= ((10 * 0) + 17) + 5
5
= (0 + 17) + 5
6
= 17 + 5
7
= 22

什么是逆波兰表达式#

逆波兰表达式：是一种后缀表达式，所谓后缀就是指运算符写在后面。

平常使用的算式则是一种中缀表达式，如 ( 1 + 2 ) * ( 3 + 4 )

该算式的逆波兰表达式写法为 1 2 + 3 4 + *，相当于二叉树的后序遍历，即运算符为中间节点，数字为叶子结点

逆波兰表达式主要有以下两个优点：

去掉括号后表达式无歧义，上式即便写成 1 2 + 3 4 + * 也可以依据次序计算出正确结果。
适合用栈操作运算：遇到数字则入栈；遇到运算符则取出栈顶两个数字进行计算，并将结果压入栈中。

后缀表达式对计算机来说非常友好，如中缀表达式 4 + 13 / 5，如果计算机从左往右扫描进行计算，当到 13 时还需要考虑后面的符号优先级；而如果转为后缀表达式 4 13 5 / +，则只需要利用栈顺序计算即可。

解题思路#

遇到数字，则入栈
遇到运算符，则取出栈顶两个数字进行计算，并将结果压入栈中
最终栈中剩一个元素，就是结果

代码#

1
/**
2
 * @param {string[]} tokens
3
 * @return {number}
4
 */
5
var evalRPN = function (tokens) {
6
  const result = []
7

8
  for (let i of tokens) {
9
    if (!isNaN(Number(i))) {
10
      result.push(Number(i))
11
    } else {
12
      const num1 = result.pop()
13
      const num2 = result.pop()
14
      switch (i) {
15
        case '+':
16
          result.push(num2 + num1)
17
          break
18
        case '-':
19
          result.push(num2 - num1)
20
          break
21
        case '*':
22
          result.push(num2 * num1)
23
          break
24
        case '/':
25
          result.push((num2 / num1) | 0)
26
          break
27
      }
28
    }
29
  }
30
  return result[0]
31
}

展开收起

239. 滑动窗口最大值 🌟🌟🌟#

力扣链接 🌟🌟🌟

题目描述#

给定一个数组 nums，有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。

返回滑动窗口中的最大值。

1
示例 1：
2

3
输入：nums = [1,3,-1,-3,5,3,6,7], k = 3
4
输出：[3,3,5,5,6,7]
5
解释：
6
滑动窗口的位置                  最大值
7
---------------               -----
8
[1  3  -1] -3  5  3  6  7       3
9
 1 [3  -1  -3] 5  3  6  7       3
10
 1  3 [-1  -3  5] 3  6  7       5
11
 1  3  -1 [-3  5  3] 6  7       5
12
 1  3  -1  -3 [5  3  6] 7       6
13
 1  3  -1  -3  5 [3  6  7]      7
14

15
示例 2：
16
输入：nums = [1], k = 1
17
输出：[1]

展开收起

解题思路#

暴力解法#

滑动次数：滑动 n - k + 1 次
求最大值：滑动窗口内，每次遍历 k 个元素，求最大值
时间复杂度：O(n * k)

使用单调队列维护窗口内最大值#

单调队列：维护元素单调递减或单调递增的序列

队列内不需要维护所有元素，只需要按递减顺序记录有可能成为最大值的元素
```
1
如：[2, 3, 5, 1, 4]
2

3
只需要维护 [5, 4]
```
窗口移动时，新元素添加进队列，队列需要弹出元素，如何弹出队列？（不一定是最大值，即不一定是队首元素）
- push 操作：如果 push 进的元素大于队列首元素，则队列全部弹出，只需要 push 进新元素即可
- pop：
每次窗口移动时，只需要获取队首元素就是最大值

代码#

1
var maxSlidingWindow = function (nums, k) {
2
  class MonoQueue {
3
    queue
4
    constructor() {
5
      this.queue = []
6
    }
7
    enqueue(value) {
8
      let back = this.queue[this.queue.length - 1]
9
      while (back !== undefined && back < value) {
10
        this.queue.pop()
11
        back = this.queue[this.queue.length - 1]
12
      }
13
      this.queue.push(value)
14
    }
15
    dequeue(value) {
16
      let front = this.front()
17
      if (front === value) {
18
        this.queue.shift()
19
      }
20
    }
21
    front() {
22
      return this.queue[0]
23
    }
24
  }
25
  let helperQueue = new MonoQueue()
26
  let i = 0,
27
    j = 0
28
  let resArr = []
29
  while (j < k) {
30
    helperQueue.enqueue(nums[j++])
31
  }
32
  resArr.push(helperQueue.front())
33
  while (j < nums.length) {
34
    helperQueue.enqueue(nums[j])
35
    helperQueue.dequeue(nums[i])
36
    resArr.push(helperQueue.front())
37
    i++, j++
38
  }
39
  return resArr
40
}

展开收起

347.前 K 个高频元素 🌟🌟#

力扣链接 🌟🌟

题目描述#

给定一个非空的整数数组，返回其中出现频率前 k 高的元素。

示例 1:

输入: nums = [1,1,1,2,2,3], k = 2
输出: [1,2]

示例 2:

输入: nums = [1], k = 1
输出: [1]

提示：

你可以假设给定的 k 总是合理的，且 1 ≤ k ≤ 数组中不相同的元素的个数。
你的算法的时间复杂度必须优于 O(nlog⁡n)O(n \log n)O(nlogn) , n 是数组的大小。
题目数据保证答案唯一，换句话说，数组中前 k 个高频元素的集合是唯一的。
你可以按任意顺序返回答案。

解题思路#

代码#

跟着卡哥学算法Day 10：栈与队列理论 & 常见题目

Fri, 21 Feb 2025 00:00:00 GMT

JavaScript 没有独立的数据结构，但可通过数组模拟，或自行封装类。

栈 LIFO#

后进先出：最后添加的元素最先被移除

操作#

push：元素入栈（添加到栈顶）
pop：元素出栈（移除栈顶元素）
peek：查看栈顶元素（不移除）

实现方式#

使用数组实现

1
const stack = []
2
stack.push(1) // 入栈 [1]
3
stack.push(2) // 入栈 [1, 2]
4
const top = stack.pop() // 出栈 2，栈变为 [1]

定义 Stack 类

1
class Stack {
2
  constructor() {
3
    this.items = []
4
  }
5
  push(item) {
6
    this.items.push(item)
7
  }
8
  pop() {
9
    return this.items.pop()
10
  }
11
  peek() {
12
    return this.items[this.items.length - 1]
13
  }
14
  isEmpty() {
15
    return this.items.length === 0
16
  }
17
}
18

19
const s = new Stack()
20
s.push(10)
21
s.push(20)
22
s.pop() // 返回 20

展开收起

队列 FIFO#

先进先出：最先添加的元素最先被移除

操作#

enqueue：元素入队（添加到队尾）
dequeue：元素出队（移除队首元素）
front：查看队首元素（不移除）

实现方式#

使用数组实现

1
const queue = []
2
queue.push(1) // 入队 [1]
3
queue.push(2) // 入队 [1, 2]
4
const front = queue.shift() // 出队 1，队列变为 [2]

性能较差，因为shift()操作会导致所有元素前移，时间复杂度是 O(n)，频繁操作可能影响性能

定义 Queue 类

1
class Queue {
2
  constructor() {
3
    this.items = {}
4
    this.frontIndex = 0 // 队首指针
5
    this.rearIndex = 0 // 队尾指针
6
  }
7
  enqueue(item) {
8
    this.items[this.rearIndex] = item
9
    this.rearIndex++
10
  }
11
  dequeue() {
12
    if (this.isEmpty()) return null
13
    const item = this.items[this.frontIndex]
14
    delete this.items[this.frontIndex]
15
    this.frontIndex++
16
    return item
17
  }
18
  front() {
19
    return this.items[this.frontIndex]
20
  }
21
  isEmpty() {
22
    return this.rearIndex === this.frontIndex
23
  }
24
}
25

26
const q = new Queue()
27
q.enqueue(10)
28
q.enqueue(20)
29
q.dequeue() // 返回 10

展开收起

通过指针追踪队首和队尾，性能更优

接下来都通过 🌟 来代表题目难度：

简单：🌟
中等：🌟🌟
困难：🌟🌟🌟

经典题目#

232.用栈实现队列 🌟#

力扣链接

题目描述#

使用栈实现队列的下列操作：

push(x) — 将一个元素放入队列的尾部。
pop() — 从队列首部移除元素。
peek() — 返回队列首部的元素。
empty() — 返回队列是否为空。

示例：

1
MyQueue queue = new MyQueue();
2
queue.push(1);
3
queue.push(2);
4
queue.peek();  // 返回 1
5
queue.pop();   // 返回 1
6
queue.empty(); // 返回 false

说明:

你只能使用标准的栈操作 — 也就是只有 push to top, peek/pop from top, size, 和 is empty 操作是合法的。
你所使用的语言也许不支持栈。你可以使用 list 或者 deque（双端队列）来模拟一个栈，只要是标准的栈操作即可。
假设所有操作都是有效的（例如，一个空的队列不会调用 pop 或者 peek 操作）

解题思路#

队列先进先出，如 1 -> 2 -> 3，3 先进队列，同样也是先出队列

如果想用栈来模拟队列，需要两个栈来实现

进栈：将元素压入输入栈
出栈：如果输出栈不为空，则直接从栈顶弹出；为空时，需要将输入栈所有元素压入输出栈，再从输出栈弹出数据
如果两个栈都为空，则模拟队列为空

代码#

1
var MyQueue = function () {
2
  this.stackIn = []
3
  this.stackOut = []
4
}
5

6
/**
7
 * @param {number} x
8
 * @return {void}
9
 */
10
MyQueue.prototype.push = function (x) {
11
  this.stackIn.push(x)
12
}
13

14
/**
15
 * @return {number}
16
 */
17
MyQueue.prototype.pop = function () {
18
  if (this.stackOut.length) {
19
    return this.stackOut.pop()
20
  }
21
  while (this.stackIn.length) {
22
    this.stackOut.push(this.stackIn.pop())
23
  }
24
  return this.stackOut.pop()
25
}
26

27
/**
28
 * @return {number}
29
 */
30
MyQueue.prototype.peek = function () {
31
  const x = this.pop()
32
  this.stackOut.push(x)
33
  return x
34
}
35

36
/**
37
 * @return {boolean}
38
 */
39
MyQueue.prototype.empty = function () {
40
  return !this.stackIn.length && !this.stackOut.length
41
}

展开收起

225. 用队列实现栈 🌟#

力扣链接 🌟

题目描述#

使用队列实现栈的下列操作：

push(x) — 元素 x 入栈
pop() — 移除栈顶元素
top() — 获取栈顶元素
empty() — 返回栈是否为空

注意:

你只能使用队列的基本操作— 也就是 push to back, peek/pop from front, size, 和 is empty 这些操作是合法的。
你所使用的语言也许不支持队列。你可以使用 list 或者 deque（双端队列）来模拟一个队列 , 只要是标准的队列操作即可。
你可以假设所有操作都是有效的（例如, 对一个空的栈不会调用 pop 或者 top 操作）。

解题思路#

类比用栈实现队列，使用两个栈来实现，那么此处也可以用两个队列来实现栈

如何用一个队列实现栈？

入队列：添加元素进队列
出队列：获取队列长度，将对首元素重新入队列，直到只剩最后一个元素
如果队列为空，则模拟栈为空

代码#

1
// 使用set解决
2
var intersection = function (nums1, nums2) {
3
  const set1 = new Set(nums1)
4
  const result = new Set()
5

6
  for (let i of nums2) {
7
    if (set1.has(i)) {
8
      result.add(i)
9
    }
10
  }
11
  return [...result]
12
}
13
// 使用数组解决
14
var intersection = function (nums1, nums2) {
15
  const record = new Array(1000).fill(0)
16
  const result = new Set()
17
  for (let i of nums1) {
18
    record[i] = 1
19
  }
20
  for (let i of nums2) {
21
    if (record[i] === 1) result.add(i)
22
  }
23

24
  return [...result]
25
}

展开收起

用 set 作为哈希表时，每次 insert 值时都需要对这个值做哈希运算，转变为另一个内部存储的值，同时需要开辟新的空间存储，相对来说需要花费时间更多。
用数组作为哈希表效率高，用下标做哈希映射，速度是最快的

20. 有效的括号 🌟#

力扣链接 🌟

题目描述#

给定一个只包括 ’(’，’)’，’{’，’}’，’[’，’]’ 的字符串，判断字符串是否有效。

有效字符串需满足：

左括号必须用相同类型的右括号闭合。
左括号必须以正确的顺序闭合。
注意空字符串可被认为是有效字符串。

示例 1:

1
输入: "()"
2
输出: true
3

4
输入: "()[]{}"
5
输出: true
6

7
输入: "([)]"
8
输出: false

解题思路#

栈结构非常适合做匹配类的题目

遇到左括号，则入栈
遇到右括号，则判断栈顶元素是否匹配，匹配则出栈，否则返回 false
循环结束后，栈为空，则返回 true

代码#

1
var isValid = function (s) {
2
  const map = new Map()
3
  map.set('(', ')')
4
  map.set('[', ']')
5
  map.set('{', '}')
6

7
  const arr = Array.from(s)
8
  let result = []
9
  for (let i of arr) {
10
    const right = map.get(i)
11
    if (right) {
12
      result.unshift(i)
13
      continue
14
    }
15
    if (map.get(result.shift()) !== i) {
16
      return false
17
    }
18
  }
19
  return !result.length
20
}

展开收起

1047. 删除字符串中的所有相邻重复项 🌟#

力扣链接 🌟

题目描述#

给出由小写字母组成的字符串 S，重复项删除操作会选择两个相邻且相同的字母，并删除它们。

在 S 上反复执行重复项删除操作，直到无法继续删除。

在完成所有重复项删除操作后返回最终的字符串。答案保证唯一。

示例：

1
输入："abbaca"
2
输出："ca"
3
解释：例如，在 "abbaca" 中，我们可以删除 "bb" 由于两字母相邻且相同，这是此时唯一可以执行删除操作的重复项。之后我们得到字符串 "aaca"，其中又只有 "aa" 可以执行重复项删除操作，所以最后的字符串为 "ca"。

提示：

1 <= S.length <= 20000
S 仅由小写英文字母组成。

解题思路#

遍历字符串数组，如果当前字符等于栈顶元素，出栈，否则入栈

代码#

1
var removeDuplicates = function (s) {
2
  const arr = Array.from(s)
3

4
  const result = []
5
  for (let i of arr) {
6
    if (result[result.length - 1] !== i) {
7
      result.push(i)
8
    } else {
9
      result.pop()
10
    }
11
  }
12
  return result.join('')
13
}

跟着卡哥学算法Day 9：字符串常见题目2

Thu, 20 Feb 2025 00:00:00 GMT

151.翻转字符串里的单词 🌟🌟#

力扣链接

题目描述#

给定一个字符串，逐个翻转字符串中的每个单词。

示例 1：

1
输入: "the sky is blue"
2
输出: "blue is sky the"

示例 2：

1
输入: "  hello world!  "
2
输出: "world! hello"

解释: 输入字符串可以在前面或者后面包含多余的空格，但是反转后的字符不能包括。

示例 3：

1
输入: "a good   example"
2
输出: "example good a"

解释: 如果两个单词间有多余的空格，将反转后单词间的空格减少到只含一个

解题思路#

什么时候不能使用库函数？#

本题如果使用库函数 split 分割字符串，然后定义新的字符串，将单词倒叙添加到新字符串，那么也就失去了算法的意义，这时候就不能使用库函数。

不能使用库函数的几种场景：

明确提出使用某种特定算法，如使用快排等
库函数很简单就能解出答案，如本题
库函数隐藏性能问题，如

解题步骤#

移除多余空格

整体思路按照移除元素快慢指针
整个字符串反转

整体思路按照反转字符串左右指针
字符串中的每个单词反转

左右指针

1
let s = 'the sky is blue '
2
// 移除多余空格
3
s = 'the sky is blue'
4
// 字符串反转
5
s = 'eulb si yks eht'
6
// 单词反转
7
s = 'blue is sky the'

代码#

1
/**
2
 * @param {string} s
3
 * @return {string}
4
 */
5

6
var reverseWords = function (s) {
7
  const strArr = Array.from(s)
8

9
  // 移除多余空格
10
  removeExtraSpaces(strArr)
11
  // 反转
12
  reverse(strArr, 0, strArr.length - 1)
13
  // 对单个单词反转
14

15
  let start = 0
16
  for (let i = 0; i <= strArr.length; i++) {
17
    if (strArr[i] === ' ' || i === strArr.length) {
18
      reverse(strArr, start, i - 1)
19
      start = i + 1
20
    }
21
  }
22

23
  return strArr.join('')
24
}
25

26
function removeExtraSpaces(strArr) {
27
  let fast = 0
28
  let slow = 0
29

30
  while (fast < strArr.length) {
31
    if (strArr[fast] === ' ' && (fast === 0 || strArr[fast - 1] === ' ')) {
32
      fast++
33
    } else {
34
      strArr[slow] = strArr[fast]
35
      slow++
36
      fast++
37
    }
38
  }
39

40
  // 上面操作末尾还会剩余一个空格
41
  strArr.length = strArr[slow - 1] === ' ' ? slow - 1 : slow
42
}
43
function reverse(strArr, start, end) {
44
  let left = start
45
  let right = end
46

47
  while (left < right) {
48
    ;[strArr[left], strArr[right]] = [strArr[right], strArr[left]]
49
    left++
50
    right--
51
  }
52
}

展开收起

右旋字符串 🌟🌟#

题目描述#

字符串的右旋转操作是把字符串尾部的若干个字符转移到字符串的前面。给定一个字符串 s 和一个正整数 k，请编写一个函数，将字符串中的后面 k 个字符移到字符串的前面，实现字符串的右旋转操作。

例如，对于输入字符串 “abcdefg” 和整数 2，函数应该将其转换为 “fgabcde”。

输入：输入共包含两行，第一行为一个正整数 k，代表右旋转的位数。第二行为字符串 s，代表需要旋转的字符串。

输出：输出共一行，为进行了右旋转操作后的字符串。

样例输入：

1
2
2
abcdefg

样例输出：

1
fgabcde

数据范围：1 <= k < 10000, 1 <= s.length < 10000;

解题思路#

依然反转字符串

1
let s = 'abcdefg'
2
let k = 2

首先反转 0 ～ s.length - 1 - k 字符 edcbafg
反转 arr.length - 1 - k + 1 ～ s.length - 1 字符 edcbagf
最后整体反转 fgabcde

代码#

1
var rightTurnStr = function (s, k) {
2
  let arr = s.split('')
3

4
  reverse(arr, 0, s.length - 1 - k)
5
  reverse(arr, k + 1, arr.length - 1)
6
  reverse(arr, 0, arr.length - 1)
7

8
  return arr.join('')
9
}
10
function reverse(strArr, start, end) {
11
  while (start < end) {
12
    ;[strArr[start], strArr[end]] = [strArr[end], strArr[start]]
13
    start++
14
    end--
15
  }
16
}

展开收起

28. 找出字符串中第一个匹配项的下标 🌟#

力扣链接

题目描述#

实现 strStr() 函数。

给定一个 haystack 字符串和一个 needle 字符串，在 haystack 字符串中找出 needle 字符串出现的第一个位置 (从 0 开始)。如果不存在，则返回 -1。

1
示例 1: 输入: haystack = "hello", needle = "ll" 输出: 2
2

3
示例 2: 输入: haystack = "aaaaa", needle = "bba" 输出: -1

说明: 当 needle 是空字符串时，我们应当返回什么值呢？这是一个在面试中很好的问题。对于本题而言，当 needle 是空字符串时我们应当返回 0 。这与 C 语言的 strstr() 以及 Java 的 indexOf() 定义相符。

KMP 算法#

什么是 KMP 算法#

因为是由这三位学者发明的：Knuth，Morris 和 Pratt，所以取了三位学者名字的首字母。所以叫做 KMP

KMP 用来做什么#

KMP主要应用在字符串匹配上。

解题思路#

代码#

1
var replaceNumber = function (s) {
2
  let arr = s.split('')
3
  const a = 'a'.charCodeAt()
4
  const z = 'z'.charCodeAt()
5
  const isStr = (str) => str.charCodeAt() >= a && str.charCodeAt() <= z
6

7
  let n = 0
8
  for (let i of arr) {
9
    n += isStr(i) ? 1 : 6
10
  }
11

12
  const newArr = new Array(n).fill(0)
13
  let index = arr.length - 1
14
  for (let i = n - 1; i >= 0; i--) {
15
    if (isStr(arr[index])) {
16
      newArr[i] = arr[index]
17
    } else {
18
      newArr[i] = 'r'
19
      newArr[i - 1] = 'e'
20
      newArr[i - 2] = 'b'
21
      newArr[i - 3] = 'm'
22
      newArr[i - 4] = 'u'
23
      newArr[i - 5] = 'n'
24
      i -= 5
25
    }
26
    index--
27
  }
28

29
  return newArr.join('')
30
}

展开收起

跟着卡哥学算法Day 8：字符串常见题目

Wed, 19 Feb 2025 00:00:00 GMT

接下来都通过 🌟 来代表题目难度：

简单：🌟
中等：🌟🌟
困难：🌟🌟🌟

344.反转字符串 🌟#

力扣链接

题目描述#

给定两个字符串 s 和 t ，编写一个函数来判断 t 是否是 s 的字母异位词。

示例 1: 输入: s = “anagram”, t = “nagaram” 输出: true

示例 2: 输入: s = “rat”, t = “car” 输出: false

说明: 你可以假设字符串只包含小写字母。

解题思路#

数指针

左右指针同时向中间移动，并交换左右指针的位置即可

代码#

1
/**
2
 * @param {character[]} s
3
 * @return {void} Do not return anything, modify s in-place instead.
4
 */
5
var reverseString = function (s) {
6
  const length = s.length
7
  for (let i = 0, j = length - 1; i < length / 2; i++, j--) {
8
    ;[s[i], s[j]] = [s[j], s[i]]
9
  }
10
  return s
11
}

541. 反转字符串 II 🌟#

力扣链接 🌟

题目描述#

给定一个字符串 s 和一个整数 k，从字符串开头算起, 每计数至 2k 个字符，就反转这 2k 个字符中的前 k 个字符。

如果剩余字符少于 k 个，则将剩余字符全部反转。

如果剩余字符小于 2k 但大于或等于 k 个，则反转前 k 个字符，其余字符保持原样。

示例:

1
输入: s = "abcdefg", k = 2
2
输出: "bacdfeg"

解题思路#

依然双指针

外层循环每次移动 2 * k 位，内层双指针交换前 k 个字符

右指针超出剩余长度时，右指针指向 length - 1

代码#

1
/**
2
 * @param {string} s
3
 * @param {number} k
4
 * @return {string}
5
 */
6
var reverseStr = function (s, k) {
7
  let arr = s.split('')
8
  for (let i = 0; i < arr.length; i += 2 * k) {
9
    let left = i
10
    let right = i + k - 1 >= length - 1 ? length - 1 : i + k - 1
11
    while (left < right) {
12
      ;[arr[left], arr[right]] = [arr[right], arr[left]]
13
      left++
14
      right--
15
    }
16
  }
17
  return arr.join('')
18
}

展开收起

替换数字 🌟#

题目描述#

给定一个字符串 s，它包含小写字母和数字字符，请编写一个函数，将字符串中的字母字符保持不变，而将每个数字字符替换为 number。

例如，对于输入字符串 “a1b2c3”，函数应该将其转换为 “anumberbnumbercnumber”。

对于输入字符串 “a5b”，函数应该将其转换为 “anumberb”

输入：一个字符串 s,s 仅包含小写字母和数字字符。

输出：打印一个新的字符串，其中每个数字字符都被替换为了 number

1
样例输入：a1b2c3
2

3
样例输出：anumberbnumbercnumber

数据范围：1 <= s.length < 10000。

解题思路#

根据原字符串，得到将数字变为 “number” 后的长度，初始化数组，长度为此时的长度
双指针：i 新数组末尾，j 原数组末尾
字符串直接赋值，数字变为 number 后开始从后往前填充

数组填充类问题，预先给数组扩容带填充后的大小，从后往前操作，好处：

不用申请新数组
从前往后添加元素时，都需要将添加元素之后的所有元素向后移动，导致时间复杂度提升为 O(n^2)

代码#

1
var replaceNumber = function (s) {
2
  let arr = s.split("");
3
  const a = "a".charCodeAt();
4
  const z = "z".charCodeAt();
5
  const isStr = (str) => str.charCodeAt() >= a && str.charCodeAt() <= z;
6

7
  let n = 0;
8
  for (let i of arr) {
9
    n += isStr(i) ? 1 : 6;
10
  }
11

12
  const newArr = new Array(n).fill(0);
13
  let index = arr.length - 1;
14
  for (let i = n - 1; i >= 0; i--) {
15
    if (isStr(arr[index])) {
16
      newArr[i] = arr[index];
17
    } else {
18
      newArr[i] = "r";
19
      newArr[i - 1] = "e";
20
      newArr[i - 2] = "b";
21
      newArr[i - 3] = "m";
22
      newArr[i - 4] = "u";
23
      newArr[i - 5] = "n";
24
      i -= 5;
25
    }
26
    index--;
27
  }
28

29
  return newArr.join("");
30
};

展开收起

跟着卡哥学算法Day 7：哈希表中等题目

Tue, 18 Feb 2025 00:00:00 GMT

454. 四数相加 II 🌟🌟#

力扣链接

题目描述#

编写一个函数，其作用是将输入的字符串反转过来。输入字符串以字符数组 char[] 的形式给出。

不要给另外的数组分配额外的空间，你必须原地修改输入数组、使用 O(1) 的额外空间解决这一问题。

你可以假设数组中的所有字符都是 ASCII 码表中的可打印字符。

1
示例 1：
2
输入：["h","e","l","l","o"]
3
输出：["o","l","l","e","h"]
4

5
示例 2：
6
输入：["H","a","n","n","a","h"]
7
输出：["h","a","n","n","a","H"]

解题思路#

四个数组 A、B、C、D
暴力法：O(N^4) A(i) + B(j) + C(k) + D(l) = 0

使用哈希表解决#

遍历 A、B，将 A(i) + B(j) 添加到集合、遍历 C、D，将 C(k) + D(l) 添加到集合，O(N^2)
使用 map 作为哈希表，A(i) + B(j) 的结果作为 key，value 存储相同结果出现的次数
定义 count 保存出现的次数
遍历 C、D，找到 0 - C(k) + D(l) 是否在 map 中，在就count + map[C(k) + D(l)]统计最后的 count

代码#

1
/**
2
 * @param {number[]} nums1
3
 * @param {number[]} nums2
4
 * @param {number[]} nums3
5
 * @param {number[]} nums4
6
 * @return {number}
7
 */
8
var fourSumCount = function (nums1, nums2, nums3, nums4) {
9
  const twoSumMap = new Map()
10
  let count = 0
11

12
  for (let num1 of nums1) {
13
    for (let num2 of nums2) {
14
      const sum = num1 + num2
15
      twoSumMap.set(sum, (twoSumMap.get(sum) || 0) + 1)
16
    }
17
  }
18
  for (let num3 of nums3) {
19
    for (let num4 of nums4) {
20
      const target = 0 - (num3 + num4)
21
      if (twoSumMap.get(target)) {
22
        count += twoSumMap.get(target)
23
      }
24
    }
25
  }
26
  return count
27
}

展开收起

383. 赎金信 🌟#

力扣链接 🌟

题目描述#

给定一个赎金信 (ransom) 字符串和一个杂志(magazine)字符串，判断第一个字符串 ransom 能不能由第二个字符串 magazines 里面的字符构成。如果可以构成，返回 true ；否则返回 false。

(题目说明：为了不暴露赎金信字迹，要从杂志上搜索各个需要的字母，组成单词来表达意思。杂志字符串中的每个字符只能在赎金信字符串中使用一次。)

注意：

你可以假设两个字符串均只含有小写字母。

1
canConstruct("a", "b") -> false
2
canConstruct("aa", "ab") -> false
3
canConstruct("aa", "aab") -> true

解题思路#

同242.有效的字母异位词

代码#

1
/**
2
 * @param {string} ransomNote
3
 * @param {string} magazine
4
 * @return {boolean}
5
 */
6
var canConstruct = function (ransomNote, magazine) {
7
  const record = new Array(26).fill(0)
8
  const base = 'a'.charCodeAt()
9
  for (let i of magazine) {
10
    record[i.charCodeAt() - base]++
11
  }
12
  for (let j of ransomNote) {
13
    if (!record[j.charCodeAt() - base]) return false
14
    record[j.charCodeAt() - base]--
15
  }
16
  return true
17
}

展开收起

15. 三数之和 🌟🌟#

力扣链接 🌟🌟

题目描述#

给你一个包含 n 个整数的数组 nums，判断 nums 中是否存在三个元素 a，b，c ，使得 a + b + c = 0 ？请你找出所有满足条件且不重复的三元组。

注意：答案中不可以包含重复的三元组。

示例：

1
给定数组 nums = [-1, 0, 1, 2, -1, -4]，
2

3
满足要求的三元组集合为： [ [-1, 0, 1], [-1, -1, 2] ]

解题思路#

哈希解法#

固定一个数，转换为两数之和，用哈希表找另外两个数，时间复杂度 O(n^2)

1
// for循环固定一个数
2
for (let i = 0; i < nums.length; i++) {
3
  let target = 0 - nums[i]
4
  // 求 两数之和 = target即可
5
}

题目需要去重，三个数都需要去重

代码#

1
function threeSum(nums) {
2
  let result = []
3
  nums.sort((a, b) => a - b)
4

5
  for (let i = 0; i < nums.length; i++) {
6
    // 如果当前数大于0，则不可能找到和为0的三元组
7
    if (nums[i] > 0) break
8

9
    // 去重a
10
    if (i > 0 && nums[i] === nums[i - 1]) continue
11

12
    let set = new Set()
13

14
    for (let k = i + 1; k < nums.length; k++) {
15
      // 去重b=c时的b和c
16
      if (k > i + 2 && nums[k] === nums[k - 1] && nums[k - 1] === nums[k - 2])
17
        continue
18

19
      let target = 0 - (nums[i] + nums[k])
20

21
      if (set.has(target)) {
22
        result.push([nums[i], target, nums[k]])
23
        set.delete(target) // 避免重复
24
      } else {
25
        set.add(nums[k])
26
      }
27
    }
28
  }
29

30
  return result
31
}

展开收起

双指针法#

排序
固定第一个数 i
左(i + 1)右(nums.length - 1)两个指针，向中间移动；大于 0 时，右指针往左移动，小于 0 时，左指针往右移动
**去重：**第一个数与前一个数相同，则跳过；左指针与下一个数相同，跳过；右指针与上一个数相同，跳过

代码#

1
/**
2
 * @param {number[]} nums
3
 * @return {number[][]}
4
 */
5
var threeSum = function (nums) {
6
  let result = []
7
  nums.sort((a, b) => a - b)
8

9
  const length = nums.length
10
  for (let i = 0; i < length; i++) {
11
    const num = nums[i]
12
    if (num > 0) break
13
    if (num === nums[i - 1]) continue
14

15
    let left = i + 1
16
    let right = length - 1
17
    while (left < right) {
18
      const sum = num + nums[left] + nums[right]
19
      if (sum > 0) {
20
        right--
21
      } else if (sum < 0) {
22
        left++
23
      } else {
24
        result.push([num, nums[left], nums[right]])
25
        while (left < right && nums[left] === nums[left + 1]) left++
26
        while (left < right && nums[right] === nums[right - 1]) right--
27
        left++
28
        right--
29
      }
30
    }
31
  }
32
  return result
33
}

展开收起

18. 四数之和 🌟🌟#

力扣链接 🌟🌟

题目描述#

题意：给定一个包含 n 个整数的数组 nums 和一个目标值 target，判断 nums 中是否存在四个元素 a，b，c 和 d ，使得 a + b + c + d 的值与 target 相等？找出所有满足条件且不重复的四元组。

注意：

答案中不可以包含重复的四元组。

示例：

1
给定数组 nums = [1, 0, -1, 0, -2, 2]，和 target = 0
2

3
满足要求的四元组集合为： [ [-1, 0, 0, 1], [-2, -1, 1, 2], [-2, 0, 0, 2] ]

解题思路#

在三数之和的基础上，再套一层 for 循环，也就是固定前两个数

剪枝操作：

不能判断 nums[i] > target 就返回，target 可能为负数，比如 nums = [-4, -3, -2, -1]]，target 为 -5，如果 nums[i] > target 就返回，则无法找到满足条件的四元组
需要判断 num[i] > target && (nums[i] >= 0 || target >= 0)

代码#

1
/**
2
 * @param {number[]} nums
3
 * @param {number} target
4
 * @return {number[][]}
5
 */
6
var fourSum = function (nums, target) {
7
  const result = []
8
  nums.sort((a, b) => a - b)
9

10
  const length = nums.length
11
  for (let i = 0; i < length - 3; i++) {
12
    const fNum = nums[i]
13
    if (fNum > target && (fNum >= 0 || target >= 0)) break
14
    if (fNum === nums[i - 1]) continue
15
    for (let j = i + 1; j < length - 2; j++) {
16
      const sNum = nums[j]
17
      if (j > i + 1 && sNum === nums[j - 1]) continue
18
      let left = j + 1
19
      let right = length - 1
20
      while (left < right) {
21
        const tNum = nums[left]
22
        const lNum = nums[right]
23
        const sum = fNum + sNum + tNum + lNum
24
        if (sum > target) {
25
          right--
26
        } else if (sum < target) {
27
          left++
28
        } else {
29
          result.push([fNum, sNum, tNum, lNum])
30
          while (left < right && tNum === nums[left + 1]) left++
31
          while (left < right && lNum === nums[right - 1]) right--
32
          left++
33
          right--
34
        }
35
      }
36
    }
37
  }
38

39
  return result
40
}

展开收起

跟着卡哥学算法Day 6：哈希表整体学习 & 常见题目

Mon, 17 Feb 2025 00:00:00 GMT

哈希表是通过关键码的值直接进行访问的数据结构。如：通过索引下标获取数组元素。

解决问题：快速判断一个元素是否出现在集合中

哈希函数#

如查询一个名字是否在学校中，首先需要将所有的学生名字存入哈希表中，通过索引直接查询学生是否在这所学校中。

而将学生名字映射到哈希表就是哈希函数（以时间换空间）。

一般的哈希函数如下所示：

1
hashFunction = hashCode(name) % tabSize

hashCode 通过特定编码，可以将其他数据格式转为不同的数值，作为哈希表的索引。

取模操作#

如果哈希表是一个 tabSize 长度的数组，那么它的有效索引范围是[0, tabSize - 1]，如果计算数组大于 tabSize 时，就需要对进行 tabSize 求余，无论结果多大，都会在索引范围内。如：

哈希表大小 tableSize = 10
某个姓名的 hashCode = 123
通过 123 % 10 = 3，索引被限制在有效范围内（0-9）。

此时又会导致另一个问题，即导致多个名字映射到同一索引，这就是哈希碰撞。

哈希碰撞#

哈希碰撞有两种解决方式：拉链法或线性探测法。

拉链法#

在冲突的索引位置维护一个链表，所有映射到该索引的元素都存储在链表中，这样就能通过索引找到冲突的名字。

线性探测法#

前提：tabSize 必须大于 dataSize，依靠哈希表中的空位来解决碰撞问题

如冲突位置已经存在数值时，向下找空位放置当前的数值。

好的哈希函数应尽量均匀分布哈希值，减少冲突概率；哈希表的大小应根据数据规模合理选择，并在必要时动态扩容。

常见三种哈希结构#

数组：适合顺序数据和连续的数值索引操作；不适合索引很大或者数值分布分散（0， 5， 10000）的情况
Set：适合需要存储唯一值并进行快速存在性检查的场景，如上述不能使用数组的情况，缺点：占用空间大，速度比数组慢，set 将数值映射到 key 时需要做 hash 计算
Map：适合需要键值映射、支持任意类型键以及有序遍历的场景

接下来都通过 🌟 来代表题目难度：

简单：🌟
中等：🌟🌟
困难：🌟🌟🌟

经典题目#

242.有效的字母异位词 🌟#

力扣链接

题目描述#

给定两个字符串 s 和 t ，编写一个函数来判断 t 是否是 s 的字母异位词。

示例 1: 输入: s = “anagram”, t = “nagaram” 输出: true

示例 2: 输入: s = “rat”, t = “car” 输出: false

说明: 你可以假设字符串只包含小写字母。

解题思路#

重点：定义哈希表

创建一个长度为 26 的数组，用于存储字母在字符串中出现的次数（初始化为[0,0,0,…]）。
遍历第一个字符串，对应字母在数组中对应位置++
遍历第二个字符串，对应字母在数组中对应位置—
判断数组是否全部为 0，全部为 0 则返回 true，否则返回 false

代码#

1
var isAnagram = function (s, t) {
2
  if (s.length !== t.length) return false
3

4
  const record = new Array(26).fill(0)
5

6
  const firstCharCode = 'a'.charCodeAt()
7
  for (let i of s) {
8
    record[i.charCodeAt() - firstCharCode]++
9
  }
10
  for (let i of t) {
11
    record[i.charCodeAt() - firstCharCode]--
12
  }
13

14
  return record.every((r) => !r)
15
}

展开收起

349. 两个数组的交集 🌟#

力扣链接 🌟

题目描述#

给定两个数组 nums1 和 nums2 ，返回它们的交集。输出结果中的每个元素一定是唯一的。我们可以不考虑输出结果的顺序。

示例 1：

1
输入：nums1 = [1,2,2,1], nums2 = [2,2]
2
输出：[2]

示例 2：

1
输入：nums1 = [4,9,5], nums2 = [9,4,9,8,4]
2
输出：[9,4]
3
解释：[4,9] 也是可通过的

解题思路#

哈希表擅长解决：给定一个元素，判断在一个集合中是否出现过

将第一个数组转为哈希表
遍历第二个数组是否在哈希表中出现过

代码#

1
// 使用set解决
2
var intersection = function (nums1, nums2) {
3
  const set1 = new Set(nums1)
4
  const result = new Set()
5

6
  for (let i of nums2) {
7
    if (set1.has(i)) {
8
      result.add(i)
9
    }
10
  }
11
  return [...result]
12
}
13
// 使用数组解决
14
var intersection = function (nums1, nums2) {
15
  const record = new Array(1000).fill(0)
16
  const result = new Set()
17
  for (let i of nums1) {
18
    record[i] = 1
19
  }
20
  for (let i of nums2) {
21
    if (record[i] === 1) result.add(i)
22
  }
23

24
  return [...result]
25
}

展开收起

用 set 作为哈希表时，每次 insert 值时都需要对这个值做哈希运算，转变为另一个内部存储的值，同时需要开辟新的空间存储，相对来说需要花费时间更多。
用数组作为哈希表效率高，用下标做哈希映射，速度是最快的

202. 快乐数 🌟#

力扣链接 🌟

题目描述#

编写一个算法来判断一个数 n 是不是快乐数。

「快乐数」定义为：对于一个正整数，每一次将该数替换为它每个位置上的数字的平方和，然后重复这个过程直到这个数变为 1，也可能是无限循环但始终变不到 1。如果可以变为 1，那么这个数就是快乐数。

如果 n 是快乐数就返回 true ；不是，则返回 false 。

示例：

1
输入：19
2
输出：true
3
解释：
4
1^2 + 9^2 = 82
5
8^2 + 2^2 = 68
6
6^2 + 8^2 = 100
7
1^2 + 0^2 + 0^2 = 1

解题思路#

条件：一直计算知道变为 1，或进入循环即结束

代码#

1
var isHappy = function (n) {
2
  const getSum = (m) => {
3
    let sum = 0
4
    while (n) {
5
      sum += (n % 10) ** 2
6
      n = Math.floor(n / 10)
7
    }
8
    return sum
9
  }
10
  let result = new Set()
11
  while (n !== 1 && !result.has(n)) {
12
    result.add(n)
13
    n = getSum(n)
14
  }
15

16
  return n === 1
17
}

展开收起

1. 两数之和 🌟#

力扣链接 🌟

题目描述#

给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那两个整数，并返回他们的数组下标。

你可以假设每种输入只会对应一个答案。但是，数组中同一个元素不能使用两遍。

示例:

1
给定 nums = [2, 7, 11, 15], target = 9
2

3
因为 nums[0] + nums[1] = 2 + 7 = 9
4

5
所以返回 [0, 1]

解题思路#

map 作为哈希表，遍历数组
值作为 key，下标作为 value

代码#

1
var twoSum = function (nums, target) {
2
  const map = new Map()
3
  for (let index = 0; index < nums.length; index++) {
4
    const num = nums[index]
5

6
    if (map.has(target - num)) {
7
      return [map.get(target - num), index]
8
    } else {
9
      map.set(num, index)
10
    }
11
  }
12
}

跟着卡哥学算法Day 3：链表整体学习 & 常见题目

Fri, 14 Feb 2025 00:00:00 GMT

链表是一种通过指针串联在一起的线性结构，在内存中不连续分布，每一个节点由两部分组成，一个是数据域一个是指针域（存放指向下一个节点的指针），最后一个节点的指针域指向 null（空指针的意思）。

链表的入口称为链表的头节点 head。

分类#

单链表#

双链表#

每一个节点有两个指针域，一个指向下一个节点 next，一个指向上一个节点 prev。

循环链表#

链表首尾相连，尾节点的指针域指向头节点。

存储方式#

在内存中不连续分布，散乱分布，通过指针域的指针链接在内存中的各个节点

链表定义#

通过 js 定义链表：

1
class LinkedList {
2
  constructor(value) {
3
    this.value = value
4
    this.next = null // 指向下一个节点的指针，初始为null
5
    this.prev = null // 指向上一个节点的指针，初始为 null
6
  }
7
}

特点#

增删快 O(1)、查找慢 O(n)

删除节点：将上个节点的 next 指针指向下一个节点即可
添加节点：将当前节点的 next 指针指向新节点，新节点的 next 指针指向下一个节点

与数组区别#

存储方式：数组连续、链表乱序
增删：数组 O(n)，所有后续节点都需要移动；链表 O(1)，只需要移动指针
查找：数组 O(1)，通过下标即可查找对应节点；链表 O(n)，需要从头节点开始查找

接下来都通过 🌟 来代表题目难度：

简单：🌟
中等：🌟🌟
困难：🌟🌟🌟

经典题目#

重点：做题前画个链表

203.移除链表元素 🌟#

力扣链接

思路#

两种方法解决

直接在原链表删除#

头指针等于要删除的元素

1
// 将头指针指向下一个节点
2
while (head !== null && head.val === val) {
3
  head = head.next
4
}

头指针不等于要删除的元素

1
// 按照顺序删除即可
2
if (cur.next?.val === val) {
3
  cur.next = cur.next.next
4
}

创建新的虚拟头节点#

1
const head = new ListNode(0, head)

从原始头节点开始判断
值相等则移动 next 指针到下一个节点的 next 指针
不等则移动当前节点

代码#

1
/**
2
 * Definition for singly-linked list.
3
 * class ListNode {
4
 *     val: number
5
 *     next: ListNode | null
6
 *     constructor(val?: number, next?: ListNode | null) {
7
 *         this.val = (val===undefined ? 0 : val)
8
 *         this.next = (next===undefined ? null : next)
9
 *     }
10
 * }
11
 */
12

13
function removeElements(head: ListNode | null, val: number): ListNode | null {
14
  const data = new ListNode(0, head)
15
  // 虚拟头节点
16
  let cur = data
17
  // 下个节点存在就判断值是否相等
18
  while (cur.next) {
19
    if (cur.next.val === val) {
20
      cur.next = cur.next.next
21
    } else {
22
      cur = cur.next
23
    }
24
  }
25
  // 返回头节点除外
26
  return data.next
27
}

展开收起

707. 设计链表 🌟🌟#

力扣链接

思路#

重点

n 从 0 开始
统一使用虚拟头节点，方便链表操作

获取第 n 个节点值#

对 n 范围判断 0 < n < size - 1
创建虚拟头节点
定义 curNode 临时指针指向头节点来遍历链表，原因：不能改变头节点

头部插入节点#

定义新节点
顺序：新节点指向头节点，虚拟头节点指向新节点

尾部插入节点#

curNode.next = null指向尾部
指向新节点

第 n 个节点插入#

遍历指针，找到第 n 个节点
第 n 个节点一定是 curNode.next，才能在 curNode.next 前插入节点

删除第 n 个节点#

删除同插入，必须知道前一个节点，即第 n 个节点一定是 curNode.next

代码#

1
class ListNode {
2
  val: number
3
  next: ListNode | null
4
  constructor(val?: number, next?: ListNode | null) {
5
    this.val = val
6
    this.next = next
7
  }
8
}
9
class MyLinkedList {
10
  size: number
11
  head: ListNode | null
12
  tail: ListNode | null
13
  constructor() {
14
    this.size = 0
15
    this.head = null // 头节点
16
    this.tail = null // 尾节点
17
  }
18
  getNode(index: number): ListNode {
19
    // 通过虚拟头节点
20
    let curNode: ListNode = new ListNode(0, this.head)
21
    for (let i = 0; i <= index; i++) {
22
      curNode = curNode.next
23
    }
24
    return curNode
25
  }
26

27
  get(index: number): number {
28
    // 索引无效 返回-1
29
    if (index < 0 || index > this.size) return -1
30
    let curNode = this.getNode(index)
31
    return curNode.val
32
  }
33

34
  // 插入头节点
35
  addAtHead(val: number): void {
36
    let node = new ListNode(val, this.head)
37
    this.head = node
38
    // 无尾节点 则原始链表为空 则将新节点作为尾节点
39
    if (!this.tail) {
40
      this.tail = node
41
    }
42
    this.size++
43
  }
44

45
  // 插入尾节点
46
  addAtTail(val: number): void {
47
    let node = new ListNode(val)
48
    // 有尾节点 直接修改next
49
    if (this.tail) {
50
      this.tail.next = node
51
      // 无尾节点 则原始链表为空
52
    } else {
53
      this.head = node
54
    }
55
    this.tail = node
56
    this.size++
57
  }
58

59
  // 中间插入节点
60
  addAtIndex(index: number, val: number): void {
61
    // 插入到最后一个节点
62
    if (index === this.size) {
63
      this.addAtTail(val)
64
      return
65
    }
66
    // 超出边界 无法插入
67
    if (index > this.size) return
68
    // 插入到头节点
69
    if (index < 0) {
70
      this.addAtHead(val)
71
      return
72
    }
73
    // 正常插入
74
    // 拿到前一个节点 新节点next指针指向前一个节点的next 前一个节点next再指向新节点
75
    const prevNode = this.getNode(index - 1)
76
    const newNode = new ListNode(val, prevNode.next)
77
    prevNode.next = newNode
78
    this.size++
79
  }
80

81
  deleteAtIndex(index: number): void {
82
    if (index < 0 || index >= this.size) return
83
    // 删除头节点
84
    if (index === 0) {
85
      this.head = this.head?.next
86
      this.size--
87
      return
88
    }
89
    const prevNode = this.getNode(index - 1)
90
    prevNode.next = prevNode.next?.next
91
    // 删除最后一个时 需要指定尾节点
92
    if (index === this.size - 1) {
93
      this.tail = prevNode
94
    }
95
    this.size--
96
  }
97
}
98

99
/**
100
 * Your MyLinkedList object will be instantiated and called as such:
101
 * var obj = new MyLinkedList()
102
 * var param_1 = obj.get(index)
103
 * obj.addAtHead(val)
104
 * obj.addAtTail(val)
105
 * obj.addAtIndex(index,val)
106
 * obj.deleteAtIndex(index)
107
 */

展开收起

206.反转链表 🌟#

力扣链接

思路#

双指针法#

利用 temp 节点来暂存当前节点的 next 节点
当前节点的 next 指向前一个节点
前一个节点替换为当前节点
当前节点替换为暂存节点
循环结束后 （遍历终止条件：curNode 指向 null），preNode 就是反转后的头节点

递归法#

终止条件一致

代码#

1
/**
2
 * Definition for singly-linked list.
3
 * class ListNode {
4
 *     val: number
5
 *     next: ListNode | null
6
 *     constructor(val?: number, next?: ListNode | null) {
7
 *         this.val = (val===undefined ? 0 : val)
8
 *         this.next = (next===undefined ? null : next)
9
 *     }
10
 * }
11
 */
12

13
function reverseList(head: ListNode | null): ListNode | null {
14
  // 双指针法
15
  let curNode = head
16
  let preNode = null
17
  let tempNode = null
18
  while (curNode) {
19
    tempNode = curNode.next
20
    // 当前节点next指针指向前一个节点 head时next为null
21
    curNode.next = preNode
22
    // 前一个节点替换为当前节点
23
    preNode = curNode
24
    // 当前节点替换为下一个节点
25
    curNode = tempNode
26
  }
27
  return preNode
28
}

展开收起

1
function reverse(pre, cur) {
2
  if (!cur) return pre
3
  const temp = cur.next
4
  cur.next = pre
5
  pre = cur
6
  cur = temp
7
  return reverse(pre, cur)
8
}
9
function reverseList(head) {
10
  return reverse(null, head)
11
}

总结#

对于链表的题目，统一都用虚拟头结点。一般涉及到增删改操作，用虚拟头结点都会方便很多，如果只能查的话，用不用虚拟头结点都差不多。

跟着卡哥学算法Day 4：链表中等题目

Fri, 14 Feb 2025 00:00:00 GMT

24. 两两交换链表中的节点 🌟🌟#

力扣链接

题目描述#

给定一个链表，两两交换其中相邻的节点，并返回交换后的链表。

你不能只是单纯的改变节点内部的值，而是需要实际的进行节点交换。

思路#

虚拟头节点#

1
const head = new ListNode(0, head)

什么时候遍历结束

1
// 奇数节点 cur.next.next = null
2
// 偶数节点 cur.next = null
3
cur.next !== null && cur.next.next !== null

两两交换节点即可

每次 1 和 3 都会断掉，所以需要提前保存下来

1
// 节点1
2
let temp = cur.next
3
// 节点3
4
let temp1 = cur.next.next.next
5

6
cur.next = cur.next.next
7
cur.next.next = temp
8
temp.next = temp1
9
// 移动
10
cur = cur.next.next

代码#

1
/**
2
 * Definition for singly-linked list.
3
 * function ListNode(val, next) {
4
 *     this.val = (val===undefined ? 0 : val)
5
 *     this.next = (next===undefined ? null : next)
6
 * }
7
 */
8
/**
9
 * @param {ListNode} head
10
 * @return {ListNode}
11
 */
12
var swapPairs = function (head) {
13
  const data = new ListNode(0, head)
14
  let cur = data
15
  while (cur.next && cur.next.next) {
16
    // 节点1
17
    let temp = cur.next
18
    // 节点3
19
    let temp1 = cur.next.next.next
20

21
    cur.next = cur.next.next
22
    cur.next.next = temp
23
    temp.next = temp1
24
    cur = cur.next.next
25
  }
26
  return data.next
27
}

展开收起

19.删除链表的倒数第 N 个节点 🌟🌟#

力扣链接

题目描述#

给你一个链表，删除链表的倒数第 n 个结点，并且返回链表的头结点。

进阶：你能尝试使用一趟扫描实现吗？

1
输入：head = [1,2,3,4,5], n = 2 输出：[1,2,3,5]
2

3
输入：head = [1], n = 1 输出：[]
4

5
输入：head = [1,2], n = 1 输出：[1]

思路#

重点

快慢指针：快指针移动 n+1 步，快慢指针同时移动
快指针指向链表末尾，慢指针刚好指向删除节点的前一个节点插入，必须知道前一个节点，即第 n 个节点一定是 curNode.next

代码#

1
var removeNthFromEnd = function (head, n) {
2
  let data = new ListNode(0, head)
3
  let fast = data
4
  let slow = data
5

6
  while (n) {
7
    fast = fast.next
8
    n--
9
  }
10
  while (fast.next !== null) {
11
    fast = fast.next
12
    slow = slow.next
13
  }
14
  slow.next = slow.next.next
15

16
  return data.next
17
}

展开收起

面试题 02.07. 链表相交 🌟#

力扣链接

题目描述#

给你两个单链表的头节点 headA 和 headB ，请你找出并返回两个单链表相交的起始节点。如果两个链表没有交点，返回 null 。

思路#

两个单链表从交点开始，后面的节点都指向同一个节点。

如：

1
链表 A：4 → 1 → 8 → 4 → 5
2
链表 B：5 → 6 → 1 → 8 → 4 → 5

从节点 8 开始，后面的节点都指向同一个节点。

获取两个链表的长度（遍历），将长链表放在前面，短链表放在后面
求长度差，将长链表指针向后移动长度差位，直到两个链表指针相等
遍历两个链表，如果两个链表节点相等，则返回该节点

代码#

1
var getLength = function (head) {
2
  let size = 0,
3
    cur = head
4
  while (cur) {
5
    size++
6
    cur = cur.next
7
  }
8
  return size
9
}
10
var getIntersectionNode = function (headA, headB) {
11
  let curA = headA,
12
    curB = headB
13

14
  let lenA = getLength(headA)
15
  let lenB = getLength(headB)
16

17
  if (lenA < lenB) {
18
    ;[curA, curB] = [curB, curA]
19
    ;[lenA, lenB] = [lenB, lenA]
20
  }
21

22
  let i = lenA - lenB
23
  while (i-- > 0) {
24
    curA = curA.next
25
  }
26
  while (curA && curA !== curB) {
27
    curA = curA.next
28
    curB = curB.next
29
  }
30
  return curA
31
}

展开收起

142.环形链表 II 🌟🌟#

力扣链接

题目描述#

题意：给定一个链表，返回链表开始入环的第一个节点。如果链表无环，则返回 null。

为了表示给定链表中的环，使用整数 pos 来表示链表尾连接到链表中的位置（索引从 0 开始）。如果 pos 是 -1，则在该链表中没有环。

说明：不允许修改给定的链表。

思路#

判断链表是否有环#

快慢指针，快指针移动两个节点，慢指针移动一个节点，如果最终都指向 null，则说明没有环；如果快慢指针相遇，说明链表一定有环

1
head = [3,2,0,-4], pos = 1
2
这里 pos = 1 代表索引 1 处的节点（值为 2）是环的入口节点，表示 -4 指向 2，形成环。

返回索引为 1 的节点

如何找到环的入口#

变量定义

x：从链表头到环入口的距离（节点数）。
y：从环入口到快慢指针相遇点的距离。
z：从相遇点走到环入口的剩余距离（也就是环的长度减去 y）。

快慢指针相遇时的关系：

slow 指针走了 x + y 步。
fast 指针走了 x + y + n(y + z) 步，其中 n 为快指针在环中转过的圈数，（至少 n = 1）

因为 fast 指针移动速度是 slow 指针的两倍，所以

1
2(x + y) = x + y + n(y + z)

两边消掉 x + y，得到

1
x + y = n (y + z)

求环形入口，即头节点到环形入口节点的距离x，得到

1
x = n(y + z) - y
2
x = (n - 1)(y + z) + z

此时，如果 n = 1，即快指针 fast 转一圈就遇到了慢指针 slow，简化为 x = z，即从头节点和相遇节点同时出发一个指针，每次只走一个节点，那么相遇节点就是环形入口节点。

当 n 大于 1 时，即相遇节点的指针在圈内转了n圈后，在环形节点入口遇到了从头节点出发的指针

时间复杂度: O(n)，快慢指针相遇前，指针走的次数小于链表长度，快慢指针相遇后，两个index指针走的次数也小于链表长度，总体为走的次数小于 2n

代码#

1
var detectCycle = function(head) {
2
    if(!head || !head.next) return null;
3
    let slow = head.next, fast = head.next.next;
4
    while(fast && fast.next && fast!== slow) {
5
        slow = slow.next;
6
        fast = fast.next.next;
7
    }
8
    if(!fast || !fast.next ) return null;
9
    slow = head;
10
    while (fast !== slow) {
11
        slow = slow.next;
12
        fast = fast.next;
13
    }
14
    return slow;
15
};

展开收起

跟着卡哥学算法Day 1：数组整体学习 & 常见题目

Wed, 12 Feb 2025 00:00:00 GMT

数组在内存空间中连续存储的，这样会使得通过下标获取数组元素很方便，但删除或新增元素时，就需要移动其他元素的位置。

接下来都通过 🌟 来代表题目难度：

简单：🌟
中等：🌟🌟
困难：🌟🌟🌟

经典题目#

704. 二分查找 🌟#

力扣链接

前提#

有序排列

无重复值

题目描述#

给定一个 n 个元素有序的（升序）整型数组 nums 和一个目标值 target ，写一个函数搜索 nums 中的 target，如果目标值存在返回下标，否则返回 -1。

示例 1:

1
输入: nums = [-1,0,3,5,9,12], target = 9
2
输出: 4
3
解释: 9 出现在 nums 中并且下标为 4

示例 2:

1
输入: nums = [-1,0,3,5,9,12], target = 2
2
输出: -1
3
解释: 2 不存在 nums 中因此返回 -1

提示：

你可以假设 nums 中的所有元素是不重复的。
n 将在 [1, 10000]之间。
nums 的每个元素都将在 [-9999, 9999]之间。

解题思路#

重点：定好区间

开闭：包含这个元素

左闭右闭：[left, right]

左闭右开：[left, right)

需要定义三个值：

left：0 左侧初始下标
right：nums.length - 1 右侧初始下标
middle

判断条件：

确保 left <= right

left + ((right - left) >> 1)：计算 middle
nums[middle] < target]：中间值小于目标值，目标值在右侧，更新 left 为middle + 1
nums[middle] > target]：中间值大于目标值，目标值在左侧，更新 right 为middle - 1
nums[middle] === target：等于目标值，返回 middle

代码#

1
function search(nums: number[], target: number): number {
2
  let left = 1
3
  let right = nums.length - 1
4
  while (left <= right) {
5
    const middle = left + ((right - left) >> 1)
6
    if (nums[middle] === target) return middle
7
    if (nums[middle] > target) {
8
      right = middle - 1
9
    } else {
10
      left = middle + 1
11
    }
12
  }
13
  return -1
14
}

相似题目#

35. 搜索插入位置 🌟

思路：

按照二分法找到的返回下标
未找到则返回 right + 1（left 一直增加，当一直未找到 targe 时，left 会不满足条件，即 left > right，此时 right + 1 就是插入的位置）

1
function searchInsert(nums: number[], target: number): number {
2
  let left = 0
3
  let right = nums.length - 1
4
  while (left <= right) {
5
    let middle = left + ((right - left) >> 1)
6
    if (nums[middle] > target) {
7
      right = middle - 1
8
    } else if (nums[middle] < target) {
9
      left = middle + 1
10
    } else {
11
      return middle
12
    }
13
  }
14
  return right + 1
15
}

展开收起

34. 在排序数组中查找元素的第一个和最后一个位置 🌟🌟

解题思路：

两次二分查找
- 查找目标值第一次出现位置 nums[middle] >= target，一直移动 right
- 查找目标值最后一次出现位置 nums[middle] <= target，一直移动 left
target 在数组左或右，返回 [-1, -1]
target 在数组范围内，但不存在 right - left < 0，返回 [-1, -1]
target 在数组范围内，存在，返回 [left, right]

1
function searchRange(nums, target) {
2
  if (nums[0] > target || nums[nums.length - 1] < target) return [-1, -1]
3
  const left = searchLeft(nums, target)
4
  const right = searchRight(nums, target)
5
  if (right - left < 0) return [-1, -1]
6
  return [left, right]
7
}
8
function searchLeft(nums, target) {
9
  let left = 0
10
  let right = nums.length - 1
11
  while (left <= right) {
12
    let middle = left + ((right - left) >> 1)
13
    if (nums[middle] < target) {
14
      left = middle + 1
15
    } else {
16
      right = middle - 1
17
    }
18
  }
19
  return left
20
}
21
function searchRight(nums, target) {
22
  let left = 0
23
  let right = nums.length - 1
24
  while (left <= right) {
25
    let middle = left + ((right - left) >> 1)
26
    if (nums[middle] <= target) {
27
      left = middle + 1
28
    } else {
29
      right = middle - 1
30
    }
31
  }
32
  return right
33
}

展开收起

69. x 的平方根 🌟

1
function mySqrt(x: number): number {
2
  if (x < 2) return x
3
  let left = 0
4
  let right = x
5
  while (left <= right) {
6
    let mid = left + ((right - left) >> 1)
7
    if (mid * mid < x) {
8
      left = mid + 1
9
    } else if (mid * mid > x) {
10
      right = mid - 1
11
    } else {
12
      return mid
13
    }
14
  }
15
  return right
16
}

展开收起

367. 有效的完全平方数 🌟

1
function isPerfectSquare(num: number): boolean {
2
  let left = 0
3
  let right = num
4
  while (left <= right) {
5
    let mid = left + ((right - left) >> 1)
6
    if (mid * mid === num) {
7
      return true
8
    } else if (mid * mid < num) {
9
      left = mid + 1
10
    } else {
11
      right = mid - 1
12
    }
13
  }
14
  return false
15
}

展开收起

27. 移除元素 🌟#

力扣链接 🌟

题目描述#

给你一个数组 nums 和一个值 val，你需要原地移除所有数值等于 val 的元素。元素的顺序可能发生改变。然后返回 nums 中与 val 不同的元素的数量。

假设 nums 中不等于 val 的元素数量为 k，要通过此题，您需要执行以下操作：

更改 nums 数组，使 nums 的前 k 个元素包含不等于 val 的元素。nums 的其余元素和 nums 的大小并不重要。返回 k。

解题思路#

双指针
- slow：填充进新数组的 value（只有 nums[fast] !== val 才填充进新数组）
- fast：代表新数组的 index

“一个萝卜一个坑”

代码#

1
function removeElement(nums: number[], val: number): number {
2
  let k = 0
3
  for (let i = 0; i < nums.length; i++) {
4
    if (nums[i] !== val) {
5
      nums[k] = nums[i]
6
      k++
7
    }
8
  }
9
  return k
10
}

相似题目#

26. 删除有序数组中的重复项 🌟

思路：

双指针
慢指针填充条件：当 nums[fast + 1] !== nums[fast] 时，填充进新数组

1
function removeDuplicates(nums: number[]): number {
2
  let slow = 0
3
  for (let fast = 0; fast < nums.length; fast++) {
4
    if (nums[fast + 1] !== nums[fast]) {
5
      nums[slow] = nums[fast]
6
      slow++
7
    }
8
  }
9
  return slow
10
}

283. 移动零 🌟

思路：

双指针
填充条件：当 nums[fast] !== 0 时，填充进新数组
最后使用 fill 填充数组

1
function moveZeroes(nums: number[]): void {
2
  let slow = 0
3
  for (let fast = 0; fast < nums.length; fast++) {
4
    if (nums[fast] !== 0) {
5
      nums[slow] = nums[fast]
6
      slow++
7
    }
8
  }
9
  nums.fill(0, slow)
10
}

844. 比较含退格的字符串 🌟

思路：

1
function backspaceCompare(s, t) {
2
  const s1 = getResult(s)
3
  const t1 = getResult(t)
4
  return s1 === t1
5
}
6

7
function getResult(s) {
8
  let slow = 0
9
  let count = 0
10
  s = s.split('')
11
  for (let fast = 0; fast < s.length; fast++) {
12
    if (s[fast] !== '#') {
13
      s[slow] = s[fast]
14
      slow++
15
    } else {
16
      if (slow !== 0) {
17
        slow--
18
        s[slow] = ''
19
        count++
20
      }
21
    }
22
  }
23
  s.fill('', s.length - 1 - count)
24
  return s.join('')
25
}

展开收起

977. 有序数组的平方 🌟#

力扣链接 🌟

思路：

双指针

1
function sortedSquares(nums: number[]): number[] {
2
  let i = 0
3
  const length = nums.length
4
  let j = length - 1
5
  let res = new Array(length).fill(0)
6
  let k = length - 1
7

8
  while (i <= j) {
9
    let left = nums[i] * nums[i]
10
    let right = nums[j] * nums[j]
11
    if (left < right) {
12
      res[k] = right
13
      j--
14
    } else {
15
      res[k] = left
16
      i++
17
    }
18
    k--
19
  }
20
  return res
21
}

展开收起

跟着卡哥学算法Day 2：常见中等题目

Wed, 12 Feb 2025 00:00:00 GMT

209. 长度最小的子数组 🌟🌟#

力扣链接

题目描述#

给定一个含有 n 个正整数的数组和一个正整数 s ，找出该数组中满足其和 ≥ s 的长度最小的连续子数组，并返回其长度。如果不存在符合条件的子数组，返回 0。

示例：

输入：s = 7, nums = [2,3,1,2,4,3]
输出：2
解释：子数组 [4,3] 是该条件下的长度最小的子数组。

提示：

1 <= target <= 10^9
1 <= nums.length <= 10^5
1 <= nums[i] <= 10^5

解题思路#

暴力解法#

两层 for 循环
外层循环：sum 清零
内层循环：计算 sum 值，如果大于 s，则停止内存循环，计算 subLength，与前一次比较
时间复杂度 O(n^2)

1
const s = 7
2
const nums = [2, 3, 1, 2, 4, 3]
3
// 暴力 双循环
4
const minSubArrayLen = (nums, s) => {
5
  const length = nums.length
6
  let result = Infinity
7
  let subLength = 0
8
  for (let i = 0; i < length; i++) {
9
    let sum = 0
10
    for (let j = i; j < length; j++) {
11
      sum += nums[j]
12
      if (sum >= s) {
13
        subLength = j - i + 1
14
        result = result < subLength ? result : subLength
15
        break
16
      }
17
    }
18
  }
19

20
  return result === Infinity ? 0 : subLength
21
}
22
minSubArrayLen(nums, s)

展开收起

滑动窗口#

重点：
一个 for 循环实现两个 for 循环的事情
循环索引表示滑动串口的终止位置：如果表示起始位置，终止位置需要遍历右侧区间所有元素，重新计算右侧区间大于等于 s 的下标，相似于两次 for 循环了；而如果为终止位置时，左侧区间使用上次的值，不用重新计算
如何移动起始位置：终止位置随索引向后移动，左侧区间和大于等于 s 时，向后移动起始位置，重新定义区间

判断条件：
```
1
while (sum >= s) {
2
  subLength = j - i + 1
3
  result = result < subLength ? result : subLength
4
  sum -= nums[i]
5
  i++
6
}
```

代码#

1
// 滑动窗口
2
const minSubArrayLen = (sums, s) => {
3
  const length = sums.length
4
  let result = Infinity
5
  let subLength = 0
6
  let i = 0
7
  let sum = 0
8
  for (let j = 0; j < length; j++) {
9
    sum += nums[j]
10
    while (sum >= s) {
11
      subLength = j - i + 1
12
      result = result < subLength ? result : subLength
13
      sum -= nums[i]
14
      i++
15
    }
16
  }
17

18
  return result === Infinity ? 0 : result
19
}
20
minSubArrayLen(nums, s)

展开收起

59.螺旋矩阵 II 🌟🌟#

力扣链接 🌟🌟

题目描述#

给你一个正整数 n ，生成一个包含 1 到 n2 所有元素，且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix 。

示例:

alt text

输入: 3 输出: [ [ 1, 2, 3 ], [ 8, 9, 4 ], [ 7, 6, 5 ] ]

解题思路#

模拟画正方形矩阵

重点

循环不变量：模拟顺时针画矩阵

1
圈数：n / 2
2
起始位置：startX = 0;startY = 0 循环一圈 start++X startY++
3
终止位置：offset = 1 循环一圈 offset++
4
填充数：count = 0；每次count++

左闭右开：四条边都坚持左闭右开的规则，统一

1
for (let j = 0; j < startX - offset; j++)
2
for (let i = 0; i < startY - offset; i++)
3
for (j; j < startX; j--)
4
for (i; i < startY; i--)
5

6
每转一圈 startX++ startY++ offset++

代码#

1
const generateMatrix = (n) => {
2
  let startX = (startY = 0) // 起始位置
3
  let count = 1 // 填充数
4
  let res = new Array(n).fill(0).map(() => new Array(n).fill(0)) // 二维数组
5

6
  let loop = Math.floor(n / 2) // 圈数
7
  let offset = 1 // 控制每层填充数字
8

9
  while (loop--) {
10
    let row = startX
11
    col = startY
12
    // 从左往右
13
    for (; col < n - offset; col++) {
14
      res[row][col] = count++
15
    }
16
    // 从上往下
17
    for (; row < n - offset; row++) {
18
      res[row][col] = count++
19
    }
20
    // 从右往左
21
    for (; col > startX; col--) {
22
      res[row][col] = count++
23
    }
24
    // 从下往上
25
    for (; row > startY; row--) {
26
      res[row][col] = count++
27
    }
28
    // 更新起始位置
29
    startX++
30
    startY++
31
    // 更新边距
32
    offset++
33
  }
34
  // n为基数 特殊处理中间值
35
  if (n % 2 === 1) {
36
    const mid = Math.floor(n / 2)
37
    res[mid][mid] = count++
38
  }
39
  return res
40
}

展开收起

2024年终总结：多事之秋

Wed, 11 Dec 2024 00:00:00 GMT

lets-go

再见了少年，三十而立

为什么不写文章了，原本都是周末和晚上去写，但自从老婆怀孕之后，需要学的东西就变多了，晚上回家吃完饭得陪老婆下楼溜达溜达，回来得刷碗、洗澡，然后准备第二天的饭菜，

一年时间经历了很多人几年的，订婚、结婚、生孩子

骑行视频赚了 20 块钱吧，发现自己并不是那块料，不敢出镜，不敢说话

5 月 1 号回家订婚

我是提前一天过去，把订婚用酒店和家里人住的酒店定了下来，，酒店布置

5 月 20 号领结婚证

7 月 3 号结婚

对，结婚了，

因为是个周三，我想着人可能会少很多，我的发小基本都在市里工作，我的那帮兄弟们基本也都在西安工作，不过很感谢他们，我在群里说，请假都得来，你就说谁来不了，我寻他公司门口堵他，结果都会来，除了一个部队上的，在执行任务，

老婆离职了，该花就花没必要扣扣搜搜，

公司也开始裁员了，看来还是我的性价比太高，之后开始做 flutter 项目，因为公司重点开始转移到 App 上，但 flutter 开发只有两个同事，于是我就被掉了过去。为什么 leader 让我去做 flutter 呢？打第一眼看到他们写的 flutter 代码，这不就是 java、js 和 react 的结合嘛！java 的类和继承，js 语法，react 的组件化和状态管理，刚好我都有接触过，于是就被赶鸭子上架。因为基本都是我们封装好的组件，不用去特别在意 UI 的实现，

国庆还去了秦皇岛，看了北戴河的日出日落，今年唯一的一次旅游，也是老婆孕中期了，可以出去走走了，其他人都说自己的老婆还是自己照顾比较放心，那段时间学会了很多各种菜，早晨起床炒好菜，我带一半去上班，晚上回家给宝宝讲讲故事、背背古诗词，她有时听得高兴了，还会动动小手小腿回应我，

10 月 23 号

重新租了房子，两室一厅，70 多平，才 3700，跟之前 3600 的小开间简直没法比，就是距离远了，每天骑车来回 30 公里。慢慢的发现骑车才是北京的最佳通勤方式，当然，也不闲着，学会了慢上（抬前轮、抬后轮）和双轮跳，他们堵他们的，我直接跳到行人道加速就走了。

12 月 13 号，我的小妙妙出生了，今年最最最开心的一件事，没错，女孩，我哭死出生前我俩没去看四维，所以不知道是男孩女孩。但我的只

我特别容易满足，工作上 leader 说干嘛就干嘛，涨薪 leader 说会给我争取，我说无所谓，现在的工资我已经很满足了，只要能对公司产生价值，自己的付出能被老板看在眼里就 ok。我觉得我来到这家公司已经收获了太多，两个特好的朋友，无话不说的那种，技术的增长，桌面端 Electron、App flutter、Bff 层 node 开发

我妈可太喜欢她了，打第一次见她，就觉得她可乖了，现在来帮我们带娃，我提前跟我妈讲了我们带娃的观念，所以一起待了两个多月了，没有婆媳矛盾

我没有房贷，所以我的工资一家过的很幸福不买房，是在干不下去，被裁了，直接回老家，

uniapp学习笔记

Thu, 01 Aug 2024 00:00:00 GMT

创建项目#

Hbuildx 创建#

命令行创建#

quickstart

创建项目

Terminal window

1
npx degit dcloudio/uni-preset-vue#vite-ts uniapp-vue3-ts

通过 vscode 打开
Terminal window
```
1
pnpm i
2
# 运行微信项目
3
pnpm run dev:mp-weixin
```
完成后，会生成 dist/dev/mp-weixin 目录
微信开发者工具导入项目

VSCode 开发#

插件#

uni-helper
uni-create-view
uniapp 小程序扩展

ts 类型校验#

安装类型声明文件
配置 tsconfig.json

Terminal window

1
pnpm i @types/wechat-miniprogram @uni-helper/uni-app-types -D

1
// tsconfig.json配置
2
{
3
  "extends": "@vue/tsconfig/tsconfig.json",
4
  "compilerOptions": {
5
    "allowJs": true,
6
    "sourceMap": true,
7
    "baseUrl": ".",
8
    "paths": {
9
      "@/*": ["./src/*"]
10
    },
11
    "lib": ["esnext", "dom"],
12
    "types": ["@dcloudio/types", "miniprogram-api-typings", "@uni-helper/uni-app-types"]
13
  },
14
  "vueCompilerOptions": {
15
    // experimentalRuntimeMode 已废弃，现调整为 nativeTags，请升级 Volar 插件至最新版本
16
    "nativeTags": ["block", "component", "template", "slot"]
17
  },
18
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
19
}

展开收起

开发准备#

组件库#

uni-ui

配置 easycom 自动导入#

1
// uni-app 3.0.0+ 版本支持，自动注册组件
2
// 详细配置参考：https://uniapp.dcloud.net.cn/uniCloud/uni-config-center?id=easycom
3
"easycom": {
4
  // 是否开启自动扫描
5
  "autoscan": true,
6
  // 以正则方式完成组件的自动导入
7
  "custom": {
8
    // uni-ui 规则如下配置 uni-badge会自动替换为@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue
9
    "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
10
  }
11
},

uni-ui ts 类型说明#

uni-ui-types

pinia 持久化#

pinia-plugin-persistedstate

1
// 小程序持久化
2
{
3
  persist: {
4
    storage: {
5
      getItem(key) {
6
        return uni.getStorageSync(key)
7
      },
8
      setItem(key, value) {
9
        uni.setStorageSync(key, value)
10
      },
11
    },
12
  },
13
},

storage

请求工具#

uni.request

addinterceptor 配置请求拦截器

1
/**
2
 * 添加请求拦截器
3
 */
4

5
import { useMemberStore } from '@/stores'
6

7
const baseURL = 'https://pcapi-xiaotuxian-front-devtest.itheima.net/'
8

9
// 添加拦截器
10
const httpInterceptor = {
11
  // 拦截前触发
12
  invoke(options: UniApp.RequestOptions) {
13
    // 请求地址拼接
14
    if (!options.url.startsWith('http')) {
15
      options.url = baseURL + options.url
16
    }
17
    // 超时时间
18
    options.timeout = 20000
19
    // 添加小程序请求头
20
    options.header = {
21
      ...options.header,
22
      'source-client': 'miniapp',
23
    }
24
    // 添加token请求头
25
    const memberStore = useMemberStore()
26
    const token = memberStore.profile?.token
27
    if (token) {
28
      options.header.Authorization = token
29
    }
30
  },
31
}
32
uni.addInterceptor('request', httpInterceptor)
33
uni.addInterceptor('uploadFile', httpInterceptor)

展开收起

封装成 promise#

1
type Data<T> = {
2
  code: string
3
  msg: string
4
  data: T
5
}
6
enum StatusCodeEnum {
7
  SUCCESS = 200,
8
  REJECT = 300,
9
  UNAUTHORIZED = 401,
10
  INTERNAL_SERVER_ERROR = 500,
11
}
12
export const http = <T>(options: UniApp.RequestOptions) => {
13
  return new Promise<Data<T>>((resolve, reject) => {
14
    uni.request({
15
      ...options,
16
      success: (res) => {
17
        if (res.statusCode >= StatusCodeEnum.SUCCESS && res.statusCode < StatusCodeEnum.REJECT) {
18
          resolve(res.data as Data<T>)
19
        } else if (res.statusCode === StatusCodeEnum.UNAUTHORIZED) {
20
          // 清空用户信息 跳转登录页
21
          uni.clearStorageSync()
22
          uni.navigateTo({ url: '/pages/login/login' })
23
          reject(res)
24
        } else {
25
          uni.showToast({
26
            title: (res.data as Data<T>).msg || '请求错误',
27
          })
28
          reject(res)
29
        }
30
      },
31
      fail: (err) => {
32
        uni.showToast({
33
          title: '请求错误',
34
        })
35
        reject(err)
36
      },
37
    })
38
  })
39
}

展开收起

首页#

安全区域设置#

1
// 获取屏幕边界到安全区域距离
2
const { safeAreaInsets } = uni.getSystemInfoSync()

设置顶部安全距离

1
<template>
2
  <view class="navbar" :style="{ paddingTop: safeAreaInsets!.top + 10 + 'px' }">
3
</template>

自定义组件自动引入#

同上 easycom 自动导入

1
// 以 Xtx 开头的组件，在 components 文件夹中查找引入（需要重启服务器）
2
"^Xtx(.*)": "@/components/Xtx$1.vue"

修改后需要重启项目生效

添加组件类型声明#

自动导入的组件缺少类型声明，需要 types 下新建 components.d.ts

1
import XtxSwiper from '@/components/XtxSwiper.vue'
2
import XtxGuess from '@/components/XtxGuess.vue'
3

4
declare module 'vue' {
5
  export interface GlobalComponents {
6
    XtxSwiper: typeof XtxSwiper
7
    XtxGuess: typeof XtxGuess
8
  }
9
}
10

11
// 组件实例类型
12
export type XtxGuessInstance = InstanceType<typeof XtxGuess>
13
export type XtxSwiperInstance = InstanceType<typeof XtxSwiper>

这样其他组件引入就不会报错

开发#

自定义 tabBar#

1
{
2
  "path": "pages/index/index",
3
  "style": {
4
    "navigationBarTitleText": "首页",
5
    "navigationStyle": "custom",
6
    "navigationBarTextStyle": "white"
7
  }
8
},

骨架屏#

微信开发者工具 -> 信息 -> 生成骨架屏

skeleton

复制代码到 vue 中稍作修改即可

页面参数#

1
// uniapp 获取页面参数
2
const query = defineProps<{
3
  type: string
4
}>()

获取页面参数，例如路由传参

动态设置标题#

1
// 动态设置标题
2
uni.setNavigationBarTitle({ title: xxx })

添加编译模式#

compile-mode

可以每次打开固定路由

小程序快捷登录#

1
wx.login()

获取微信登录信息

1
<button class="button phone" open-type="getPhoneNumber" @getphonenumber="onGetphonenumber">
2
  <text class="icon icon-phone"></text>
3
  手机号快捷登录
4
</button>
5

6
// 获取用户手机号码
7
const onGetphonenumber: UniHelper.ButtonOnGetphonenumber = async (ev) => {
8
  const { encryptedData, iv } = ev.detail
9
  const res = await postLoginWxMinAPI({ code, encryptedData, iv })
10
  loginSuccess(res.result)
11
}

获取登录用户手机号（个人微信小程序账号无法获取）

页面分包和预加载#

通过分包将不经常使用的页面进行拆分，以提高小程序的启动速度。

点击才开始加载，此时就需要对分包进行预加载

性能优化

Wed, 24 Jul 2024 00:00:00 GMT

编译#

webpack#

前端工程化就是 webpack 吗？

webpack 只是前端工程化中的一个工具。

webpack 自身优化#

webpack 4 升级 webpack 5（非常大的升级）

引入持久化缓存：构建结果持久化缓存到本地

配置未发生改变，整体结构没发生变化时，只是某一个模块的某一部分需要重新编译时，会利用当前的缓存去反向跳过构建部分（比如构建过程经过多个 plugin、比如 js 处理、css 处理、html 处理，只改动 js 时，css、html 对应的插件就可以跳过，直接利用持久化缓存的结果）

利用缓存结果反向跳过构建过程，减少构建时间
资源模块的优化

额外引用 loader
打包优化

跨模块的 tree-shaking
split-chunks

超过固定尺寸拆包

webpack 插件机制#

缓存加速#

不升级 v5 的情况下，如何做缓存加速

cache-loader

代码压缩#

purifycss-plugin: css 未使用的 css 会被提出

vite#

缓存#

预构建存储在 node_modules/.vite 中，删除此文件会重新进行预构建

package.json lockfile vite.config.js 三个文件决定 vite 的缓存，三者之一发生改变时都会强制进行预构建，并且清除当前页面缓存。

部署#

预处理部分优化#

寻址：域名到 IP 的解析（同域名寻址一次）DNS 解析 prefetch 优化
静态资源加载优化：CDN
SSR 服务端渲染

防抖、节流、并发控制

防恶化#

监控、指标等

项目优化#

FP: 用户首屏时间
FMP:
TTL: 可交互时间（一般比 FP 时间长，没关系）
LongTask：超过 50ms 的时间

提升#

script 异步加载：async、defer（vue、react 等都已经做了）
tree-shaking
按需加载：视野内部的先加载

提前的性能优化，代价和收益不一定划算

初中级：高级：技术底蕴好，独挡一面，快速上手，指导初级，接触大部分第三方库，协助 leader 把控项目进度前端专家：偏管理，前端专，非前端也得懂（CICD 等），某个领域有丰富的知识技术负责人：团队 leader（虚线）

工程化#

什么是工程化#

自动化、脚本化方法，结合工具能力，解决纯人工处理的低效、非标准问题，提升整体质量、性能。包括：git、工作流 flow、npm script、package manage、构建工具、组件库、node、babel、lint、mock、cicd、微前端、性能质量等

ast#

AST（Abstract Syntax Tree）抽象语法树，前端基建和工程化基石，会利用一些工具对代码进行转义，比如 babel、eslint、webpack、postcss 等，这些工具都会用到 AST。

babel#

parser 解析：把源码转为 AST(babe/parser)
transform 转换：基于 AST， dbabel/traverse 遍历 AST，最后调用 visitor 修改 AST @babel/types 创建、修改、删除，需要用到 types Gbabe l/temp late 如果需要批量的处理，是需要的
generate 生成新代码：改造后的代码生成目标代码

如何配置#

.babelrc

presets 和 plugins

模块化#

解决问题#

私有、变量不会被外界污染，避免命名冲突、全局污染
模块设计更加清晰：import、export
解决依赖顺序问题

模块化方式#

ES5
ESM

大部分浏览器均支持
CJS

commonJS 规范，无法在浏览器执行

required、module、exports
AMD

CJS 的异步版本
CMD

依赖后置
UMD

通用的规范，兼容 ESM 和 CJS
IIFE

在 Node 中使用 ESM 规范#

后缀改为.mjs
package.json 声明 type: module，不能混用
封装好的第三方工具

浏览器支持 js 形式#

直接加载 js
```
1
<script src="xxx.js" />
```
动态加载
esm

构建公共库考虑构建产物#

支持 ESM：大部分，结合
支持 CJS
支持 UMD 或 IIFE：可以支持 cdn 引入方式 xxx.umd.min.js

monorepo#

代码复用
易于抽象公共方法
协作方便

react 项目#

如何使用 ts 编译器#

tsc 官方编译器，依赖于 tsconfig.js
ts-loader webpack 插件，默认可以使用 tsconfig.js

以上两种不太灵活，使用 babel，打包工具基本都使用 babel 作为构建工具

一般大型项目中，为了保证编译的统一，一般不会用 tsc 作为代码产出，仅仅做类型检查，tsconfig.js 中 noEmit; true，表示不生成代码

用@babel/preset-typescript + tsc 的类型检查

前端 js 方案#

选型#

团队技术力量
和其他应用的关系，代码复用等

flutter项目相关

Mon, 15 Jul 2024 00:00:00 GMT

切换源#

使用国内镜像源

Terminal window

1
# 1. ~/.zshrc 文件下添加以下环境变量
2
# flutter国内镜像站点
3
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
4
export PUB_HOSTED_URL=https://pub.flutter-io.cn
5

6
# 2. 使环境变量生效
7
source ~/.zshrc

fvm 版本管理工具#

fvm 用于切换不同版本的 flutter。

安装#

Terminal window

1
# install
2
brew tap leoafarias/fvm
3
brew install fvm
4

5
# uninstall
6
brew uninstall fvm
7
brew untap leoafarias/fvm

常用命令#

Terminal window展开收起

1
# releases 查看远端最新15个已发布的flutter版本
2
fvm releases | tail -15
3

4

5
# install 安装指定版本的flutter
6
fvm install 3.16.5
7

8
# list 查看本机安装的flutter版本
9
fvm list
10

11
# use 在某个工程中使用指定的flutter版本
12
fvm use 3.16.5
13

14
# remove 删除指定版本的flutter sdk
15
fvm remove 3.16.5
16

17
# global 全局切换flutter版本
18
fvm global 3.16.5

展开收起

全局使用时，需要替换 PATH 变量为 fvm 的路径

flutter-fvm-version

通过 which flutter 打印出的路径是否正确

flutter-fvm-path

工具包#

wechat_kit#

wechat_kit 是一个 Flutter 插件，用于集成微信相关的功能，如微信登录、微信支付、分享、获取用户信息等。这个插件通常用于开发需要与微信进行交互的移动应用。

功能介绍#

wechat_kit 插件提供的主要功能包括：

微信登录：通过微信授权登录，并获取用户的基本信息。
微信支付：集成微信支付功能，支持在应用内发起支付请求。
微信分享：支持将文字、图片、链接等内容分享到微信的朋友圈或聊天中。
获取用户信息：在授权成功后获取微信用户的详细信息。

使用步骤#

依赖安装
Terminal window
```
1
flutter pub add wechat_kit
```

配置

在 pubspec.yaml 文件中添加以下内容：

1
wechat_kit:
2
  #  ios: no_pay # 默认 pay
3
  app_id: ${your wechat app id}
4
  universal_link: https://${your applinks domain}/universal_link/${example_app}/wechat/

使用

1
import 'package:wechat_kit/wechat_kit.dart';
2

3
 // 示例：初始化微信 SDK
4
 Wechat.instance.registerApp(appId: 'your_wechat_app_id');
5

6
 // 示例：发起微信登录
7
 void loginWithWeChat() async {
8
   final result = await Wechat.instance.auth(scope: WechatScope.SNSAPI_USERINFO);
9
   if (result.isSuccessful) {
10
     // 登录成功，处理用户信息
11
   } else {
12
     // 登录失败，处理错误
13
   }
14
 }

注意事项

微信开发者账号：要使用微信的这些功能，必须注册微信开发者账号，并在微信开放平台上创建应用，获取 AppID 和 AppSecret。
平台配置：使用该插件时，还需要进行一些平台相关的配置，如在 iOS 和 Android 项目中配置微信 SDK。
Flutter 插件版本：请注意选择合适的插件版本，版本号应与项目的 Flutter SDK 兼容。

通过 wechat_kit，开发者可以方便地将微信的功能集成到 Flutter 应用中，提升应用的用户体验和功能性。

dependency_overrides#

pubspec.yaml 的配置项，可以用于覆盖依赖项的版本约束，可以解决一下问题：

版本冲突：当依赖项的版本与当前项目版本不兼容时，可以使用 dependency_overrides 强制使用特定的版本来解决问题
使用未发布的版本
临时解决问题：在等待依赖项更新或者官方解决某些问题之前，开发者可能会暂时使用 dependency_overrides 来继续开发。

案例#

假设有一个项目，依赖了两个库 package_a 和 package_b，而这两个库都依赖于 shared_package，但它们依赖的 shared_package 版本不同，从而导致冲突。我们可以使用 dependency_overrides 来解决这个问题。

1
dependencies:
2
  flutter:
3
    sdk: flutter
4
  package_a: ^1.0.0
5
  package_b: ^2.0.0
6

7
dependency_overrides:
8
  shared_package: ^3.0.0

注意事项#

慎重使用：dependency_overrides 会强制所有依赖项使用指定的版本，这可能会引发不兼容的问题。因此，建议仅在确实必要时使用。
尽量简化：如果可能的话，尝试通过调整依赖项的版本来解决冲突，而不是直接使用 dependency_overrides。
测试覆盖：在使用 dependency_overrides 后，务必对项目进行全面的测试，确保所有功能正常运行。

代码部分#

lib 目录#

1
.
2
├── app
3
│   ├── dialog
4
│   ├── im
5
│   ├── im_cache
6
│   ├── net
7
│   ├── service
8
│   └── ui
9
│       ├── automatic_reply
10
│       ├── big_company
11
│       ├── business
12
│       ├── certification_management
13
│       ├── city_site
14
│       ├── club
15
│       ├── common_im
16
│       ├── common_logic
17
│       ├── common_ui
18
│       ├── company
19
│       ├── corpus
20
│       ├── credit_score
21
│       ├── guide
22
│       ├── identification
23
│       ├── im_file_preview
24
│       ├── industry_dinner
25
│       ├── knowledge_gallery
26
│       ├── leave_message
27
│       ├── login
28
│       ├── mail_list
29
│       ├── main
30
│       ├── market_value_lib
31
│       ├── mobile_email_manager
32
│       ├── my_data
33
│       ├── news
34
│       ├── ogp
35
│       ├── order_pay
36
│       ├── org
37
│       ├── perfect_information
38
│       ├── person
39
│       ├── project
40
│       ├── recruit
41
│       ├── report
42
│       ├── roadshow
43
│       ├── role_desc
44
│       ├── school
45
│       ├── search
46
│       ├── share
47
│       ├── splash
48
│       ├── subscription_no
49
│       ├── subscription_number
50
│       ├── user_behavior
51
│       ├── web
52
│       ├── word
53
│       └── route.dart
54
├── link_constants.dart
55
├── common_lib
56
│   ├── ui
57
│   ├── utils
58
│   └── config.dart
59
├── dependencies
60
│   ├── assets_picker
61
│   ├── cache_img
62
│   ├── common_lib
63
│   ├── connect
64
│   ├── device_info
65
│   ├── image_compress
66
│   ├── image_cropper
67
│   ├── jpush
68
│   ├── lbs
69
│   ├── package_info
70
│   ├── path_provider
71
│   ├── permission_handler
72
│   ├── photo_view
73
│   ├── pull_to_refresh
74
│   ├── sentry
75
│   ├── sp
76
│   ├── umeng
77
│   ├── url_launcher
78
│   ├── vibrate
79
│   ├── video_player
80
│   ├── webview
81
│   └── wechat_kit
82
├── generated
83
├── link_method_channel.dart
84
└── main.dart

展开收起

组件库 common-lib#

flutter 提供的组件较为简单，需要自己封装项目组件库使用

WidgetsFlutterBinding.ensureInitialized()#

WidgetsFlutterBinding.ensureInitialized() 方法用于确保 Flutter 框架在执行任何需要依赖 Flutter 框架的操作之前已经初始化好。它在需要进行异步初始化操作或在应用启动早期需要保证 Flutter 框架正确初始化时非常有用。

await SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp, DeviceOrientation.portraitDown])#

指定应用程序的屏幕方向

DeviceOrientation.portraitUp：表示竖屏方向，屏幕上方朝上。
DeviceOrientation.portraitDown：表示竖屏方向，屏幕上方朝下（即设备倒置）。

await Sp().init();#

1
await Sp().init();
2

3
  bool firstIn = Sp.getValue(SpConst.spKeyFirstIn, true);
4
  if (!firstIn) {
5
    SentryUtils.init(appRunner: () => _startApp());
6
  } else {
7
    _startApp();
8
  }

初始化存储：在应用启动时，通常需要初始化本地存储库（如 Shared Preferences），以便后续可以安全地存取数据。
读取配置或状态：获取存储中的值可以用来决定应用的行为。例如，根据 firstIn 的值决定是否显示欢迎页面。

Shared Preferences 是 Flutter 插件，用于简单的持久化和存取应用的本地数据，键值对保存，需要在 pubspec.yaml 文件中添加 shared_preferences 插件的依赖：

1
SentryUtils.init(appRunner: () => _startApp());

用于在 Flutter 应用程序中初始化 Sentry 的代码，将应用启动的逻辑传递给 appRunner，可以确保 Sentry 在应用启动之前完成初始化。这可以确保在应用程序启动过程中发生的任何错误都能被捕获并报告到 Sentry。

init#

bool debug = !kReleaseMode;#

1
Future<void> initXLog() async {
2
  String imId = Sp.getValue(SpConst.spImId, '');
3
  await XLog.init(remoteDir: 'seeapp', fileName: imId, isAutoUpload: true);
4
  XLog.setFetchSignUrl('https://oneapi.qmpoa.com/api/upload/getUploadSign');
5
}
6
Future init() async {
7
  bool debug = !kReleaseMode;
8
  if (!kDebugMode) await initXLog();
9
  ...
10
}

kReleaseMode: 编译时常量，为 true 表示是 Release 版本
initXLog() 初始化日志记录功能

Debug 模式下不需要完全的日志记录，Release 模式下需要日志记录

PaintingBinding.instance.imageCache.maximumSizeBytes = 1000 << 20;#

PaintingBinding 是 Flutter 框架中处理绘制和渲染相关的类。通过 instance 属性访问 PaintingBinding 的单例实例
imageCache 是 PaintingBinding 中的一个属性，用于管理图像缓存。它是 ImageCache 类的实例，负责缓存已经加载的图像以提高性能。
maximumSizeBytes 是 ImageCache 类中的一个属性，用于设置缓存的最大大小（以字节为单位）。当缓存的大小超过这个值时，缓存中的图像将被逐出以释放内存。

作用：增加图像缓存的大小可以提高性能，减少图像重新加载的次数。但这需要平衡内存使用，避免过度使用内存。

WebOffline webOffline = WebOffline();#

1
WebOffline webOffline = WebOffline();
2
webOffline.init();

处理 Web 离线缓存或离线功能

runApp#

RefreshConfiguration#

1
runApp(RefreshConfiguration(
2
    shouldFooterFollowWhenNotFull: (state) => false,

RefreshConfiguration 用于配置下拉刷新和上拉加载更多的行为
shouldFooterFollowWhenNotFull: (state) => false：列表没有填满屏幕时，底部加载更多控件不会跟随列表移动。

OverlaySupport.global(…)#

OverlaySupport 提供全局覆盖功能的组件，通常用于显示全局通知或弹出层
OverlaySupport.global 包装器，允许在应用的根级别显示覆盖层内容

GetMaterialApp(…)#

1
GetMaterialApp(
2
  builder: FlutterSmartDialog.init(builder: (context, widget) {
3
    return MediaQuery(
4
      // 设置文字大小不随系统设置改变
5
      data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
6
      child: widget!,
7
    );
8
  }),
9
  debugShowCheckedModeBanner: false,
10
  defaultTransition: Transition.cupertino,
11
  navigatorObservers: [
12
    CommonNavigatorObserver(),
13
    NavigatorObserversOfCommonState.instance,
14
  ],
15
  ...
16
  onReady: () {
17
    //测试按钮
18
    // if (CommonLibConfig().commonUtilsParams.isDebug && Get.overlayContext != null)
19
    //   CommonDebug().showDebugBtn(Get.overlayContext!);
20
    if (kDebugMode && Get.overlayContext != null) CommonDebug().showDebugBtn(Get.overlayContext!);
21
  },
22
);

展开收起

GetMaterialApp GetX 提供的用于管理路由、状态和其他全局配置的 Material 设计应用程序的根 Widget
FlutterSmartDialog 用于显示对话框的库
defaultTransition: Transition.cupertino：设置全局默认的页面过渡效果为 cupertino，这是 iOS 风格的页面过渡动画
CommonNavigatorObserver 继承自 NavigatorObserver，用于监听导航事件。通过扩展 NavigatorObserver 来实现自定义的导航行为和记录。
NavigatorObserversOfCommonState 是一个单例模式的 NavigatorObserver 实例，用于管理公共状态或全局功能。
onReady 是 GetX 的 GetMaterialApp 中的一个回调函数，用于在应用启动完成后执行初始化操作，如显示调试按钮。
kDebugMode 用于确定是否在调试模式下执行特定操作，这对于在生产环境中禁用调试功能是很有用的。
Overlay 是一个在应用上层显示的层，允许在应用中插入浮动的元素。Get.overlayContext 提供了当前的 Overlay 上下文。

home#

initState#

1
void initState() {
2
    super.initState();
3

4
    CommonOperate.nextFrameRefresh(() async {
5
      try {
6
        /// 判断开屏广告显示
7
        bool isShow = SplashAdLogic.showSplash();
8
        if (isShow) await Future.delayed(Duration(milliseconds: 300));
9
      } catch (e) {}
10

11
      ///判断登录
12
      String uuid = Sp.getValue(SpConst.spKeyLoginUserToken, "");
13
      child = LinkRoute.getRoot(uuid);
14
      setState(() {});
15
    });
16

17
    /// 获取开屏广告图片
18
    SplashAdLogic.getData();
19
  }

展开收起

CommonOperate.nextFrameRefresh 用于在下一帧更新中执行特定的操作
await Future.delayed(Duration(milliseconds: 300))：如果需要显示广告，则等待 300 毫秒。这个延迟可能用于展示广告的时间。
LinkRoute.getRoot(uuid)：根据获取的 uuid 决定跳转到应用的哪个根页面。LinkRoute.getRoot 是一个静态方法，返回根页面的 Widget。

`_buildLaunch`#

1
Widget _buildLaunch() {
2
  return Column(
3
    children: [
4
      const Spacer(),
5
      Padding(
6
        padding: EdgeInsets.only(bottom: 32).safeBottom(),
7
        child: Image.asset('assets/./3.0x/launch_bottom_image.png', width: 252),
8
      ).center(),
9
    ],
10
  );
11
}

_buildLaunch 可以用于创建启动页或引导页。通常，这个页面会在应用启动时显示，并可能包含应用名称、logo 或其他欢迎信息。

vue3 项目使用Echarts使用记录

Wed, 10 Jul 2024 00:00:00 GMT

按需引入 ECharts 图表和组件#

项目中只需要使用 ECharts 中的柱状图、折线图和饼图等基本图表类型，全量引入过大。考虑使用按需引入的方式，仅导入我们用到的图表组件：

添加 echarts 依赖
Terminal window
```
1
npm install echarts --save
```

生成 echarts.js 文件，按需加载的文件

1
import * as echarts from 'echarts/core'
2
import { BarChart, LineChart, PieChart } from 'echarts/charts'
3
import {
4
  TitleComponent,
5
  TooltipComponent,
6
  GridComponent,
7
  // 数据集组件
8
  DatasetComponent,
9
  // 内置数据转换器组件 (filter, sort)
10
  TransformComponent,
11
  // legend图例
12
  LegendComponent,
13
  // 工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
14
  ToolboxComponent,
15
} from 'echarts/components'
16
import { LabelLayout, UniversalTransition } from 'echarts/features'
17
import { CanvasRenderer } from 'echarts/renderers'
18
import type {
19
  // 系列类型的定义后缀都为 SeriesOption
20
  BarSeriesOption,
21
  LineSeriesOption,
22
  PieSeriesOption,
23
} from 'echarts/charts'
24
import type {
25
  // 组件类型的定义后缀都为 ComponentOption
26
  TitleComponentOption,
27
  TooltipComponentOption,
28
  GridComponentOption,
29
  DatasetComponentOption,
30
  LegendComponentOption,
31
  ToolboxComponentOption,
32
} from 'echarts/components'
33
import type { ComposeOption } from 'echarts/core'
34

35
// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
36
export type ECOption = ComposeOption<
37
  | BarSeriesOption
38
  | LineSeriesOption
39
  | PieSeriesOption
40
  | TitleComponentOption
41
  | LegendComponentOption
42
  | ToolboxComponentOption
43
  | TooltipComponentOption
44
  | GridComponentOption
45
  | DatasetComponentOption
46
>
47

48
// 注册必须的组件
49
echarts.use([
50
  TitleComponent,
51
  LegendComponent,
52
  ToolboxComponent,
53
  TooltipComponent,
54
  GridComponent,
55
  DatasetComponent,
56
  TransformComponent,
57
  BarChart,
58
  LineChart,
59
  PieChart,
60
  LabelLayout,
61
  UniversalTransition,
62
  CanvasRenderer,
63
])
64

65
export { echarts }

展开收起

这样在 vue 文件中需要使用 ECharts 时可以直接引入封装好的 echarts.ts ，当增加了新的图表类型（如雷达图、热力图、桑基图等）时直接修改 echarts.ts 文件就可以，提高使用按需引入的便捷性

组件封装#

Hooks#

封装一个统一的 useEChart Hook 函数，主要功能：

统一绘制图表方法
监听 props 变化，重新绘制
监听 resize 变化，执行 resize 事件
修改默认图表颜色，用 Antv G2 的配色方案（没话说，就是好看 😄）
函数接收 customOptions 修改默认配置，这样方便所有图表共同使用

1
import type { ShallowRef } from 'vue'
2
import { onMounted, ref } from 'vue'
3
import { debounce } from 'lodash'
4
import type { EChartsType } from 'echarts/types/dist/core'
5
import { type ECOption, echarts } from '@/utils/echarts'
6
import type {
7
  DataZoomComponentOption,
8
  LegendComponentOption,
9
  LineSeriesOption,
10
  XAXisOption,
11
  YAXisOption,
12
} from 'echarts/types/dist/shared'
13
/** category 默认配色 来源：https://github.com/antvis/G2/blob/v5/src/theme/light.ts */
14
export const CATEGORY_COLORS: string[] = [
15
  '#1783FF',
16
  '#F0884D',
17
  '#D580FF',
18
  '#7863FF',
19
  '#60C42D',
20
  '#BD8F24',
21
  '#FF80CA',
22
  '#2491B3',
23
  '#17C76F',
24
]
25

26
export default function useChart(props, customOptions?: ECOption) {
27
  /** 所有图表的默认配置 */
28
  const DEFAULT_OPTIONS: ECOption = {
29
    series: [
30
      {
31
        name: '数量',
32
        type: 'line',
33
        emphasis: {
34
          focus: 'self',
35
        },
36
        label: {
37
          show: true,
38
          position: 'inside',
39
          color: '#fff',
40
        },
41
        data: props.data,
42
      },
43
    ],
44
    xAxis: [
45
      {
46
        type: 'category',
47
        axisTick: {
48
          show: false,
49
        },
50
        data: props.xAxisData,
51
      },
52
    ],
53
    yAxis: [
54
      {
55
        type: 'value',
56
        minInterval: 1,
57
      },
58
    ],
59
    legend: {
60
      show: true,
61
      type: 'scroll',
62
      orient: 'horizontal',
63
      top: 25,
64
      left: 'center',
65
    },
66
  }
67
  // 要渲染的Dom元素
68
  const chartDom: Ref<HTMLDivElement | null> = ref(null)
69
  // 渲染的chart对象要用shallowRef
70
  const chart: ShallowRef<EChartsType | null | undefined> = shallowRef(null)
71

72
  const getHeight = computed(() => {
73
    return typeof props.height === 'number' ? `${props.height}px` : props.height
74
  })
75

76
  watch(() => props, drawChart, {
77
    deep: true,
78
  })
79

80
  // 绘制
81
  function drawChart() {
82
    const getSingleOption = (type) =>
83
      props[type] ? props[type] : customOptions?.[type] || DEFAULT_OPTIONS[type]
84

85
    const series: LineSeriesOption[] = getSingleOption('series')
86
    const xAxis: XAXisOption[] = getSingleOption('xAxis')
87
    const yAxis: YAXisOption[] = getSingleOption('yAxis')
88
    const legend: LegendComponentOption = getSingleOption('legend')
89
    const dataZoom: DataZoomComponentOption[] = getSingleOption('dataZoom')
90

91
    const options: ECOption = {
92
      // category自定义颜色
93
      // https://echarts.apache.org/zh/option.html#color
94
      color: CATEGORY_COLORS,
95
      backgroundColor: 'transparent',
96
      tooltip: {
97
        trigger: 'axis',
98
        axisPointer: {
99
          type: 'shadow',
100
        },
101
      },
102
      legend,
103
      grid: {
104
        left: 10,
105
        right: 10,
106
        bottom: props.dataZoom ? 40 : 10,
107
        containLabel: true,
108
      },
109
      // 右上角工具栏
110
      toolbox: {
111
        show: false,
112
        feature: {
113
          magicType: {
114
            type: ['line', 'bar'],
115
          },
116
          dataView: {
117
            readOnly: false,
118
          },
119
          saveAsImage: {},
120
        },
121
      },
122
      dataset: {
123
        source: props.datasetSource,
124
      },
125
      xAxis,
126
      yAxis,
127
      dataZoom,
128
      series,
129
    }
130
    // 开启notMerge保证配置数据不会叠加
131
    chart.value?.setOption(options, {
132
      notMerge: true,
133
    })
134
  }
135

136
  // 使用防抖debounce函数，减少resize的次数
137
  const chartResizeHandler = debounce(() => chart.value?.resize(), 100)
138
  onMounted(() => window.addEventListener('resize', chartResizeHandler))
139
  onBeforeUnmount(() =>
140
    window.removeEventListener('resize', chartResizeHandler)
141
  )
142

143
  onMounted(() => {
144
    chart.value = echarts.init(chartDom.value)
145
    drawChart()
146
  })
147

148
  return {
149
    chartDom,
150
    getHeight,
151
  }
152
}

展开收起

组件#

BarChart.vue展开收起

1
<template>
2
  <div ref="chartDom" :style="{ height: getHeight }"></div>
3
</template>
4

5
<script setup lang="ts">
6
import type {
7
  BarSeriesOption,
8
  DataZoomComponentOption,
9
  LegendComponentOption,
10
  XAXisOption,
11
  YAXisOption,
12
} from 'echarts/types/dist/shared'
13
const props = withDefaults(
14
  defineProps<{
15
    /** 数据 */
16
    data?: string | number[]
17
    /** x轴数据 */
18
    xAxisData?: string[]
19
    /** 系列配置 */
20
    series?: BarSeriesOption[]
21
    /** x轴配置 */
22
    xAxis?: XAXisOption[]
23
    /** y轴配置 */
24
    yAxis?: YAXisOption[]
25
    /** 图例配置 */
26
    legend?: LegendComponentOption
27
    /** 区域缩放配置 */
28
    dataZoom?: DataZoomComponentOption[]
29
    /** 图形高度 */
30
    height?: number | string
31
    /** 数据集 */
32
    datasetSource?: any[]
33
  }>(),
34
  {
35
    data: () => [],
36
    xAxisData: () => [],
37
  }
38
)
39
const { getHeight, chartDom } = useEChart(props)
40
</script>

展开收起

PieChart.vue展开收起

1
<template>
2
  <div ref="chartDom" :style="{ height: getHeight }"></div>
3
</template>
4

5
<script setup lang="ts">
6
import type {
7
  DataZoomComponentOption,
8
  LegendComponentOption,
9
  PieSeriesOption,
10
} from 'echarts/types/dist/shared'
11
import type { ECOption } from '@/utils/echarts'
12

13
const DEFAULT_OPTIONS: ECOption = {
14
  tooltip: {
15
    trigger: 'item',
16
  },
17
  legend: {
18
    orient: 'vertical',
19
    left: 'left',
20
  },
21
}
22
const props = withDefaults(
23
  defineProps<{
24
    /** 数据 */
25
    data?: { name: string; value: number }[]
26
    /** 系列配置 */
27
    series?: PieSeriesOption[]
28
    /** 图例配置 */
29
    legend?: LegendComponentOption
30
    /** 区域缩放配置 */
31
    dataZoom?: DataZoomComponentOption[]
32
    /** 图形高度 */
33
    height?: number | string
34
    /** 数据集 */
35
    datasetSource?: any[]
36
  }>(),
37
  {
38
    data: () => [],
39
  }
40
)
41
const { chartDom, getHeight } = useEChart(props, DEFAULT_OPTIONS)
42
</script>

展开收起

扇形图默认的配置与 useEChart hooks 中提供的默认配置不通用，通过传入 DEFAULT_OPTIONS 传入扇形图的默认配置

使用#

1
<pie-chart
2
  :height="400"
3
  :x-axis="[{ type: 'category' }]"
4
  :dataset-source="dataset"
5
  :series="pieSeries"
6
/>
7

8
<line-chart
9
  :height="400"
10
  :x-axis="[{ type: 'category' }]"
11
  :dataset-source="dataset"
12
  :series="lineSeries"
13
/>

图表库选型——G2 vs ECharts 🔥

Mon, 08 Jul 2024 00:00:00 GMT

G2#

G2 作为底层依赖，使用了图形语法，上手成本相对较高，功能强大

G2Plot#

G2Plot 是在 G2 基础上，屏蔽复杂概念的前提下，保留 G2 强大图形能力，通过 Adaptor 将 G2 能力转换成 config 的形势透出，封装出业务上常用的统计图表库，开箱即用、易于配置。

如果是在项目中使用，推荐使用 G2Plot，而不是直接使用 G2。

Ant Design Charts#

Ant Design Charts 基于 G2Plot，弥补 Ant Design 组件库在统计图表上的缺失，作为 Ant Design 的官方图表组件解决方案。G2Plot 的 React 版本，基于 React 封装了 G2Plot，React 项目使用最佳。

网友评论：全是 kpi 项目，不好用 😅

ECharts#

ECharts 简单好用、文档比较丰富，尤其 ECharts 的配置非常清晰，默认颜色虽然丑，但它是可以改颜色的。

对比#

因为是在 Vue 项目中使用，重点对比 G2Plot 和 ECharts。

Github star 数#

G2Plot: 2.5k
ECharts: 59.4k

通过 star 数来看，ECharts 碾压 G2Plot，我们知道 star 数体现了项目的受欢迎程度，通常来说，一个高星数的项目可能在功能、文档、稳定性等方面做得比较好，能够满足较多用户的需求。并且 star 数也体现了社区活跃度，高 star 代表这高的社区活跃度。

单从这方面来看，ECharts 显然是更好的选择。

功能点#

G2Plot 和 ECharts 的图表种类都很丰富，支持多种类型的图表，包括折线图、柱状图、饼图、散点图等，ECharts 还支持地图和 3D 图表。

易用性#

G2Plot 和 ECharts 都提供了大量的图表实例，方便开发者参考和学习，但大多数网友认为 G2 的文档比较乱，没有 ECharts 的清晰。

ECharts 拥有非常详细和灵活的配置项，很方便的对各个方面进行定制，如样式、动画、交互、数据处理等，通过配置和编程实现高度自定义的图表效果。

最终选择 ECharts#

ECharts 支持按需加载

express项目使用mysql2

Sat, 22 Jun 2024 00:00:00 GMT

之前使用#

封装接口调用函数#

之前使用后端提供的接口进行数据库的增删改查：

1
import request from '@lib/request.js'
2

3
/** 查询 */
4
export const selectDB = (body, headers) => {
5
  return request.post(`/db/${body.database}/select`, body, {
6
    headers: { token: headers.token },
7
  })
8
}
9

10
/** 修改 */
11
export const updateDB = (body, headers) => {}
12

13
/** 新增 */
14
export const insertDB = (body, headers) => {}

使用#

1
const _body = {
2
  database: database.qmp_data_sso.name,
3
  table: database.qmp_data_sso.table.qmp_user_info,
4
  column: [],
5
  where: {
6
    wheres: [{ column: 'display_flag', opt: '=', value: '1' }],
7
  },
8
}
9

10
return db.selectDB(_body, headers)

mysql vs mysql2#

mysql 实现 MySQL 协议的纯 Node.js JavaScript 客户端

mysql2 ⚡ 适用于 Node.js 的快速 mysqljs/mysql 兼容 mysql 驱动程序

MySQL2 的历史以及选择原因

mysql2 是 mysql 包的升级版，有更多特性。

express 使用 mysql2 基础配置#

1. 安装依赖#

Terminal window

1
yarn add mysql2

配置数据库连接池#

可以通过 createConnection 在需要操作数据库的时候，建立连接，用完之后释放连接，但这样会浪费性能，因为数据库的连接建立还是很耗时的，而且一个连接也不够用。

这时候就需要连接池来管理数据库连接、提高 mysql 的使用性能并减少资源消耗：连接池会重用以前的连接而不是重新创建连接，保持打开而不是关闭。

mysql-pool

连接池中放着好几个 mysql 的连接对象，用的时候取出来执行 sql，用完之后放回去，不需要断开连接。

创建一个数据库连接池并导出，以便在整个应用程序中共享使用：

1
import {
2
  MYSQL_HOST,
3
  MYSQL_PORT,
4
  MYSQL_USER,
5
  MYSQL_PASSWORD,
6
} from '../../index.js'
7
import mysql from 'mysql2/promise'
8

9
const pool = mysql.createPool({
10
  host: MYSQL_HOST,
11
  port: MYSQL_PORT,
12
  user: MYSQL_USER,
13
  password: MYSQL_PASSWORD,
14
  database: 'passport',
15
  waitForConnections: true, //连接超额是否等待
16
  connectionLimit: 10, //一次创建的最大连接数
17
  queueLimit: 0, //可以等待的连接的个数
18
  maxIdle: 10, // 超过10个空闲会释放
19
  idleTimeout: 60000, // 空闲的连接需要多久断开
20
  enableKeepAlive: true,
21
  keepAliveInitialDelay: 0,
22
})
23

24
export default pool

展开收起

数据库连接相关配置写在 config 中

连接池配置：

connectionLimit：指定连接池中允许的最大连接数，比如 10，也就是同时最多使用 10 个，再多就需要排队
queueLimit：指定当连接池中的连接已满时，请求排队等待的最大数量，设置为 0 时没有上限
waitForConnections：指定是否等待可用连接。如果设置为 true，则在连接不足时请求将被排队，为 false 时直接报错
maxIdle：指定最多有多少个空闲的，超过这个数量的空闲连接会被释放
idleTimeout：空闲的连接需要多久断开
enableKeepAlive、keepAliveInitialDelay：保持心跳用的，默认值即可

3. 使用连接池执行数据库操作#

在模型层（model 层），使用连接池的 getConnection 方法获取连接，执行数据库操作需要释放连接，详见官方文档

1
// 实现一个查询用户数量的接口
2
import pool from '@/config/database.js'
3

4
const UserCountModel = {
5
  async getAllUserCount() {
6
    let connection
7
    try {
8
      connection = await pool.getConnection()
9
      const [rows, filed] = await connection.query(
10
        'SELECT count(*) FROM user_info'
11
      )
12
      return rows
13
    } catch (error) {
14
      throw error
15
    } finally {
16
      if (connection) connection.release() // 释放连接回连接池
17
    }
18
  },
19
}

展开收起

query 返回结果

rows：数组，包含了查询结果的所有行数据。每一行数据通常是一个对象，具体结构取决于查询语句的结果。如果没有匹配的行，则 rows 是一个空数组 []。
fields：数组，包含了查询结果的字段信息。每个字段对象通常包含字段的名称、类型等信息。如果查询结果不包含字段（例如 SELECT COUNT(*)），则 fields 是 undefined。

express-mysql2-count

注意事项

错误处理：务必在适当的地方捕获和处理数据库操作可能出现的错误，例如网络中断、SQL 错误等。
连接释放：使用 connection.release() 方法来释放连接回连接池，以便其他请求可以继续使用。

4. 在 Controller 层调用 Model 层的方法#

1
import UserCountModel from '@/models/userCountModel.js'
2

3
// 获取所有用户数量
4
export const getAllUserCount = async (req, res) => {
5
  try {
6
    const users = await UserCountModel.getAllUserCount()
7
    res.json(users)
8
  } catch (err) {
9
    res.status(500).json({ message: err.message })
10
  }
11
}

5. 通过路由调用 Controller 层#

1
import express from 'express'
2
import { getAllUserCount } from '@/controllers/userCountCountController.js'
3

4
const router = express.Router()
5

6
// GET /count 路由
7
router.get('/count', getAllUserCount)
8

9
export default router

报错集锦#

node_modules/mysql2/node_modules/lru-cache/dist/cjs/index.js:781 this.#dispose?.(oldVal, k, ‘set’);#

太坑了，必须把 mysql2 版本降到 3.0.0，不然报错

解决方法

TypeORM#

使用上述方法可以正常的在 node 中操作数据库，但一般不会这样直接执行 sql，而是会使用 ORM 框架。

ORM 是 Object Relational Mapping（对象关系映射）。就是把 mysql 这种关系型数据库的表映射成面向对象的 Class，表的字段映射成对象的属性映射，表与表的关联映射成属性的关联。

而 TypeORM 就是用于 TypeScript 和 JavaScript 流行的 ORM 框架，兼容多种数据库。

TypeORM 特性

实体 (Entity)：定义数据库表的类。
仓库 (Repository)：用于访问实体的存储库。
迁移 (Migration)：管理数据库迁移。
查询生成器 (Query Builder)：以编程方式构建 SQL 查询。
数据映射和关系：支持一对一、一对多、多对多等关系。

使用步骤#

1. 安装依赖#

Terminal window

1
npm install typeorm reflect-metadata

需要在应用程序的全局位置导入（例如在 app.ts 中）

Terminal window

1
import 'reflect-metadata'

2. TypeORM 配置#

ormconfig.json 是 TypeORM 的配置文件，用于配置数据库连接、实体、迁移等信息。

在项目根目录创建一个 ormconfig.json 文件，配置数据库连接：

1
{
2
  "type": "mysql",
3
  "host": "localhost",
4
  "port": 3306,
5
  "username": "root",
6
  "password": "password",
7
  "database": "test",
8
  "synchronize": true,
9
  "logging": false,
10
  "entities": ["src/entity/**/*.ts"],
11
  "migrations": ["src/migration/**/*.ts"],
12
  "subscribers": ["src/subscriber/**/*.ts"]
13
}

synchronize: 同步建表，也就是当 database 里没有和 Entity 对应的表的时候，会自动生成建表 sql 语句并执行。
logging: 打印生成的 sql 语句
entities: 是指定有哪些和数据库的表对应的 Entity

TypeORM 会自动读取项目根目录中的 ormconfig.json 文件来配置连接和其他设置。在代码中无需显式引用 ormconfig.json，TypeORM 会自动读取和使用该文件的配置。

3. 创建数据库连接模块#

在 src/config 目录中创建一个 datasource.js 文件，用于管理数据库连接：

1
import 'reflect-metadata'
2
import { createConnection } from 'typeorm'
3

4
const connectDatabase = async () => {
5
  try {
6
    await createConnection()
7
    console.log('数据库链接建立成功')
8
  } catch (error) {
9
    console.error('连接数据库失败', error)
10
    throw error
11
  }
12
}
13

14
export default connectDatabase

4. 创建实体 Entity#

实体 (Entity) 是 TypeORM 映射到数据库表的类。每个实体类代表数据库中的一张表，类中的每个属性对应表中的一列。

如我们数据库有一个 user_info 表：

typeorm-user-info

user_info 表具有以下列：

id (主键)
uuid (字符串)
nickname
avatar
desc
phone
created_at (日期时间)
updated_at
deleted_at
display_flag

我们创建一个对应的实体类 src/entity/UserInfo.js

利用Swagger生成express接口文档

Fri, 21 Jun 2024 00:00:00 GMT

Swagger 是一个规范和完整的框架，用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。

主要利用这两个包：

swagger-jsdoc：可以将注释中的 API 文档生成 Swagger 格式的文档
swagger-ui-express：在浏览器中展示接口文档

步骤#

1. 安装 npm 包#

Terminal window

1
npm install swagger-jsdoc swagger-ui-express

2. Swagger 配置#

在项目根目录创建 swagger/swaggerDocs.js 配置文件，用于定义 swagger 配置：

1
import swaggerJsdoc from 'swagger-jsdoc'
2

3
const swaggerOptions = {
4
  definition: {
5
    openapi: '3.0.0',
6
    info: {
7
      title: 'Express API with Swagger', //  title: API 的标题
8
      version: '1.0.0', // version: API 的版本号
9
      description: 'A simple CRUD API application with Express and Swagger', // description: API 的描述信息
10
    },
11
    servers: [
12
      {
13
        url: 'http://localhost:3000',
14
      },
15
    ],
16
  },
17
  apis: ['./routes/**/*.js'], // 使用了 './routes/**/*.js'，这会匹配 routes 文件夹及其所有子文件夹中的所有 .js 文件
18
}
19

20
const swaggerDocs = swaggerJsdoc(swaggerOptions)
21

22
export default swaggerDocs

展开收起

通过这些配置，swagger-jsdoc 将扫描指定的路由文件，解析其中的 Swagger 注释，并生成对应的 Swagger 文档。这些文档可以通过 swagger-ui-express 在浏览器中进行可视化展示。

3. 在 app.js 引入 swagger#

app.js

1
...
2
import swaggerUi from 'swagger-ui-express'
3
import swaggerDocs from './swagger/swaggerConfig'
4

5

6
// 使用 Swagger
7
app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocs));
8
...

此时访问 localhost:3000/api-docs 就可以看到 Swagger 页面（还没有配置，所以接口为空）

express-swagger-blank

4. 在 router 中配置接口文档信息#

在路由文件中添加 Swagger 注释

Swagger 注释是一种在代码中嵌入文档信息的方式，用于描述 API 的各个方面，包括路径、方法、参数、响应等。Swagger 通过解析这些注释来生成 API 文档，因此注释的格式和规则非常重要。下面是 Swagger 注释的一些基本规则和常用标记：

基本规则

1
1. 基本结构：
2
•  Swagger 注释以 @swagger 或 @openapi 开头，后面紧跟着 YAML 或 JSON 格式的文档信息。
3
2. 路径和方法：
4
•  使用 @swagger 标记来描述 API 路径和方法。例如：

1
/**
2
 * @swagger
3
 * /users:
4
 *   get:
5
 *     summary: 获取所有用户
6
 *     description: 返回所有用户列表
7
 */

参数和响应： • 描述请求参数和响应体的结构和类型。可以使用 parameters 和 responses 来定义。

1
/**
2
 * @swagger
3
 * /users:
4
 *   get:
5
 *     summary: 获取所有用户
6
 *     parameters:
7
 *       - name: id
8
 *         in: query
9
 *         required: true
10
 *         type: string
11
 *         description: 用户ID
12
 *     responses:
13
 *       '200':
14
 *         description: 成功获取用户列表
15
 *         schema:
16
 *           type: array
17
 *           items:
18
 *             $ref: '#/definitions/User'
19
 */

展开收起

1
5.  其他常用标记：
2
•  @summary：API 摘要或简要描述。
3
•  @description：详细描述 API 的作用和功能。
4
•  @param：描述函数或方法的参数。
5
•  @returns 或 @return：描述函数或方法的返回值。
6
•  @deprecated：标记 API 已弃用。

使用nest搭建BFF项目

Fri, 21 Jun 2024 00:00:00 GMT

由于之前在 express 项目中直接使用的 mysql2 操作数据库，TypeORM 在 express 中不好添加，所以该用 nest 来实现。

nest 搭建 bff 过程#

1. 全局安装 nestjs/cli#

Terminal window

1
npm install -g @nestjs/cli

2. 创建 nestjs 项目#

Terminal window

1
nest new bff-project

通过 pnpm start 启动项目，此时在浏览器中直接输入 http://localhost:3000/ 会出现 Hello world

修改 nest-cli.json，添加 generateOptions，设置 spec 为 false，这样生成代码的时候不会生成测试代码，和 nest g xxx —no-spec 效果一样

1
{
2
  "$schema": "https://json.schemastore.org/nest-cli",
3
  "collection": "@nestjs/schematics",
4
  "generateOptions": {
5
    "spec": false
6
  },
7
  "sourceRoot": "src",
8
  "compilerOptions": {
9
    "deleteOutDir": true
10
  }
11
}

3. 安装 TypeORM 相关包#

Terminal window

1
pnpm install --save @nestjs/typeorm typeorm mysql2

在 AppModule 引入 TypeOrmModule：

1
import { Module } from '@nestjs/common'
2
import { TypeOrmModule } from '@nestjs/typeorm'
3
import { AppController } from './app.controller'
4
import { AppService } from './app.service'
5
import { UserCountModule } from './user-count/user-count.module'
6

7
@Module({
8
  imports: [
9
    TypeOrmModule.forRoot({
10
      type: 'mysql',
11
      host: '114.116.234.221',
12
      port: 3309,
13
      username: 'test_server_see',
14
      password: 'xxx',
15
      database: 'passport',
16
      synchronize: true,
17
      logging: true,
18
      entities: [],
19
      poolSize: 10,
20
      connectorPackage: 'mysql2',
21
      extra: {
22
        authPlugin: 'sha256_password',
23
      },
24
    }),
25
    UserCountModule,
26
  ],
27
  controllers: [AppController],
28
  providers: [AppService],
29
})
30
export class AppModule {}

展开收起

4. 创建数据库表的 entity#

使用命令生成 userCount 模块：

Terminal window

1
nest g resource userCount

nest-generate-userCount

可以看到此时生成的文件是没有 spec 相关的测试文件

创建 entities 目录，新建 user-auth.entity.ts 文件。

1
import {
2
  Entity,
3
  Column,
4
  PrimaryGeneratedColumn,
5
  CreateDateColumn,
6
  UpdateDateColumn,
7
} from 'typeorm'
8

9
@Entity('user_auth')
10
export class UserAuth {
11
  @PrimaryGeneratedColumn()
12
  id: number
13

14
  @Column({ type: 'varchar', length: 50 })
15
  src: string
16

17
  @Column({ type: 'varchar', length: 128 })
18
  uuid: string
19

20
  @CreateDateColumn({ type: 'datetime', name: 'created_at' })
21
  createdAt: Date
22

23
  @UpdateDateColumn({ type: 'datetime', name: 'updated_at', nullable: true })
24
  updatedAt: Date
25

26
  @Column({ type: 'datetime', name: 'deleted_at', nullable: true })
27
  deletedAt: Date
28

29
  @Column({ type: 'tinyint', width: 4, name: 'display_flag' })
30
  displayFlag: number
31

32
  @Column({ type: 'varchar', length: 500, name: 'src_uuid' })
33
  srcUuid: string
34
}

展开收起

在 AppModule 中导入并注册 UserAuth 实体类

app.module.ts展开收起

1
....import { UserAuth } from './user-count/entities/user-auth.entity';
2

3
@Module({
4
   imports: [
5
     TypeOrmModule.forRoot({
6
       type: 'mysql',
7
       host: '114.116.234.221',
8
       port: 3309,
9
       username: 'test_server_see',
10
       password: 'qmp20240126#dshk',
11
       database: 'passport',
12
       synchronize: false,
13
       logging: true,
14
       entities: [UserAuth],
15
       poolSize: 10,
16
       connectorPackage: 'mysql2',
17
       extra: {
18
         authPlugin: 'sha256_password',
19
       },
20
     }),
21
     UserCountModule,
22
   ],
23
   controllers: [AppController],
24
   providers: [AppService],
25
 })
26
 export class AppModule {}

展开收起

需要将 synchronize: false, 因为在库中已经有此表了，设置为 true 时会创建表

5. 使用实体类#

在 service 层(user-count.service.ts)中使用 UserAuth 实体类来执行数据库操作

vue3项目配置按需自动导入API、组件库、图标

Thu, 20 Jun 2024 00:00:00 GMT

自动导入 API unplugin-auto-import#

unplugin

按需自动导入 API，支持 Vue、react 等流行框架

使用步骤#

1. 安装依赖#

Terminal window

1
npm i -D unplugin-auto-import

2. 配置#

可以在 Vite、Webpack、Rspack、Rollup 和 esbuild 中进行配置

vite.config.ts展开收起

1
import AutoImport from 'unplugin-auto-import/vite'
2

3
export default defineConfig({
4
  plugins: [
5
    AutoImport({
6
      // 自动导入 Vue 3 相关函数，比如：ref, reactive, toRefs 等
7
      imports: ['vue', 'vue-router'],
8
      // 自动导入目录
9
      dirs: ['./src/hooks', './src/store'],
10
      // 生成 `auto-imports.d.ts` 声明文件
11
      dts: 'src/auto-imports.d.ts',
12
      // 使用 ESLint 插件的设置
13
      eslintrc: {
14
        enabled: true, // 默认是 false
15
        filepath: './.eslintrc-auto-import.json', // 默认是 './.eslintrc-auto-import.json'
16
        globalsPropValue: true, // 默认是 true
17
      },
18
    }),
19
  ],
20
})

展开收起

import#

指定需要自动导入的库或框架，比如 Vue 和 Vue Router，这样就能自动导入 Vue 的 ref、reactive 等函数，不必在使用时再引入

1
// 未使用前
2
import { computed, ref } from 'vue'
3

4
const count = ref(0)
5
const doubled = computed(() => count.value * 2)
6

7
// 使用插件后
8
const count = ref(0)
9
const doubled = computed(() => count.value * 2)

import 导入分为三类：

基本导入

类似上述的基本导入，比如：vue、vue-router 等，直接使用全量 API

自定义导入

1
{
2
   'vue': [
3
     'createVNode',
4
     'render'
5
   ],
6
   'vue-router': [
7
     'createRouter',
8
     'createWebHistory',
9
     'createWebHashHistory',
10
     'useRouter',
11
     'useRoute'
12
   ],
13
   'uuid': [
14
     ['v4', 'uuidv4']
15
   ],
16
   // 全局使用 _.xxxx()
17
   'lodash-es': [
18
     // default imports
19
     ['*', '_'] // import { * as _ } from 'lodash-es',
20
   ]
21
 },

展开收起

['v4', 'uuidv4']：将 uuid 库中的 v4 函数导入为 uuidv4，相当于import { v4 as uuidv4 } from 'uuid'
['*', '_']: 将 lodash-es 库中的所有导出绑定到 _ 对象上，这相当于 import { \* as _ } from 'lodash-es'

类型导入

1
{
2
  from: 'vue',
3
  imports: [
4
    'App',
5
    'VNode',
6
    'ComponentPublicInstance',
7
    'ComponentPublicInstanceCostom',
8
    'ComponentInternalInstance'
9
  ],
10
  type: true
11
},
12
{
13
  from: 'vue-router',
14
  imports: [
15
    'RouteRecordRaw',
16
    'RouteLocationRaw',
17
    'LocationQuery',
18
    'RouteParams',
19
    'RouteLocationNormalizedLoaded',
20
    'RouteRecordName',
21
    'NavigationGuard'
22
  ],
23
  type: true
24
}

展开收起

这部分配置用于自动导入类型声明，使 TypeScript 能够识别这些类型，从而提供更好的类型检查和自动完成功能。

dirs#

指定需要自动导入的目录，比如自定义的 hooks 和 store。通过指定这些目录，unplugin-auto-import 插件会自动扫描这些目录下的文件，并自动导入其中导出的内容。

src/hooks/useExample.ts

1
export function useExample() {}

在可以直接使用 useExample 函数，无需手动导入。插件会自动将这些函数导入到你的组件中。

dts#

指定生成的 TypeScript 类型声明文件的位置

自动生成的 TypeScript 声明文件

当你运行项目时，unplugin-auto-import 会在 src 目录下生成一个 auto-imports.d.ts 文件，声明自动导入的类型。

eslintrc#

生成 ESLint 配置文件，避免未使用导入报错

为了确保 ESLint 不会因为自动导入的变量未定义而报错，你需要在 ESLint 配置中引入自动生成的 .eslintrc-auto-import.json 文件：

include#

include 是一个配置选项，用于指定哪些文件或文件夹应当包含在自动导入扫描范围内。

1
AutoImport({
2
  include: [
3
    './src/**/*.js', // 包含 src 目录下的所有 .js 文件
4
    './components/**/*.vue', // 包含 components 目录下的所有 .vue 文件
5
    /\.[tj]sx?$/, // 包含所有 .ts, .tsx, .js, .jsx 文件
6
    /\.vue\??/ // 所有vue文件
7
  ],
8
  ...
9
})

vueTemplate#

vueTemplate 选项是一个布尔值，用于指定是否在 Vue 组件的 <template> 部分启用自动导入功能。

resolvers#

自动导入组件库#

搭配 unplugin-vue-components 实现 element-plus 等组件库的自动导入。

1
import { defineConfig } from 'vite'
2
import vue from '@vitejs/plugin-vue'
3
import AutoImport from 'unplugin-auto-import/vite'
4
import Components from 'unplugin-vue-components/vite'
5
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
6

7
export default defineConfig({
8
  plugins: [
9
    vue(),
10
    AutoImport({
11
      imports: ['vue', 'vue-router', '@vueuse/core'],
12
      resolvers: [ElementPlusResolver()],
13
      vueTemplate: true,
14
    }),
15
    Components({
16
      directoryAsNamespace: true,  // 使用目录作为命名空间
17
      collapseSamePrefixes: true  // 折叠相同前缀的组件名
18
      resolvers: [ElementPlusResolver()],
19
    }),
20
  ],
21
})

展开收起

Components 插件: 自动注册组件，使用 ElementPlusResolver 来自动导入和注册 Element Plus 组件。

directoryAsNamespace

这个选项用于将目录名作为命名空间前缀。这样可以避免组件名冲突，并且在项目结构复杂时，更容易理解组件的来源。
Terminal window
```
1
src/
2
components/
3
  common/
4
    Button.vue
5
  admin/
6
    Button.vue
```
启用 directoryAsNamespace: true 后，自动导入的组件名将会包含目录名，变为 CommonButton 和 AdminButton。
collapseSamePrefixes

这个选项用于折叠具有相同前缀的组件名。这样可以避免在目录结构中重复前缀的麻烦。

以上两种自动导入配置完成后，在启动项目时会生成以下三个文件：

unplugin-auto-import

.eslintrc-auto-import.json

这个文件包含了自动导入的配置，主要用于 ESLint。它帮助 ESLint 识别哪些 API 是自动导入的，从而避免标记为未定义的错误。
```
1
{
2
  "globals": {
3
    "ref": "readonly",
4
    "reactive": "readonly",
5
    "computed": "readonly",
6
    "defineComponent": "readonly"
7
  }
8
}
```

auto-imports.d.ts

这个文件是 TypeScript 的声明文件，包含了自动导入的 API 的类型声明。它帮助 TypeScript 识别这些自动导入的 API，从而提供正确的类型检查和代码补全。

1
// Generated by 'unplugin-auto-import'
2
declare global {
3
  const ref: typeof import('vue')['ref']
4
  const reactive: typeof import('vue')['reactive']
5
  const computed: typeof import('vue')['computed']
6
  const defineComponent: typeof import('vue')['defineComponent']
7
  // more auto-imports...
8
}

components.d.ts

这个文件也是 TypeScript 的声明文件，包含了自动导入的 Vue 组件的类型声明。它帮助 TypeScript 识别这些自动导入的组件，从而提供正确的类型检查和代码补全。

1
// Generated by 'unplugin-vue-components'
2
declare module 'vue' {
3
  export interface GlobalComponents {
4
    ElButton: typeof import('element-plus/es')['ElButton']
5
    ElInput: typeof import('element-plus/es')['ElInput']
6
    // more components...
7
  }
8
}

通过这三个文件更好地管理和使用自动导入的 API 和组件。这些文件提供了类型声明和 ESLint 配置，从而改善开发体验。

自动导入 Icon 图标#

iconify 插件#

Iconify 是一个开源的图标集和图标管理工具。它提供了一个庞大的图标库，包含数千个常用图标，涵盖了各种主题和风格，如 Material Design、Font Awesome、Feather 等。这些图标可以以矢量格式（SVG）使用，适用于各种项目，如网站、移动应用、桌面应用等。

Iconify for Vue 官方文档

Iconify 内的 element-plus 图标

unplugin-icons

安装依赖#

Terminal window

1
npm install --save-dev @iconify/vue

配置#

vite.config.js展开收起

1
import UnpluginIcons from 'unplugin-icons/vite'
2
import IconsResolver from 'unplugin-icons/resolver'
3
...
4

5
export default defineConfig(({ mode }) => {
6
  return {
7
    ...
8
    plugins: [
9
      Components({
10
        directoryAsNamespace: true,
11
        collapseSamePrefixes: true,
12
        resolvers: [
13
          IconsResolver({
14
            prefix: 'AutoIcon'
15
          }),
16
          ElementPlusResolver({
17
            importStyle: 'sass'
18
          })
19
        ]
20
      }),
21
      // Auto use Iconify icon
22
      UnpluginIcons({
23
        autoInstall: true,
24
        compiler: 'vue3',
25
        scale: 1.2,
26
        defaultStyle: '',
27
        defaultClass: 'unplugin-icon'
28
      })
29
    ],
30
  }
31
})

展开收起

在 vue 页面中引入组件

1
import { Icon } from '@iconify/vue'
2
;<Icon icon="mdi-light:home" />

通过 UnoCSS 可以像 css 那样使用图标

Vue3！Element Plus 如何像 Element UI 一样使用 Icon? Icons preset

使用plop快速创建express mvc模板代码

Wed, 19 Jun 2024 00:00:00 GMT

我们可以设置 Plop 来生成 /routes/xx, /controllers/xx, 和 /models/xx 文件，提供工作效率。

1. 安装 plop#

Terminal window

1
npm install --save-dev plop

2. 创建 Plop 配置文件#

在项目根目录下创建一个 plopfile.js 文件：

为了在 Plop 生成文件时将文件名或类名的首字母大写，我们可以使用 Handlebars 的自定义 helper 函数来处理模板中的名称。

在模板文件中，也可以使用这个自定义 helper 来生成类名或函数名的首字母大写。

1
module.exports = function (plop) {
2
  // 添加首字母大写的自定义 helper 可以对传入参数进行处理 用法{{ capitalize name }}
3
  plop.setHelper(
4
    'capitalize',
5
    (text) => text.charAt(0).toUpperCase() + text.slice(1)
6
  )
7
  // mvc generator
8
  plop.setGenerator('mvc', {
9
    description: 'Create a mvc template',
10
    prompts: [
11
      {
12
        type: 'input',
13
        name: 'name',
14
        message: '模块名称:',
15
      },
16
      {
17
        type: 'input',
18
        name: 'route',
19
        message: '路由前缀:',
20
      },
21
    ],
22
    actions: [
23
      {
24
        type: 'add',
25
        path: 'src/routes/{{name}}/index.js',
26
        templateFile: 'plop-templates/router.hbs',
27
      },
28
      {
29
        type: 'add',
30
        path: 'src/controllers/{{name}}Controller.js',
31
        templateFile: 'plop-templates/controller.hbs',
32
      },
33
      {
34
        type: 'add',
35
        path: 'src/models/{{name}}Model.js',
36
        templateFile: 'plop-templates/model.hbs',
37
      },
38
      // pattern正则表达式 用它来匹配目标文件追加的位置
39
      // template后面需添加$1，$1是pattern正则括号内匹配到的字符串，当发生替换时，占位符会连同模板文本一起替换掉目标文件中的占位符，所以这个占位符会一直存在于目标文件中，方便后续的追加
40
      {
41
        type: 'modify',
42
        path: 'src/routes/index.js',
43
        pattern: /(\/\/ 路由引入 不要删除此行注释)/gi,
44
        template: "import {{name}} from './{{name}}'\r$1",
45
      },
46
      {
47
        type: 'modify',
48
        path: 'src/routes/index.js',
49
        pattern: /(\/\/ 注册路由 不要删除此行注释)/gi,
50
        template: "router.use('/{{route}}', authMiddleware, {{name}})\r$1",
51
      },
52
    ],
53
  })
54
}

展开收起

3. 创建模板文件#

在项目根目录下创建一个 plop-templates 文件夹，并在其中创建三个模板文件：

plop-templates/controller.hbs

1
import {{capitalize name}}Model from '@/models/{{name}}Model.js'
2

3
// test
4
export const test = async (req, res) => {
5
  try {
6
    const result = await {{capitalize name}}Model.test()
7
    res.json(result)
8
  } catch (err) {
9
    res.status(500).json({ message: err.message })
10
  }
11
}

plop-templates/router.hbs

1
import express from 'express'
2
import * as {{capitalize name}}Controller from '@/controllers/{{name}}Controller.js'
3

4
const router = express.Router()
5

6
//  {{name}}路由
7
router.get('/', {{capitalize name}}Controller.test)
8

9
export default router

plop-templates/model.hbs

1
import pool from '@/config/database.js'
2

3
const {{capitalize name}}Model = {
4
  async test(type = '', client = '') {
5
    let connection
6
    try {
7
      connection = await pool.getConnection()
8
      let sql = 'SELECT COUNT(*) AS count FROM user_count'
9
      const [rows] = await connection.execute(sql, params)
10
      return rows
11
    } catch (error) {
12
      throw error
13
    } finally {
14
      if (connection) connection.release()
15
    }
16
  },
17
}
18

19
export default {{capitalize name}}Model

展开收起

4. 配置 package.json#

1
{
2
  ...
3
  "scripts": {
4
    ...
5
    "mvc": "plop mvc",
6
  },
7
  ...
8
}

执行 yarn mvc

Terminal window

1
yarn mvc
2
$ plop mvc
3
? 模块名称: oneIdManage
4
? 路由前缀: oneId
5
✔  ++ /src/routes/oneIdManage/index.js
6
✔  ++ /src/controllers/oneIdManageController.js
7
✔  ++ /src/models/oneIdManageModel.js
8
✔  +- /src/routes/index.js
9
✔  +- /src/routes/index.js
10
✨  Done in 6.22s.

前后端项目部署指南

Tue, 18 Jun 2024 00:00:00 GMT

1. 项目中#

https://git.qmpoa.com/ops/qmp_ops_dnmp/-/commits/master /services/nginx/conf.d 添加前端 nginx 域名和 bff nginx 接口 /services/nginx/prodconf.d 添加前端 nginx 域名和 bff nginx 接口

2. 服务器/hwdata/service/dnmp/nginx 路径拉下最新代码，保证 conf.d 中有刚刚添加的 conf 配置#

Terminal window

1
git pull origin master

3. 重启 nginx docker 部署的#

Terminal window

1
#  校验语法是否正确
2
sudo docker exec nginx122_c nginx -t
3
docker exec nginx122_c nginx -s reload

4. bff 通过 CI 部署#

gitlab-runner 配置

Terminal window

1
gitlab-runner register --url https://git.qmpoa.com/ --registration-token 令牌 --executor docker --docker-volumes /var/run/docker.sock:/var/run/docker.sock --docker-privileged

Terminal window

1
# runner重启
2
gitlab-runner restart
3
gitlab-runner status
4
# 配置修改
5
vim /etc/gitlab-runner/config.toml

保证https://git.qmpoa.com/fe/oneid_admin_bff/-/settings/ci_cd可用runners

bff-runners-status

项目对应 gitlab-ci#

1
variables:
2
  VERSION: 'oneid_admin_bff'
3
  OLDVERSION: 'oneid_admin_bff-temporary'
4
  VERSION_PROD: 'oneid_admin_bff'
5
  OLDVERSION_PROD: 'oneid_admin_bff-temporary'
6

7
stages:
8
  - deploy
9

10
# image: node:16.19-slim
11

12
cache:
13
  paths:
14
    - node_modules/
15
    - logs/
16

17
build_image.oneid_admin_bff:
18
  image: docker:dind
19
  stage: deploy
20
  only:
21
    refs:
22
      - test
23
    # changes:
24
    #   - .gitlab-ci.yml
25
  tags:
26
    - test
27
  script:
28
    - echo "=====start deploy======"
29
    # 重命名镜像
30
    - >
31
      if [ $(docker image ls -aq --filter reference=$VERSION) ]; then
32
        echo "=====inline======"
33
        docker tag $VERSION $OLDVERSION
34
        docker rmi $VERSION
35
      fi
36
    # 通过Dockerfile生成镜像
37
    - docker build -t $VERSION .
38
    # 删除已经在运行的容器，优雅停止
39
    - >
40
      if [ $(docker ps -aq --filter name=oneid_admin_bff) ]; then
41
        docker container stop oneid_admin_bff
42
        docker rm oneid_admin_bff
43
      fi
44
    # 通过镜像启动容器
45
    - docker run -d -p 8528:8528 -e TZ=Asia/Shanghai -v /hwdata/www/oneid_admin_bff/docker-host.json:/usr/src/docker-host.json --restart=always --name oneid_admin_bff $VERSION
46

47
    # 删除老镜像
48
    - if [ $(docker image ls -aq --filter reference=$OLDVERSION) ]; then docker image rmi $OLDVERSION;fi
49

50
    - echo "=====end deploy======"
51
  # services:
52
  #   - docker:dind
53

54
build_image.oneid_admin_bff-prod:
55
  image: docker:dind
56
  stage: deploy
57
  only:
58
    refs:
59
      #- merge_requests
60
      - master
61
    # changes:
62
    #   - .gitlab-ci.yml
63
  tags:
64
    - prod
65
  script:
66
    - echo "=====start deploy======"
67
    # 重命名镜像
68
    - >
69
      if [ $(docker image ls -aq --filter reference=$VERSION_PROD) ]; then
70
        docker tag $VERSION_PROD $OLDVERSION_PROD
71
        docker rmi $VERSION_PROD
72
      fi
73
    # 通过Dockerfile生成qmp_mobile_ddm镜像
74
    - docker build -t $VERSION_PROD .
75
    # 删除已经在运行的容器，优雅停止
76
    - >
77
      if [ $(docker ps -aq --filter name=oneid_admin_bff) ]; then
78
        docker container stop oneid_admin_bff
79
        docker rm oneid_admin_bff
80
      fi
81
    # 通过镜像启动容器
82
    - docker run -d -p 8528:8528 -e TZ=Asia/Shanghai -v /hwdata/www/oneid_admin_bff/docker-host.json:/usr/src/docker-host.json --restart=always --name oneid_admin_bff $VERSION_PROD
83

84
    # 删除老镜像
85
    - if [ $(docker image ls -aq --filter reference=$OLDVERSION_PROD) ]; then docker image rmi $OLDVERSION_PROD;fi
86
    - echo "=====end deploy======"
87
  # services:
88
  # - docker:dind

展开收起

修改配置好的 runner#

tags 对应 .gitlab-ci.yml 的 tags

bff-runner-edit

部署#

测试提交到 test、正式提交到 mater

5. 前端通过 jenkins 部署#

创建 item#

复制之前的项目，修改远程目录的路径即可

jenkins-admin

unocss使用记录

Mon, 03 Jun 2024 00:00:00 GMT

Unocss 是一个基于 Tailwind CSS 的工具，它通过静态分析 HTML 和 CSS 代码，自动消除未使用的样式，以减小生成的 CSS 文件大小。

Unocss 中文网

基础安装#

安装 UnoCSS

首先，我们需要安装 UnoCSS：
Terminal window
```
1
npm install unocss
```

配置 UnoCSS

接下来，我们需要配置 UnoCSS。在项目根目录下创建 uno.config.js 文件，并进行如下配置：

uno.config.js展开收起

1
import { defineConfig } from 'unocss'
2

3
export default defineConfig({
4
  // 在这里可以配置 UnoCSS 规则
5
  shortcuts: {
6
    // shortcuts to multiple utilities
7
    btn: 'py-2 px-4 font-semibold rounded-lg shadow-md',
8
    'btn-green': 'text-white bg-green-500 hover:bg-green-700',
9
    // single utility alias
10
    red: 'text-red-100',
11
  },
12
  rules: [
13
    ['bg-main', { background: '#409eff' }],
14
    ['text-white', { color: '#fff' }],
15
    [
16
      'flex-between',
17
      {
18
        display: 'flex',
19
        'justify-content': 'space-between',
20
        'align-items': 'center',
21
      },
22
    ],
23
    // 可以添加更多自定义规则
24
  ],
25
})

展开收起

在 Vite 项目中集成 UnoCSS

在 vite.config.js 中引入 UnoCSS 插件

vite.config.js

1
import { defineConfig } from 'vite'
2
import UnoCSS from 'unocss/vite'
3

4
export default defineConfig({
5
  plugins: [UnoCSS()...],
6
  ...
7
})

main.js 中引入 UnoCSS：
```
1
import 'virtual:uno.css'
```
使用 UnoCSS 编写样式

UnoCss 提供了很多样式规则，我们又没办法都记住，作者很友好的提供了一个样式规则互动工具（unocss.dev/interactive），支持通过类名和样式查找。

选择 UnoCSS 原因#

按需生成样式: UnoCSS 使用静态分析技术，只生成使用到的 CSS 样式。这意味着您无需手动管理和维护大量的样式文件，而只需编写实际需要的样式代码。这简化了样式管理，减少了样式冗余，并提高了开发效率。
零运行时: UnoCSS 是在构建阶段处理的工具，不需要 JavaScript 运行时。这意味着生成的 CSS 不会增加额外的客户端计算负担，从而提高页面加载速度并改善用户体验。
易于集成：UnoCSS 可以与现有的构建工具（如 webpack、Vite 等）和前端框架（如 Vue、React 等）无缝集成。它提供了插件和配置选项，使您可以轻松地与您的项目集成，并根据您的需求进行自定义。
高性能和快速: UnoCSS 只生成使用到的样式，大大减少了 CSS 文件的大小，从而加快了页面加载速度。它还对样式表进行了优化，使其更紧凑和高效。
开发者友好: UnoCSS 提供了简洁的 API 和一致的类名命名规则，使得样式编写更加直观和易于理解。它还提供了实时预览和自动补全等功能，提升了开发效率。

练习Mysql

Fri, 17 May 2024 00:00:00 GMT

安装#

通过 Docker 安装 mysql 镜像，完成后 run

mysql-docker-run

MYSQL_ROOT_PASSWORD 参数是个必填项，用于指定 mysql 的密码，不填写启动会报错

连接工具#

可以使用官方提供的免费版 MySQL Workbench，也可以找到破解版的 Navicat

连接数据库：

mysql-navicate-start

点击此按钮创建一个 schema，也就是一个数据库

mysql-create-schema

mysql 中对应的关系如下：

一个连接 connection 可以创建多个数据库 schema，一个 schema 可以创建多个表 table

创建 schema 完成后，右键点击对应的 表 创建一个表

mysql-create-table

转成 sql 语句是这样：

1
INSERT INTO `users`.`user` (`name`, `password`, `create_time`, `update_time`) VALUES ('li', '456789', '2024-05-16 17:58:24', '2024-05-24 17:58:28')

接着查询所有数据，通过

1
SELECT * FROM `user`

mysql-all-data

还有修改和删除

1
UPDATE `hello-mysql`.`student` SET `email` = 'xxx@qq.com' WHERE (`id` = '10');

用到的 SQL#

查询今天新增的用户#

1
SELECT count(*) FROM user_info WHERE DATE(created_at) = '2024-06-14'

使用 DATE() 函数来提取日期部分，并与今天的日期进行比较

查询今日活跃的用户#

1
SELECT COUNT(DISTINCT uuid) AS count_distinct_uuid_today
2
FROM token_auth_log
3
WHERE DATE(created_at) = CURDATE();

WHERE DATE(created_at) = CURDATE() 确保只选择 created_at 等于今天的记录
COUNT(DISTINCT uuid)：COUNT(DISTINCT uuid) 计算满足条件的唯一 uuid 的数量。DISTINCT 关键字确保每个 uuid 只计算一次，避免重复计数。

查询 user_auth 中根据 src 分类的数据#

1
SELECT src, COUNT(*) AS count
2
FROM user_auth
3
GROUP BY src;

选择 src 列和计算计数： SELECT src, COUNT() AS count 选择 src 列并计算每个 src 的记录数。 COUNT() 函数用于计算每个组中的记录数。
按 src 进行分组： GROUP BY src 将查询结果按 src 列进行分组。

查询近 30 天用户数#

1
SELECT DATE(created_at) AS date,
2
       COUNT(*) AS user_count
3
FROM user_auth
4
WHERE created_at >= CURDATE() - INTERVAL 29 DAY
5
GROUP BY DATE(created_at)
6
ORDER BY DATE(created_at);

SELECT DATE(created_at) AS date: 选择 created_at 字段的日期部分，并将其命名为 date。
COUNT(*) AS user_count: 统计每天的用户数量，并将其命名为 user_count。
FROM user_auth: 从 user_auth 表中查询数据。
WHERE created_at >= CURDATE() - INTERVAL 29 DAY: 限制只选择过去 30 天（包括今天）的数据。
GROUP BY DATE(created_at): 按照日期进行分组，以便计算每天的用户数量。
ORDER BY DATE(created_at): 按照日期顺序排序结果。

查询近 30 天用户数——累计#

创建 numbers 表生成日期序列

1
CREATE TEMPORARY TABLE IF NOT EXISTS numbers (num INT);
2
  TRUNCATE TABLE numbers;
3
  INSERT INTO numbers (num) VALUES (0), (1), (2), (3), (4), (5), (6), (7), (8), (9),
4
   (10), (11), (12), (13), (14), (15), (16), (17), (18), (19),
5
   (20), (21), (22), (23), (24), (25), (26), (27), (28), (29);

CREATE TEMPORARY TABLE IF NOT EXISTS numbers (num INT): 创建一个临时表 numbers，如果不存在的话
TRUNCATE TABLE numbers: 清空表 numbers，确保没有旧数据
INSERT INTO numbers (num) VALUES (...): 插入从 0 到 29 的数字，共 30 个数。

生成日期序列并计算用户总量

使用这个 numbers 表来生成日期序列
```
1
-- 生成最近 30 天的日期序列并计算用户总量
2
 SELECT
3
     DATE_SUB(CURDATE(), INTERVAL num DAY) AS date,
4
     (SELECT COUNT(DISTINCT uuid) FROM user_auth WHERE DATE(created_at) <= DATE_SUB(CURDATE(), INTERVAL num DAY)) AS total_users
5
 FROM
6
     numbers
7
 ORDER BY
8
     date;
```
- DATE_SUB(CURDATE(), INTERVAL num DAY) AS date: 生成从当前日期起的最近 30 天的日期
- 子查询 SELECT COUNT(DISTINCT uuid) FROM user_auth WHERE DATE(created_at) <= DATE_SUB(CURDATE(), INTERVAL num DAY): 计算每个日期之前（包括当天）的用户总量
- ORDER BY date: 按日期排序结果

联合查询：查询 user_okcard 所有字段 + user_auth src 字段#

1
SELECT u.*, a.src
2
FROM user_okcard u
3
LEFT JOIN user_auth a ON u.uuid = a.uuid
4
ORDER BY u.uuid
5
LIMIT ?, ?

user_okcard 是主表，user_auth 是从表
别名 u 来代表 user_okcard 表
u.* 表示选择 user_okcard 表的所有字段；a.src 表示选择 user_auth 表中的 src 字段
使用 LEFT JOIN 连接两个表，根据 uuid 关联
使用 LIMIT ? OFFSET ? 实现分页

user_auth 中 uuid 有多个，需要每个匹配到的 src 整合成一个字段#

1
SELECT u.*, GROUP_CONCAT(a.src SEPARATOR ',') AS src_list
2
FROM user_okcard u
3
LEFT JOIN user_auth a ON u.id = a.user_id
4
GROUP BY u.id;

GROUP_CONCAT(a.src SEPARATOR ’,’) AS src_list：使用 GROUP_CONCAT() 函数将 user_auth 表中每个匹配的 src 字段拼接成一个以逗号分隔的字符串，并将其命名为 src_list

vite 批量导入图片

Wed, 15 May 2024 00:00:00 GMT

场景#

有很多城市的图片

mulit-images

需要在一个列表中统一渲染：

mulit-images-render

导入方案#

使用 import.meta.glob 函数从文件系统导入多个模块，然后遍历渲染。

vite Glob 导入

1
const files = import.meta.globEager('./*.png')
2
const modules = []
3
Object.keys(files).forEach((path) => {
4
  const name = path.replace(/^\.\/(.*)\.png$/, '$1')
5
  const module = files[path]
6
  // @ts-ignore
7
  modules[name] = module.default
8
})
9
export default modules

渲染完成后结果如下：

1
// vite 生成的代码
2
const modules = {
3
  './a.png': () => import('./a.png'),
4
  './b.png': () => import('./b.png'),
5
  ...
6
}

最后通过对象直接匹配获取即可

新版本 vite 中 import.meta.globEager 已经被废弃，需要使用 import.meta.glob('*', { eager: true }) 来代替

https://cn.vitejs.dev

webpack 导入方案#

webpack 提供 require.context 遍历文件夹下的文件，从中获取指定文件，自动导入模块

1
const files = (require as any).context('./', false, /\.png$/); //批量读取模块文件
2
const modules = files.keys().reduce((modules, path) => {
3
  const [, name] = path.replace(/^\.\/(.*)\.png$/, '$1').split('-');
4
  const module = files(path);
5
  modules[name] = module.default;
6
  return modules;
7
}, {});
8
export default modules;

Windi CSS 上手

Mon, 13 May 2024 00:00:00 GMT

官网

因为项目是在 vue+vite 项目使用，所以选择 Windi CSS 是按需供应的 TailWind 替代方案，

优点#

⚡️ 极速 - 在 Vite 中比 Tailwind 快 20~100 倍 🧩 按需使用 CSS 工具类（与 Tailwind CSS v2 完全兼容） 📦 按需使用原生元素样式重置（预检样式） 🔥 模块热替换 (HMR) 🍃 从 tailwind.config.js 加载配置 🤝 与框架无关 - Vue、 React、Svelte and vanilla！ 📄 CSS @apply / @screen 指令转换（也适用于 Vue SFC 的<style> ） 🎳 支持变量组 - 如 bg-gray-200 hover:(bg-gray-100 text-red-300) 😎 “Devtools 设计” - 支持传统的 Tailwind 运行方式

使用#

安装包#

Terminal window

1
npm i -D vite-plugin-windicss windicss

vite 配置修改#

1
import WindiCSS from 'vite-plugin-windicss'
2

3
export default {
4
  plugins: [WindiCSS()],
5
}

main.ts 入口文件引入#

1
import 'virtual:windi.css'

windi css 配置文件#

同时兼容 windi.config.js 或 tailwind.config.js

1
import { defineConfig } from 'windicss/helpers'
2
import formsPlugin from 'windicss/plugin/forms'
3

4
export default defineConfig({
5
  preflight: false,
6
  darkMode: 'class',
7
  safelist: 'p-3 p-4 p-5',
8
  theme: {
9
    extend: {
10
      colors: {
11
        teal: {
12
          100: '#096',
13
        },
14
      },
15
    },
16
  },
17
  attributify: {
18
    prefix: 'w:',
19
  },
20
  alias: {
21
    hstack: 'flex items-center',
22
    vstack: 'flex flex-col',
23
    icon: 'w-6 h-6 fill-current',
24
    app: 'text-red',
25
    'app-border': 'border-gray-200 dark:border-dark-300',
26
  },
27
  plugins: [formsPlugin],
28
})

展开收起

属性配置解释#

preflight 预检样式#

Windi CSS 中的预检样式实际上是指一组默认的全局样式，用于在没有明确样式声明的情况下提供一些基本的全局样式设置，以确保一致性和一致的样式基础。这包括了重置默认的边距、填充、字体等，以及一些其他的全局样式设置。默认为 true

attributify：开启属性模式#

先看下传统 tailwind 使用的语法，即所有实用程序和变体都写在类中

1
<button
2
  class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600"
3
>
4
  Button
5
</button>

如果使用 Windi css 的属性模式，则可以将类拆分为多个属性，如下：

1
<button
2
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
3
  text="sm white"
4
  font="mono light"
5
  p="y-2 x-4"
6
  border="2 rounded blue-200"
7
>
8
  Button
9
</button>

如果担心命名冲突，可以通过以下方式给属性模式添加自定义前缀：

1
export default {
2
  attributify: {
3
    prefix: 'w:',
4
  },
5
}

1
<button
2
  w:bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
3
  w:text="sm white"
4
  w:font="mono light"
5
  w:p="y-2 x-4"
6
  w:border="2 rounded blue-200"
7
>
8
  Button
9
</button>

alias 别名配置#

请注意，在使用别名时需要加上前缀 * ，例如：

1
<div class="*hstack"></div>

theme 配置#

theme 是 tailwind css 的配置，可以为项目自定义默认主题。theme

dark mode 深色模式#

dark-mode

plugins#

plugins

Tailwind css#

根据官方文档

安装#

Terminal window

1
npm install -D tailwindcss

配置#

Terminal window

1
# 安装完成后
2
npx tailwindcss init

执行完成后，在项目根目录下会生成一个tailwind.config.js文件，里面有配置项，可以根据自己的需求进行修改。

基本使用#

1
w-full
2
w-xxpx
3
p-xxpx
4
pt-xxpx
5
bg-white
6
text-16px
7
text-[#000]

响应式#

tailwind css 响应式提供了 5 个断点：

断点前缀	最小宽度	转为 css 媒体查询
`sm`	640px	`@media (min-width: 640px) { ... }`
`md`	768px	`@media (min-width: 768px) { ... }`
`lg`	1024px	`@media (min-width: 1024px) { ... }`
`xl`	1280px	`@media (min-width: 1280px) { ... }`
`2xl`	1536px	`@media (min-width: 1536px) { ... }`

使用起来很方便。

比如以下布局，在 pc 上需要左右展示:

tailwindcss-flex-row

在移动端需要上下展示:

tailwindcss-flex-col

使用 tailwindcss 可以这样设置：

1
<div class="flex justify-center flex-col sm:flex-row"></div>

意思是在屏幕宽度小于 640px 时，使用 flex-col，大于 640px 时将 flex-col 改为 flex-row，所以在设置响应式布局时，需要先设置默认布局，然后再根据不同屏幕宽度设置不同的布局。

node:16 docker 换小镜像

Wed, 08 May 2024 00:00:00 GMT

现状#

原来 docker node:16 的镜像加上代码在 1G 左右

node16-docker-replace

替换方法#

常规项目#

.gitlab-ci.yml

1
# Dockerfile
2
- FROM node:16
3
+ FROM node:16.19-slim
4
提换  node:16  为 node:16.19-slim

引用 git+https:// 的项目#

参考 https://git.qmpoa.com/fe/y-websocket-excel/-/merge_requests/8/diffs

node16-docker-replace2

node16-docker-replace3

node16-docker-replace4

node:16.19-slim 不认

1
"y-luckysheet": "git+https://git.qmpoa.com/fe_common_lib/y-luckysheet.git#v1.0.1",

这种语法，需要在 CI 流程中将这类依赖处理好，在 Dockerfile 中拷贝进 node_modules 下

.gitlab-ci.yml

1
# 在上一步的基础上
2
  script:
3
    - echo "=====start deploy======"
4
    - mkdir nm
5
    - cd nm
6
　 # 将咱们自己的依赖以clone的方式放在一个临时目录下
7
    - git clone 'https://git.qmpoa.com/fe_common_lib/y-luckysheet.git'
8
    - cd ../
9
# Dockerfile
10
RUN npm install --registry=https://registry.npmmirror.com --ignore-scripts --production
11
# 在依赖安装完成后，将临时目录下的内容移动到node_modules下
12
RUN mv ./nm/y-luckysheet ./node_modules/y-luckysheet

效果#

node16-docker-replace1

flutter其他

Fri, 03 May 2024 00:00:00 GMT

包管理#

Pub（https://pub.dev/ ）是 Google 官方的 Dart Packages 仓库，类似于 node 中的 npm 仓库

通过以下命令安装依赖

Terminal window

1
flutter packages get

其他依赖方式#

依赖 Git：你也可以依赖存储在 Git 仓库中的包。如果软件包位于仓库的根目录中，请使用以下语法

1
dependencies:
2
  pkg1:
3
    git:
4
      url: git://github.com/xxx/pkg1.git

资源管理#

静态资源图片管理

/assets/my_icon.png
/assets/2.0x/my_icon.png
/assets/3.0x/my_icon.png

1
Widget build(BuildContext context) {
2
  // 根据DPI自动配置图片
3
  return AssetImage('assets/my_icon.png');
4
  // 依赖包中的图片
5
  return AssetImage('icons/heart.png', package: 'some_pkg')
6
}

运行项目报错#

报错：一直显示 Running Gradle task ‘assembleDebug’#

在上文的基础上，如果还是不能解决问题，检查 android 目录下是否有 settings.gradle 文件，文件内容如下：

1
include ':app'
2

3
def localPropertiesFile = new File(rootProject.projectDir, "local.properties")
4
def properties = new Properties()
5

6
assert localPropertiesFile.exists()
7
localPropertiesFile.withReader("UTF-8") { reader -> properties.load(reader) }
8

9
def flutterSdkPath = properties.getProperty("flutter.sdk")
10
assert flutterSdkPath != null, "flutter.sdk not set in local.properties"
11
apply from: "$flutterSdkPath/packages/flutter_tools/gradle/app_plugin_loader.gradle"

如果没有请添加此文件。

再运行，可能出现文件 flutter\packages\flutter_tools\gradle\flutter.gradle 第 108 行报错，修改 hostedRepository 的值如下：

1
String hostedRepository = "https://storage.flutter-io.cn";

运行，如果还有如下报错信息：

Task ‘assembleAarRelease’ not found in root project ‘flutter_plugin_android_lifecycle’.

请安装此包，

还有，需要检查 AndroidManifest.xml，users-permission 是否放错了位置，应该放在 application 外面

flutter-error-1

报错：Could not locate aapt. Please ensure you have the Android buildtools installed.#

报错：task ‘:permission_handler’#

修改 compileSdkVersion 版本为 31 ：android/app/build.gradle

解决：Flutter canvaskit Failed to downloadhttps://chrome-infra-packages.appspot #

flutter web 工程第一次运行时会下载 web sdk, canvaskit，但是在国内常常卡在 Downloading canvaskit 就下载失败了

解决办法：使用国内的镜像

Terminal window

1
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

再次运行时如果出现了 Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source! 那基本就成功了，没有就重启下电脑

flutter build ipa 报错：Cannot find “xcodebuild”#

1
Cannot find "xcodebuild". Xcode 13 or greater is required to develop for iOS.
2
Encountered error while archiving for device.

解决方法：

Terminal window

1
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

如果路径不对，可以找到 Xcode，拉去路径

flutter路由管理

Fri, 03 May 2024 00:00:00 GMT

Flutter 路由管理也称为导航管理，Android 和 IOS 相同，都是维护一个路由栈。

MaterialPageRoute#

MaterialPageRoute 是 Material 提供的组件，针对不同平台，实现不同的切换动画，表示占有整个屏幕空间的一个模态路由页面

1
MaterialPageRoute({
2
  WidgetBuilder builder, // 返回新路由的实例
3
  RouteSettings settings, // 路由的配置信息，如路由名称、是否初始路由（首页）
4
  bool maintainState = true, // 原路由是否要保存在内存中
5
  bool fullscreenDialog = false, // 是否全屏模态对话框
6
})

Navigator#

路由管理组件

1
// 压栈处理
2
Navigator.push(
3
  context,  // build 方法的参数
4
  MaterialPageRoute(builder: (_) => SecondPage()),
5
)
6
// 出栈
7
Navigator.pop(context);

路由传参#

1
// 压栈处理
2
var result = await Navigator.push(
3
  context,
4
  MaterialPageRoute(
5
    builder: (context) {
6
      return TipRoute(
7
        // 路由参数
8
        text: "我是提示xxxx",
9
      );
10
    },
11
  ),
12
);
13
//输出`TipRoute`路由返回结果
14
print("路由返回值: $result");
15

16
// TipRoute
17
class TipRoute extends StatelessWidget {
18
  TipRoute({
19
    super.key,
20
    required this.text, // 接收一个text参数
21
  });
22
Navigator.pop(context, "我是返回值")

展开收起

命名路由#

1
MaterialApp(
2
  title: 'Flutter Demo',
3
  theme: ThemeData(primarySwatch: Colors.blue),
4
  //名为"/"的路由作为应用的home(首页)
5
  initialRoute:"/",
6
  //注册路由表
7
  routes:{
8
    "new_page":(context) => NewRoute(),
9
    "/":(context) => MyHomePage(title: '首页'), //注册首页路由
10
  },
11
);
12
// 跳转
13
Navigator.pushNamed(context, "new_page");
14
Navigator.pushReplacementNamed(context, "new_page");
15
// 参数传递
16
Navigator.pushNamed(context, "new_page", arguments: "hi");
17
@override
18
Widget build(BuildContext context) {
19
  var args = ModalRoute.of(context).settings.arguments; // "hi"

展开收起

路由守卫#

1
MaterialApp(
2
  ... //省略无关代码
3
  onGenerateRoute:(RouteSettings settings){
4
    return MaterialPageRoute(builder: (context){
5
      String routeName = settings.name;
6
      // 如果访问的路由页需要登录，但当前未登录，则直接返回登录页路由。
7
    }
8
  );
9
  }
10
);

flutter状态管理

Fri, 03 May 2024 00:00:00 GMT

flutter状态管理

Dart语言及Flutter项目

Thu, 02 May 2024 00:00:00 GMT

Flutter 开发使用的 Dart 语言，所以学习 Dart 是 Flutter 开发的必要前提。

Dart 语言#

Dart 语言在设计上同时借鉴 Java 和 JavaScript 语言，同时引入一些现代编程语言的特性，例如空安全，除此之外还有一些独创的语法，比如级联操作符。

特点：强类型语言，静态语法方面类似 Java，如类新定义、函数定义和泛型等，动态特性方面类似 JavaScript，如函数式特性、异步支持等。

Flutter 的基本数据类型如下：

Numbers（数值）→ int、double
Booleans（布尔）→ bool，只有两个值 true 或 false
Strings（字符串）→ String、Runes(UTF-32 编码的字符串，可以通过文字转换成表情或代表特定文字)，可以用单引号(‘)或双引号(“)来包裹字符串
Lists（列表）→ Dart 中的数组等于列表，var list = [] 和 List list = new List() 可以简单看做一样
Sets（集）→ 无序，元素唯一的集合
Maps（字典）→ 键值对的形式表示一组值

变量声明#

var 关键字

类似于 js 中的 var，但是一旦定义，就不能改变类型
dynamic 和 Object

Dart 中所有类型都是 Object 的子类型，声明的变量可以任意赋值、改变类型，没有 var 的束缚
```
1
dynamic t;
2
Object x;
3
t = "hi world";
4
x = 'Hello Object';
5
//下面代码没有问题
6
t = 1000;
7
x = 1000;
```

final 和 const

定义常量，区别是：const 必须初始化，final 变量是在第一次使用时才初始化的。这意味着在声明时可以不赋值，只要在使用前赋值即可

1
void main() {
2
   const now = DateTime.now();
3
   print(now);
4

5
   // 在函数中定义final变量
6
   final int x;
7
   x = 10; // 第一次赋值，可以成功
8
   // x = 20; // 再次赋值会报错
9
 }

空安全（null-safety）

主要是避免由于 null 值导致的运行时错误，在定义变量时通过 ? 可定义可变类型（表示类型是可空的（nullable），即可以为 null。
```
1
int? nullableInt;
2
nullableInt = null; // 这是允许的
```
可变类型使用前需要判断是否为空，如果一个变量我们定义为可空类型，在某些情况下即使我们给它赋值过了，但是预处理器仍然有可能识别不出，这时我们就要显式（通过在变量后面加一个”!“符号）告诉预处理器它已经不是 null 了，比如：
```
1
class Test{
2
   int? i;
3
   Function? fun;
4
   say(){
5
     if(i!=null) {
6
       print(i! * 8); //因为已经判过空，所以能走到这 i 必不为null，如果没有显式申明，则 IDE 会报错
7
     }
8
     if(fun!=null){
9
       fun!(); // 同上
10
     }
11
   }
12
 }
```

函数#

Dart 是真正的面向对象编程语言，函数也是对象

函数声明

Dart 函数声明如果没有显式声明返回值类型时会默认当做 dynamic 处理

1
// 显示声明返回值类型
2
bool isNoble(int atomicNumber) {
3
  return _nobleGases[atomicNumber] != null;
4
}
5
// 未声明返回值类型 当作dynamic处理
6
isNoble(int atomicNumber) {
7
  return _nobleGases[atomicNumber] != null;
8
}

可选参数

包装一组函数参数，用[]标记为可选的位置参数，并放在参数列表的最后面

1
 String say(String from, String msg, [String? device]) {
2
   var result = '$from says $msg';
3
   if (device != null) {
4
     result = '$result with a $device';
5
   }
6
   return result;
7
 }

函数作为变量

类似 js 中的声明式函数

1
var say = (str){
2
  print(str);
3
};
4
say("hi world");

函数作为参数传递

可以将函数作为参数传递给另一个函数

1
void main() {
2
}   void printMessage(String message) {
3
  print(message);
4
}
5

6
void executeFunction(void Function(String) func, String value) {
7
  func(value);
8
}
9

10
executeFunction(printMessage, 'Hello, Dart!'); // 输出: Hello, Dart!

mixin#

Dart 不支持多继承，但支持 mixin，是一种复用类代码的方式

1
class Person {
2
  say() {
3
    print('say');
4
  }
5
}
6

7
mixin Eat {
8
  eat() {
9
    print('eat');
10
  }
11
}
12

13
mixin Walk {
14
  walk() {
15
    print('walk');
16
  }
17
}
18

19
mixin Code {
20
  code() {
21
    print('key');
22
  }
23
}
24

25
class Dog with Eat, Walk{}
26
class Man extends Person with Eat, Walk, Code{}

展开收起

特点：

不能有构造函数：Mixin 不能包含构造函数。
适用场景：Mixin 适用于在多个不相关的类中复用代码。
冲突解决：如果多个 Mixin 中有同名的方法，最后一个 Mixin 的方法会覆盖前面的。

异步支持#

Dart 类库有很多返回 Future 和 Stream 对象的函数，这些函数称为异步函数，在 dart 中同样使用 async 和 await 来实现

Future#

类似于 js 中的 Promise，用于处理异步操作

Future.delayed创建异步任务
.then接受成功结果
.catchError捕获错误
.whenComplete成功/失败都会调用，类似于 Promise 的 finally
Future.wait相当于 Promise.all，支持多个异步任务同时执行

1
// 延迟2秒后返回结果
2
Future.delayed(Duration(seconds: 2),(){
3
   return "hi world!";
4
}).then((data){
5
   print(data);
6
});
7
// 抛出异常
8
Future.delayed(Duration(seconds: 2),(){
9
   //return "hi world!";
10
   throw AssertionError("Error");
11
}).then((data){
12
   //执行成功会走到这里
13
   print("success");
14
}).catchError((e){
15
   //执行失败会走到这里
16
   print(e);
17
}).whenComplete((){
18
   //无论成功或失败都会走到这里
19
});
20

21
// 执行多个异步
22
Future.wait([
23
  // 2秒后返回结果
24
  Future.delayed(Duration(seconds: 2), () {
25
    return "hello";
26
  }),
27
  // 4秒后返回结果
28
  Future.delayed(Duration(seconds: 4), () {
29
    return " world";
30
  })
31
]).then((results){
32
  print(results[0]+results[1]);
33
}).catchError((e){
34
  print(e);
35
});

展开收起

async/await#

Dart 中的 async/await 和 JavaScript 中的 async/await 功能是一样的，用来处理 Future 的回调地狱问题

Stream#

Stream 也是用于接受异步事件数据，与 Future 不同的是，它可以同时接受多个异步结果。Stream 常用于会多次读取数据的异步任务场景，如网络内容下载、文件读写等

1
Stream.fromFutures([
2
  // 1秒后返回结果
3
  Future.delayed(Duration(seconds: 1), () {
4
    return "hello 1";
5
  }),
6
  // 抛出一个异常
7
  Future.delayed(Duration(seconds: 2),(){
8
    throw AssertionError("Error");
9
  }),
10
  // 3秒后返回结果
11
  Future.delayed(Duration(seconds: 3), () {
12
    return "hello 3";
13
  })
14
]).listen((data){
15
   print(data);
16
}, onError: (e){
17
   print(e.message);
18
},onDone: (){
19

20
});

展开收起

第一个 flutter 应用#

通过 flutter 目录结构知道 lib/main.dart 是 flutter 应用的入口文件，我们来看下之前计数器应用的代码：

1
import 'package:flutter/material.dart';
2

3
void main() {
4
  runApp(const MyApp());
5
}
6

7
class MyApp extends StatelessWidget {
8
  const MyApp({super.key});
9

10
  // 这个部件是应用程序的根
11
  @override
12
  Widget build(BuildContext context) {
13
    return MaterialApp(
14
      title: 'Flutter Demo',
15
      theme: ThemeData(
16
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
17
        useMaterial3: true,
18
      ),
19
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
20
    );
21
  }
22
}
23

24
class MyHomePage extends StatefulWidget {
25
  const MyHomePage({super.key, required this.title});
26

27
  final String title;
28

29
  @override
30
  State<MyHomePage> createState() => _MyHomePageState();
31
}
32

33
class _MyHomePageState extends State<MyHomePage> {
34
  int _counter = 0;
35

36
  void _incrementCounter() {
37
    setState(() {
38
      _counter++;
39
    });
40
  }
41

42
  @override
43
  Widget build(BuildContext context) {
44
    return Scaffold(
45
      appBar: AppBar(
46
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
47
        title: Text(widget.title),
48
      ),
49
      body: Center(
50
        child: Column(
51
          mainAxisAlignment: MainAxisAlignment.center,
52
          children: <Widget>[
53
            const Text(
54
              'You have pushed the button this many times:',
55
            ),
56
            Text(
57
              '$_counter',
58
              style: Theme.of(context).textTheme.headlineMedium,
59
            ),
60
          ],
61
        ),
62
      ),
63
      floatingActionButton: FloatingActionButton(
64
        onPressed: _incrementCounter,
65
        tooltip: 'Increment',
66
        child: const Icon(Icons.add),
67
      ), // This trailing comma makes auto-formatting nicer for build methods.
68
    );
69
  }
70
}

展开收起

代码分析#

导入包
```
1
import 'package:flutter/material.dart'
```
通过此行代码导入 material 组件库
应用入口
```
1
void main() {
2
 runApp(const MyApp());
3
}
```
与 Java 类似，Flutter 中同样使用 main 函数作为应用程序的入口，调用 runApp 方法启动 Flutter 应用。

runApp 接受一个 Widget 参数，如 MyApp()，它是 Flutter 应用的根组件

应用结构

1
class MyApp extends StatelessWidget {
2
 const MyApp({super.key});
3
   // 这个部件是应用程序的根
4
   @override
5
   Widget build(BuildContext context) {
6
       return MaterialApp(
7
         title: 'Flutter Demo',
8
         theme: ThemeData(
9
           colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
10
           useMaterial3: true,
11
         ),
12
         home: const MyHomePage(title: 'Flutter Demo Home Page'),
13
       );
14
     }
15
   }

展开收起

MyApp 是 Flutter 应用根组件，继承自 StatelessWidget，所有本身也是 widget（“组件”或“部件”）
Flutter 中，大多数都是 widget，包括对齐（Align）、填充（Padding）、手势处理（GestureDetector）等，它们都是以 widget 的形式提供
Flutter 构建页面时，调用 build 方法，描述如何构建 UI 界面
MaterialApp 是 Material 库中提供的 Flutter App 框架，通过它设置应用的名称、主题色、语言和首页等，继承自 StatefulWidget，也是 widget

1
class MyHomePage extends StatefulWidget {
2
  const MyHomePage({super.key, required this.title});
3

4
  final String title;
5

6
  @override
7
  State<MyHomePage> createState() => _MyHomePageState();
8
}

home 及应用首页，MyHomePage 继承自 StatefulWidget，表示一个有状态的组件。

之前的 MyApp 入口继承 StatelessWidget，表示无状态的组件，两者对比如下：

StatefulWidget 拥有状态，并且状态在 widget 生命周期中可变，StatelessWidget 没有状态
StatefulWidget 至少由两个类构成
1. 一个 StatefulWidget 类
2. 一个 State 类，该类继承自 State，该类中包含 widget 的状态

State 类#

_MyHomePageState类是 MyHomePage 类对应的状态类，MyHomePage 类中并没有 build 方法，取而代之的是，build 方法被挪到了_MyHomePageState方法中

1
class _MyHomePageState extends State<MyHomePage> {
2
  int _counter = 0;
3

4
  void _incrementCounter() {
5
    setState(() {
6
      _counter++;
7
    });
8
  }
9

10
  @override
11
  Widget build(BuildContext context) {
12
    return Scaffold(
13
      appBar: AppBar(
14
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
15
        title: Text(widget.title),
16
      ),
17
      body: Center(
18
        child: Column(
19
          mainAxisAlignment: MainAxisAlignment.center,
20
          children: <Widget>[
21
            const Text(
22
              'You have pushed the button this many times:',
23
            ),
24
            Text(
25
              '$_counter',
26
              style: Theme.of(context).textTheme.headlineMedium,
27
            ),
28
          ],
29
        ),
30
      ),
31
      floatingActionButton: FloatingActionButton(
32
        onPressed: _incrementCounter,
33
        tooltip: 'Increment',
34
        child: const Icon(Icons.add),
35
      ), // This trailing comma makes auto-formatting nicer for build methods.
36
    );
37
  }
38
}

展开收起

_MyHomePageState 类包括：

组件状态
```
1
int _counter = 0;
```
状态变化函数
```
1
void _incrementCounter() {
2
  setState(() {
3
    _counter++;
4
  });
5
}
```
调用 setState 方法告知 Flutter 框架有状态改变，Flutter 接收后调用 build 方法重新构建页面
构建 UI 界面的 build 方法

当 MyHomePage 第一次被创建时，_MyHomePageState 类同时被创建，会调用 build 方法构建 widget 树，最终将 widget 树渲染到界面上
- Scaffold：Material 提供的页面脚手架，提供默认的导航栏、标题和含主屏幕 widget 树（后同“组件树”或“部件树”）的 body 属性
- body：Center 可以将子组件树对齐到屏幕中心，通过 child 定义子组件，通过 children 定义多个平行的子组件
- floatingActionButton：是右下角悬浮 button，通过 onPressed 接收回调函数

Widget#

基本概念#

Widget 是 Flutter 用于构建用户界面的基本单元。每个 Widget 都描述了用户界面的一部分。无论是一个按钮、文本、图像，还是整个布局结构，都是通过 Widget 来实现的。在 Flutter 中，几乎所有的东西都是 Widget，包括对齐方式、填充、布局模型等。

特点#

不可变性：Widget 本身是不可变的（immutable）。这意味着一旦创建了 Widget，它的属性不能改变（final）。如果属性发生变化则会重新构建 Widget 树
描述 UI：Widget 只是对 UI 的一种描述，真正的绘制和布局工作是由底层的渲染引擎（rendering engine）来完成的。

Widget 的类型#

Flutter 中的 Widget 主要分为两类：StatefulWidget 和 StatelessWidget

StatelessWidget#

StatelessWidget 用于不需要维护状态的场景，通常在 build 方法中通过嵌套其他 widget 来构建 UI，在构建过程中会递归的构建其嵌套的 widget 。如上面的 MyApp

build 方法有一个 context 参数，它是 BuildContext 类的一个实例，表示当前 widget 在 widget 树中的上下文，每一个 widget 都会对应一个 context 对象

StatefulWidget#

createState() 用于创建和 StatefulWidget 相关的状态，它在 StatefulWidget 的生命周期中可能会被多次调用。例如，当一个 StatefulWidget 同时插入到 widget 树的多个位置时，Flutter 框架就会调用该方法为每一个位置生成一个独立的 State 实例

State#

一个 StatefulWidget 对应一个 State 类，表示与其对应的 StatefulWidget 要维护的状态。

特点：

State 中的状态在 widget 构建时会同步读取
在 widget 的生命周期中可以被改变，当 State 被改变时，需要调用 setState 方法通知 Flutter 调用 build 重新构建 widget 树

State 生命周期#

State 的生命周期在 Flutter 开发中尤为重要，修改代码如下：

1
import 'package:flutter/material.dart';
2

3
void main() {
4
  runApp(const MyApp());
5
}
6

7
class MyApp extends StatelessWidget {
8
  const MyApp({super.key});
9

10
  // 这个部件是应用程序的根
11
  @override
12
  Widget build(BuildContext context) {
13
    return MaterialApp(
14
      title: 'Flutter Demo',
15
      theme: ThemeData(
16
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
17
        useMaterial3: true,
18
      ),
19
      home: const StateLifeCycleTest(),
20
    );
21
  }
22
}
23

24
class StateLifeCycleTest extends StatelessWidget {
25
  const StateLifeCycleTest({Key? key}) : super(key: key);
26

27
  @override
28
  Widget build(BuildContext context) {
29
    return CounterWidget();
30
  }
31
}
32

33
class CounterWidget extends StatefulWidget {
34
  const CounterWidget({super.key, this.initValue = 0});
35

36
  final int initValue;
37

38
  @override
39
  _CounterWidgetState createState() => _CounterWidgetState();
40
}
41

42
class _CounterWidgetState extends State<CounterWidget> {
43
  int _counter = 0;
44

45
  @override
46
  void initState() {
47
    super.initState();
48
    // 初始化状态
49
    _counter = widget.initValue;
50
    print('initState');
51
  }
52

53
  @override
54
  Widget build(BuildContext context) {
55
    print('build');
56
    return Scaffold(
57
        body: Center(
58
            child: TextButton(
59
                child: Text('$_counter'),
60
                onPressed: () => setState(
61
                      () => ++_counter,
62
                    ))));
63
  }
64

65
  @override
66
  void didUpdateWidget(CounterWidget oldWidget) {
67
    super.didUpdateWidget(oldWidget);
68
    print('didUpdateWidget');
69
  }
70

71
  @override
72
  void deactivate() {
73
    super.deactivate();
74
    print('deactivate');
75
  }
76

77
  @override
78
  void dispose() {
79
    super.dispose();
80
    print("dispose");
81
  }
82

83
  @override
84
  void reassemble() {
85
    super.reassemble();
86
    print("reassemble");
87
  }
88

89
  @override
90
  void didChangeDependencies() {
91
    super.didChangeDependencies();
92
    print("didChangeDependencies");
93
  }
94
}

展开收起

通过 debug 启动项目，看到控制台输出如下，也就是在 StatefulWidget 插入到 Widget 树中时，首先 initState 方法会被调用

flutter-init-lifecycle

接着通过点击 ⚡️ 按扭触发热重载：

flutter-hot-reload-lifecycle

接下来我们在 widget 树中删除 CounterWidget

flutter-remove-widget-lifecycle

结合以上案例，来看下 State 的生命周期

createState：当 StatefulWidget 首次插入到 widget 树中时调用，创建并返回与 StatefulWidget 关联的 State 对象
initState: State 对象被创建时，即 widget 第一次插入到 widget 树中时调用，只调用一次，必须调用super.initState();，可以做一些一次性操作，如状态初始化、订阅子树的事件通知等
didChangeDependencies：当 State 对象的依赖发生变化时会被调用
build：在 initState 和 didChangeDependencies 之后调用，之后每次调用 setState 时也会调用
reassemble：在热重载（hot reload）时调用
didUpdateWidget：在 widget 的配置发生变化时调用，在 widget 重新构建时，Flutter 框架会调用 widget.canUpdate 来检测 widget 树中同一位置的新旧节点，然后决定是否需要更新，如果 widget.canUpdate 返回 true 则会调用此回调。
deactivate：当 State 对象从树中被移除时，会调用此回调
dispose：当 State 对象从树中被永久移除时调用；通常在此回调中释放资源。

flutter-state-lifecycle

在 Widget 树中获取 State 对象#

如果需要从 Widget 树中获取某个 State 对象，以便与其进行交互，也就是 vue 中的父子组件通信。Flutter 提供了几种方法来实现这一点，具体方法取决于你要获取 State 对象的上下文和具体需求。

通过 Context 获取#

context 对象提供方法 findAncestorStateOfType()，该方法可以从当前节点沿着 widget 树向上查找指定类型的 statefulWidget 的 state 对象，同时还有 findRootAncestorStateOfType() 获取根节点的 state 对象

1
import 'package:flutter/material.dart';
2

3
void main() => runApp(MyApp());
4

5
class MyApp extends StatelessWidget {
6
  @override
7
  Widget build(BuildContext context) {
8
    return MaterialApp(
9
      home: Scaffold(
10
        appBar: AppBar(
11
          title: Text('父子通信'),
12
        ),
13
        body: MyWidget(),
14
      ),
15
    );
16
  }
17
}
18

19
class MyWidget extends StatefulWidget {
20
  @override
21
  _MyWidgetState createState() => _MyWidgetState();
22
}
23

24
class _MyWidgetState extends State<MyWidget> {
25
  int _counter = 0;
26

27
  void incrementCounter() {
28
    setState(() {
29
      _counter++;
30
    });
31
  }
32

33
  @override
34
  Widget build(BuildContext context) {
35
    return Column(
36
      children: [
37
        Center(
38
          child: Text('Counter: $_counter'),
39
        ),
40
        ChildWidget(),
41
      ],
42
    );
43
  }
44
}
45

46
class ChildWidget extends StatelessWidget {
47
  @override
48
  Widget build(BuildContext context) {
49
    // 通过BuildContext查找父级State对象
50
    _MyWidgetState? parentState =
51
        context.findAncestorStateOfType<_MyWidgetState>();
52
    return ElevatedButton(
53
      onPressed: () {
54
        parentState?.incrementCounter();
55
      },
56
      child: Text('父节点数据：${parentState?._counter ?? 0}'),
57
    );
58
  }
59
}

展开收起

在这个例子中，ChildWidget 通过 BuildContext 查找父级 MyWidget 的 State 对象，可以访问变量或者调用其方法。

flutter-context-state

通过 GlobalKey#

GlobalKey 是获取 State 对象的最常用方法之一。你可以将 GlobalKey 传递给 StatefulWidget，然后使用它来访问 State 对象。

注意：使用 GlobalKey 开销较大，如果有其他可选方案，应尽量避免使用它。另外，同一个 GlobalKey 在整个 widget 树中必须是唯一的，不能重复。

通过 RenderObject 自定义 Widget#

在 Flutter 中，直接使用 RenderObject 来构建自定义 Widget 并不常见，尤其是在日常应用开发中。大多数开发者可以通过 Flutter 提供的现成 Widget、布局和绘制系统实现所需的功能。然而，RenderObject 非常强大且灵活，在某些情况下，它非常有用，比如需要精细控制布局和绘制逻辑，或者需要实现高性能的自定义组件时。

Flutter SDK 内置组件库介绍#

Flutter SDK 内置了丰富的基础组件，在基础组件之上还提供了一套 Material 风格（Android 默认的视觉风格）和一套 Cupertino 风格（iOS 默认的视觉风格）的组件。

基础组件#

使用基础组件前，需要导入

1
import 'package:flutter/widgets.dart';

Text：创建带格式的文本
Row、Column：可以在水平、垂直方向上创建灵活的布局，类似于 web 中的 flexbox
Stack：允许子 widget 堆叠，类似于 Web 中的 absolute
Container：创建矩形元素，通过 BoxDecoration定义背景、边框和阴影等

Material 风格组件#

Material 风格组件需要导入

1
import 'package:flutter/material.dart';

Material 应用程序以 MaterialApp 组件开始，该组件在应用程序的根部创建了一些必要的组件，比如 Theme 组件，它用于配置应用的主题。

如 Scaffold 骨架组件，参数 appBar、body

flutter环境搭建

Wed, 01 May 2024 00:00:00 GMT

原生开发#

安卓：Java、Kotlin 直接调用 Android SDK IOS：OC、Swift 直接调用 IOS SDK

优点：性能好、速度快、访问所有权限缺点：开发周期长、开发成本高

跨平台技术#

H5 + 原生：微信小程序#

通过原生网页加载 webview 控件来加载，通过 JsBridge 调用原生方法

Javascript 开发 + 原生渲染：React Native、Weex#

React Native 的虚拟 DOM 会通过 JavaScriptCore 映射为原生组件

优点：原生控件渲染，想比于混合开发，性能好

自绘 UI + 原生：Qt、Flutter#

调用系统 API 渲染

Flutter 基础了解#

Google 开源，跨平台、高性能，通过 Dart 语言开发的移动端开发框架。

使用高性能渲染引擎来绘制 Widget（组件）

JIT、AOT#

JIT 即时编译：运行时实时将源码翻译为机器码 AOT 提前编译：执行前提前编译为机器码

为什么选择 Dart#

Dart 开发效率高

基于 JIT 的快速开发周期：开发阶段使用 JIT，避免每次改动都需要重新编译
基于 AOT 的发布包：发布时通过 AOT 生成高效的机器码保证性能

Flutter 框架图#

flutter-framework-three

框架层#

Flutter Framework，纯 Dart 实现的 SDK，开发时基本都是和 Flutter Framework 打交道

Foundation 和 Animation、Painting、Gestures

这两层合并为 Dart UI 层，对应的 Flutter 中的 dart:ui 包，是 Flutter Engine 暴露的底层 UI 库，提供动画、手势和绘制能力
Rendering

渲染层，依赖于 Dart UI 层，构建一颗由渲染对象组成的渲染树，动态更新时，会找出变化更新渲染。是 Flutter 框架最核心的部分，确定渲染对象的位置、大小以及绘制（调用 Dart UI 层）
Widgets

Flutter 提供的基础组件库，在此之上，Flutter 还提供了 Material 和 Cupertino 两种视觉风格的组件库，它们分别实现了 Material 和 iOS 设计规范

引擎层#

Engine，核心，使用 C++实现，其中包括 Skia 引擎，Dart 运行时（Dart runtime）、文字排版引擎等。

代码调用 dart:ui 库时，最终会走到引擎层，实现真正的绘制和显示

嵌入层#

Embedder，潜入层，Flutter 最终渲染、交互需要依赖所在平台的操作系统 API，潜入层主要是将 Flutter 引擎安装到特定平台上。

嵌入层采用了当前平台的语言编写，例如 Android 使用的是 Java 和 C++， iOS 和 macOS 使用的是 Objective-C 和 Objective-C++

Mac 环境搭建#

1. 设置中国镜像#

由于国内访问 Flutter 可能有问题，中国开发者需要切到临时镜像

Terminal window

1
export PUB_HOSTED_URL=https://pub.flutter-io.cn
2
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

复制上面两行，添加到系统环境变量

Terminal window

1
vim ~./bash_profile
2
# 复制上述两行到文件末尾
3
source ~/.bash_profile

2.下载 Flutter SDK#

Flutter SDK

选择稳定版最新版本下载，看清 inter 芯片还是 m1 芯片：

flutter-sdk-download

下载完成后，记下当前的目录位置，添加到系统环境变量

Terminal window

1
vim ~./bash_profile
2
# 添加 export PATH=文件目录/flutter/bin:$PATH
3
source ~/.bash_profile

执行 flutter -version 报错，如下

flutter-git-init

只需要在 flutter 目录下执行 git init 即可

再次执行 flutter doctor 来检查环境是否正确

Terminal window

1
flutter doctor

flutter-doctor

可以看到此时还有环境未正确配置

上面如果有问题，可以使用 git clone https://github.com/flutter/flutter.git

接着执行 flutter doctor

flutter-doctor1

3. 安装 Xcode#

在 iOS 设备或模拟器上运行 Flutter 应用程序从 App Store 安装 Xcode 最新版本，Xcode 用于调试和编译本机 Swift 或 ObjectiveC 代码，安装包括 Git 2.27 或更高版本来管理源代码。

安装好 Xcode 还需要设置 Xcode 的开发目录和签署许可协议，执行下面命令，

Terminal window

1
sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'

签署许可协议

Terminal window

1
sudo xcodebuild -license

4. 安装 CocoaPods#

当开发 iOS 应用时，会经常使用到很多第三方开源类库，比如 JSONKit，AFNetWorking 等等。可能某个类库又用到其他类库，所以要使用它，必须得另外下载其他类库，而其他类库又用到其他类库，手动一个个去下载所需类库十分麻烦。

CocoaPods 是 iOS 开发、macOS 开发中的包依赖管理工具，效果如 Java 中的 Maven，nodejs 的 npm。

CocoaPods 是一个开源的项目，源码是用 ruby 写的，源码地址在 GitHub 上。

Terminal window

1
# 移除原有镜像源：
2
gem sources --remove https://rubygems.org/
3
# 添加国内镜像源
4
gem sources --add https://gems.ruby-china.com
5
# 安装
6
sudo gem install -n /usr/local/bin cocoapods

需要最新版 ruby 环境支持

Terminal window展开收起

1
# 安装 rbenv 和 ruby-build：
2
brew install rbenv
3
brew install ruby-build
4
# 配置 rbenv
5
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.zshrc
6
echo 'eval "$(rbenv init -)"' >> ~/.zshrc
7
source ~/.zshrc
8
# 安装最新的Ruby版本
9
rbenv install -l
10
rbenv install 3.3.2
11
rbenv global 3.3.2
12

13
# 查看所有ruby版本
14
rbenv versions
15
# 卸载某个版本
16
rbenv uninstall 3.3.2
17
# 验证安装是否成功
18
ruby -b

展开收起

安装成功后，使用 pod -version 检查

flutter-cocoapods-install

5. 安装 iOS 模拟器#

Terminal window

1
xcodebuild -downloadPlatform iOS

这个命令会触发 Xcode 从 App Store 或其他源下载 iOS 模拟器所需的组件，如果它们尚未安装。

使用以下命令启动 iOS 模拟器：

Terminal window

1
open -a Simulator

6. 安装 Android Studio#

和 Windows 一样，要在 Android 设备上构建并运行 Flutter 程序都需要先安装 Android Studio

报错集锦#

上面全部安装完成后，执行 flutter doctor

flutter-android-sdk-error

cmdline-tools component is missing#

需要安装 Android SDK command-line Tools

flutter-android-sdk

Android license status unknown#

解决方案

结果#

vsCode flutter 环境配置#

在插件栏中搜索 Flutter，安装最多人安装的那几个

第一个 flutter 应用#

阅读给 Web 开发者的 Flutter 指南

使用 Flutter 应用模板创建第一个 flutter 应用

cmd + shift + p 输入 flutter 选择 Flutter: New Project 创建一个项目`，首次需要设置 flutter SDK 位置
选择 Flutter 项目类型，选择 Application
- Application：Flutter Application 表示一个 Flutter 项目，主体是 Flutter，当然它也可以接入 Android Module 或者 iOS Framework，其内部包含 Android 和 iOS 项目
- Module：Flutter Module 用于原生项目中插入 Flutter 模块，原生为主体，与 Flutter 进行混合开发
- Package：Flutter Plugin 基本一样，唯一的区别是 Flutter Package 表示纯 Flutter 模块，不需要原生开发，没有 Android 和 iOS 项目，比如开发一个纯 UI 的插件
- Plugin：表示 Flutter 插件，包含 Android 和 iOS 项目，如果你要开发一个 Plugin 且此 Plugin 涉及到原生支持，比如蓝牙功能、网络功能等，这些功能纯 Flutter 是无法实现的
其目录比 Flutter Application 多了一个 example，example 用于当前 Plugin 的 demo， Flutter Plugin 开发完成后可以发布到 pub 上
完成后，需要选择目录以及项目名称
开始创建，回车后 VSCode 自动创建 flutter 项目，需要稍等片刻

flutter-vscode-create
创建完成

flutter-vscode-create1

项目目录#

flutter-application-tree

其中各个目录说明如下：

.dart_tool：Flutter 和 Dart 工具生成的缓存文件和工具配置文件，通常不需要手动修改
.idea：IntelliJ IDEA 的项目配置文件夹，包含了一些 IDE 相关的设置
android：包含了用于生成 Android 应用的所有文件和配置，主要使用 Java 或 Kotlin 编写
ios：包含了用于生成 iOS 应用的所有文件和配置，主要使用 Objective-C 或 Swift 编写
lib：存放 Dart 代码的主要目录，包括 Flutter 应用的所有业务逻辑和界面代码。通常会有一个 main.dart 文件作为应用的入口，是 Flutter 项目的核心目录，我们写的代码放在这个目录，我们也可以在这个目录创建子目录。
- main.dart: Flutter 应用的入口文件。通常包含 void main() => runApp(MyApp()); 方法来启动应用。
- 其他文件和目录：你可以在这里组织你的应用代码，如页面（screens）、组件（widgets）、状态管理（state management）等。
linux：包含了用于生成 Linux 应用的所有文件和配置。
macos：包含了用于生成 macOS 应用的所有文件和配置。
test：存放测试代码的目录，用于写单元测试、集成测试等。
web：包含了用于生成 Web 应用的所有文件和配置。
windows：包含了用于生成 Windows 应用的所有文件和配置。
.metadata：Flutter 项目的元数据文件，记录了一些项目的配置和状态信息
analysis_options.yaml：Dart 静态代码分析的配置文件，用于设置代码规范和规则
flutter_application_1.iml：IntelliJ IDEA 生成的项目配置文件。
pubspec.lock：记录项目当前使用的具体版本的依赖，确保团队中每个人使用的依赖版本一致
pubspec.yaml：Flutter 项目的配置文件，包含项目的名称、描述、依赖项、开发依赖项等，类似于 package.json
- name: 项目的名称。
- description: 项目的简短描述。
- publist_to：防止我们使用 flutter pub publish 命令将其发布到 pub.dev 上，https://pub.dev/ 相当于 https://www.npmjs.com/
- dependencies: 项目的依赖项。
- dev_dependencies: 开发过程中使用的依赖项。
- flutter: Flutter 特定的配置，包括资源文件（assets）、字体（fonts）等。

运行项目#

运行项目前，需要先选择设备，输入 cmd + shift + p 输入 flutter 选择 Flutter: Select Device
flutter run 启动应用
启动完成，如下

flutter-application-success
使用以下命令来检查和修复依赖项
Terminal window
```
1
# 相当于npm i
2
flutter pub get
```
使用以下命令来创建新的 Dart 文件或 Flutter 组件
Terminal window
```
1
flutter create my_new_component
```

翔子的博客

mcp-server

使用工具#

安装#

NocoDB学习笔记

是什么#

核心功能#

丰富的电子表格界面#

程序访问#

用户操作日志集中保存#

协作能力#

NocoDB 术语#

RESTAPI#

WebHook#

NocoDB 与 NocoBase 的区别#

supaBase学习笔记

是什么#

核心功能#

serverless Functions#

使用 CLI 连接 Supabase 远程项目#

Supabase CLI 与 Docker#

需要 Docker 的场景#

不需要 Docker 的场景#

依赖安装#

初始化#

密钥#

对比#

最佳实践#

TypeScript 支持#

生成 types#

Supabase CLI#

数据库操作#

vue 快速入门#

打通默认的 auth.users 表（身份认证表）和自定义的 user 表（业务用户表）#

遇到问题#

小结#

跟着卡哥学算法Day 51：图论part2 岛屿问题

99. 岛屿数量#

题目描述#

解题思路#

代码#

99. 岛屿数量 广度优先搜索#

bfs 和 dfs 代码区别#

岛屿的最大面积#

与岛屿数量的差异#

跟着卡哥学算法Day 50：图论理论基础 & part1

图#

基本概念#

图的种类#

度#

连通图/强连通图#

连通分量/强连通分量#

图的构造#

图的遍历方式#

深度优先搜索#

dfs 和 bfs 区别#

dfs 搜索过程#

代码结构#

深搜三部曲#

所有可达路径#

题目描述#

解题思路#

图的存储#

深度优先搜索#

代码#

广度优先搜索#

使用场景#

广搜的过程#

代码框架#

跟着卡哥学算法Day 49：单调栈 part2

42. 接雨水 🌟🌟#

题目描述#

解题思路#

暴力法#

双指针优化#

单调栈#

84.柱状图中最大的矩形 🌟🌟#

题目描述#

解题思路#

暴力法#

99. 岛屿数量广度优先搜索#