(╹ڡ╹ ) 的博客

WebScoket

Fri, 12 Jun 2026 13:50:23 GMT

在 Web 应用早期，浏览器和服务器之间的通信几乎完全依赖 HTTP 请求。用户点击按钮，浏览器发起请求，服务器返回响应。这种模式简单、可靠，也非常适合传统页面加载和表单提交。

但随着聊天系统、在线协作、实时行情、多人游戏、消息通知等场景出现，传统 HTTP 的“一问一答”模式开始显得笨重。客户端想要知道服务器有没有新消息，就必须不断轮询服务器。轮询不仅浪费带宽，也增加服务器压力，实时性还不够理想。

WebSocket 正是在这种背景下出现的。它让浏览器和服务器之间建立一条持久的双向通信通道，使双方都可以随时主动发送消息。

一、WebSocket 是什么？

WebSocket 是一种基于 TCP 的全双工通信协议。它允许客户端和服务器在一次连接建立后，持续保持通信通道，并且双方都能主动向对方发送数据。

简单来说，HTTP 更像是：

客户端：你有新消息吗？
服务器：没有。

客户端：你有新消息吗？
服务器：没有。

客户端：你有新消息吗？
服务器：有，给你。

WebSocket 更像是：

客户端：我们建立一个长期连接吧。
服务器：可以。

服务器：有新消息了，直接发给你。
客户端：收到。

这种模式非常适合实时性要求较高的业务。

二、WebSocket 和 HTTP 的关系

WebSocket 并不是 HTTP 的替代品，而是对 HTTP 通信能力的一种补充。

WebSocket 的连接通常从一个 HTTP 请求开始。客户端会发送一个带有 Upgrade 头的 HTTP 请求，告诉服务器：“我想把这个连接升级成 WebSocket。”

示意请求如下：

GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: xxx
Sec-WebSocket-Version: 13

如果服务器支持 WebSocket，就会返回类似响应：

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: xxx

状态码 101 Switching Protocols 表示协议切换成功。之后，这条连接就不再按照普通 HTTP 请求响应模式通信，而是进入 WebSocket 双向通信阶段。

三、为什么不用 HTTP 轮询？

在 WebSocket 普及之前，实时通信常见方案主要有三种：

短轮询
1. 短轮询最简单，客户端每隔几秒请求一次服务器。但如果大多数请求都没有新数据，就会造成大量无效请求。
长轮询
1. 长轮询比短轮询稍好。客户端发送请求后，服务器如果没有新数据，会暂时挂起请求，直到有数据或超时再返回。它减少了一些无效请求，但本质上仍然是 HTTP 请求响应模型。
Server-Sent Events
1. Server-Sent Events，简称 SSE，允许服务器持续向客户端推送事件。但它主要是单向通信：服务器推给客户端。如果客户端也要频繁发送消息，仍然需要 HTTP 请求配合。

WebSocket 的优势在于，它是真正的双向通信。客户端和服务器都可以主动发送数据，通信开销更低，实时性更好。

四、WebSocket 的核心特点

1. 全双工通信

WebSocket 最大的特点是全双工。连接建立后，客户端和服务器可以同时发送和接收消息，不需要等待对方先发起请求。这对聊天、直播弹幕、在线游戏、协作文档等场景非常重要。

2. 持久连接

WebSocket 建立后会保持连接，除非客户端、服务器或网络主动断开。相比 HTTP 每次请求都要携带大量头部信息，WebSocket 后续数据帧更轻量。

3. 低延迟

由于连接已经建立，后续通信不需要重复握手。服务器有数据时可以立刻推送给客户端，因此延迟通常比轮询方案更低。

4. 支持文本和二进制数据

WebSocket 可以传输文本，也可以传输二进制数据，比如图片片段、音视频数据、协议缓冲区数据等。

五、WebSocket 适合哪些场景？

WebSocket 不是所有业务都需要，但在以下场景中非常有价值：

即时聊天
在线客服
实时通知
协作文档
实时看板
股票、币价、体育比分等实时行情
多人在线游戏
直播间弹幕
在线代码协作或远程终端

判断是否需要 WebSocket，可以问一个简单问题：“服务器是否需要在客户端没有请求时，主动把数据推给客户端？”，如果答案是肯定的，WebSocket 很可能是合适方案。

六、浏览器中如何使用 WebSocket？

由于浏览器原生支持 WebSocket API，使用非常简单。

const socket = new WebSocket("wss://example.com/socket");

socket.addEventListener("open", () => {
  console.log("WebSocket connected");
  socket.send(JSON.stringify({ type: "hello" }));
});

socket.addEventListener("message", (event) => {
  const data = JSON.parse(event.data);
  console.log("Received:", data);
});

socket.addEventListener("close", () => {
  console.log("WebSocket closed");
});

socket.addEventListener("error", (error) => {
  console.error("WebSocket error:", error);
});

其中：

ws:// 类似 HTTP
wss:// 类似 HTTPS，表示加密 WebSocket 连接

生产环境中应优先使用 wss://，避免通信被窃听或篡改。

七、服务端简单示例

以 Node.js 的 ws 库为例：

import { WebSocketServer } from "ws";

const wss = new WebSocketServer({ port: 8080 });

wss.on("connection", (socket) => {
  console.log("client connected");

  socket.on("message", (message) => {
    console.log("received:", message.toString());

    socket.send(JSON.stringify({
      type: "echo",
      payload: message.toString()
    }));
  });

  socket.on("close", () => {
    console.log("client disconnected");
  });
});

这个例子中，服务器接收客户端消息后，会原样返回一条 echo 消息。

真实业务中，服务端通常还需要处理身份认证、房间管理、消息广播、心跳检测、限流、断线重连等问题。

八、WebSocket 的常见问题

1. 身份认证

WebSocket 连接建立后不像普通 HTTP 请求那样每次都携带完整请求上下文，因此认证需要提前设计。

常见方式有：

在连接 URL 中携带短期 token
在 WebSocket 子协议中传递认证信息
连接建立后发送认证消息
借助 Cookie 和服务端 Session

例如：

const socket = new WebSocket("wss://example.com/socket?token=xxx");

不过 URL 中的 token 可能出现在日志里，因此更推荐使用短期、可撤销、权限有限的 token。

2. 心跳检测

网络连接可能因为代理、NAT、防火墙或移动网络切换而悄悄断开。客户端和服务器不能只依赖 close 事件判断连接是否还活着，因此通常需要心跳机制。一种常见方式是：

客户端定时发送 ping
服务器收到后返回 pong
如果连续多次没有 pong，客户端主动重连

服务端也可以主动发送 ping，用于清理已经失效的连接。

3. 断线重连

WebSocket 是长连接，但长连接并不意味着永远连接。网络抖动、服务重启、页面休眠、移动端切网都可能导致断开。客户端应该实现重连机制，并且最好使用指数退避，避免大量客户端同时重连压垮服务器。

// 示意逻辑：

let retryCount = 0;

function connect() {
  const socket = new WebSocket("wss://example.com/socket");

  socket.onopen = () => {
    retryCount = 0;
  };

  socket.onclose = () => {
    const delay = Math.min(1000 * 2 ** retryCount, 30000);
    retryCount += 1;
    setTimeout(connect, delay);
  };
}

connect();

4. 消息可靠性

WebSocket 只负责传输，不天然保证业务层消息一定被正确处理。如果业务对可靠性要求高，比如订单状态、交易通知、协作文档操作，就需要设计：

消息 ID
ACK 确认机制
消息重试
去重处理
服务端消息持久化
客户端断线后补拉未读消息

例如，客户端发送消息：

{
  "id": "msg_123",
  "type": "chat.message",
  "payload": {
    "text": "hello"
  }
}

服务器处理后返回：

{
  "type": "ack",
  "id": "msg_123"
}

这样客户端才能知道这条消息是否真正被服务端接收。

5. 水平扩展

单机 WebSocket 很容易理解，但真实生产环境往往是多台服务器。问题在于：用户 A 连接在服务器 1，用户 B 连接在服务器 2。如果 A 给 B 发消息，服务器 1 需要某种方式把消息转给服务器 2。

常见解决方案包括：

使用 Redis Pub/Sub
使用 Kafka、RabbitMQ、NATS 等消息系统
使用统一网关管理连接
使用粘性会话让同一用户尽量连接到固定实例

架构可以简化理解为：

Client A -> WebSocket Server 1
Client B -> WebSocket Server 2

Server 1 -> Message Broker -> Server 2

消息系统在这里承担跨实例广播和解耦的作用。

九、WebSocket 和 SSE 怎么选？

如果业务只是服务器向客户端单向推送，比如通知流、日志流、状态更新，SSE 可能更简单。
如果业务需要客户端和服务器频繁双向通信，比如聊天、游戏、协作编辑，WebSocket 更合适。

简单对比：

特性	WebSocket	SSE
通信方向	双向	服务器到客户端
协议	独立协议，HTTP Upgrade 后切换	基于 HTTP
浏览器支持	广泛支持	广泛支持
二进制支持	支持	不直接支持
自动重连	需要自己实现	浏览器原生支持
适合场景	聊天、游戏、协作	通知、日志、行情推送

十、生产环境最佳实践

使用 WebSocket 时，建议遵循这些原则：

生产环境使用 wss://
设计清晰的消息协议
每条重要消息带唯一 ID
做好认证和权限校验
实现心跳检测
实现断线重连
服务端清理失效连接
对连接数和消息频率限流
避免把 WebSocket 当成数据库同步工具滥用
对关键消息做持久化和补偿
多实例部署时引入消息中间件
监控连接数、消息延迟、断线率和错误率

一个成熟的 WebSocket 系统，难点通常不在“建立连接”，而在连接之后的治理。

十一、一个推荐的消息格式

为了让 WebSocket 通信更可维护，建议定义统一消息结构：

{
  "id": "msg_001",
  "type": "chat.message",
  "timestamp": 1710000000000,
  "payload": {
    "roomId": "room_1",
    "content": "Hello WebSocket"
  }
}

其中：

id 用于追踪和去重
type 用于区分消息类型
timestamp 用于排序和调试
payload 存放业务数据

错误消息也应标准化：

{
  "type": "error",
  "code": "UNAUTHORIZED",
  "message": "Authentication failed"
}

这样前后端就能围绕协议协作，而不是在大量零散字段中互相猜测。

十二、总结

WebSocket 解决的是 Web 应用中的实时双向通信问题。它通过一次握手建立持久连接，让客户端和服务器可以低延迟、低开销地互相发送消息。

它非常适合聊天、协作、游戏、实时看板和行情推送等场景。但 WebSocket 不是简单地“连上就完事”。真正的工程重点在于认证、心跳、重连、消息可靠性、水平扩展和监控治理。

如果只是单向推送，SSE 可能更轻量；如果需要频繁双向通信，WebSocket 通常是更好的选择。

WebSocket 让 Web 从“客户端主动询问”走向了“服务端实时对话”，但要把它用好，需要的不只是协议能力，更是完整的实时系统设计。

Agent Client Protocol 初学习

Sat, 06 Jun 2026 04:36:08 GMT

认识 Agent Client Protocol

什么是 Agent Client Protocol？

Agent Client Protocol（简称 ACP）是一种专门用于 AI Agent 与客户端（编辑器、IDE、终端、Web 应用等）之间通信的开放协议，用来规范 AI 编码智能体与代码编辑器 / IDE 等客户端之间如何交互、同步状态和下发命令。

简单来说，ACP 定义了一套统一的通信标准，让任何支持 ACP 的编辑器都可以连接任何支持 ACP 的 AI Agent。

ACP 的核心目标，是让任何代码编辑器可以连接任何 AI 编码智能体，通过一套统一协议完成会话管理、能力协商、状态同步和操作执行，解决的就是 “编辑器如何与 AI 编码代理通信” 的问题。

例如 VS Code、Cursor、Windsurf、JetBrains IDE、自研 IDE 等等类似的产品都属于 Client（客户端），而 Claude Code、OpenAI Codex Agent、Gemini CLI、Aider、自研 Coding Agent 都属于 Agent，ACP 就是他们之间通信连接的“通用语言”。

为什么会产生 Agent Client Protocol？

在 ACP 出现之前：

VS Code   <--私有协议-->  Claude Code
Cursor    <--私有协议-->  Claude Code
JetBrains <--私有协议-->  Claude Code
Windsurf  <--私有协议-->  Claude Code

每一个编辑器都要单独适配 Claude Code、单独适配 Codex、单独适配 Gemini …，而每个 Agent 也要：单独支持 VS Code、单独支持 Cursor、单独支持 JetBrains …，产生出 N × M 个适配问题，可以想象如果没有一个统一的通信协议，这些 Client（客户端）和 Agent 之间通信连接的建立与维护，成本都是极高的。

同时，AI 智能体任务越来越长时、多步、需要频繁读写文件、调用终端，缺少统一协议会导致过程不可观测、结果不可复现、权限控制混乱，就难以满足企业落地和团队协作的需求。

以上这些问题正是 ACP 产生的根本原因：

AI 编码智能体越来越强大，而编辑器与智能体之间缺少统一标准，导致生态割裂、重复适配成本高。ACP 通过定义 Agent 与 Client 的标准通信协议，实现 “任意客户端连接任意 Agent” 的互操作能力。

理解 Agent Client Protocol

理解 ACP，最重要的不是把所有 method 名背下来，而是抓住它的几个核心概念和流程。

Client 和 Agent：谁负责什么？

在 ACP 的世界里有两个角色：

Client（客户端）
- 典型角色：VS Code、JetBrains、Zed、Neovim 插件、自研 Web IDE、命令行工具等。
- 职责：
  - 与用户交互（UI、输入输出）。
  - 掌控本地能力：文件系统、终端/命令执行、网络访问、弹窗等。
  - 决定是否给 Agent 授权执行某些操作，并记录日志做审计。
Agent（智能体）
- 典型角色：一个使用大模型的编码助手服务，可以运行在本地进程或远程服务器。
- 职责：
  - 理解用户需求、分析代码、规划修改方案。
  - 通过 ACP 请求 Client 提供所需的环境能力（读文件、写文件、运行测试等）。
  - 以流式消息、事件形式把思考过程和结果反馈给 Client。

两者之间通过 ACP 交流，一端发 JSON‑RPC 请求/通知，一端响应或推回事件，形成一个完整的事件流。

JSON‑RPC 是什么？

JSON‑RPC 的核心概念

JSON‑RPC（JavaScript Object Notation Remote Procedure Call）：

是一种基于 JSON 的远程过程调用协议，本质是用 JSON 来描述“调用某个远程函数”的请求和结果。
它不规定我们调用时必须用什么传输层（可以是 HTTP、WebSocket、TCP、自定义管道甚至标准输入输出），只规定消息的格式。
目标是让两个进程/服务之间的通信看起来就像是本地函数调用：
- 指定方法名（method）
- 传入参数（params）
- 得到返回值（result 或 error）

我们可以把它当成用 JSON 写的 RPC 协议，和 REST 那种资源 + HTTP 动词风格不太一样，它更偏向直接调用函数。

JSON‑RPC 的三种消息类型

在 JSON‑RPC 2.0 里，有三种核心消息形式：

请求（Request）
- 有 id 字段。
- 结构大致是：
```
{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "someMethod",
  "params": { "foo": "bar" }
}
```
- 含义：我要调用你那边名为 someMethod 的方法，参数是 params，请给我一个响应。

响应（Response）

必须带上对应请求的 id。

成功时包含 result，失败时包含 error：

{
  "jsonrpc": "2.0",
  "id": 1,
  "result": { ... }
}

或

{
  "jsonrpc": "2.0",
  "id": 1,
  "error": { "code": -32602, "message": "Invalid params" }
}

通知（Notification）
- 没有 id，表示不需要响应。
- 结构类似请求：
```
{
  "jsonrpc": "2.0",
  "method": "log",
  "params": { "level": "info", "message": "hello" }
}
```
- 场景：发日志、发进度事件、发状态变更，不需要对方回一个响应。

JSON‑RPC 的几个特点

轻量：消息就是 JSON，易读易调试。
无状态：协议层不强制会话概念（像 ACP 这样需要会话，会自己在 params 里带 sessionId）。
双向：只要底层连接是双向（如 WebSocket / stdio），双方都可以当「客户端」发请求，对方当「服务端」响应。
支持批量调用：可以一次发一个 JSON 数组，里面多个请求一起处理。

初始化与能力协商

ACP 一切交互的起点是 initialize。

当 Client 启动并连接到一个 ACP Agent 时，它会先发送一个 initialize 请求，用来协商：

协议版本（protocolVersion）
彼此支持的能力和扩展
协商身份验证方法
一些基础元信息（客户端名称、Agent 名称等）

这一步的意义在于：

避免版本不兼容：比如 Client 是 v1，Agent 是 v2，就可以在这里检测并处理。
让双方提前知道对方支持哪些扩展功能，比如是否支持某种文件系统 API、是否支持多 Agent 协作等。

写在代码层，我们基本可以抽象成一个 acpClient.initialize() 的高层调用，之后所有方法都建立在这一步成功的前提下。

这其实就是相当于在让客户端和智能体建立连接，连接建立后，我们可以进行身份认证，然后创建会话并开始与智能体的对话。

更详细信息的可查看官方文档：https://agentclientprotocol.com/protocol/v1/initialization

会话管理：session 是一条「长期关系」

ACP 里有一个非常重要的概念：session（会话）。

Client 会调用 session/new 创建一个新的会话，通常会附带一些上下文信息，比如当前工作目录、项目路径、打开的文件列表等。
返回的 sessionId 用来标识接下来的一整段交互（类似一个长期聊天频道），后续的所有 prompt、工具调用、状态更新都挂在这个 session 下面。

可以这样类比：

如果说 HTTP 请求偏向于一次性的动作交换，那么 ACP 的 session 更像是一个长期的工作房间，你和 Agent 在同一个房间里做很多轮对话和修改。

在代码设计上，我们可以把 session 映射为一个对象，比如：

const session = await acpClient.newSession({ cwd: projectPath });
// 后续所有与这个项目相关的提示都用 session.id

这样我们的 UI 或后端可以轻松地把某个项目或某个 tab 绑定到一个 session 上面。

详细内容可见官方文档：https://agentclientprotocol.com/protocol/v1/session-setup

一次完整交互：prompt turn

在 session 之上，ACP 定义了一次完整往返的单位：prompt turn。

官方的定义是：一次 prompt turn 是从用户发出一条消息开始，到 Agent 完成这一轮响应（或被终止）为止的完整交互周期。

官方文档：https://agentclientprotocol.com/protocol/v1/prompt-turn

在我们的真实项目中：

Client 通过 session/prompt 发起一次 prompt turn：
- 指定 sessionId
- 带上当前这一轮的用户消息（可以是文本、代码片段等富内容）
Agent 收到后开始工作，在这一轮期间会以事件流的方式不断往回推：
- 流式输出 token / 分段消息（让你实现「打字机」效果）。
- 工具调用请求（比如请求读文件、执行命令）。
- 权限请求（例如想修改哪些文件）。
- 进度和状态事件。
当 Agent 觉得这轮结束了，会发一个「完成」的事件，该轮 turn 宣告结束，下一轮 prompt 可以开始。

我的理解就是，session/prompt 是 ACP 的函数调用，而 prompt turn 是这次调用从开始到结束的整个生命周期。

为什么使用函数调用来打比方，是因为 ACP（以及底层的 JSON‑RPC）本质上就是：一端给另一端发我要调用你某个方法的请求，对方执行完再把结果返回。

这个模式和我们在代码里写 someFunction(params) 很像，所以用函数调用来帮助理解协议里的一次请求与响应是什么关系。

所以，我们可以暂时先忘掉高级 AI 概念，只把 ACP 当作两段程序之间远程互相调函数的规则。

工具调用、文件系统和权限

强大的 Agent 必须能够操作环境：读写文件、运行测试、调用外部服务。ACP 在这里提供了一个统一的工具调用接口层，典型能力包括：

文件系统（fs）相关方法：
- 读取文件内容、列目录、写入或创建文件等。
终端 / 命令执行：
- 运行 npm test、pytest、编译命令等，把 stdout/stderr 结果回给 Agent。
权限请求：
- Agent 不直接「悄悄改文件」，而是通过类似 session/request_permission 请求，告知我想修改 A、B、C 这几个文件，由 Client 弹窗给用户确认，然后再执行。

这一层是 ACP 特别适合企业和团队场景的原因之一，它安全、可控、可审计，而不是让 Agent 获得完全不受控的本地能力。

官方文档：

agentclientprotocol.com

Tool Calls - Agent Client Protocol

How Agents report tool call execution

https://agentclientprotocol.com/protocol/v1/tool-calls

agentclientprotocol.com

File System - Agent Client Protocol

Client filesystem access methods

https://agentclientprotocol.com/protocol/v1/file-system

总结

以上知识我在看 Agent Client Protocol 文档，了解学习 ACP 的一次初学习理解记录，如果想要深入，还是应该动手先跑一遍最小 demo，再实际中学习基础用法，然后再考虑将它落实道自己最熟悉的应用形态里面。但是以上提到的 ession + prompt turn + 事件流 + 工具调用，算是 ACP 的一个主线流程，我们可以先理解这个，再慢慢在实践中进行深入学习。

双Token校验机制

Sat, 23 May 2026 06:04:04 GMT

为什么需要双 Token？

单 Token 模型通常存在一个核心矛盾：安全性与用户体验难以兼顾。
- 如果 Token 过期时间很短：安全性高，但用户频繁掉线
- 如果 Token 过期时间很长：用户体验好，但一旦泄露风险极大
双 Token 的核心思路是：把“短期访问权限”和“长期刷新能力”拆开。
- Access Token：短期有效（例如 5~30 分钟），用于接口请求
- Refresh Token：长期有效（例如 7~30 天），用于换取新的 Access Token

这样一来，即使 Access Token 被窃取，攻击窗口也被压缩在较短时间内。

双 Token 的核心原理

双 Token 机制包含两个核心令牌：Access Token（访问令牌）和Refresh Token（刷新令牌），二者有效期、用途、存储方式完全不同，可以精准解决单 Token 的所有痛点。

双令牌核心差异对比

特性维度	Access Token（访问令牌）	Refresh Token（刷新令牌）
核心用途	用于所有业务接口鉴权，证明用户实时身份	仅用于刷新 Access Token，不参与任何业务请
有效期	短期有效，建议 15~30 分钟	长期有效，建议 7~30 天
安全级别	低风险、高频使用，泄露后仅短期有效	高风险、低频使用，是身份续期的唯一凭证
存储方式	前端内存/普通存储，随请求携带	优先 HttpOnly Cookie，杜绝 XSS 窃取

通俗化理解

可以把双 Token 机制类比为「景区通行体系」：

Access Token = 一次性入园门票：有效期短，只能用于游玩参观（访问业务接口），过期立即失效，丢了也影响不大
Refresh Token = 次卡（可以凭次卡换取入园门票）：有效期长，不能直接入园游玩，但可以凭此免费兑换新的一次性入园门票（刷新 Access Token）

这套机制的核心逻辑：用短期令牌承担高频业务风险，用长期令牌保障登录连续性，从而达到风险隔离。

双 Token 基本业务流程

完整的双 Token 登录、鉴权、刷新流程，覆盖用户从登录到退出的全生命周期，是实现无感刷新的核心依据。

首次登录流程

用户输入账号密码，前端提交登录请求至后端
后端校验账号密码无误后，同时生成两个 Token：短期 Access Token、长期 Refresh Token
后端返回双 Token 给前端，同时将 Refresh Token 关联用户信息存入 Redis（用于失效管控）
前端接收令牌：Access Token 存入内存/本地存储，Refresh Token 写入 HttpOnly Cookie
登录成功，跳转首页，后续所有业务请求携带 Access Token 鉴权

正常业务请求流程

前端发起接口请求，请求头自动携带 Access Token
后端校验 Token 有效性（是否过期、签名是否正确）
校验通过，正常返回业务数据；校验失败，返回对应状态码 401

核心：Token 过期无感刷新流程

当 Access Token 过期、Refresh Token 未过期时，触发无感刷新，用户全程无感知，无需重新登录：

前端请求接口，后端检测 Access Token 过期，返回 401 Token 过期状态码
前端拦截器捕获 401 错误，暂停当前所有业务请求，防止重复报错
前端携带 Refresh Token，单独发起刷新 Token 专用请求
后端校验 Refresh Token 有效且未过期，生成全新的 Access Token返回前端
前端更新本地 Access Token，重新发起之前失败的业务请求
请求成功，用户正常操作，全程无弹窗、无跳转

注意点

双 Token 不是万能方案，若存储和使用不当，依然存在安全漏洞。

令牌存储安全区分

Access Token：推荐存入 localStorage/sessionStorage + 内存，不长期留存，即使被 XSS 窃取，短时间过期风险低
Refresh Token：禁止存入本地存储，必须存入 HttpOnly + Secure Cookie，杜绝 XSS 攻击窃取，仅允许后端读取

前端逻辑容错优化

增加请求锁机制：避免多个接口同时 401，重复发起刷新 Token 请求，造成接口冗余
失败请求队列缓存：刷新 Token 期间的所有请求排队等待，刷新成功后批量重试，保证业务不中断
主动过期预判：前端可在 Access Token 过期前 5 分钟主动触发刷新，规避用户操作卡顿

Chrome DevTools MCP

Sat, 16 May 2026 13:50:03 GMT

前言

最近读到一篇关于 Chrome DevTools MCP 的博客，文章系统介绍了 Claude Code 配合 Chrome DevTools MCP 做页面抓取、前端调试等的使用。看完感觉这个功能确实还挺好的，所以决定在自己的项目里试一试 Chrome DevTools MCP 的“抓取页面学习在线文档”以及“前端调试”的功能。

一、Chrome DevTools MCP 到底是什么

在展开实践之前，先简单说一下这个工具的本质。

Chrome DevTools MCP 是一个 MCP（Model Context Protocol）服务，它让 Claude Code 获得了操控 Chrome 浏览器的能力。装上它之后，Claude Code 不再只是”在终端里和你对话”，而是可以：

打开任意网页
读取页面上的 DOM 结构和文本内容
查看浏览器控制台的输出
检查网络请求的状态
与页面元素进行交互（点击、输入、滚动等）
截图并分析页面视觉内容

安装方式非常简单：

claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

安装完成后在 Claude Code 里输入 claude mcp list，确认 chrome-devtools 出现在工具列表里就行了。

关键点在于：它复用的是你当前已经打开的 Chrome 浏览器会话。这意味着，如果你已经在浏览器里登录了某个系统，Claude Code 通过这个 MCP 就能直接访问你需要登录才能看到的页面——这一点对”自动学习在线文档”场景非常重要，因为很多内部文档系统是需要登录的。

二、配合 Claude Code，这套组合能做什么

Chrome DevTools MCP 给 Claude Code 增加了一个维度的能力：从”理解代码”扩展到”理解网页”。配合 Claude Code 本身的代码理解和生成能力，可以做的事情非常多。

下面是我实际用过或者验证过的场景：

2.1 页面数据抓取

这是最直观的用途。用自然语言告诉 Claude Code 你要从哪个页面抓什么数据，它会自动打开页面、分析 DOM、提取信息并以结构化格式返回。

比如你可以说：“帮我打开 XX 后台的运营数据页面，把今天的核心指标（UV、PV、转化率）抓出来。“它不需要你写任何选择器或爬虫脚本。

和传统爬虫的区别：传统爬虫需要你分析页面结构、写选择器、处理反爬机制。Chrome DevTools MCP 走的是”像人一样浏览”的路线，它复用你的真实浏览器会话，所以登录态、Cookie、JavaScript 渲染的内容都能正常获取。

2.2 前端问题诊断

当页面出现异常时，你可以让 Claude Code 直接打开页面，帮你做一轮”AI 版的前端排查”：

检查控制台有没有报错
看网络请求有没有失败的
分析 DOM 结构是否符合预期
检查某些关键元素是否渲染出来了

它会把排查结果整理成报告，告诉你”哪里有问题、可能的原因是什么、建议怎么修”。

2.3 UI 还原度检查

设计稿交付之后，前端同学写完了页面，怎么确认还原度？可以让 Claude Code 同时打开设计稿页面和开发页面，对比两者的布局、间距、颜色等视觉差异。虽然不能完全替代人工 review，但能快速发现明显的不一致。

2.4 自动化回归

代码改完之后，你可以让 Claude Code 自动打开页面、执行一系列操作（比如点击按钮、填写表单、提交请求），然后检查结果是否符合预期。这相当于一个”自然语言驱动的 E2E 测试”。

2.5 多站点信息对比

如果你需要对比同一类信息在不同站点上的展示差异（比如竞品分析），可以让 Claude Code 同时打开多个页面，提取关键信息并做横向对比。

2.6 自动学习在线文档

让 AI 帮你系统阅读文档站，把关键知识提炼出来，再带着这些知识修改项目，要比自己一点一点去看要快速并且准确很多。

三、前端调试

3.1 传统前端调试的痛点

关于前端调试，对于我自己来说，真正耗时间的其实不是”看报错”本身，而是看完报错之后的分析和修复过程。

举个例子：页面上一个组件渲染异常，Console 里报了一个 Cannot read properties of undefined。传统排查流程是：

看报错堆栈，定位到某一行代码
打断点或加 console.log，看变量的值
发现某个 props 没传对，去查父组件的逻辑
父组件的数据来自一个 API，去查 API 返回格式
API 返回格式和文档描述不一致，去翻文档确认
最后发现是自己对某个参数的理解有误

这个流程里，第 5 步和第 6 步才是真正决定修复方向的关键，但它们也是最耗时间的——因为你需要在浏览器、IDE、文档站点之间来回切换。

当然，现在借助于 AI 可能找错误要比上面流程要快速简单很多，但是还是免不了要在不同页面进行切换，并且面对复杂一些的报错问题，可能还是需要自己去翻文档。

3.2 用 Chrome DevTools MCP 做”调试 + 文档”一体化排查

Chrome DevTools MCP 的价值不只是让 AI 能”看页面”，更在于它能让 AI 在同一个上下文里完成”看报错 → 查文档 → 给方案”的完整闭环。

我实际使用中的典型流程大概是类似于这样的：

我项目里 src/views/order/OrderDetail.vue 页面，
订单详情里的商品列表渲染不出来，页面白了一块。
请使用 Chrome DevTools 打开 http://localhost:3000/order/123，
帮我排查问题。如果涉及到第三方组件库的用法，
请同时打开对应的文档页面确认正确用法。

这个工具在这里主要的作用其实就在最后一句话，“如果涉及到第三方组件库的用法，请同时打开对应的文档页面确认正确用法”。

AI 收到这个指令后，会做以下事情：

打开页面，截图查看当前状态 — 确认”白了一块”具体是哪个区域
查看 Console 报错 — 发现有 TypeError: Cannot read properties of undefined (reading 'map')
查看 Network 请求 — 确认 API 返回的数据结构
读取项目代码 — 定位到 OrderDetail.vue 里渲染商品列表的逻辑
打开组件库文档 — 确认 Table 组件的 dataSource 格式要求
交叉比对 — 发现 API 返回的商品列表字段名是 items，但代码里写的是 list

整个过程 AI 就是在一个连贯的思维链里完成的，不需要像人一样在浏览器、IDE、文档之间来回跳转，所以分析速度更快，也更不容易遗漏线索。

3.3 调试过程中 AI 能做到的事

总结一下，在前端调试场景中，Chrome DevTools MCP 让 Claude Code 能做到这些：

看得到：打开页面、截图、查看 DOM 结构、读取元素属性、查看 Console 输出、检查 Network 请求。
查得到：根据调试过程中发现的问题，自动打开相关的文档页面，确认正确用法。
想得到：结合”页面上的实际表现”和”文档里的正确用法”，推断出问题的根本原因。
改得到：直接在项目代码里给出修改建议，你确认后就能应用。
验得到：代码改完后，自动刷新页面，重新检查功能是否正常、控制台有没有新的报错。

3.4 踩过的坑和经验教训

在使用这个工具的过程中，我也踩过一些坑，总结出来供参考：

文档页面有动态加载，AI 读到的内容不完整
1. 有些文档站点使用了懒加载或者需要交互才能展开内容（比如点击”展开详情”按钮）。这种情况下，AI 第一次打开页面可能只能看到首屏内容。
2. 解决办法：在指令里明确告诉 AI “如果页面有展开/折叠的内容，都要点开看一遍”。或者先手动打开页面，把需要关注的部分展开，再让 AI 来读。
文档版本和项目依赖版本不一致
1. 关于版本的问题，如果它读的是最新版（v5），但我的项目还在用 v3。结果 AI 给出的修改建议全部是基于 v5 的 API，直接用了就会报错。
2. 解决办法：在指令里明确指定文档版本，比如”请阅读 v3 版本的文档”。或者先确认自己项目的依赖版本，再告诉 AI 对应去读哪个版本的文档。
AI 给出的代码修改建议缺乏上下文
1. AI 读完文档后给出的修改建议，有时候会忽略项目里已有的封装。比如项目里已经对某个 API 做了二次封装，但 AI 不知道，直接用了原生 API 的写法。
2. 解决办法：在指令里补充项目上下文。比如”我的项目在 src/utils/request.ts 里对 axios 做了封装，所有 HTTP 请求都要走这个文件”。上下文给得越充分，AI 的修改建议就越准确。

所以其实,我们自己对于给 AI 的条件和约束也是很重要的

四、一些进阶用法

4.1 让 AI 帮你写文档

不只是”读文档”，也可以让 AI 通过 Chrome DevTools MCP 参考其他项目的文档风格，帮我们写自己项目的文档：

请使用 Chrome DevTools 打开 Element Plus 的组件文档
（地址：https://element-plus.org/zh-CN/component/button.html），
学习它的文档结构和写作方式，
然后为我项目 src/components/MyButton.vue 这个组件
写一份同样风格的 API 文档。

4.2 让 AI 帮你做竞品分析

如果我们想了解某个竞品的某个功能是怎么实现的，可以让 AI 打开竞品的页面，分析它的 DOM 结构和交互逻辑：

请使用 Chrome DevTools 打开 [竞品URL]，
分析它的 [功能名称] 是怎么实现的：
- 页面结构是什么样的
- 交互流程是怎样的
- 有哪些细节设计值得参考
整理成一份分析报告。

4.3 调试 + 文档驱动的”反向验证”

有时候我们想验证某个第三方库的文档是否准确。可以让 AI 读完文档后，直接在项目里按文档的写法试一下，然后用浏览器看看效果：

请使用 Chrome DevTools 阅读 [SDK] 的 [某功能] 文档，
然后在我项目里按照文档的示例写一个最小可运行的例子，
用浏览器打开看看文档里的写法是否真的能工作。
如果效果不对，帮我分析是文档写错了还是我理解错了。

五、总结

Chrome DevTools MCP 给 Claude Code 增加了”浏览器”这个维度的能力，让它从一个”代码助手”进化成了一个”全栈助手”。

这两个能力的结合的核心价值在于三个字：省切换 - 省时间。省掉了”浏览器和 IDE 之间的切换”、省掉了”读文档和写代码之间的切换”、省掉了”查 API 和用 API 之间的切换”、省掉了”看报错和查文档之间的切换”。

而且，在我们想要学习某个网址的文档的时候，可以直接读取这个网址的文档，直接为我们总结大纲、重点，帮助我们去快速的了解学习，从而可以给我们节省很多时间。

如何在浏览器中存储数据

Sat, 02 May 2026 09:38:17 GMT

在前端开发中，“让浏览器记住一些东西”几乎是所有稍微复杂一点的应用都会遇到的需求：保存用户登录状态、记录偏好设置、缓存接口数据、支持离线应用等。浏览器本地存储做得好，可以显著减少网络请求、提升页面性能和用户体验；做不好，则会很容易出现数据混乱、XSS 泄露隐私等问题。之前我只是对着其中的一两个用的比较多，熟悉一些，其他的只是知道，所以我现在就想做一个全面一些的对比总结。

一、为什么需要浏览器本地存储？

传统 Web 模式下，所有状态都由服务端维护，浏览器只是一个“渲染终端”。但随着前端单页应用、PWA 和离线应用的兴起，越来越多状态被下放到客户端管理，典型需求包括：

记住登录状态（Token、用户信息、权限等）
记录用户偏好（主题色、语言、布局等）
缓存接口数据，减少重复请求
在刷新或关闭页面后保留表单内容
支持弱网或离线场景下的使用

基于以上这些需求，我们就需要对传统的 Web 模式进行改进优化，即诞生了可以在客户端持久化数据，以减少对服务端的依赖，提高用户体验。

二、浏览器常见存储方式总览

目前主流浏览器中，前端常用的存储方案主要有：

Cookie
localStorage
sessionStorage
IndexedDB
（以及更偏缓存方向的 Cache API，文末会顺带提一下）

可以从几个维度来对比这些方案：容量、生命周期、是否参与网络请求、安全性和易用性。

一个常见的理解是：

少量、与服务端强相关、需要随请求发送 → Cookie
少量、长期存在、只在前端用 → localStorage
少量、只在当前标签页会话内有效 → sessionStorage
大量、结构化、需要查询/索引/事务 → IndexedDB

三、前置核心：浏览器存储的基石 —— 同源策略

在介绍这四种方法前，我们需要对一个前置知识点进行介绍。
- 所有浏览器存储方案都严格受同源策略约束，这是浏览器安全的核心规则。同源指的是「协议 + 域名 + 端口」三者完全一致，不同源的站点之间，存储数据完全隔离，无法互相访问。
- 唯一的例外是 Cookie，可通过 Domain 属性配置实现父子域名间的数据共享，其余存储方案均不支持跨子域名访问，这是选型时必须先明确的前提。

四、Cookie：最传统也最“重”的方案

1. Cookie 的特点

Cookie 是最早的浏览器存储方式之一，最初就是为了解决“HTTP 是无状态的”这一问题，用来在客户端和服务端之间共享一小段状态信息，维持客户端与服务端的会话状态，是唯一能自动在前后端同步的存储方案。

核心原理：
- Cookie 是服务端通过 Set-Cookie 响应头发送到浏览器、并保存在本地的小块数据，浏览器下次向同一服务端发起符合规则的请求时，会自动将 Cookie 携带在Cookie请求头中，回传给服务端。
典型特征：
- 容量很小：单个域名下总容量大约几 KB 级别
- 会自动随着同域 HTTP 请求发送给服务器
- 可以设置过期时间（Session Cookie / Persistent Cookie）
- 可以通过属性控制安全性（如 HttpOnly、Secure、SameSite）

2. 设置和读取 Cookie 的方式

我们可以通过两种方式操作 Cookie：

通过 document.cookie 在浏览器端直接读写
通过服务端响应头 Set-Cookie 下发

典型示例：

// 写入 Cookie
document.cookie = 'theme=dark; max-age=3600; path=/';

// 读取 Cookie（简单解析）
function getCookie(name) {
  const pattern = new RegExp('(?:^|; )' + encodeURIComponent(name) + '=([^;]*)');
  const match = document.cookie.match(pattern);
  return match ? decodeURIComponent(match[1]) : null;
}

const theme = getCookie('theme');

推荐在项目中封装一层 Cookie 工具函数，避免到处拼字符串

3. Cookie 的适用场景与注意事项

适用场景：
- 会话标识（Session ID）
- 短小的鉴权 Token（更推荐 HttpOnly + Secure）
- 简单的跨页面偏好设置（如果需要服务端也感知）
注意事项：
- 不要在 Cookie 中存放敏感的明文信息（如密码、完整个人信息）
- Token 建议使用 HttpOnly，避免被 XSS 通过 JS 读取
- 过多、过大的 Cookie 会拖累所有同域请求的性能

五、localStorage：最常用的“持久储物柜”

1. 特点与限制

localStorage 是 HTML5 引入的 Web Storage API 中的一部分，它提供了一个简单的键值对存储空间，有如下特征：

与域名绑定，通常容量在 5MB 左右
数据持久存在，除非显式清除或用户清理浏览器数据
不随 HTTP 请求发送，仅在前端可见
API 简单、同步执行（阻塞主线程）
仅支持字符串类型，需要手动处理序列化和反序列化

2. 基本用法示例

// 写入
localStorage.setItem('token', 'xxx-yyy-zzz');

// 读取
const token = localStorage.getItem('token');

// 删除某个 key
localStorage.removeItem('token');

// 清空所有
localStorage.clear();

如果要存对象，需要配合 JSON.stringify 和 JSON.parse：

const user = { id: 1, name: 'Alice', role: 'admin' };

localStorage.setItem('user', JSON.stringify(user));

const raw = localStorage.getItem('user');
const userObj = raw ? JSON.parse(raw) : null;

3. 使用场景与最佳实践

常见场景：
- 存放 UI 层配置（主题色、布局、语言）
- 缓存一些非敏感的接口数据（如字典项、热门列表）
- 记录用户上次访问的状态（如当前 Tab、分页页码）
实践建议：
- 避免把敏感信息（Access Token、用户隐私）长期明文放在 localStorage 中
- 封装统一的 Storage 工具，集中管理 key 名、版本号、过期策略
- 考虑数据膨胀对性能的影响，大量字符串读写会阻塞主线程

六、sessionStorage：会话级的临时存储

1. 特点

sessionStorage 与 localStorage API 几乎完全相同，但它的生命周期和作用范围不同：

只在当前标签页有效，标签页关闭即销毁
同一浏览器同一域名下的不同标签页互不共享
容量通常与 localStorage 相近（约 5MB）
同样是同步 API，字符串键值对存储

2. 典型用法示例

// 保存表单草稿
function saveDraft(formId) {
  const form = document.querySelector(`#${formId}`);
  const data = Object.fromEntries(new FormData(form).entries());
  sessionStorage.setItem('form-draft', JSON.stringify(data));
}

function restoreDraft(formId) {
  const form = document.querySelector(`#${formId}`);
  const draftStr = sessionStorage.getItem('form-draft');
  if (!draftStr) return;
  const draft = JSON.parse(draftStr);
  Object.keys(draft).forEach((key) => {
    const input = form.elements.namedItem(key);
    if (input) input.value = draft[key];
  });
}

3. 使用场景

临时表单数据防丢（刷新页面不丢，关闭标签页就清）
页内导航时的数据中转（不想暴露在 URL 上）
某些只在当前会话内生效的状态（如一次性的向导步骤）

七、IndexedDB：浏览器内的“小型数据库”

如果某一应用需要存储大量数据（比如离线缓存大量列表、图片缩略图、聊天记录等），或者需要复杂的查询能力，仅靠 localStorage 就不够用了，我们需要另一个解决方法，即 IndexeDB。

1. IndexedDB 的特点

IndexedDB 是浏览器内置的 NoSQL 数据库，有以下能力：
- 支持存储大量数据，只受磁盘空间限制
- 支持二进制（Blob、ArrayBuffer）等任意 JS 对象
- 支持索引、范围查询、游标、事务等数据库特性
- 异步 API，不阻塞主线程
- 和域名绑定，安全隔离

对于传统的客户端-服务器应用，以上的这些功能通常是没有必要的。IndexedDB 适用于离线应用，可与 ServiceWorkers 和其他技术相结合使用。

2. 基本使用流程概览

本文不在于详细解释教会每一个方法的使用，所以我也不过多的去介绍用法，只是简单说一下步骤。

详细介绍与使用方法推荐在下面的文章学习，写的都很好:

https://zh.javascript.info/indexeddb https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API

IndexedDB 的 API 相对繁琐，一般包含几个步骤：
- 打开数据库（indexedDB.open），指定名称和版本
- 在 onupgradeneeded 中创建对象存储（类似表）和索引
- 在 onsuccess 中拿到数据库实例
- 发起读写事务（db.transaction），执行增删改查

3. 适用场景

大型数据集的离线缓存（如文章列表、聊天记录）
大文件或二进制数据的本地存储（图片、音频切片）
需要复杂查询能力的客户端数据层（多字段筛选、排序）

八、如何选择合适的存储方式？

我们可以从这几个问题倒推，然后结合选择方法：

数据大小有多大？
- 几 KB：Cookie、Web Storage 都可以
- 几百 KB～MB：localStorage、sessionStorage
- 更大、甚至几十 MB：IndexedDB
需要被服务端感知吗？
- 需要：Cookie（随请求发送）
- 不需要：localStorage / sessionStorage / IndexedDB
数据的生命周期是怎样的？
- 只在当前会话/标签页内：sessionStorage
- 长期保留，用户下次访问还需使用：localStorage / IndexedDB
- 按过期时间控制，并服务端参与：Cookie
是否包含敏感信息？
- 敏感信息优先考虑存服务器 + 短期 Token，配合 HttpOnly Cookie
- 尽量避免在 localStorage 中长期存放敏感明文数据

一个常见的组合实践：
- 认证凭证：短期 Token 放在 HttpOnly Cookie 中（前端无权读），前端只负责根据“是否登录”调整 UI
- UI 偏好/非敏感配置：localStorage
- 临时表单数据：sessionStorage
- 大批量列表缓存、离线功能：IndexedDB

九、安全与性能注意事项

1. XSS 与数据泄露

无论是 Cookie、localStorage 还是 IndexedDB，只要能被 JS 读写，就有可能在发生 XSS 时被攻击者窃取。建议：
- 对用户可输入的内容严格做 XSS 防御（转义、CSP 等）
- 不在可被 JS 读到的存储中保存高价值敏感数据
- 对关键数据做加密/签名（虽然前端加密本身也需要谨慎看待）

2. 存储配额与异常处理

不同浏览器的实际存储配额、策略有所不同：
- 超出配额时，写入会抛出异常
- 用户可能随时清理站点数据
- 隐身模式下的行为可能不同
因此实际使用时就需要考虑到这些，采取一些应对措施，比如：
- 封装一层安全读写：捕获异常、做降级处理
- 对关键数据设计“缺失时如何恢复”的逻辑（例如重新拉取接口）

3. 同步 API 的阻塞问题

localStorage / sessionStorage 的读写是同步的，在大量或高频操作时可能造成主线程卡顿。建议：
- 不在高频事件（如 scroll、mousemove）里直接操作 Storage
- 尽量合并多次写入，做节流/防抖
- 对于大规模读写，考虑使用 IndexedDB 这种异步方案

flipbook体验文档

Fri, 01 May 2026 12:40:51 GMT

完全 AI 实时生成的无限可视化探索工具

一、产品核心概览

Flipbook 是一款完全由 AI 实时按需生成的无限可视化探索工具，它的核心交互逻辑是：点击画面里的任意元素 / 区域，AI 就会立即生成全新的画面，对该内容进行无限深度的拆解与探索，真正实现无边界的可视化信息浏览。

通俗来说，是一个用 AI 生成「可点击的插画信息图」来回答问题的网页工具。你输入一个问题，它不会给你一大段文字，而是生成一张带说明的插画/信息图；你点图里的任何区域，它会围绕那个部分继续生成下一张图，像翻页一样，让你一步步「看懂」一个知识点。

二、核心产品理念与特点

1. 从「文字答案」变成「视觉答案」

传统 AI 问答：输入问题 → 返回一大段文字，理解成本在用户自己。
Flipbook：输入问题 → 返回一张完整的视觉页面（信息图）。
这张图的特点是：
- 图里包含标题、小模块、箭头、标注等元素，整体像一张 PPT 或信息海报。
- 所有这些都是 AI 直接生成的图片，而不是传统网页的 HTML+CSS 元素。
- 文本、图形、卡片都融合在一张图里，看起来像「设计好的讲解海报」。

2. 通过「点击图」来继续提问

想继续和 Flipbook 交互我们当然可以和传统的 AI 问答一样，继续再输入框中输入内容，让它生成图片。但是，如果只是这样的话，我也不会想要继续了解它，我感觉它比较吸引我的，就是它后续的交互可以不是在输入框里追问，而是直接点击你感兴趣的图像区域。

交互过程大致是：

输入一个问题，比如「帮我解释一下智能手机的各个硬件部件都做什么」。
系统生成一张信息图，标出屏幕、电池、CPU、摄像头等部分，并附简单说明。
你对「摄像头」感兴趣，就直接点图中摄像头那块区域。
系统再生成一张新的图，只讲「手机摄像头」，可能继续拆分为：传感器、镜头组、防抖模块等。
一直点击，一直往下钻，像在翻一本无限延伸的「知识图解书」。

因此，「翻页」指的是：你每点击一次，系统就为你「多画一页」，而不是打开一个新的网页链接。所以，虽然这个交互过程中还有不尽人意的地方，但这个已经足够吸引我了。

三、核心功能与核心特性

核心功能	详细说明
无限可视化深度探索	每一个页面都是 AI 实时生成的专属图像，点击画面内任意你感兴趣的元素、文字、区域，都会生成全新的页面，对该内容进行深度拆解，可无限延伸探索路径
全像素无代码架构	界面内所有内容（包括全部文字）均由图像模型渲染为像素，无 HTML、无硬编码链接、无固定表单字段，彻底摆脱代码对界面的限制
双源信息供给	画面内的信息来自「Agent 智能联网搜索」+「图像模型自身的世界知识」，事实准确度与 ChatGPT、Gemini、Claude 等主流大模型处于同一水平
实验性实时视频流	可一键开启 Live Video Stream 功能，将静态生成的图片转为连续视频流，为画面添加动态效果，同时实现页面间的无缝转场；该功能由定制优化的视频生成模型与图像生成系统联合驱动

四、3 分钟快速上手（零门槛使用步骤）

1. 访问入口

打开浏览器，访问 flipbook.page。
页面上方会有一个明显的输入框，让你输入想要了解的问题。

不需要注册账号即可体验基础功能（以当前公开原型为准，未来可能有变更）。

2. 输入问题

在页面顶部输入框中，输入一句你想了解的话题，例如：

「用图解方式教我 HTTP 是怎么工作的。」
「帮我画一张图解释一下区块链的大致流程。」
「给我生成一张太阳系的星系图」

输入完成后，点击发送按钮，系统开始生成第一页视觉内容。

建议：
- 把问题问得稍微具体一点，例如「帮我拆解 iPhone 里的主要硬件组成」比「手机」更容易出图。
- 当作是在对一个「会画信息图的老师」提问，而不是搜索引擎。

太阳系星系图

3. 理解第一页内容

几秒之后，可以看到一张全屏的视觉页面。整体结构通常类似于一张架构图/流程图/信息海报：
- 上方：标题，概括你提问的主题。
- 中间：多个模块、卡片、图形，代表不同的子部分。
- 旁边或下方：简短文字说明，帮助你理解每一个块代表什么。
此时可以先把整张图扫一遍，确认：
- 大致结构是否合理（有无明显偏题）。
- 是否出现出我们真正关心的那几个部分。
如果感觉不对，可以回到顶部输入框重提问题，或调整提问方式再来一次。

4. 点击图中感兴趣的区域

Flipbook 的关键体验是「点图继续深入」，不是只看一页。

操作方式：
- 将鼠标移动到你感兴趣的模块上（例如「水星」区域）。
- 点击该区域，系统会把这个点击理解为「请详细展开讲这个部分」。
- 随后生成一个新的页面，专门用一张新图解释这个子主题。
重复这个流程：
- 从「太阳系整体图」→ 点「水星」→ 进入「水星内部详细构造」→ 再点「陨石坑」，继续往下钻。
- 知识结构会像树一样不断展开，每一页都是一层更细的图解。

水星详情图

卡洛里盆地

5. 在「翻页」中构建知识路径

每一次点击都会带来一张新图，这种使用过程会像下面的这样的一条视觉路径：
- 起点：原始问题（第一页）
- 展开：对某个组件/概念感兴趣，点击它
- 深入：进入下一个细分概念的专页
- 可以继续向下深挖，也可以退回上层重新选择其他分支（根据浏览器的返回操作）
  - 注意：回退后新生成的图片会覆盖此图片后面的图片，如果需要注意保存
这和传统网页「超链接跳转」的差别在于：
- 传统：点链接 → 跳到别人写好的另一篇文章。
- Flipbook：点图块 → AI 现画一张新的解释图，继续沿着你的兴趣生长。

五、产品定位

1. 面向谁？

从目前的产品形态来看，它主要适合这些人群：

希望用「图」而不是「字」学习的人（视觉型学习者）。
需要经常向别人解释概念的从业者，如老师、培训讲师、产品经理、工程师。
喜欢探索式学习的人：不一定想一次读完所有知识，而是沿着好奇心逐步深入。

2. 解决了什么痛点？

它解决的核心痛点是：「文字太抽象时，知识很难在脑子里形成结构」。

Flipbook 用一张张信息图来替代长文本：

用布局、箭头、分区来展示「结构」。
用点击翻页的方式让你按兴趣顺序自主探索，而不是被迫按文章顺序阅读。
可以随时回到上一层，重新选择其他分支，知识路径完全由你主导（返回分支前注意保存分支图片）。

六、使用场景

场景推荐

开放式主题学习与深度探索：比如你想了解天文知识、艺术流派、经济学原理、技术架构等内容，无需整理关键词翻找网页，只需点击相关元素，就能无限深度挖掘内容，可视化的呈现形式大幅降低抽象概念的理解门槛。
创意灵感发散：做设计、文案、策划、创作时，可通过它围绕核心主题发散探索，获取打破线性思维的视觉灵感与内容思路，摆脱固定模板的束缚。
泛知识轻量科普：给孩子、新手讲解陌生领域的知识时，可通过它的可视化能力，把枯燥的文字知识转为直观的画面，大幅降低理解成本。

第一次使用的建议提问模版

为了让第一次体验更顺畅，我们其实可以从下面这种问题开始尝试：

「用图解方式向小白解释一下 X 是什么」
「帮我拆解 XX 系统的主要组成部分并画图说明」
「请画一张图讲清楚从 A 到 B 的完整流程」
「用信息图的方式解释一下 XX 产品的核心模块和数据流向」

主题：

技术类：HTTP 请求流程、数据库读写流程、前后端交互过程。
硬件类：智能手机内部结构、电脑硬件组成。
商业/产品类：一个产品从需求到上线的流程、某个商业模式的运作逻辑。

六、使用注意事项

目前 Flipbook 还是一个相对实验性的产品原型，使用时可以注意几件事：

内容不是人工绘图，而是模型实时生成的图像，有时会出现内容不准确或结构不理想的情况。
生成的信息图更适合作为「理解辅助」，不适合作为正式教材或精确技术文档。
对主题的指令越清晰、越具体，生成的图通常越结构化，越容易看懂。
尽量用熟悉的语言去问问题。

如果有把生成的内容用于对外展示的打算，建议：

把图当做灵感/草稿，再人工复刻一版（PPT、Figma、Keynote 等）。
人工审阅所有关键信息，以免出现误导或不准确的描述。

太阳系星系图

关于我自己在太阳系星系图方面的尝试,有几个我还挺喜欢的，展示一下吧！

海王星

海王星大黑斑

天王星

天王星内部结构

NotebookLM 介绍与基本使用

Sat, 25 Apr 2026 02:37:41 GMT

一、产品核心定位：不是普通聊天 AI，是「带资料工作的智能笔记本」

一句话定位：

NotebookLM 是谷歌推出的「专属 AI 研究助理」，只基于你上传的资料回答、总结、生成内容，杜绝幻觉，帮你快速吃透文档、整理知识、产出结构化成果

1. 本质是什么

NotebookLM 是 Google 基于 Gemini 大模型打造的私有知识库 AI 工具，核心逻辑是：先喂资料 → AI 消化 → 只基于这些资料回答 / 生成 → 带原文引用，不瞎编。它和 ChatGPT、Claude 等通用 AI 最大区别：不依赖互联网 / 模型记忆，只信任你上传的本地 / 私有资料，解决 AI 幻觉、信息不可靠、上下文太长读不完的痛点。

2. 它不是什么

不是通用聊天机器人（不能问无关资料的问题）
不是云盘 / 笔记存储工具（核心是理解、分析资料，不是单纯存文件）
不是自动写作工具（必须基于你提供的资料，不能凭空创作）

3. 解决的核心痛点

读长文档 / 文献 / 报告慢、抓不住重点
AI 回答经常胡编、找不到依据、不可信
多份资料（论文、会议纪要、竞品报告）难以整合、对比、提炼
知识整理、做摘要、写提纲、做复习材料效率低

4. 核心受众

学生（读论文、备考）、科研 / 职场人（文献综述、会议纪要、项目复盘）、内容创作者（资料整理、大纲生成）、产品 / 运营（竞品分析、报告提炼）

二、核心功能详解（看懂它能做什么）

1. 多模态资料导入（构建专属知识库）

支持几乎所有常用资料格式，一个笔记本最多添加 50 个来源、单来源上限 50 万字：

文件：PDF、Word、TXT、Markdown、PPT、Google Docs/Sheets/Slides
链接：网页 URL、YouTube 视频链接（自动提取字幕 / 文本）
其他：音频文件、直接粘贴文本、Google Drive 导入

2. 智能对话与精准问答（基于资料的深度交互）

精准问答：提问只检索你上传的资料，所有回答带原文引用标注（点击可跳转到对应文档位置），完全杜绝幻觉
深度分析：支持跨文档对比、找矛盾、提炼共性、梳理逻辑链
追问引导：自动生成关键问题，帮你挖掘资料里没注意到的信息

3. 一键生成结构化成果（Studio 工作区）

不用手动排版，直接从资料输出可用内容：

文本类：全文摘要、核心要点、FAQ、学习指南、汇报提纲、论文大纲
可视化：思维导图、信息图、PPT、闪卡、知识测验
音频类：音频概览（双人播客风格），把长文档转成可听的内容，通勤 / 走路学习

4. 隐私与安全

你的上传资料不会用于 Google 模型训练，仅在你的账号内处理
支持私有笔记本，仅自己可见，符合个人 / 企业数据安全要求

三、快速上手：3 步就能用（零门槛）

准备条件

可用 Google 账号
能访问 notebooklm.google.com（需科学上网）

Step 1：创建笔记本（建立专属知识库）

打开官网 notebooklm.google.com，用 Google 账号登录
点击「New Notebook」，输入名称（如「XX 论文研读」「竞品分析」），选择用途（研究 / 学习 / 工作）
进入三栏主界面：左侧「Sources（来源）」、中间「Chat（对话）」、右侧「Studio（生成）」

Step 2：添加资料（喂给 AI）

左侧 Sources 点「Add source」
选择上传方式：上传本地文件、粘贴网页 / YouTube 链接、导入 Google Docs、粘贴文本
等待 AI 解析（几秒到几分钟，看文件大小），解析完成后资料会显示在左侧列表

Step 3：开始使用（两种核心用法）

用法 A：对话提问（吃透资料）

中间 Chat 框输入问题，比如：
1. 「总结这份报告的 3 个核心结论」
2. 「对比这两篇论文的研究方法差异」
3. 「这份文档里提到的关键数据有哪些」
AI 回答会标注引用（如 [Source 1, Page 5]），点击可直接查看原文

用法 B：Studio 一键生成（快速出成果）

右侧 Studio 选择要生成的类型：Summary（摘要）、Outline（大纲）、Mind Map（思维导图）、Audio Overview（音频）、Flashcards（闪卡）
选择参考的资料来源，点击生成，直接导出 / 复制使用

这个其实出了自己创建笔记本，还同步接入了我们在 Gemini 大模型对话里面创建的笔记本，Gemini 笔记本里面的内容直接回在这里创建一个 NotebookLM 笔记本，并将你在大模型里面与 Ai 的对话以及上传的资料同步到你，你可在 NotebookLM 中直接打开使用。

基础结构

基本结构

笔记本内部格式

使用展示

四、最佳使用场景（怎么用最香）

1. 文献 / 长文档精读（学生 / 科研）

上传多篇论文 → 让 AI 总结核心观点、对比差异、生成研究框架 → 做复习闪卡 / 音频 → 高效完成文献综述

2. 会议 / 报告整理（职场）

上传会议录音转写、项目报告 → 生成会议纪要、待办清单、核心决策 → 快速输出可分发文档

3. 知识沉淀与学习（个人）

收集课程资料、行业文章 → 生成学习指南、思维导图 → 转音频，碎片化时间复习

4. 竞品 / 内容分析（产品 / 运营）

上传竞品官网、报告 → 提炼核心卖点、设计亮点、功能差异 → 生成分析简报

五、使用注意事项（避坑）

✅ 推荐做法：

一次只聚焦一个主题，资料尽量相关，避免混杂无关内容
生成后核对引用，确保信息准确
复杂资料分多次上传、分步骤提问（先总结、再细节、再对比）
导出成果后再二次编辑，贴合自己的需求

❌ 不要做：

上传无关、低质、重复资料，拖慢解析、干扰回答
直接用生成内容不核对，忽略引用验证
指望它理解业务逻辑 / 创意创作（只处理已有资料）

六、总结

NotebookLM 的核心价值，是把「零散资料 → 结构化知识 → 可复用成果」的流程自动化，让 AI 真正成为你的「专属研究助理」，而不是泛泛的聊天工具。

推荐使用场景：如果你经常要读长文档、整理资料、做知识输出，它能帮你节省 60% 以上的信息处理时间，还能保证内容准确、有据可查。

跨域

Fri, 24 Apr 2026 13:05:36 GMT

一、跨域问题的本质：同源策略与安全边界

1.1 什么是跨域？

跨域（Cross-Origin）的核心根源，是浏览器内置的同源策略，指的是浏览器出于安全考虑，限制一个源（Origin）的脚本访问另一个源的资源。这里的”源”由三个要素组成，所谓「同源」，要求两个 URL 的以下三个要素完全一致：

协议（http vs https）
域名（example.com vs api.example.com）
端口（80 vs 8080）

只要三者中任一不同，即构成跨域。举个直观的例子，以 http://www.example.com:80 为基准，同源判定结果如下：

请求 URL	是否同源	跨域原因
`https://www.example.com`	否	协议不同（http→https）
`http://api.example.com`	否	域名不同（主域一致，子域不同）
`http://www.example.com:3000`	否	端口不同（80→3000）
`http://www.example.com/user`	是	仅路径不同，三要素完全一致

补充：

核心定义

主域（注册域名）：是用户通过域名注册商合法申请、拥有完整所有权与管理权的最小独立域名单元，格式为「自定义主体 + 顶级域」，比如 example.com、example.com.cn。主域是域名所有权的核心载体，必须付费注册，可自主创建所有下级子域。

子域：是主域持有者在主域基础上，免费自主配置的下级从属域名，无需额外注册。比如主域 example.com 的子域包括 www.example.com、api.example.com、admin.example.com 等，子域完全依附于主域，可独立配置解析指向不同服务，但无独立所有权。

1.2 一个必须纠正的核心误区

跨域是浏览器的单向限制，不是服务器拒绝了你的请求

真实的请求流程是这样的：

前端发起跨域请求，浏览器正常将请求发送到目标服务器
服务器接收请求，正常处理并返回响应数据
浏览器收到响应后，检查响应头的 CORS 规则，判定是否允许当前源访问
若规则不匹配，浏览器直接拦截响应，抛出 CORS 报错，前端无法拿到任何响应数据

简单说：请求发出去了，服务器也正常返回了，只是浏览器把数据「扣下了」。这也是为什么你在 Network 面板能看到请求的状态码是 200，却拿不到响应体的核心原因。

1.3 同源策略到底限制了什么？

同源策略就像浏览器给每个页面加了一道「安全隔离墙」，主要限制三类行为：

数据存储访问：禁止读取 / 修改非同源页面的 Cookie、LocalStorage、IndexedDB 等存储数据
DOM 操作：禁止获取非同源页面的 DOM 元素，防止恶意页面篡改嵌入的第三方页面
网络请求：限制 XMLHttpRequest、Fetch API 发起的跨域 AJAX 请求，这也是我们最常遇到的跨域场景

但有一个关键例外：HTML 的资源嵌入标签不受同源策略限制。

比如<script>、<img>、<link>、<iframe>等标签，可以正常加载跨域资源，这也是 JSONP、图片打点等方案的底层原理。

1.4 为什么会有同源策略？

同源策略是浏览器的核心安全机制，主要防范：

XSS 攻击：恶意脚本窃取用户数据
CSRF 攻击：伪造用户身份进行恶意操作
数据泄露：敏感信息被未授权访问
举两个最直观的风险场景：
- 没有同源策略，你打开的恶意钓鱼网站，可以直接读取你网银页面的 Cookie，轻松盗取你的账户信息，发起转账操作
- 没有同源策略，恶意页面可以嵌入你的电商支付页面，篡改 DOM 元素的支付金额，诱导你完成超额付款

同源策略的核心意义，就是隔离不同站点的资源，防止恶意网站窃取用户的敏感数据，从根源上阻断绝大多数 CSRF、XSS 衍生的攻击行为。

二、主流跨域解决方案

2.1 CORS：跨域资源共享的核心机制

2.1.1 CORS 工作原理

CORS（Cross-Origin Resource Sharing）是 W3C 标准，通过HTTP 响应头告知浏览器是否允许跨域访问。其核心流程分为两类：

简单请求（Simple Request）

满足以下条件的请求为简单请求：

方法仅限 GET、HEAD、POST
Content-Type 为 application/x-www-form-urlencoded、multipart/form-data、text/plain
无自定义请求头

简单请求直接发送，无需预检。

非简单请求（Preflight Request）

复杂请求会触发浏览器的预检机制：

浏览器先使用 OPTIONS 方法发起一个「预检请求」，携带三个核心请求头：
1. Origin：请求的来源域
2. Access-Control-Request-Method：正式请求要使用的方法
3. Access-Control-Request-Headers：正式请求要携带的自定义头
```
// 预检请求示例
OPTIONS /api/data HTTP/1.1
Origin: https://www.example.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Authorization, Content-Type
```
服务器接收预检请求，校验后返回对应的 CORS 响应头，明确是否允许该请求
浏览器校验预检响应通过后，才会发起正式的 HTTP 请求；校验失败则直接拦截，正式请求永远不会发出

2.1.2 核心 CORS 响应头

服务器的 CORS 配置，本质就是正确设置以下 HTTP 响应头，每一个都有明确的作用，不可乱配：

响应头	必需性	核心作用	安全注意事项
`Access-Control-Allow-Origin`	必需	指定允许访问的源，值可以是单个具体源、`null`，或通配符`*`	非公开 API 严禁使用``；携带凭据时，必须为具体源，绝对不能用``
`Access-Control-Allow-Methods`	预检必需	指定正式请求允许的 HTTP 方法，多个用逗号分隔	按需开放，不要全量开放`GET,POST,PUT,DELETE,PATCH`
`Access-Control-Allow-Headers`	预检必需	指定正式请求允许携带的自定义请求头	按需开放，比如仅开放`Content-Type,Authorization`
`Access-Control-Allow-Credentials`	可选	指定是否允许请求携带 Cookie、HTTP 认证等身份凭证，值只能是`true`	开启后，`Allow-Origin`不能为`*`，前端必须设置`withCredentials: true`
`Access-Control-Max-Age`	可选	指定预检请求的缓存时间（秒），缓存期内不会重复发起预检	建议设置合理值（如 86400 秒 = 1 天），减少 OPTIONS 请求开销

// 使用示例
Access-Control-Allow-Origin: https://www.example.com  # 必须，允许的源
Access-Control-Allow-Methods: GET, POST, PUT, DELETE   # 允许的HTTP方法
Access-Control-Allow-Headers: Content-Type, Authorization  # 允许的请求头
Access-Control-Allow-Credentials: true  # 是否允许发送Cookie
Access-Control-Max-Age: 86400  # 预检请求缓存时间（秒）
Access-Control-Expose-Headers: X-Total-Count  # 允许客户端访问的响应头

2.2 服务端 CORS 配置（生产环境首选）

Node.js/Express 方案

const express = require('express');
const cors = require('cors');
const app = express();

// 方案1：使用cors中间件（推荐）
app.use(cors({
  origin: 'https://www.example.com',  // 精确指定源
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  credentials: true,  // 允许携带Cookie
  maxAge: 86400,      // 预检缓存24小时
}));

// 方案2：手动配置（更灵活）
app.use((req, res, next) => {
  const allowedOrigins = ['https://www.example.com', 'https://app.example.com'];
  const origin = req.headers.origin;
  
  if (allowedOrigins.includes(origin)) {
    res.setHeader('Access-Control-Allow-Origin', origin);
    res.setHeader('Access-Control-Allow-Credentials', 'true');
  }
  
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With');
  res.setHeader('Access-Control-Max-Age', '86400');
  
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  
  next();
});

Spring Boot 4.0 方案

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("https://www.example.com", "https://app.example.com")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("Content-Type", "Authorization", "X-Requested-With")
                .allowCredentials(true)
                .maxAge(86400); // 24小时
    }
    
    // 或使用@CrossOrigin注解
    @RestController
    @RequestMapping("/api")
    @CrossOrigin(origins = "https://www.example.com", maxAge = 86400)
    public class ApiController {
        // ...
    }
}

FastAPI 方案

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

# 配置CORS中间件
app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://www.example.com", "https://app.example.com"],
    allow_credentials=True,
    allow_methods=["*"],  # 或指定具体方法
    allow_headers=["*"],  # 或指定具体头
    max_age=86400,  # 预检缓存24小时
)

2.2 代理方案

代理方案的核心原理，直击同源策略的本质：同源策略仅限制浏览器与服务器之间的通信，服务器与服务器之间的 HTTP 通信，没有任何跨域限制。

我们只需要搭建一个「代理中转服务器」，让浏览器把请求发给同源的代理服务器，再由代理服务器转发给真实的后端接口，就能彻底绕开跨域问题 —— 对浏览器来说，请求是发给同源的代理服务，不存在跨域；对后端来说，请求来自正常的服务器，无需做任何 CORS 配置。其中，代理方案分为开发环境和生产环境两类。

开发环境代理

Vite/Vue3 配置

// vite.config.js
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
        secure: false,  // 不验证SSL证书
        ws: true,       // 代理WebSocket
      }
    }
  }
})

Webpack DevServer 配置

// webpack.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        pathRewrite: { '^/api': '' },
        changeOrigin: true,
        headers: {
          Connection: 'keep-alive'
        }
      }
    }
  }
}

配置完成后，前端只需把请求地址写成/api/xxx，开发服务器会自动把请求转发到http://localhost:3000/xxx，浏览器全程认为是同源请求，不会有任何跨域问题。

Nginx 反向代理（生产环境推荐）

生产环境中，我们通常使用 Nginx 作为静态资源服务器和反向代理服务器，实现和开发代理完全一致的效果，同时还能兼顾负载均衡、静态资源缓存等能力。

server {
    listen 80;
    server_name www.example.com;
    
    # 前端静态资源
    location / {
        root /var/www/frontend;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
    
    # API代理，解决跨域
    location /api/ {
        proxy_pass https://api.example.com/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        
        # CORS相关头
        add_header 'Access-Control-Allow-Origin' 'https://www.example.com' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization' always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
        
        # 处理预检请求
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Max-Age' 86400;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }
    }
}

配置完成后，用户访问 https://www.example.com 加载前端页面，所有 /api 开头的请求都会被 Nginx 转发到后端服务，前端和接口处于完全同源的状态，从根源上彻底消除了跨域问题，无需后端做任何 CORS 配置。

2.3 JSONP：仅兼容老旧浏览器的古董方案

JSONP 是早期前端解决跨域的方案，核心原理是利用<script>标签不受同源策略限制的特性，通过动态创建 script 标签，请求后端返回一个「函数调用」，把数据作为参数传入，前端在全局定义该函数，从而拿到跨域数据。

2.4 postMessage：跨窗口 /iframe 通信专属方案

postMessage 是 HTML5 提供的 API，专门用于解决「不同源的页面之间」的通信问题，最常见的场景：主页面与嵌入的跨域 iframe 通信、同一浏览器打开的多个跨域标签页通信。

2.5 WebSocket：全双工通信无跨域限制

WebSocket 协议本身不受浏览器同源策略限制，只要服务器支持，前端可以和任意源的 WebSocket 服务建立连接，实现全双工通信，是实时通信场景的最优解。

2.3 跨域解决方案对比与选型建议

方案	适用场景	优点	缺点	安全性
服务端 CORS	生产环境	标准化、浏览器原生支持	需要后端配合	★★★★☆
Nginx 代理	生产环境	性能好、配置灵活	运维复杂度高	★★★★★
开发代理	开发环境	无需后端改动、调试方便	仅限开发环境	★★★★☆
JSONP	传统项目	兼容性好	仅支持 GET、有安全风险	★☆☆☆☆
WebSocket	实时通信	无跨域限制	仅适用于特定场景	★★★★☆

选型建议

生产环境：优先选择 Nginx 反向代理或服务端 CORS 配置
开发环境：使用 Webpack/Vite 内置代理
遗留系统：考虑 WebSocket 或服务端代理
移动端/小程序：服务端统一代理，避免前端跨域问题

Agent Skill 与 MCP

Fri, 17 Apr 2026 09:35:00 GMT

Agent Skill

什么是 Agent Skill

专业概念：Agent Skill（智能体技能）是一种模块化的能力扩展包，用于增强通用 AI 智能体的功能。它封装了特定领域的指令、元数据和可选资源文件（如脚本、模板、文档），让 AI 在遇到匹配场景时能自动调用这些专业能力，完成特定任务
通俗解释：就是大模型可以随时翻阅的说明文档
例子：比如，我现在想让大模型作为我的智能客服，那么我就可以一个“智能客服 Skill”，或者我又想要让大模型为我做一个会议总结，那么我又可以写一个“会议总结 Skill”，这样一来我就不用每次对话都去重复粘贴这一长串的要求，大模型自己翻翻这个说明文档就知道该怎么干活了

Skill通俗示例

当然，说明文档只是一个简单通俗的说法，Skill 的功能要远比这个强大的多，后面会进行介绍，这里只是方便初步理解使用

怎么使用 Agent Skill

以 trae 为例：

步骤：
- 在项目根目录下创建 .trae 文件夹
- 在 .trae 文件夹内创建 skills 文件夹
- 在 skills 文件夹内创建你的技能文件夹（例如：skill-reviewer）
- 在技能文件夹内创建核心文件 SKILL.md

目录结构：

skill-name/
├── SKILL.md           # 必需：核心指令文件
├── references/        # 可选：参考文档目录
├── assets/            # 可选：模板和资源目录  
├── scripts/           # 可选：可执行脚本目录
└── templates/         # 可选：可复用的模板目录

核心文件 SKILL.md 的必要内容：
1. 元数据
  1. 这个 skill 叫什么
  2. 它做什么
  3. 什么时候应该使用
2. 主说明书（指令）
  1. 遇到这类任务怎么做
  2. 推荐的步骤是什么
  3. 有哪些约束
  4. 哪些边界需要注意
  5. …
3. 格式模板如下
```
---
name: template-skill
description: 请在此处替换为该技能的描述，以及 trae 应在何时使用它。

---

# 在下方插入指令
```
- 注意：name：name 名字要求与 skill 文件夹名字一致

Agent Skill 的核心机制

核心机制：按需加载，指系统或模型仅在识别到特定任务需求时，才加载、激活或调用相关的代码库、功能模块或提示词指令

Skill核心机制

进阶用法

核心机制：按需加载中的按需加载，类似于模块化分离出去，核心 SKILL.md 文件在需要的时候才进行引入调用，以进一步减少核心文件的体积

reference 概念：
- 给大模型准备的可以模块化分离出去的「权威参考资料」，告诉它在执行某个技能时，应该遵循哪些具体规则、标准和规范，这些当然也可以直接写在 SKILL.md 文件中，但这样核心文件不免越来越大，一些我们暂时没有用到的规范将会在我们这次的对话中浪费资源，因此我们可以将它们模块化的分离出去，核心 SKILL.md 文件在需要的时候才进行引入调用，以进一步减少核心文件的体积
- reference概念示例
script 概念：
- 可执行脚本目录，当 skill 不只是“给建议”，还需要执行一些确定性动作时，就可以把这些动作写成脚本放在这里

加载机制

渐进式披露

渐进式披露加载机制

与 prompt 的区别

前面说了这么多，是不是感觉这和 prompt 提示词还有些相似，那么它俩的区别在哪里呢？

Prompt 是“给模型的一次性指令表达”
Skill是把一类可复用的 prompt + 工作流 + 资源约束打包成模块化能力
Skill 不是 Prompt 的对立面，而更像是：结构化、可复用、可发现、可按需加载的 Prompt 工程产物

推荐了解学习视频：

https://www.bilibili.com/video/BV1cGigBQE6n/（本文一些例子与图片也来自与本视频）

https://www.bilibili.com/video/BV1dz6oBWEWx/

MCP

MCP 是什么

MCP（Model Context Protocol，模型上下文协议） 是一套开源、标准化、跨平台的通信协议，核心目标是统一大模型、Agent、工具、数据源之间的上下文交互标准，解决上下文碎片化、数据隔离、协议不兼容问题。
本质上，大模型是一个只能问答的工具，而 MCP 的出现，就等于是让大模型拥有了使用各种外部工具的能力，简单来说，MCP 是让大模型从”只能聊天”升级为”能动手干活”的技术桥梁。
想象一下，大语言模型（比如我这样的 AI）就像一个特别聪明的大脑，但这个大脑只能”动嘴说话”，不能”动手做事”。比如你想让 AI 帮你整理电脑里的文件、查看数据库、或者操作设计软件，它通常做不到。
- MCP 就是解决这个问题的”万能插座”：
  - 它是一种标准化的连接协议，就像手机的 USB-C 接口一样
  - 通过 MCP，AI 可以安全地连接到你的电脑、数据库、各种软件工具
  - 让 AI 不仅能”说”代码，还能”做”事情 - 比如自动读写文件、操作浏览器、调用 API 等
- 举个实际例子：没有 MCP 时：你问 AI “帮我整理上周的会议记录”，AI 只能告诉你方法，不能真的去操作你的文件。有了 MCP 后，通过配置各种 MCP 服务工具，AI 可以直接访问你的文件系统，自动找到并整理那些会议记录文件。

MCP Server

MCP Server 就是 AI 的”工具管家”

举个例子：
- 你家有很多工具（文件、数据库、浏览器、计算器等），AI 就是一个新来的小助手，它想帮你做事，但不知道工具放在哪里、怎么用，MCP Server 就是这个管家，它把所有工具整理好，贴上标签，告诉 AI：“想要这个功能，就按这个标准方式来调用我”
一句话来说，MCP Server = 让 AI 安全地操作你电脑上各种工具的”安全桥梁”，本质是一段程序

tool

MCP Server 内置的一些模块
简单解释，一个 tool 其实就是一个编程语言里面的一个函数
举个例子，一个处理查询天气的 MCP Server ，它内部可能包含两个函数
- tool示例

调用 MCP Server 的内部执行机制

MCP内部执行机制

推荐 MCP 市场：

mcp.so

MCP Servers

The largest collection of MCP Servers, including Awesome MCP Servers and Claude MCP integration. Search and discover MCP servers to enhance your AI capabilities.

https://mcp.so/

https://mcpmarket.com/zh

mcpmarket.com

smithery.ai

https://smithery.ai/

Agent Skill 与 Prompt 与 MCP 的区别

它们看着功能相似，其实本质不在一个层面：

Skill 是 AI 的“技能书”或“操作手册”，教 AI 怎么做，增强内在认知和专业能力
MCP 是 AI 的“手”，让 AI 能够实际操作和连接外部工具，扩展外部操作能力和系统集成

一篇很好的关于我以上讲的 Agent Skill 与 Prompt 与 MCP 的关系的文章：

以下内容也摘自其中，https://javaguide.cn/ai/agent/skills.html

1. Skills vs Prompt

维度	Prompt	Skills
本质	单次对话的文本指令	可持久化、可发现的能力单元
复用性	随对话上下文丢失，难以维护	标准化封装，跨项目、多场景复用
加载机制	全量载入（挤占 Token）	延迟加载（按需读取正文）

Prompt：用户即时表达意图的载体（如”分析这份报表”）。
Skills：包含**元数据（何时使用）+ 正文（如何执行）**的完整方案，通过 load_skill() 机制按需加载到上下文。

2. Skills vs MCP

这是最容易产生误解的地方。

维度	MCP (Model Context Protocol)	Skills
核心思路	标准化连接：通过 JSON-RPC 统一数据格式	逻辑编排：用自然语言描述复杂执行路径
定义方式	在 Server 端用代码（TS/Python）写死逻辑	在 `SKILL.md` 中用自然语言引导模型决策
环境依赖	需要运行一个 MCP Server 进程	依赖可执行环境（如本地 Shell 或沙箱）
哲学	以协议为中心：一次编写，所有 AI 通用	以模型为中心：利用模型推理能力处理不确定性

MCP 解决的是连通性 ：它像 USB-C，让 AI 能以统一格式读文件、查数据库。
Skills 解决的是编排逻辑 ：它像一份说明书，告诉 AI 如何执行复杂任务流——这些任务完全可以包括调用多个 MCP 工具。
两者的关系 ：它们解决的是不同层面的问题。MCP 负责把外部系统接入进来，Skills 负责决定什么时候用、怎么组合这些能力。一个高级 Skill 的底层往往就是调用多个 MCP 工具。

clsx和twMerge解决CSS类名冲突问题

Sat, 04 Apr 2026 03:22:00 GMT

1. clsx 和 twMerge 与函数解析

以下这段代码是现代前端开发（尤其是使用 Tailwind CSS 和 shadcn/ui 的项目中）的一个工具函数。它通过组合两个强大的库，解决了 CSS 类名合并中的冲突和逻辑判断问题。
import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

导入核心逻辑及类名合并工具

import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

clsx: 一个轻量级的 JavaScript 库，用于条件性地构造类名字符串。它能处理对象、数组、布尔值等，自动剔除 false、null 或 undefined 的类。
type ClassValue: 这是 clsx 提供的类型定义，确保输入参数符合库要求的格式（字符串、数字、对象、数组等）。
twMerge: 专门为 Tailwind CSS 设计的工具，用于解决类名冲突。当同一个 CSS 属性被赋予多个不同的类名时，它会确保最后一个胜出，并删除冲突的旧类。

`cn` 函数

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

嵌套调用:
1. 首先执行 clsx(inputs)：将复杂的逻辑输入（如{ 'bg-red-500': isActive）转换成纯字符串。
2. 最后执行 twMerge(...)：对转换后的字符串进行“去重和覆盖”处理，确保 Tailwind 类名不冲突。

2. 为什么要这么写？

主要为了解决以下两个问题：

A. 条件逻辑混乱 (clsx 解决)

在 React 中，我们可能需要根据状态切换类名：

// 原生写法：麻烦且容易产生多余空格
const className = `px-4 py-2 ${active ? 'bg-blue-500' : 'bg-gray-200'} ${disabled && 'opacity-50'}`;

// 使用 cn (内部调用 clsx)：简洁明了
cn('px-4 py-2', active ? 'bg-blue-500' : 'bg-gray-200', { 'opacity-50': disabled });

B. Tailwind 类名冲突 (twMerge 解决)

这是最关键的原因。Tailwind 的类名是平级的，CSS 后写的类名不一定会覆盖先写的，而是取决于 CSS 文件生成的顺序。

假设我们封装了一个按钮组件：

// 基础组件
function Button({ className }) {
  return <button className={cn("px-4 py-2 bg-blue-500", className)}>点击</button>
}

// 使用组件时想更改背景色
<Button className="bg-red-500" />

如果没有 twMerge: 最终类名是 px-4 py-2 bg-blue-500 bg-red-500。由于两个背景色类权重相同，浏览器可能会依然显示蓝色。
有了 twMerge: 它会识别出两者冲突，直接将输出简化为 px-4 py-2 bg-red-500。

3. 技术点总结

技术点	描述
TypeScript	使用了类型系统（`ClassValue[]`），提供强大的代码补全和错误检查。
Tailwind CSS	该函数几乎是为 Tailwind 这种原子化 CSS 框架量身定做的。
解构与剩余参数	`...inputs` 增强了函数的灵活性，支持多种调用方式。
函数组合	将逻辑处理（clsx）与冲突处理（twMerge）组合成一个统一的接口。

4. 实际使用示例

“plain` // 多种写法混用，依然能完美运行 const isActive = true; const className = cn( “base-style”, // 基础字符串 isActive && “text-blue”, // 布尔逻辑 { “p-4”: true }, // 对象形式 [“m-2”, “rounded”], // 数组形式 “p-8” // 最后的 p-8 会通过 twMerge 覆盖前面的 p-4 );

// 最终输出: “base-style text-blue m-2 rounded p-8”

### 补充：clsx(inputs) 转换逻辑

我们可以把 `clsx` 想象成一个**“智能过滤器”**。它的核心逻辑非常简单：**遍历你传入的所有参数，只保留“真值”（truthy）的部分，并把它们拼接成一个干净的字符串。**

#### 1. 转换逻辑图解

`clsx` 会根据你传入的数据类型采取不同的处理策略：

| **输入类型**  | **转换规则**                    | **示例**                                  | **结果**       |
| ------------- | ------------------------------- | ----------------------------------------- | -------------- |
| **字符串**    | 直接保留                        | `'px-4'`                                  | `"px-4"`       |
| **对象**      | 提取 `key`，前提是 `value` 为真 |``{ 'bg-red-500': true, 'hidden': false`` | `"bg-red-500"` |
| **数组**      | 递归处理每个元素                | `['py-2', 'flex']`                        | `"py-2 flex"`  |
| **布尔/Null** | 直接忽略（过滤掉）              | `false`, `null`, `undefined`              | `""` (空)      |

------

#### 2. 具体转换过程演练

假设我们有以下代码：

```tsx
const isActive = true;
const isError = false;
const customClass = "p-8";

const result = clsx(
  "base-btn", 
  { "bg-blue-500": isActive, "border-red-500": isError },
  [ "rounded-lg", isError ? "text-red" : "text-white" ],
  customClass
);

#####内部执行步骤：

处理第一个参数 "base-btn": 字符串，保留。 -> "base-btn"
处理第二个参数（对象）:
- 检查 bg-blue-500: isActive 是 true，保留。
- 检查 border-red-500: isError 是 false，丢弃。
- 得到 -> "bg-blue-500"
处理第三个参数（数组）:
- "rounded-lg": 保留。
- isError ? ...: 三元运算结果为 "text-white"，保留。
- 得到 -> "rounded-lg text-white"
处理第四个参数: 变量 customClass 是 "p-8"，保留。 -> "p-8"

3. 转换后的最终样子

clsx 将上述所有保留的部分用空格连接起来：

“plain` “base-btn bg-blue-500 rounded-lg text-white p-8”


------

##### 4. 为什么要先经过这一步？

因为后面的 `twMerge` 函数**只认字符串**。

`twMerge` 的工作是处理 CSS 冲突（比如 `p-4` 和 `p-8` 谁留下的问题），它并不理解什么是对象``{ 'bg-red-500': true``。所以 `cn` 函数的逻辑是：

1. **`clsx`**: 负责把各种花哨的逻辑（对象、数组、条件判断）变成**一段平铺的字符串**。
2. **`twMerge`**: 拿这段字符串，去剔除里面相互冲突的 Tailwind 类名。

如果没有 `clsx` 这一步，你直接传对象给 `twMerge`，它会直接报错或无法处理。这种转换方式让我们在写代码时可以使用非常灵活的逻辑，而最终交给浏览器的永远是规范的类名字符串。

使用indexOf查找对象结合Pinia持久化引发的问题

Sat, 21 Mar 2026 02:22:00 GMT

1. 问题

最近写代码的时候我遇到一个问题，我在开启了数据持久化的 Pinia 仓库里面写了一个类似“点击切换选中状态”的逻辑：如果数组里没有就 push 进去，有了就 splice 掉。代码如下：

// Pinia 仓库逻辑
const setAddonItems = (addon: IStep3) => {
  const index = addons.value.indexOf(addon) // 查找当前点击的对象是否存在
  if (index === -1) {
    addons.value.push(addon) // 不存在则添加
  } else {
    addons.value.splice(index, 1) // 存在则移除
  }
}

这代码单看好像没有什么问题，但是我却遇到一个很奇怪的现象，明明逻辑没问题，为什么刷新页面后 Pinia 就“失忆”了？当我每次在这个代码运行的页面进行刷新的时候，刷新前存进仓库的数据就好像没了一样，setAddonItems 函数在调用的时候，却对 addons 里面存储的数据视而不见，好像里面就是空的一样。我盯着那行 indexOf(addon) 感觉非常疑惑：数据明明就在那儿，为什么 JS 却视而不见？

addons数据

以上图片就是我当时 localStorage 里面 addons 数据的情况，正确的应该是不论页面刷新几次，内容相同的数据都不会重复出现，但是现在却因为页面刷新而出现了重复。

这是为什么呢？

2. 原因

原因其实很简单，就是 indexOf 对于数据里面对象数据是否存在的判断规则，以及 Pinia 持久化把数据存入 localStorage 时 localStorage 的反序列化。

`indexOf()` 判断对象数据存在的规则

我们都知道，在 JS 中，基本类型是按值比较相等的，而对象是按 内存地址（引用） 比较相等的。

const a = { id: 1 };
const b = { id: 1 };

console.log(a === b); // 输出 false

虽然 a 和 b 的内容一模一样，但它们在内存中占据了两个不同的位置。indexOf 内部使用的是全等运算符（===），因此它判定这两个对象“不相等”。

持久化造成的“孪生兄弟”错觉（`localStorage` 反序列化）

当我们开启了 persist: true（Pinia 持久化），流程如下：

存储时： 插件将内存中的 JS 对象通过 JSON.stringify() 转化成字符串存入 localStorage。
刷新页面： 插件从 localStorage 读取字符串，通过 JSON.parse() 还原成对象。

关键点就在这里： JSON.parse() 产生的是一个全新的对象实例，这代表这个新的对象实例的引用地址已经和之前的地址不再一样了。

页面中的数据（items.STEP3）： 是我们代码里定义的原始对象。
仓库中的数据（addons）： 是从 localStorage 反序列化回来的新对象。

即便它们长得一模一样，但在 JS 眼里，它们是住在不同地址的“孪生兄弟”。因此，indexOf(addon) 永远找不到那个本该存在的对象，导致判断失效。

3. 解决办法

用 `id` 判断，而不是对象（简单，改动少）

const setAddonItems = (addon: IStep3) => {
  const index = addons.value.findIndex(
    item => item.id === addon.id
  )

  if (index === -1) {
    addons.value.push(addon)
  } else {
    addons.value.splice(index, 1)
  }
}

只存 id 数组

在大型项目中，为了性能和数据一致性，通常不建议在状态仓库中存储整个对象列表。

推荐做法：

仓库只存储选中的 ID（例如 string[] 或 number[]）。
显示逻辑通过 ID 到原始数据源中匹配。

const selectedIds = ref<string[]>([])

const toggleAddon = (id: string) => {
  const index = selectedIds.value.indexOf(id) // ID 是基本类型，indexOf 此时是可靠的
  if (index === -1) {
    selectedIds.value.push(id)
  } else {
    selectedIds.value.splice(index, 1)
  }
}

优点：

节省空间： localStorage 存储压力更小。
绝对可靠： 字符串比较不受引用地址影响。
单一数据源： 避免了仓库里的对象属性（如价格、标题）与原始数据源不同步的问题。

4. 总结

这个问题的本质是 JavaScript 对象比较机制与数据持久化存储之间的冲突。刷新页面后，对象引用被重置，导致状态管理失效。

正确的解决方案是：

避免使用 indexOf 比较对象
使用唯一标识符（如 ID）进行比较
在状态管理中只存储必要信息（ID）

Pinia 状态管理

Mon, 09 Feb 2026 02:00:00 GMT

一、为什么要讲 Pinia

原因

Vue3 官方推荐的状态管理方案
用来替代 Vuex（Vuex 5 已停止推进）
更符合 Vue3 中 Composition API 的设计理念
比起 Vuex 使用更加方便

vuex 与 pinia 对比

特性	Vuex (3/4)	Pinia
核心组成	State, Getters, Mutations, Actions	State, Getters, Actions
Mutations	必须通过它修改 State (繁琐)	废弃，Actions 即可修改 State
TypeScript	支持较弱，需大量额外定义	原生完美支持，类型推断极佳
模块化	单一 Store 树，需嵌套 Modules	多 Store 设计，扁平化结构，自动拆包
体积	约 10kb	约 1kb (极度轻量)

二、什么是状态管理（State Management）

什么是「状态」？

在前端应用中，状态（state）指的是：

状态 = 程序运行时”留在内存里、会变化的数据”
状态的核心特征

特征	说明	例子
存在于内存中	页面刷新即消失（除非持久化）	用户登录后的 token
会随时间变化	用户操作、API 响应会改变它	购物车商品数量增减
影响 UI 渲染	状态变 → 视图自动更新	切换主题色后界面变色
需要被追踪	框架通过响应式系统监控变化	Vue 的 ref/reactive

不使用状态管理会遇到什么问题？

当项目变大后，会出现：

父子组件层层传 props
兄弟组件通信复杂
数据分散在各个组件，难以维护
同一份数据被多处复制，容易不一致

为什么需要状态管理？

状态管理就是把这些状态从”散落在各个组件里”抽出来，集中存、集中改、集中通知，让任何组件都能同一份数据源、统一规则地读取和更新，避免：

父→子→孙，一层层 props 传递
事件一层层 emit 回去
不同组件各自 copy 一份数据，改完互相不一致

总结

状态 = 应用运行时需要被框架追踪、会影响视图、且可能被多个组件共享的”活”数据

（而状态管理 = 让这些”活”数据变得有序、可控、可预测的工具）

三、Pinia 在项目中的定位

Vue App
 ├─ Components（组件）
 ├─ Router（路由）
 ├─ Pinia（全局状态）  ← 负责跨组件数据共享
 └─ Services / API

四、Pinia 的核心概念

Store 是什么

Store 是保存状态 ( state ) 和业务逻辑的实体，它并不与组件树绑定。

换句话说，它存储着全局的状态数据。

一个 Store 由哪几部分组成

部分	作用
state	定义状态数据
getters	类似计算属性（派生状态）
actions	业务逻辑 / 异步操作

总结类比

可以把 pinia 类比为一个一个中心化的“仓库”。就像一个公司有一个中央档案室，不管哪个 部门（Vue 组件）需要看或修改某个 文件（数据），都得去这个档案室拿取。
解释：
- 各部门：各个 Vue 组件
- 文件：State 数据
- 看：组件调用 Store 里面 State 状态数据
- 修改：Store 里面修改 State 状态数据的方法（Actions）
- 都得去这个档案室拿取
  - 我们如果想要在 Vue 组件里面使用 Store 仓库里面的数据与方法，肯定要先在组件里引入使用这个 Store 仓库

五、Pinia 的基础使用流程

安装 Pinia

npm install pinia

在 main.ts 中注册 Pinia

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

定义一个 Store

import { defineStore } from 'pinia'

// 'use' 是约定俗成的前缀，便于识别这是一个 store
// 'user' 是 store 的唯一 ID
export const useUserStore = defineStore('user', {
  // Store 配置项
  // state、getter 和 action 都写这里面
  // 这里面包含了两种写法，我们会在下面介绍
})

在组件中使用 Store

// 1. 导入
import { useUserStore } from '@/stores/user'

// 2. 调用
const userStore = useUserStore()

// 3. 获取调用结果里面的数据方法
userStore.setToken('abc')
console.log(userStore.isLogin)

六、Pinia 的两种写法

1. Options Store（类似 Vuex，适合新手）

// 选项式写法
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    token: '',
    userInfo: null
  }),
  getters: {
    isLogin: (state) => !!state.token
  },
  actions: {
    setToken(token: string) {
      this.token = token
    }
  }
})

2. Setup Store（推荐写法）

// 组合式写法（推荐）
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useMainStore = defineStore('main', () => {
  // 1. 定义状态 (State) - 使用 ref 或 reactive
  const count = ref(0)
  const name = ref('Eduardo')
  const user = ref({ name: 'John', age: 30 })

  // 2. 定义计算属性 (Getters) - 使用 computed
  const doubleCount = computed(() => count.value * 2)
  const isEven = computed(() => count.value % 2 === 0)

  // 3. 定义动作 (Actions) - 定义函数
  function increment() {
    count.value++
  }

  function decrement() {
    count.value--
  }

  // 可以包含异步操作
  async function fetchUserAge() {
    try {
      // 模拟 API 调用
      await new Promise(resolve => setTimeout(resolve, 1000))
      user.value.age += 1
    } catch (error) {
      console.error('Failed to fetch user age:', error)
    }
  }

  // 4. 必须返回你想要暴露给外界的部分
  return {
    // State
    count,
    name,
    user,

    // Getters
    doubleCount,
    isEven,

    // Actions
    increment,
    decrement,
    fetchUserAge
  }
})

Setup Store 与 Composition API 思想完全一致

七、Pinia 中的数据更新原则

1. 可以直接修改 state

// 可以在引入 Store 仓库的组件里面直接更改
// 只是通常不建议这么做

store.count++

为什么不推荐

虽然可以直改，但在中大型项目中，如果随处直接修改 Store 数据，会带来如下一些问题：
- 业务逻辑碎片化
  - 如果修改数据的逻辑（比如：修改价格前要检查库存、计算折扣、验证权限）散落在 10 个不同的 .vue 文件里。
  - 后果：当你需要修改这个逻辑时，你得满项目找这 10 个地方。如果写在 action 里，你只需要改 Store 里的一个函数
- 调试与追踪困难
  - Pinia 的 Action 像是一个“带名字的事务所”
  - 直接修改：在 DevTools 里，你可能只看到数据变了，但不知道是哪个组件、因为什么逻辑触发的
  - Action 修改：DevTools 会记录下 Action 的名称和参数，你可以清晰地看到“用户点击了支付按钮 -> 触发了 checkout Action -> 状态变更”

2. 推荐在 actions 中集中修改

优点：

逻辑集中
方便调试
易于维护

八、Pinia 数据持久化

介绍：
- Pinia 数据持久化是指将 Store 中的数据自动保存到浏览器的本地存储
  - localStorage
  - sessionStorage
- 这样即使用户刷新页面或关闭浏览器后再次打开，数据依然能够恢复
- 对于记住用户的登录状态、购物车内容、主题偏好等场景非常有用
Pinia 官方并没有内置持久化插件，但社区提供了一个非常流行且好用的官方推荐插件
- pinia-plugin-persistedstate

pinia-plugin-persistedstate的使用方法：

安装插件：首先，我们需要在我们的项目里面安装 pinia-plugin-persistedstate 插件

npm install pinia-plugin-persistedstate
# 或者
yarn add pinia-plugin-persistedstate
# 或者
pnpm add pinia-plugin-persistedstate

在 Pinia 实例中注册插件

// main.js 或 store/index.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import persistedstate from 'pinia-plugin-persistedstate'; // 导入插件

const app = createApp(App);

const pinia = createPinia();
pinia.use(persistedstate); // 注册插件

app.use(pinia);
app.mount('#app');

在 Store 定义中启用持久化

在使用 defineStore 定义 Store 时，通过添加 persist: true 或一个配置对象来启用持久化

// 示例1：简单的配置
// stores/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', () => {
  // Store 配置项
  // state、getter 和 action 都写这里面
  , {
  // 在这里添加持久化配置
  persist: true // 最简单的形式，会持久化整个 Store 的 state
});

 // ================================================================
  
// 示例 2：更详细的配置
export const useUserStore = defineStore('user', () => {
  // Store 配置项
}, {
  persist: {
    // key: 自定义存储的键名，默认为 storeId
    key: 'my_user_store_key',

    // storage: 选择存储方式，默认为 localStorage
    storage: localStorage, // 或 sessionStorage

    // paths: 指定需要持久化的 state 字段（数组）
    // 如果不设置，则默认持久化整个 state
    paths: ['profile', 'preferences'], // 只持久化 profile 和 preferences

    // 可选：自定义序列化函数 (serializer)
    serializer: {
      serialize: JSON.stringify,
      deserialize: JSON.parse,
    },

    // 可选：自定义存储逻辑 (advanced)
    // 如需要对存储的数据进行加密/解密等操作
  }
});

配置项详解：
- persist: true:
  - 最简单的配置，会将整个 Store 的 state（即 return 出来的 ref 和 reactive 对象）完整地保存到 localStorage 中。
- persist: { ... }:
  - key (string): 指定在浏览器存储中使用的键名。如果不指定，默认使用 defineStore 时的第一个参数（即 storeId）。
  - storage (Storage): 指定使用的 Web Storage 接口。可以是 localStorage（数据永久保存，除非手动清除）或 sessionStorage（数据仅在当前会话期间有效，关闭浏览器标签页/窗口后消失）。默认为 localStorage。
  - paths (Array<string>): 一个字符串数组，用于指定哪些 state 属性需要被持久化。如果设置了 paths，则只有列出的属性会被保存，其他属性会被忽略。这对于不想持久化临时数据或敏感信息（如 token）非常有用。
  - serializer (object): 允许你自定义数据的序列化和反序列化方式。默认使用 JSON.stringify 和 JSON.parse。在某些特殊情况下可能需要自定义。

选项式API与组合式API的区别

Fri, 23 Jan 2026 12:57:31 GMT

Vue 作为前端三大框架之一，从 Vue 2到 Vue 3的迭代不仅带来了性能的飞跃，更在代码组织、逻辑复用等核心层面进行了架构升级。其中，选项式 API（Options API）与组合式 API（Composition API）作为两代框架的核心编程范式，承载着不同的设计理念与使用场景。本文将从设计初衷、语法结构、逻辑复用、性能表现等维度，全方位拆解二者的区别，帮助开发者精准把握两种 API 的适用场景，提升 Vue 项目开发效率。。

一、设计理念：面向对象 vs 函数式组合

两种 API 的本质差异源于底层设计理念的不同，这也决定了它们在代码组织方式上的核心区别。。

###1. 选项式 API（Vue 2默认））选项式 API 基于面向对象编程（OOP）思想，将组件的功能拆分为一系列预定义选项，如 data、methods、computed、watch、created 等。开发者需将不同逻辑分散到对应选项中，Vue 内部通过整合这些选项构建组件实例。。

这种方式的优势在于入门门槛低，结构清晰，符合开发者对“对象”的认知习惯——组件就像一个封装好的对象，不同选项对应对象的不同属性和方法。但缺点也十分明显：当组件逻辑复杂时，相关代码会分散在多个选项中，形成“碎片化”代码，难以追踪和维护。

###2. 组合式 API（Vue 3推荐））组合式 API 基于于**函数式编程*思想，摒弃了固定的选项划分，允许开发者将相关逻辑封装在独立的函数中，再通过组合这些函数构建组件。核心是通过 setup 函数作为逻辑入口，结合 ref、reactive、computed、watch 等 API，自由组织代码结构。。这种方式打破了选项式 API 的结构限制，让“相关逻辑聚在一起”，实现了逻辑的模块化拆分与复用，尤其适合复杂组件的开发。同时，函数式的设计也更契合 Vue 3的响应式原理（基于 Proxy），为性能优化提供了更大空间。。

二、语法结构：固定选项 vs 自由组合

语法是设计理念的直接体现，两种 API 的代码结构差异显著，我们通过实现同一个功能（计数器）来直观对比。。

###1. 选项式 API 实现现选项式 API 需严格按照预设选项编写代码，逻辑分散在 data、methods、computed 中：：



// Vue2 选项式API 计数器组件
export default {
  // 数据定义
  data() {
    return {
      count: 0
    }
  },
  // 计算属性
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  // 方法
  methods: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  },
  // 生命周期钩子
  created() {
    console.log('计数器组件初始化完成，初始值：', this.count)
  }
}

特点：代码按 “选项类型” 划分，无需手动管理上下文（this 指向组件实例），但逻辑关联性弱——若需扩展计数器的 “持久化存储” 功能，需在 data 中加存储标识，methods 中加存储方法，created 中加读取逻辑，代码分散在三个不同选项中。。

###2. 组合式 API 实现现组合式 API 通过 setup 函数整合所有逻辑，相关功能的代码集中在一起：：



// Vue3 组合式API 计数器组件
import { ref, computed, onMounted } from 'vue'

export default {
  setup() {
    // 数据定义（ref用于基本类型响应式）
    const count = ref(0)
    
    // 计算属性
    const doubleCount = computed(() => count.value * 2)
    
    // 方法
    const increment = () => {
      count.value++ // ref对象需通过.value访问/修改
    }
    const decrement = () => {
      count.value--
    }
    
    // 生命周期钩子（组合式API中钩子前缀为on）
    onMounted(() => {
      console.log('计数器组件初始化完成，初始值：', count.value)
    })
    
    // 暴露给模板使用的内容
    return {
      count,
      doubleCount,
      increment,
      decrement
    }
  }
}

特点：逻辑高度聚合，若需添加持久化功能，可直接在 setup 函数中新增相关逻辑（如使用 localStorage），形成独立的逻辑块。同时，组合式 API 需手动管理响应式数据（ref/reactive）和上下文，无 this 指向问题（setup 函数中 this 为 undefined），避免了选项式 API 中 this 指向混乱的问题。。

三、核心差异对比

除了设计理念和语法结构，二者在逻辑复用、响应式原理、生命周期、类型支持等方面也存在显著差异，具体如下：

1. 逻辑复用能力

逻辑复用是大型项目开发的核心需求，两种 API 的实现方式差异极大。。

选项式 APII：主要通过“混入（mixin）”实现逻辑复用。但 mixin 存在明显缺陷：① 命名冲突：多个 mixin 中的 data、methods 可能重名，覆盖优先级难以控制；② 逻辑模糊：组件中无法清晰判断某个属性/方法来自哪个 mixin，调试难度大；③ 依赖不明确：mixin 与组件间可能存在隐式依赖，维护成本高。。
组合式 APII：通过“组合函数（Composable Functions）”实现逻辑复用。将可复用逻辑封装为独立函数，在 setup 中引入并调用，支持参数传递和返回值定制。优势在于：① 无命名冲突：函数返回的内容需手动暴露给组件，命名由开发者自主控制；② 逻辑清晰：组件中可明确看到复用逻辑的来源，调试便捷；③ 依赖透明：函数与组件间的依赖通过参数和返回值显式关联，降低耦合度。。

示例：封装一个可复用的“鼠标位置监听”逻辑：



// 组合函数：useMousePosition.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useMousePosition() {
  const x = ref(0)
  const y = ref(0)
  
  const updatePosition = (e) => {
    x.value = e.clientX
    y.value = e.clientY
  }
  
  onMounted(() => {
    window.addEventListener('mousemove', updatePosition)
  })
  
  onUnmounted(() => {
    window.removeEventListener('mousemove', updatePosition)
  })
  
  return { x, y }
}

// 在组件中使用
import { useMousePosition } from './useMousePosition'

export default {
  setup() {
    const { x, y } = useMousePosition()
    return { x, y }
  }
}

2. 响应式原理

响应式是 Vue 的核心特性，两种 API 的响应式实现基于不同的底层机制。。

选项式 APII*：基于**Object.defineProperty*实现。Vue 2会遍历 data 中的所有属性，通过 Object.defineProperty 为其添加 getter 和 setter，监听属性的读取和修改。但这种方式存在局限性：① 无法监听对象新增/删除的属性；② 无法监听数组的下标修改和长度变化（需通过 Vue.set/Vue.delete 或数组变异方法解决）；③ 对复杂对象的响应式处理成本高，需深度遍历。。
组合式 APII*：基于**Proxy*实现。Vue 3通过 Proxy 包裹响应式对象，直接拦截对象的所有操作（读取、修改、新增、删除等），无需深度遍历。优势在于：① 原生支持对象新增/删除属性；② 支持数组下标修改和长度变化；③ 响应式触发更精准，性能更优；④ 提供 ref（基本类型响应式）和 reactive（对象类型响应式）两种 API，适配不同场景。。

3. 生命周期

两种 API 的生命周期钩子名称和使用方式略有差异，核心逻辑一致。。

选项式 APII：直接使用生命周期钩子名称作为选项，如 created、mounted、updated、destroyed 等，函数内部 this 指向组件实例。。
组合式 APII：生命周期钩子需从 vue 中导入，前缀为“on”，如 onMounted、onUpdated、onUnmounted 等，需在 setup 函数中调用。由于 setup 函数执行时机早于 created（在组件实例创建前执行），因此无需 onCreated 钩子，setup 函数本身即可替代其功能。。

生命周期对应关系：选项式 APII 组合式 APII|说明| |---|---|---| |beforeCreate|-setup 函数执行前，无对应钩子子| |created|-setup 函数执行期间，无需单独钩子子| |beforeMount|onBeforeMount|组件挂载前触发| |mounted|onMounted|组件挂载完成触发| |beforeUpdate|onBeforeUpdate|组件更新前触发| |updated|onUpdated|组件更新完成触发| |beforeDestroy|onBeforeUnmount|组件卸载前触发（Vue 3更名，语义更准确）| |destroyed|onUnmounted|组件卸载完成触发||

4. 类型支持

Vue 3对 TypeScript 的支持进行了全面优化，组合式 API 在类型推导上更具优势。。

选项式 APII：由于依赖 this 上下文，TypeScript 难以对其进行精准的类型推导。需通过 Vue.extend 或组件选项中的 props 定义来补充类型，配置繁琐，且部分场景（如 mixin 中的类型）无法完美适配。。
组合式 APII：基于函数式设计，天然契合 TypeScript 的类型系统。ref 和 reactive 会自动推导数据类型，组合函数的参数和返回值也可通过 TypeScript 明确约束，类型推导更精准、更简洁，无需额外冗余配置，是 Vue3+TS 项目的首选方案。。

5. 代码组织与可维护性

随着组件复杂度的提升，两种 API 的代码可维护性差异会愈发明显。。

选项式 APII：适合简单组件（如 UI 组件库中的基础组件），代码结构固定，易上手。但对于复杂组件（如包含表单校验、数据请求、状态管理的页面级组件），逻辑分散在多个选项中，形成“面条代码”，后续修改和扩展难度大。。
组合式 APII：适合复杂组件和大型项目，可按“业务逻辑”划分代码块（如表单逻辑、数据请求逻辑、状态管理逻辑），每个逻辑块封装为独立函数，代码结构清晰，可维护性和可扩展性更强。同时，组合式 API 的代码更易压缩，打包体积更优。。

四、适用场景

两种 API 并非对立关系，Vue 3同时支持两种 API（选项式 API 需通过@vue/composition-api 插件在 Vue 2中使用），开发者需根据项目场景选择合适的方案。。

###1. 选项式 API 适用场景景

小型项目或简单组件，逻辑简单，无需复杂复用；

-团队成员以 Vue 2开发者为主，学习成本敏感，无需快速迁移到组合式 API；；

-UI 组件库中的基础组件，结构固定，无需频繁修改。。

###2. 组合式 API 适用场景景

大型项目或复杂组件，逻辑复杂，需要高频复用；

-使用 TypeScript 开发的项目，追求精准的类型推导；；

需要优化性能的场景（如复杂响应式对象、大量数据处理）；

-新启动的 Vue 3项目，推荐优先使用组合式 API，为项目长期维护奠定基础。。

JavaScript Promise

Fri, 26 Dec 2025 12:27:45 GMT

一、为什么需要 Promise？—— 告别回调地狱

在 Promise 出现之前，JavaScript 处理异步操作的主流方式是回调函数。比如我们需要按顺序执行三个异步请求（第一个请求的结果作为第二个的参数，第二个的结果作为第三个的参数），代码会变成这样：


// 回调地狱示例：按顺序执行三个异步请求
ajax('api/step1', (res1) => {
  console.log('第一步完成', res1);
  ajax('api/step2?param=' + res1, (res2) => {
    console.log('第二步完成', res2);
    ajax('api/step3?param=' + res2, (res3) => {
      console.log('第三步完成', res3);
    }, (err3) => {
      console.error('第三步失败', err3);
    });
  }, (err2) => {
    console.error('第二步失败', err2);
  });
}, (err1) => {
  console.error('第一步失败', err1);
});

这种嵌套层级不断加深的代码，被称为“回调地狱”（Callback Hell），它存在三个致命问题：

可读性差：代码横向扩张，逻辑链条被嵌套割裂，后期维护时需要层层拆解才能理清流程；
错误处理繁琐：每个异步操作都要单独处理错误，无法统一捕获，容易遗漏异常；
可维护性低：修改某个步骤的逻辑时，需要改动多层嵌套的代码，耦合度极高。

而 Promise 的出现，正是为了解决这些问题。它通过“状态管理”和“链式调用”，将嵌套的回调改为线性的链式代码，同时提供统一的错误处理机制，让异步逻辑变得清晰可控。

二、Promise 核心概念：什么是“承诺”？

Promise 字面意思是“承诺”，在 JS 中，它是一个代表异步操作最终完成或失败的对象。我们可以用一个生动的类比理解：

你去餐厅点餐，服务员给你一个取餐号（Promise 对象）—— 这个取餐号就是餐厅对你的“承诺”：你的餐品正在制作（pending 状态），最终要么做好了叫你取餐（fulfilled 状态），要么因为食材不足等原因制作失败（rejected 状态）。在等待期间，你不需要一直盯着厨房，而是可以自由做其他事（非阻塞），直到承诺兑现或失败。

从技术角度，Promise 有三个核心特性：

它是一个对象，封装了异步操作的结果；
提供统一的 API（then/catch/finally 等），让异步操作的处理方式标准化；
状态一旦确定就不可变，确保行为的确定性。

三、Promise 三大状态与状态流转

Promise 的核心是“状态管理”，它有且只有三种状态，且状态流转不可逆：

状态	说明	是否可变
pending（进行中）	初始状态，异步操作正在执行，既未成功也未失败	是（可转为 fulfilled 或 rejected）
fulfilled（已成功）	异步操作完成，Promise 兑现了承诺	否（状态凝固，不可再变）
rejected（已失败）	异步操作失败，Promise 未兑现承诺	否（状态凝固，不可再变）
状态流转的唯一路径：


pending（初始） 
  ├─ resolve() → fulfilled（成功）
  └─ reject() → rejected（失败）

关键提醒：状态一旦从 pending 转为 fulfilled 或 rejected，就永远无法改变。比如先调用 resolve() 再调用 reject()，reject() 会失效；反之亦然。

示例验证状态不可逆：


const p = new Promise((resolve, reject) => {
  resolve('操作成功'); // 状态转为 fulfilled
  reject('操作失败'); // 无效！状态已凝固
});
p.then(res => console.log(res)); // 输出：操作成功
p.catch(err => console.log(err)); // 不会执行

四、Promise 基础用法：从创建到使用

4.1 创建 Promise 实例

通过 new Promise(executor) 创建 Promise 实例，executor 是一个立即执行的函数，接收两个参数：

resolve(value)：将状态从 pending 转为 fulfilled，并传递成功的结果 value；
reject(reason)：将状态从 pending 转为 rejected，并传递失败的原因 reason（通常是 Error 对象）。

示例：创建一个模拟异步请求的 Promise：


// 创建 Promise 实例
const fetchData = new Promise((resolve, reject) => {
  console.log('Promise 执行器立即执行'); // 同步执行
  // 模拟异步操作（比如接口请求）
  setTimeout(() => {
    const success = Math.random() > 0.5; // 50% 成功概率
    if (success) {
      resolve({ code: 200, data: '请求成功的数据' }); // 成功：传递结果
    } else {
      reject(new Error('接口请求超时')); // 失败：传递错误对象
    }
  }, 1000);
});

注意：Promise 构造函数中的 executor 函数是同步立即执行的，但 resolve/reject 通常在异步操作内部调用，决定最终的状态。

4.2 三种快捷创建方式

除了 new Promise()，JS 还提供了三个静态方法，快速创建指定状态的 Promise：

Promise.resolve(value)：快速创建一个已成功的 Promise（fulfilled 状态）

// 等价于 new Promise(resolve => resolve(42))
const p1 = Promise.resolve(42);
p1.then(res => console.log(res)); // 输出：42

适用场景：将非 Promise 值包装成 Promise（便于链式调用）、返回已知成功结果的异步操作。

Promise.reject(reason)：快速创建一个已失败的 Promise（rejected 状态）

// 等价于 new Promise((resolve, reject) => reject(new Error('失败')))
const p2 = Promise.reject(new Error('请求失败'));
p2.catch(err => console.error(err.message)); // 输出：请求失败

Promise.all(iterable) / Promise.race(iterable)：批量处理多个 Promise（后续进阶部分详解）

4.3 消费 Promise：then/catch/finally

创建 Promise 后，需要通过 then、catch、finally 这三个核心方法“消费”它的结果，也就是注册状态改变后的回调函数。

then()：处理成功状态接收一个 onFulfilled 回调函数，当 Promise 变为 fulfilled 时执行，参数是 resolve 传递的成功结果。同时，then() 会返回一个新的 Promise，支持链式调用。
catch()：处理失败状态接收一个 onRejected 回调函数，当 Promise 变为 rejected 时执行，参数是 reject 传递的失败原因。等价于 then(null, onRejected)，且能捕获链式调用中任意环节的错误。
finally()：清理操作接收一个无参数的回调函数，无论 Promise 成功还是失败，都会执行。常用于清理资源（比如关闭加载动画、释放内存）。

示例：完整的 Promise 消费流程：


fetchData
  .then(res => {
    console.log('请求成功：', res.data);
    return res.data.toUpperCase(); // 返回普通值，传递给下一个 then
  })
  .then(upperData => {
    console.log('处理后的数据：', upperData);
  })
  .catch(err => {
    console.error('请求失败：', err.message); // 捕获任意环节的错误
  })
  .finally(() => {
    console.log('请求结束，关闭加载动画'); // 无论成败都执行
  });

五、进阶特性：链式调用与批量处理

5.1 链式调用：线性化异步流程

Promise 最强大的特性之一是“链式调用”，它让多个异步操作按顺序执行变得简单。核心原理是：then()/catch()/finally() 都会返回一个新的 Promise，下一个 then 会接收上一个 then 的返回值，并根据返回值类型决定后续行为：

上一个 then 的返回值	下一个 then 接收的值
普通值（非 Promise）	直接接收该普通值
Promise 对象	等待该 Promise 状态确定后，接收其 resolve/reject 的值
抛出错误（throw new Error()）	错误被后续的 catch 捕获

示例：用链式调用重构“回调地狱”的三个异步请求：


// 链式调用：线性流程，清晰可控
ajax('api/step1')
  .then(res1 => {
    console.log('第一步完成', res1);
    return ajax('api/step2?param=' + res1); // 返回新 Promise，等待其完成
  })
  .then(res2 => {
    console.log('第二步完成', res2);
    return ajax('api/step3?param=' + res2);
  })
  .then(res3 => {
    console.log('第三步完成', res3);
  })
  .catch(err => {
    console.error('任意步骤失败：', err); // 统一捕获所有错误
  });

对比之前的回调地狱，链式调用的代码线性展开，逻辑清晰，错误处理也只需一次 catch 即可。

5.2 批量处理：Promise.all 与 Promise.race

实际开发中，经常需要处理多个异步操作（比如同时加载多个图片、并行请求多个接口），Promise 提供了两个静态方法实现批量处理：

Promise.all(iterable)：并行执行，全成才成接收一个可迭代对象（如数组），包含多个 Promise；返回一个新 Promise：适用场景：多个独立的异步操作，需要全部完成后再继续（比如表单提交前，验证多个接口数据）。

// 并行请求两个接口
const fetchUser = fetch('api/user').then(res => res.json());
const fetchGoods = fetch('api/goods').then(res => res.json());
Promise.all([fetchUser, fetchGoods])
  .then(([user, goods]) => {
    console.log('用户数据：', user);
    console.log('商品数据：', goods);
  })
  .catch(err => {
    console.error('任一请求失败：', err);
  });

当所有传入的 Promise 都变为 fulfilled 时，新 Promise 才 fulfilled，返回值是所有 Promise resolve 结果的数组（顺序与传入顺序一致）；

只要有一个传入的 Promise 变为 rejected，新 Promise 立即 rejected，返回值是第一个 rejected 的原因。

Promise.race(iterable)：竞速执行，先成先得接收一个可迭代对象，返回一个新 Promise：哪个 Promise 先改变状态（无论成功或失败），新 Promise 就沿用哪个的状态和结果。适用场景：处理超时逻辑（比如接口请求超过 5 秒就提示超时）、获取最快响应的资源。

// 模拟接口请求超时逻辑（5秒超时）
const request = fetch('api/data').then(res => res.json());
const timeout = new Promise((resolve, reject) => {
  setTimeout(() => reject(new Error('请求超时')), 5000);
});

Promise.race([request, timeout])
  .then(data => console.log('请求成功：', data))
  .catch(err => console.error('错误：', err)); // 先触发的状态决定结果

六、实战场景与最佳实践

6.1 常见实战场景

接口请求处理：结合 fetch 或 axios（本质是 Promise 封装）处理 API 请求，统一管理加载状态和错误提示。

  async function getUserData() {
  try {
    const res = await fetch('api/user'); // await 是 Promise 的语法糖
    if (!res.ok) throw new Error('接口返回错误');
    const data = await res.json();
    return data;
  } catch (err) {
    console.error('获取用户数据失败：', err);
    throw err; // 向上抛出，让调用方处理
  }
}

批量资源加载：用 Promise.all 并行加载多个图片、脚本，提升页面加载效率。

// 并行加载多张图片
function loadImages(urls) {
  const promises = urls.map(url => {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.onload = () => resolve(img);
      img.onerror = () => reject(new Error(`加载图片失败：${url}`));
      img.src = url;
    });
  });
  return Promise.all(promises);
}

// 使用
loadImages(['img1.jpg', 'img2.jpg'])
  .then(images => console.log('所有图片加载完成', images))
  .catch(err => console.error(err));

异步任务队列：用链式调用实现按顺序执行的异步任务队列（比如依次处理多个文件上传）。

6.2 总结

始终处理错误：每个 Promise 链式调用都要加 catch()，或在 async/await 中用 try/catch，避免“静默错误”导致程序异常。
避免嵌套 Promise：即使在 then 中需要新的异步操作，也应返回 Promise 继续链式调用，而非嵌套 new Promise。
合理使用 Promise.all：多个独立异步操作优先用 Promise.all 并行执行，提升效率；但如果操作有依赖，需用链式调用串行执行。
不滥用 Promise：同步操作无需包装成 Promise；简单的异步操作（如单个定时器），若逻辑简单，可根据情况选择回调，但复杂场景优先用 Promise。
用 async/await 简化代码：async/await 是 Promise 的语法糖，能让链式调用的代码更像同步代码，可读性更高（本质还是基于 Promise 实现）。

Vue2中的Vuex

Sat, 20 Dec 2025 01:22:27 GMT

##一、为什么需要 Vuex？？

在 Vue2 项目开发中，如果你遇到以下问题，就该考虑使用 Vuex 了：

多个组件共享同一状态（如用户信息、购物车数据），组件间传参层层嵌套，代码冗余且易出错；
不同组件需要修改同一状态，通过事件总线（Event Bus）会导致数据流向混乱，难以调试；
希望状态变更可追踪，便于定位问题。

Vuex 把组件的共享状态抽取出来，以一个全局单例模式管理，让组件树构成一个巨大的“视图”，不管在哪个组件，都能获取状态或触发行为，同时保证所有状态的变更都遵循统一的规则，使代码可预测。

二、Vuex 的核心概念（Vue2 版本）

Vuex 的核心由 State、Getter、Mutation、Action、Module 五部分组成，我们先理清每个部分的作用：

1. State：唯一数据源

State 是 Vuex 存储状态（数据）的地方，相当于组件中的 data，但它是全局的，所有组件都能访问。

核心特点：

单一状态树：一个应用只有一个 Store 实例，所有状态集中管理；
响应式：State 中的数据是响应式的，组件获取后，数据变更会自动更新视图。

2. Getter：计算属性

Getter 相当于 Vue 组件中的 computed，用于对 State 中的数据进行二次处理（如过滤、计算），结果会被缓存，只有依赖的数据变化时才会重新计算。

3. Mutation：唯一修改状态的方式

Mutation 是修改 State 的唯一入口，必须是同步函数（异步操作会导致状态变更无法追踪）。每个 Mutation 有一个字符串类型的 type 和一个 handler 函数，handler 函数接收 state 作为第一个参数，可接收第二个参数（载荷 payload）。

4. Action：处理异步操作

Action 用于处理异步逻辑（如接口请求），不能直接修改 State，必须通过提交 Mutation 来修改状态。Action 可以包含任意异步操作，支持提交多个 Mutation。

5. Module：模块化管理

当项目规模较大时，单一 State 会变得臃肿，Module 允许将 Store 分割成多个模块，每个模块拥有自己的 State、Getter、Mutation、Action，便于维护。

三、Vue2 中 Vuex 的使用步骤

1. 环境准备

首先确保项目是 Vue2 环境，安装对应版本的 Vuex（Vue2 对应 Vuex 3.x，Vue3 对应 Vuex 4.x）：

# 安装 Vuex 3.x
npm install vuex@3 --save
# 或
yarn add vuex@3

2. 创建 Store 实例

在项目 src 目录下新建 store 文件夹，创建 index.js：

// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

// 注册 Vuex
Vue.use(Vuex)

// 定义 Store
const store = new Vuex.Store({
  // 1. 状态数据
  state: {
    // 用户信息
    userInfo: {
      name: '',
      token: ''
    },
    // 购物车列表
    cartList: []
  },

  // 2. 计算属性
  getters: {
    // 计算购物车商品总数
    cartTotalCount: state => {
      return state.cartList.reduce((total, item) => total + item.quantity, 0)
    },
    // 过滤已选中的购物车商品
    selectedCartItems: state => {
      return state.cartList.filter(item => item.checked)
    }
  },

  // 3. 同步修改状态
  mutations: {
    // 设置用户信息
    SET_USER_INFO(state, payload) {
      state.userInfo = { ...state.userInfo, ...payload }
    },
    // 添加商品到购物车
    ADD_TO_CART(state, goods) {
      // 先判断商品是否已存在
      const existItem = state.cartList.find(item => item.id === goods.id)
      if (existItem) {
        existItem.quantity += 1
      } else {
        state.cartList.push({ ...goods, quantity: 1, checked: true })
      }
    },
    // 清空购物车
    CLEAR_CART(state) {
      state.cartList = []
    }
  },

  // 4. 异步操作
  actions: {
    // 异步获取用户信息（模拟接口请求）
    async fetchUserInfo({ commit }, userId) {
      try {
        // 模拟接口请求
        const res = await new Promise(resolve => {
          setTimeout(() => {
            resolve({
              name: '张三',
              token: 'abc123456'
            })
          }, 1000)
        })
        // 提交 Mutation 修改状态
        commit('SET_USER_INFO', res)
        return res
      } catch (error) {
        console.error('获取用户信息失败：', error)
        throw error
      }
    },
    // 异步清空购物车（模拟接口+修改状态）
    async clearCart({ commit }) {
      try {
        // 模拟调用清空购物车接口
        await new Promise(resolve => setTimeout(resolve, 500))
        // 提交 Mutation
        commit('CLEAR_CART')
      } catch (error) {
        console.error('清空购物车失败：', error)
      }
    }
  }
})

export default store

3. 在 Vue 项目中挂载 Store

修改 src/main.js，将 Store 挂载到 Vue 实例：

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store' // 引入 Store

new Vue({
  el: '#app',
  store, // 挂载到Vue实例
  render: h => h(App)
})

4. 组件中使用 Vuex

（1）获取 State 数据

有两种方式：直接通过 this.$store.state 访问，或使用 mapState 辅助函数（推荐，简化代码）。

<template>
  <div class="user-info">
    <p>用户名：{{ userInfo.name }}</p>
    <p>购物车商品数：{{ cartList.length }}</p>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    // 方式1：直接访问
    // userInfo() {
    //   return this.$store.state.userInfo
    // },
    // cartList() {
    //   return this.$store.state.cartList
    // }

    // 方式2：mapState 辅助函数（推荐）
    ...mapState(['userInfo', 'cartList'])
  }
}
</script>

（2）使用 Getter

同理，可通过 this.$store.getters 或 mapGetters 辅助函数：

<template>
  <div class="cart">
    <p>购物车总数：{{ cartTotalCount }}</p>
    <p>已选中商品：{{ selectedCartItems.length }} 件</p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['cartTotalCount', 'selectedCartItems'])
  }
}
</script>

（3）提交 Mutation 修改状态

Mutation 必须通过 commit 触发，支持 this.$store.commit 或 mapMutations 辅助函数：

<template>
  <button @click="addGoods">添加商品到购物车</button>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  methods: {
    addGoods() {
      // 方式1：直接 commit
      // this.$store.commit('ADD_TO_CART', { id: 1, name: 'Vue实战教程', price: 99 })

      // 方式2：mapMutations 辅助函数
      this.ADD_TO_CART({ id: 1, name: 'Vue实战教程', price: 99 })
    },
    ...mapMutations(['ADD_TO_CART'])
  }
}
</script>

（4）触发 Action 处理异步

Action 通过 dispatch 触发，支持 this.$store.dispatch 或 mapActions 辅助函数：

<template>
  <div>
    <button @click="getUserInfo">获取用户信息</button>
    <button @click="clearCart">清空购物车</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    async getUserInfo() {
      // 方式1：直接 dispatch
      // await this.$store.dispatch('fetchUserInfo', 1001)

      // 方式2：mapActions 辅助函数
      await this.fetchUserInfo(1001)
      console.log('用户信息已获取：', this.userInfo)
    },
    async clearCart() {
      await this.clearCart()
      console.log('购物车已清空')
    },
    ...mapActions(['fetchUserInfo', 'clearCart'])
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo
    }
  }
}
</script>

5. 模块化（Module）实战

当项目复杂时，拆分 Store 为多个模块，例如拆分 user 和 cart 模块：

步骤1：创建模块文件

// src/store/modules/user.js
export default {
  namespaced: true, // 开启命名空间，避免模块间命名冲突
  state: {
    userInfo: { name: '', token: '' }
  },
  getters: {
    isLogin: state => !!state.userInfo.token
  },
  mutations: {
    SET_USER_INFO(state, payload) {
      state.userInfo = { ...state.userInfo, ...payload }
    }
  },
  actions: {
    async fetchUserInfo({ commit }, userId) {
      const res = await new Promise(resolve => {
        setTimeout(() => resolve({ name: '张三', token: 'abc123' }), 1000)
      })
      commit('SET_USER_INFO', res)
    }
  }
}

// src/store/modules/cart.js
export default {
  namespaced: true,
  state: {
    cartList: []
  },
  getters: {
    cartTotalCount: state => state.cartList.reduce((t, i) => t + i.quantity, 0)
  },
  mutations: {
    ADD_TO_CART(state, goods) {
      const exist = state.cartList.find(i => i.id === goods.id)
      exist ? exist.quantity++ : state.cartList.push({ ...goods, quantity: 1 })
    }
  },
  actions: {
    async clearCart({ commit }) {
      await new Promise(resolve => setTimeout(resolve, 500))
      commit('CLEAR_CART')
    }
  }
}

步骤2：整合模块到 Store

// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import cart from './modules/cart'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    user,
    cart
  }
})

步骤3：组件中使用命名空间模块

<template>
  <div>
    <p>用户名：{{ userInfo.name }}</p>
    <p>购物车总数：{{ cartTotalCount }}</p>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    // 方式1：带命名空间的 mapState
    ...mapState('user', ['userInfo']),
    // 方式2：直接访问
    // userInfo() {
    //   return this.$store.state.user.userInfo
    // },
    ...mapGetters('cart', ['cartTotalCount'])
  },
  methods: {
    ...mapActions('user', ['fetchUserInfo']),
    ...mapActions('cart', ['clearCart']),
    async init() {
      await this.fetchUserInfo(1001)
    }
  },
  created() {
    this.init()
  }
}
</script>

四、Vuex 使用

1. 严格模式

开启严格模式后，任何不是通过 Mutation 修改 State 的操作都会抛出错误，便于调试（生产环境建议关闭）：

const store = new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production', // 仅开发环境开启
  // ...其他配置
})

2. 避免直接修改 State

永远不要在组件中直接修改 this.$store.state.xxx，必须通过 Mutation 或 Action 提交 Mutation，否则状态变更无法追踪。

3. 合理拆分模块

按业务域拆分模块（如 user、cart、order），每个模块独立维护；
开启 namespaced: true，避免命名冲突；
复杂模块可进一步拆分（如 cart 下拆分子模块 cartItem、cartPrice）。

4. 异步逻辑统一放在 Action

所有异步操作（接口请求、定时器、Promise）都放在 Action 中，Mutation 只做同步的状态修改，保证状态变更可追踪。

5. 数据持久化

Vuex 状态刷新后会丢失，可结合 vuex-persistedstate 实现本地存储持久化：

npm install vuex-persistedstate@3 --save # 适配 Vuex 3.x

// src/store/index.js
import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
  // ...其他配置
  plugins: [
    createPersistedState({
      key: 'vue2-vuex-demo', // 本地存储的key
      paths: ['user.userInfo', 'cart.cartList'] // 需要持久化的状态路径
    })
  ]
})

6. 避免过度使用 Vuex

并非所有数据都要放入 Vuex，只有跨组件共享、全局使用的状态（如用户信息、购物车、全局配置）才适合，组件内部的私有状态（如表单临时值）直接用组件 data 即可。

五、常见问题与解决方案

1. 模块中获取根状态/根 Getter

在模块的 Getter/Action 中，可通过第二个参数获取根状态：

// 模块中的 Getter
getters: {
  // rootState 访问根状态，rootGetters 访问根 Getter
  cartTotalPrice: (state, getters, rootState, rootGetters) => {
    return state.cartList.reduce((t, i) => t + i.price * i.quantity, 0)
  }
}

// 模块中的 Action
actions: {
  async updateCart({ commit, rootState }) {
    // 访问根状态的 user 信息
    const token = rootState.user.userInfo.token
    await api.updateCart(token, state.cartList)
  }
}

2. 辅助函数简化命名空间写法

可通过绑定命名空间的方式简化代码：

import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('cart')

export default {
  computed: {
    ...mapState(['cartList'])
  },
  methods: {
    ...mapActions(['addToCart'])
  }
}

六、总结

Vuex 是 Vue2 中解决跨组件共享状态的核心方案，核心是“单向数据流”：View → Dispatch Action → Commit Mutation → Modify State → Update View；
Vuex 3.x 适配 Vue2，核心概念包括 State（状态）、Getter（计算）、Mutation（同步修改）、Action（异步）、Module（模块化）；
“异步逻辑放 Action，同步修改放 Mutation”，复杂项目拆分模块并开启命名空间，结合 vuex-persistedstate 实现状态持久化；
避免过度使用 Vuex，仅管理全局共享状态，组件私有状态仍用 data 维护。

捕获、冒泡和事件委托

Sat, 15 Nov 2025 03:00:00 GMT

一、DOM 和 DOM 树

DOM

概念：DOM（Document Object Model —— 文档对象模型）是一种将 HTML、XML 文档结构转化为树状对象的编程接口。它把文档里的元素、文本、属性等都变成可操作的 “节点对象”，让编程语言（比如 JavaScript）能方便地访问、修改文档的内容、结构和样式，是实现网页动态交互的基础
作用：开发网页内容特效和实现用户交互

DOM 树

概念：DOM 树是 DOM（文档对象模型）对 HTML 或 XML 文档结构的一种树状可视化表示。它将文档中的所有内容（元素、文本、属性、注释等）抽象为 “节点”，并按照它们在文档中的层级关系组织成类似树的结构
DOM 树的核心特点：
- 根节点：整个树的起点是 document 对象（代表整个文档），其直接子节点通常是 HTML 文档的 <html> 元素
- 层级关系：每个节点有明确的父子、兄弟关系。例如，<html> 是 <head> 和 <body> 的父节点，而 <head> 和 <body> 互为兄弟节点
- 节点类型：树中包含多种节点（如元素节点 <div>、文本节点 “Hello”、属性节点 class="box" 等），共同构成文档的完整结构
**作用：**DOM 树直观的体现了标签与标签之间的关系

总结

DOM：为我们提供了一套专门用来操作网页内容的接口，这时候他是一种抽象的模型概念，看不见摸不着。它本质是一套规范和接口（比如 “如何获取元素” “如何修改文本” 的规则），定义了操作文档的方式，但本身不是一个可见的实体，更像是一种 “协议” 或 “逻辑框架”
DOM 树：将这个模型概念给具体化可视化了，变成我们能看见画出来的一种树状结构。是对 DOM 模型的直观呈现，通过树状结构把文档的层级关系（父子、兄弟节点）画出来，让抽象的 “节点关系” 变成了能看懂的图形，帮助理解 DOM 的结构逻辑

一张概览图

DOM树

二、事件流

为什么要先介绍 DOM 和 DOM 树：
- DOM、DOM 树跟事件流有很紧密的关联，简单说：DOM 是基础接口，DOM 树是结构载体，事件流是基于 DOM 树的事件传播规则。
什么是事件流：
- 事件完整执行过程中的流动路径
用一个比喻理解：
- 把 DOM 树看作一棵 “网页树”，树上的每个枝桠、每片叶子（对应 DOM 节点，如按钮、文本）都是可能被 “触碰”（触发事件，如点击）的对象
- 当我们触碰一片叶子（比如点击一个按钮），这个 “触碰信号” 不会直接就到达被触碰的目标叶子上，也不会到达之后一直就停留再目标叶子上 —— 它会先从树根（document）出发，沿着树干、树枝向下 “找”，一路 “找” 到被触碰的叶子上；等到达叶子（目标节点）后，信号又会沿着原来的树枝、树干向上 “返”，一路回到树根。这个 “从根向下找、再从目标向上返” 的完整信号传播路径和规则，就是事件流
事件流有三个阶段
- 事件捕获
- 目标阶段
  - 事件到达实际触发事件的目标节点（比如被点击的按钮），触发该节点上绑定的事件处理函数的阶段
- 事件冒泡
- 通过上面的比喻，简单来说，捕获阶段是从父到子，冒泡阶段是从子到父
一个流程图

事件流

事件捕获

概念：事件从 DOM 树的根节点（document）向下逐层寻找目标节点的过程（一个由上到下的过程）。如果这个从上到下的过程中遇到的节点有绑定与你的触发动作（我点击了一下）相同的事件监听（有一个点击的事件监听），就会先执行该节点上对应的事件处理函数，等所有上层节点的事件执行完，才到目标节点本身
一个比喻理解：
- 把 DOM 树当成一棵大树，我们要触碰的叶子（比如点击按钮，即目标节点）是最终要找的 “目的地”。事件捕获就像 “信号从树根出发，沿着树干、大枝桠、小枝桠，一步步向下找到那片被触碰的叶子”—— 沿途每经过一个节点（树干、大枝桠、小枝桠），如果这个节点绑定了 “捕获阶段” 的事件监听，就会先触发这个监听函数，再继续往下走，直到抵达目标叶子
注意：事件捕获需要写对应代码才能看到效果

代码：

DOM元素.addEventListener(事件类型，事件处理函数，是否使用捕获机制)

代码参数说明：

addEventListener 第三个参数传入 true 代表是捕获阶段触发（较少使用）
若传入 false 代表冒泡阶段触发，默认就是 false
若是用 L0 级事件监听，则只有冒泡阶段，没有捕获

<!-- HTML标签内直接绑定 -->
<button onclick="alert('点击了')">按钮</button>

// JS中通过on+事件名绑定
const btn = document.querySelector('button');
btn.onclick = function() {
  alert('L0级点击事件触发');
};

一个事件捕获的代码案例：

<style>
    #grandpa {
      margin: 100px auto;
      width: 300px;
      height: 300px;
      background-color: cadetblue;
    }

    #father {
      width: 200px;
      height: 200px;
      background-color: darkseagreen;
    }

    #son {
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }
  </style>

<!-- 三层嵌套：爷爷 → 爸爸 → 儿子 -->
  <div id="grandpa">爷爷
    <div id="father">爸爸
      <div id="son">点击我（儿子）</div>
    </div>
  </div>

  <script>
    // 给三层都绑定捕获阶段的点击事件（第三个参数为true）
    grandpa.addEventListener('click', () => {
      alert('爷爷 - 捕获阶段');
    }, true);

    father.addEventListener('click', () => {
      alert('爸爸 - 捕获阶段');
    }, true);

    son.addEventListener('click', () => {
      alert('儿子 - 捕获阶段');
    }, true);
  </script>

事件冒泡

概念：事件从触发的的目标节点开始，向上逐层 “扩散” 回到 DOM 树的根节点的过程（由下向上的过程）。这个从下到上扩散回根节点的过程中，沿途如果有节点绑定了与你触发目标节点的触发动作相同的监听事件，就会向上依次触发这些监听函数，知道回到根节点
一个比喻理解：
- 假设你点击了一片叶子（目标节点，比如一个按钮），事件冒泡就像 “叶子被点击的信号，沿着树枝、树干一路向上传到树根”—— 沿途向上经过的每个节点（比如按钮的父 div、父 body、甚至 html），如果绑定了 “冒泡阶段” 的点击的事件监听，就会依次触发这些监听函数，直到信号传到最顶端的document
简单理解：当一个元素触发事件后，会依次向上触发所有父级的同名事件
注意：事件冒泡在大多数常用事件（如 click、input、mouseover）里面都是是默认存在的，L1 级、L2 级事件监听第三个参数是 false，或者默认都是冒泡，但是也有少数事件（如 focus、blur、scroll）没有冒泡特性

一个事件冒泡的代码案例：

     grandpa.addEventListener('click', () => {
      alert('爷爷 - 冒泡阶段');
    });

    father.addEventListener('click', () => {
      alert('爸爸 - 冒泡阶段');
    });

    son.addEventListener('click', () => {
      alert('儿子 - 冒泡阶段');
    });

一个小小的问题

// 以上面的案例里面的其中一个事件监听为例
son.addEventListener('click', () => {
      alert('儿子 - 捕获阶段');
    });

现在上面这个案例里面第三个参数为默认（false），即现在这个事件监听它监听的是事件冒泡的过程，那么，问题来了，这个事件流里面事件捕获阶段还存在吗？
- 答案是存在，只是此时绑定的事件处理函数不会在捕获阶段被触发，只会在目标阶段和冒泡阶段响应触发
为什么呢？
- 事件流的三个阶段（捕获 → 目标 → 冒泡）是 DOM 规范规定的固定流程，只要事件被触发，这三个阶段就一定会完整执行，与事件绑定方式（是否监听捕获阶段）无关
- addEventListener 的第三个参数（useCapture）的作用是 决定当前事件处理函数在哪个阶段响应：
- 当 useCapture 为 true 时：函数在 捕获阶段 触发（从根到目标的过程中）
- 当 useCapture 为 false 或省略时：函数在 冒泡阶段 触发（到达目标时，或从目标向根传播时）。
- 目标阶段 不论 useCapture 参数是 true 还是 false都会触发

一个关于触发顺序的例子

    grandpa.addEventListener('click', () => {
      alert('爷爷');
    }, true);

    father.addEventListener('click', () => {
      alert('爸爸');
    });

    son.addEventListener('click', () => {
      alert('儿子');
    }, true);

控制事件行为的两种方法

理解了捕获和冒泡的原理后，为了避免“意外触发”或实现复杂的事件逻辑，我们将介绍一个阻止事件传播的方法。

以及另一个阻止默认行为方法，因为经常会与阻止事件传播组合搭配使用，所以我们放在这里一并介绍

阻止事件传播：stopPropagation()

event.stopPropagation()方法可以阻止事件继续向下或向上传播，无论是在捕获阶段还是冒泡阶段调用，都能中断后续 的传播过程
两个小问题：
- ev.stopPropagation()会阻止目标元素事件监听的执行吗？
  - 不会，前面的定义说过，只是会中断捕获和冒泡的后续传播，具体效果看下面例子的效果
- ev.stopPropagation()会影响该元素其他事件的后续传播吗？
  - 也不会，每次事件触发都是一个独立的事件对象（ev），调用 stopPropagation() 仅作用于当前这个事件实例，不会影响未来触发的其他事件（即使是同一类型）。具体效果看下面例子的效果

一个具体例子：

// 思考：
// 以上三个事件监听如果都改为默认的冒泡阶段监听时，ev.stopPropagation()这句话在第二个事件监听里面出现和第三个事件监听里面出现，结果有什么不同？

grandpa.addEventListener('click', () => {
      alert('爷爷');
    }, true);

    father.addEventListener('click', (ev) => {
      ev.stopPropagation()
      alert('爸爸');
    }, true);

    son.addEventListener('click', (ev) => {
      // ev.stopPropagation();
      alert('儿子');
    }, true);

    grandpa.addEventListener('mouseover', () => {
      alert('爷爷（鼠标移入事件出现）');
    }, true);

    father.addEventListener('mouseover', (ev) => {
      alert('爸爸（鼠标移入事件出现）');
    }, true);

    son.addEventListener('mouseover', (ev) => {
      // ev.stopPropagation();
      alert('儿子（鼠标移入事件出现）');
    }, true);

阻止默认行为：preventDefault()

为什么需要？
- 很多事件都有浏览器预设的默认行为，比如点击链接会跳转、提交按钮会提交表单。有时候我们不需要浏览器预设的默认行为，我们想要自定义一些事件的默认行为，就需要先阻止浏览器预设的默认行为，再设置我们自己的。所以介绍的这个event.preventDefault() 方法就可以阻止这些默认行为
与阻止事件传播方法的区别
- 不会影响事件的传播过程（这是与stopPropagation()的核心区别（作用对象不同））

一个具体例子

<body>
  <a href="https://example.com" id="link">点击我</a>
  <form id="form" action="/submit">
    <button type="submit">提交</button>
  </form>

  <script>
    // 阻止链接跳转
    const link = document.getElementById('link');

    document.querySelector('div').addEventListener('click', function () {
      console.log('父盒子被触发');
    })
    
    link.addEventListener('click', (e) => {
      // 取消默认跳转行为
      e.preventDefault();
      console.log('链接被点击，但不跳转');
    });

    // 阻止表单提交
    const form = document.getElementById('form');
    form.addEventListener('submit', (e) => {
      // 取消默认提交刷新
      e.preventDefault();
      console.log('表单提交被拦截，将异步处理');
    });
  </script>
</body>

`stopPropagation()`与`preventDefault()`核心区别总结

特性	`stopPropagation()`	`preventDefault()`
作用对象	事件的传播过程（捕获 / 冒泡）	事件的默认行为（浏览器预设）
是否影响传播	是（中断传播链）	否（传播正常进行）
是否影响默认行为	否（默认行为仍会执行）	是（取消默认行为）
典型使用场景	阻止父子元素事件相互干扰	自定义元素行为（如链接、表单）

三、事件委托

在说事件委托之前，有个问题，在前面提到捕获和冒泡的比喻里面说的传递信号，大家知道这个传递的信号在事件捕获和冒泡里面指的是什么吗？
- 本质是包含了 “触发节点信息” 在内的「事件对象（event）」—— 它装着整个事件的完整信息，是事件传播时的 “信息载体”
- 这个完整信息包括：
  - 谁是触发者？（event.target，就是被点的 li，即 “触发节点信息”）
  - 事件类型是什么？（event.type，比如是 “click” 点击事件）
  - 事件是在哪个阶段传播的？（event.eventPhase，捕获 / 目标 / 冒泡）
  - 点击时鼠标在哪个位置？（event.clientX/event.clientY）
  - 甚至能让信号停止传播（event.stopPropagation()）、阻止默认行为（event.preventDefault()）

事件委托（也叫事件代理）是一种利用事件冒泡特性实现的高效事件处理技巧 —— 简单说，就是不给子节点单独绑定事件，而是把事件绑定在它们的父节点上，由父节点 “代理” 处理所有子节点的事件

核心逻辑：
- 因为事件会冒泡，子节点触发的事件，最终会传到父节点上。父节点监听到了事件对像携带的事件类型与父节点绑定事件类型一致后，就执行父节点对应的事件处理函数，通过事件对象（event）的 target 属性，判断是哪个子节点触发了事件，再针对性处理

一个例子：

  <style>
    #list {
      margin: 100px auto;
      width: 200px;
      background-color: antiquewhite;
    }

    #list li {
      margin-bottom: 10px;
      width: 100%;
      background-color: lightpink;
    }
  </style>

<!-- 父节点：ul；子节点：多个li -->
  <ul id="list">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
  </ul>

  <script>
    // 只给父节点ul绑定一次点击事件（代理所有li的事件）
    document.getElementById('list').addEventListener('click', function (ev) {
      // e.target 就是触发事件的子节点（被点击的li）
      // 确保点击的是 li 节点
      if (ev.target.tagName === 'LI') {
        alert(`点击了：${ev.target.textContent}`);
      }
    });
  </script>

JavaScript解构

Sat, 18 Oct 2025 00:57:30 GMT

JS 中，解构是一种便捷的语法，用于从数组或对象中提取值，并将其赋值给变量。它可以简化代码，让数据提取更直观。解构主要分为 数组解构 和 对象解构。

一、数组解构

数组解构是一种通过索引位置匹配数组元素，并将其赋值给对应变量的语法。由于数组是有序集合，解构时变量的位置与数组元素的位置严格对应，语法上使用方括号 [] 包裹变量。

1. 基本用法

数组解构的核心逻辑是“按位置提取”：左侧方括号中的变量按顺序对应右侧数组中的元素，第一个变量匹配数组第一个元素，第二个变量匹配数组第二个元素，以此类推。

// 左侧变量 [a, b, c] 按顺序匹配右侧数组 [1, 2, 3] 的元素
const [a, b, c] = [1, 2, 3];
console.log(a); // 1（变量a匹配数组索引0的元素）
console.log(b); // 2（变量b匹配数组索引1的元素）
console.log(c); // 3（变量c匹配数组索引2的元素）

如果数组长度大于变量数量，多余的元素会被忽略；如果变量数量多于数组长度，多余的变量会被赋值为 undefined：

const [x, y] = [10]; 
console.log(x); // 10（数组有第一个元素）
console.log(y); // undefined（数组没有第二个元素，变量y无匹配值）

2. 跳过元素

当需要提取数组中间或后面的元素，而忽略前面的部分元素时，可以通过空逗号来“跳过”不需要的位置。逗号的数量代表跳过的元素个数，空逗号之间的位置会被忽略。

// 数组 [10, 20, 30] 中，第一个逗号跳过索引1的元素（20）
const [x, , y] = [10, 20, 30];
console.log(x); // 10（匹配索引0的元素）
console.log(y); // 30（跳过索引1，匹配索引2的元素）

例如，提取数组的第一个和第四个元素，需跳过中间两个元素：

const [first, , , fourth] = [1, 2, 3, 4];
console.log(first); // 1
console.log(fourth); // 4

3. 剩余元素（Rest）

当需要提取数组的前几个元素，同时将剩余所有元素统一收集到一个新数组中时，可以使用 ...变量名 的语法（称为“剩余操作符”）。剩余变量必须放在所有变量的最后一位，否则会报错。

// 提取第一个元素后，将剩余元素收集到 rest 数组中
const [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 1（提取第一个元素）
console.log(rest);  // [2, 3, 4]（剩余元素组成的新数组）

注意：剩余操作符只能收集“剩余”的元素，不能单独使用或放在中间：

// 错误示例：剩余变量不能放在中间
const [a, ...rest, b] = [1, 2, 3, 4]; // 语法报错

4. 默认值

如果数组中某个位置的元素不存在（或为 undefined），解构时可以为对应的变量设置默认值。默认值仅在“无匹配元素”或“匹配元素为 undefined”时生效，若元素为 null、0 等其他值，会使用元素本身。

// 数组 [5] 只有一个元素，变量b无匹配值，使用默认值0
const [a = 0, b = 0] = [5];
console.log(a); // 5（数组有元素，使用原值）
console.log(b); // 0（无匹配元素，使用默认值）

// 若元素为undefined，默认值同样生效
const [c = 10] = [undefined];
console.log(c); // 10（匹配元素为undefined，使用默认值）

5. 交换变量

传统交换两个变量的值需要借助临时变量，而数组解构可以直接通过“位置互换”实现变量交换，原理是将右侧数组的元素按新顺序赋值给左侧变量。

let x = 1, y = 2;

// 传统交换：需要临时变量temp
let temp = x;
x = y;
y = temp;

// 解构交换：右侧数组[y, x]的元素按顺序赋值给左侧[x, y]
[x, y] = [y, x];
console.log(x, y); // 2, 1（变量值成功交换）

这种方式不仅简洁，还能避免临时变量的创建，适用于排序、算法等需要交换值的场景。

二、对象解构

对象解构是通过属性名匹配对象属性，并将属性值赋值给对应变量的语法。由于对象是键值对集合，解构时变量名需与对象的属性名一致（或通过重命名指定对应关系），语法上使用花括号 {} 包裹变量。

1. 基本用法

对象解构的核心逻辑是“按属性名提取”：左侧花括号中的变量名必须与右侧对象的属性名一致，变量会被赋值为对应属性的值，与变量的顺序无关。

const user = { name: 'Alice', age: 30 };
// 变量name匹配对象的name属性，变量age匹配对象的age属性
const { name, age } = user;
console.log(name); // 'Alice'（属性名匹配成功）
console.log(age);  // 30（属性名匹配成功）

如果变量名在对象中不存在，变量会被赋值为 undefined：

const { gender } = user; // user对象中没有gender属性
console.log(gender); // undefined

2. 重命名变量

当希望使用与对象属性名不同的变量名时，可以通过 新变量名: 原属性名 的语法重命名。此时，新变量名用于接收值，原属性名用于匹配对象属性。

const user = { name: 'Bob', age: 25 };
// 用userName接收name属性的值，用userAge接收age属性的值
const { name: userName, age: userAge } = user;
console.log(userName); // 'Bob'（新变量名生效）
console.log(userAge);  // 25（新变量名生效）
// 原变量名name和age未被定义，使用会报错
console.log(name); // ReferenceError: name is not defined

重命名常用于避免变量名冲突（例如，当对象属性名与当前作用域中的变量名重复时）。

3. 默认值

与数组解构类似，对象解构也可以为变量设置默认值。当对象中不存在对应的属性，或属性值为 undefined 时，默认值生效；若属性值为 null、0 等其他值，会使用属性本身的值。

// 对象中只有age属性，city属性不存在，使用默认值'Beijing'
const { city = 'Beijing', age = 18 } = { age: 20 };
console.log(city); // 'Beijing'（属性不存在，用默认值）
console.log(age);  // 20（属性存在，用原值）

// 若属性值为undefined，默认值生效
const { score = 60 } = { score: undefined };
console.log(score); // 60（属性值为undefined，用默认值）

默认值也可以结合重命名使用：

// 重命名属性，并设置默认值
const { name: userName = 'Guest' } = {}; // 对象中无name属性
console.log(userName); // 'Guest'（默认值生效）

4. 剩余属性（Rest）

当需要提取对象的部分属性，同时将剩余所有属性统一收集到一个新对象中时，可以使用 ...变量名 的语法。剩余变量必须放在所有变量的最后一位，否则会报错。

// 提取a和b属性后，将剩余属性收集到rest对象中
const { a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a);    // 1（提取a属性）
console.log(b);    // 2（提取b属性）
console.log(rest); // { c: 3, d: 4 }（剩余属性组成的新对象）

剩余属性常用于筛选对象中的部分属性，或复制对象时排除特定属性：

const user = { id: 1, name: 'Alice', password: '123' };
// 提取password，剩余属性作为安全信息（不含密码）
const { password, ...safeUser } = user;
console.log(safeUser); // { id: 1, name: 'Alice' }

5. 嵌套对象解构

当对象中包含嵌套的子对象时，可以通过“多层解构”直接提取子对象的属性。语法上，在对应位置使用嵌套的花括号，按层级匹配属性。

const obj = {
  info: { name: 'Charlie', age: 35 }, // 嵌套的info对象
  score: 90
};

// 第一层解构：提取info属性和score属性
// 第二层解构：从info对象中提取name属性
const { info: { name }, score } = obj;
console.log(name); // 'Charlie'（成功提取嵌套属性）
console.log(score); // 90（提取外层属性）

如果需要同时保留外层对象和内层属性，可以单独定义外层变量：

// 同时保留info对象和其内部的name属性
const { info, info: { name } } = obj;
console.log(info); // { name: 'Charlie', age: 35 }（外层对象）
console.log(name); // 'Charlie'（内层属性）

三、其他场景的解构

除了数组和对象的基础解构，解构语法还可以应用于函数参数、字符串等场景，进一步简化代码。

1. 函数参数解构

当函数接收一个数组或对象作为参数时，可以直接在参数列表中使用解构语法，快速提取所需的值，避免在函数内部重复编写 参数.属性 或 参数[索引]。

对象参数解构：适合参数为对象的场景，直接提取所需属性，还可结合默认值处理参数缺失的情况。

// 函数参数中直接解构对象，提取name和age属性，并为age设置默认值18
function printUser({ name, age = 18 }) {
  console.log(`Name: ${name}, Age: ${age}`);
}

// 调用时只需传入包含name的对象，age会使用默认值
printUser({ name: 'Dave' }); // Name: Dave, Age: 18

注意：若函数可能被无参数调用，需为解构参数设置默认空对象 = {}，否则会报错：

// 错误示例：无参数调用时，解构undefined会报错
function fn({ a }) {}
fn(); // TypeError: Cannot destructure property 'a' of 'undefined' or 'null'

// 正确示例：设置默认空对象，避免报错
function fn({ a } = {}) {
  console.log(a); // undefined（安全处理）
}
fn();

数组参数解构：适合参数为数组的场景，按位置提取元素，使函数逻辑更清晰。

// 函数参数中解构数组，直接获取a和b
function sum([a, b]) {
  return a + b;
}

console.log(sum([2, 3])); // 5（无需在函数内写arr[0]和arr[1]）

2. 字符串解构

字符串是类数组对象（具有长度和索引），因此可以像数组一样被解构，按索引位置提取字符。

// 字符串'hello'按索引0、1、2的位置提取字符
const [c1, c2, c3] = 'hello';
console.log(c1); // 'h'（索引0的字符）
console.log(c2); // 'e'（索引1的字符）
console.log(c3); // 'l'（索引2的字符）

结合剩余操作符，还可以提取前几个字符和剩余字符：

const [first, ...rest] = 'hello';
console.log(first); // 'h'
console.log(rest);  // ['e', 'l', 'l', 'o']（剩余字符组成的数组）

3. 解构与展开（Spread）的区别

... 符号在 JavaScript 中既可以用于解构（剩余操作符），也可以用于展开（Spread 操作符），但两者的作用完全相反：

解构（剩余操作符）：从数组或对象中提取部分值，并将剩余值收集到一个新的数组或对象中（拆包过程）。
展开（Spread 操作符）：将数组或对象中的所有值展开到另一个数组、对象或函数参数中（打包过程）。

示例对比：

// 解构（拆包）：从数组中提取first，剩余元素收集到rest
const [first, ...rest] = [1, 2, 3];
console.log(first); // 1
console.log(rest);  // [2, 3]

// 展开（打包）：将rest数组的元素展开到新数组中
const newArr = [...rest, 4]; 
console.log(newArr); // [2, 3, 4]（rest的元素被展开后添加4）

解构语法在实际开发中应用非常广泛，能极大简化代码逻辑。以下是一些常见的应用场景及示例：

四、常见应用场景

1. 处理函数参数

提取对象参数的特定属性

当函数接收一个对象作为参数时，直接解构出需要的属性，避免重复写 obj.xxx：

// 传统写法
function getUserInfo(user) {
  console.log(user.name, user.age, user.gender);
}

// 解构写法（更简洁）
function getUserInfo({ name, age, gender = '未知' }) {
  console.log(name, age, gender);
}

getUserInfo({ name: '张三', age: 20 }); // 张三 20 未知

处理数组参数

适合需要按顺序提取数组中特定位置的值的场景：

// 计算二维坐标距离
function getDistance([x1, y1], [x2, y2]) {
  return Math.hypot(x2 - x1, y2 - y1);
}

console.log(getDistance([0, 0], [3, 4])); // 5（3-4-5直角三角形斜边）

2. 交换变量值

无需临时变量，一行代码完成变量交换，常用于排序、算法等场景：

let a = 10, b = 20;

// 传统交换（需要临时变量）
let temp = a;
a = b;
b = temp;

// 解构交换（更简洁）
[a, b] = [b, a];
console.log(a, b); // 20 10

3. 处理数组返回值

函数返回多个值时，通常用数组包裹，解构可直接按位置接收：

// 函数返回数组（多值）
function getMinMax(arr) {
  return [Math.min(...arr), Math.max(...arr)];
}

const numbers = [3, 1, 5, 2];
const [min, max] = getMinMax(numbers);
console.log(min, max); // 1 5

4. 设置函数默认参数

结合默认值，处理函数参数缺失的情况：

// 未使用解构时，默认参数写法繁琐
function config(options) {
  const timeout = options.timeout || 5000;
  const method = options.method || 'GET';
}

// 解构+默认值（简洁且直观）
function config({ timeout = 5000, method = 'GET' } = {}) {
  console.log(timeout, method);
}

config(); // 5000 GET（参数为空时使用默认值）
config({ method: 'POST' }); // 5000 POST

注意：= {} 是为了避免参数为 undefined 时解构报错（比如直接调用 config()）。

5. 遍历对象/数组时提取值

在 for...of 或数组方法（如 map、forEach）中，快速提取数据：

// 遍历数组对象
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

users.forEach(({ id, name }) => {
  console.log(`ID: ${id}, Name: ${name}`);
});

// 遍历Map（Map的entries是[key, value]形式）
const map = new Map();
map.set('name', 'Charlie');
map.set('age', 30);

for (const [key, value] of map) {
  console.log(`${key}: ${value}`); // name: Charlie; age: 30
}

6. 忽略不需要的数据

从数组或对象中提取部分值，忽略无关数据，减少内存占用：

// 数组中只需要第一个和最后一个元素
const [first, , , last] = [10, 20, 30, 40];
console.log(first, last); // 10 40

// 对象中只需要部分属性
const { password, ...userInfo } = { name: 'Dave', age: 28, password: '123456' };
console.log(userInfo); // { name: 'Dave', age: 28 }（不含password）

7. 嵌套结构数据处理

面对多层嵌套的对象/数组，解构能一次性提取深层数据：

const data = {
  result: {
    items: [
      { id: 1, details: { price: 100 } },
      { id: 2, details: { price: 200 } }
    ]
  }
};

// 提取第一个item的price
const { result: { items: [firstItem] } } = data;
const { details: { price } } = firstItem;
console.log(price); // 100

总结

解构语法通过“按位置匹配”（数组）和“按属性名匹配”（对象）的方式，简化了从复杂数据结构中提取值的过程，减少重复代码、提升可读性在数据存在缺失值和多余数据的情况下能灵活处理边界情况。其核心优势是简化数据提取流程，尤其在以下场景中表现突出：

处理函数参数（减少 obj.xxx 重复调用）。
变量交换、多值返回处理（减少临时变量）。
遍历集合时提取关键信息（让循环体更简洁）。

JavaScript 字符串常用属性方法汇总及详解

Sun, 12 Oct 2025 01:15:00 GMT

方法分类汇总索引

获取字符串信息方法：

length：返回字符串的长度（字符数量）

字符串查找方法：

charAt()：返回指定索引位置的字符
charCodeAt()：返回指定索引位置字符的 Unicode 编码
indexOf()：查找子字符串首次出现的位置
lastIndexOf()：查找子字符串最后出现的位置
includes()：判断是否包含指定子字符串
startsWith()：判断是否以指定子字符串开头
endsWith()：判断是否以指定子字符串结尾

字符串截取/提取方法：

slice()：提取字符串的一部分并返回新字符串
substring()：提取两个指定索引之间的字符
substr()：从指定位置提取指定长度的子字符串（不推荐使用）

字符串转换方法：

toLowerCase()：将字符串转换为小写
toUpperCase()：将字符串转换为大写
toString()：返回字符串本身
valueOf()：返回字符串的原始值

字符串替换/分割方法：

replace()：查找匹配子字符串并替换为新内容
split()：将字符串分割成字符串数组

字符串修剪方法：

trim()：去除字符串两端的空白字符
trimStart()/trimLeft()：去除字符串开头的空白字符
trimEnd()/trimRight()：去除字符串结尾的空白字符

字符串重复方法：

repeat()：将字符串重复指定的次数

字符串连接方法：

concat()：连接两个或多个字符串

字符串填充方法：

padStart()：在字符串开头填充字符至指定长度
padEnd()：在字符串结尾填充字符至指定长度

其他字符串方法：

match()：查找匹配正则表达式的结果
matchAll()：返回所有匹配正则表达式的迭代器
search()：查找与正则表达式匹配的子字符串位置
localeCompare()：考虑区域设置比较两个字符串

以下为 JavaScript 中常用的字符串方法详解，这些方法都不会改变原字符串，而是返回一个新的字符串或其他类型的值。

一、获取字符串信息属性

1. length

作用：返回字符串的长度（字符数量）
语法：str.length
参数：无参数
返回值：数字，表示字符串的长度
是否改变原字符串：否
示例：

const str = "Hello World";
// 获取字符串长度
const len = str.length;
console.log(len); // 输出: 11
// 注意：length是属性，不是函数，不需要加括号

二、字符串查找方法

1. charAt()

作用：返回指定索引位置的字符
语法：str.charAt(index)
参数：index - 必需，表示字符在字符串中的索引（从 0 开始）
返回值：字符串，指定索引处的字符；如果索引超出范围，则返回空字符串
是否改变原字符串：否
示例：

const str = "JavaScript";
// 获取索引为4的字符
const char = str.charAt(4);
console.log(char); // 输出: 'S'

// 获取索引超出范围的字符（返回空字符串）
const invalidChar = str.charAt(20);
console.log(invalidChar); // 输出: ''

2. charCodeAt()

作用：返回指定索引位置字符的 Unicode 编码
语法：str.charCodeAt(index)
参数：index - 必需，字符在字符串中的索引（从 0 开始）
返回值：数字，表示指定索引处字符的 Unicode 编码；如果索引超出范围，则返回 NaN
是否改变原字符串：否
示例：

const str = "A";
// 获取字符 'A' 的 Unicode 编码
const code = str.charCodeAt(0);
console.log(code); // 输出: 65

// 获取索引超出范围的字符编码（返回NaN）
const invalidCode = str.charCodeAt(1);
console.log(invalidCode); // 输出: NaN

3. indexOf()

作用：查找某个子字符串在当前字符串中首次出现的位置
语法：str.indexOf(searchValue[, fromIndex])
参数：
- searchValue - 必需，要查找的子字符串
- fromIndex - 可选，开始查找的索引位置，默认为 0
返回值：数字，子字符串首次出现的索引；如果没有找到，则返回-1
是否改变原字符串：否
示例：

const str = "Hello, Hello World";
// 查找 "Hello" 首次出现的位置
const firstPos = str.indexOf("Hello");
console.log(firstPos); // 输出: 0

// 从索引5开始查找 "Hello"
const posFrom5 = str.indexOf("Hello", 5);
console.log(posFrom5); // 输出: 7

// 查找不存在的子字符串
const notFound = str.indexOf("JavaScript");
console.log(notFound); // 输出: -1

4. lastIndexOf()

作用：查找某个子字符串在当前字符串中最后出现的位置
语法：str.lastIndexOf(searchValue[, fromIndex])
参数：
- searchValue - 必需，要查找的子字符串
- fromIndex - 可选，开始查找的索引位置，默认为字符串的长度-1
返回值：数字，子字符串最后出现的索引；如果没有找到，则返回-1
是否改变原字符串：否
示例：

const str = "Hello, Hello World";
// 查找 "Hello" 最后出现的位置
const lastPos = str.lastIndexOf("Hello");
console.log(lastPos); // 输出: 7

// 在索引6之前查找 "Hello"
const posBefore6 = str.lastIndexOf("Hello", 6);
console.log(posBefore6); // 输出: 0

5. includes()

作用：判断当前字符串是否包含指定的子字符串
语法：str.includes(searchValue[, fromIndex])
参数：
- searchValue - 必需，要查找的子字符串
- fromIndex - 可选，开始查找的索引位置，默认为 0
返回值：布尔值，如果包含则返回 true，否则返回 false
是否改变原字符串：否
示例：

const str = "Hello World";
// 判断字符串是否包含 "World"
const hasWorld = str.includes("World");
console.log(hasWorld); // 输出: true

// 从索引6开始查找 "World"
const hasWorldFrom6 = str.includes("World", 6);
console.log(hasWorldFrom6); // 输出: true

// 判断字符串是否包含 "Java"
const hasJava = str.includes("Java");
console.log(hasJava); // 输出: false

6. startsWith()

作用：判断当前字符串是否以指定的子字符串开头
语法：str.startsWith(searchValue[, position])
参数：
- searchValue - 必需，要查找的子字符串
- position - 可选，开始查找的位置，默认为 0
返回值：布尔值，如果以指定子字符串开头则返回 true，否则返回 false
是否改变原字符串：否
示例：

const str = "Hello World";
// 判断字符串是否以 "Hello" 开头
const startsWithHello = str.startsWith("Hello");
console.log(startsWithHello); // 输出: true

// 判断从索引6开始的子字符串是否以 "W" 开头
const startsWithW = str.startsWith("W", 6);
console.log(startsWithW); // 输出: true

// 判断字符串是否以 "World" 开头
const startsWithWorld = str.startsWith("World");
console.log(startsWithWorld); // 输出: false

7. endsWith()

作用：判断当前字符串是否以指定的子字符串结尾
语法：str.endsWith(searchValue[, length])
参数：
- searchValue - 必需，要查找的子字符串
- length - 可选，作为字符串长度使用的值，默认为字符串的实际长度
返回值：布尔值，如果以指定子字符串结尾则返回 true，否则返回 false
是否改变原字符串：否
示例：

const str = "Hello World";
// 判断字符串是否以 "World" 结尾
const endsWithWorld = str.endsWith("World");
console.log(endsWithWorld); // 输出: true

// 只考虑前5个字符，判断是否以 "Hello" 结尾
const endsWithHello = str.endsWith("Hello", 5);
console.log(endsWithHello); // 输出: true

// 判断字符串是否以 "Hello" 结尾
const endsWithHelloFull = str.endsWith("Hello");
console.log(endsWithHelloFull); // 输出: false

三、字符串截取/提取方法

1. slice()

作用：提取字符串的一部分，并返回一个新的字符串
语法：str.slice(startIndex[, endIndex])
参数：
- startIndex - 必需，提取的起始索引（包含）
- endIndex - 可选，提取的结束索引（不包含），默认为字符串的长度
返回值：字符串，提取的子字符串
是否改变原字符串：否
示例：

const str = "Hello World";
// 提取从索引6开始到结束的子字符串
const world = str.slice(6);
console.log(world); // 输出: "World"

// 提取从索引0到5的子字符串（不包含索引5）
const hello = str.slice(0, 5);
console.log(hello); // 输出: "Hello"

// 使用负数索引（从字符串末尾开始计算）
const last3 = str.slice(-3);
console.log(last3); // 输出: "rld"

2. substring()

作用：提取字符串中介于两个指定索引之间的字符
语法：str.substring(indexStart[, indexEnd])
参数：
- indexStart - 必需，提取的起始索引（包含）
- indexEnd - 可选，提取的结束索引（不包含），默认为字符串的长度
返回值：字符串，提取的子字符串
是否改变原字符串：否
示例：

const str = "Hello World";
// 提取从索引0到5的子字符串
const hello = str.substring(0, 5);
console.log(hello); // 输出: "Hello"

// 如果startIndex大于endIndex，会自动交换它们
const swapped = str.substring(5, 0);
console.log(swapped); // 输出: "Hello"

// 负数索引会被视为0
const negative = str.substring(-3, 5);
console.log(negative); // 输出: "Hello"

3. substr()

作用：从指定位置开始提取指定长度的子字符串（注意：该方法已不推荐使用）
语法：str.substr(start[, length])
参数：
- start - 必需，提取的起始索引
- length - 可选，要提取的字符数，默认为到字符串的结尾
返回值：字符串，提取的子字符串
是否改变原字符串：否
示例：

const str = "Hello World";
// 从索引6开始提取5个字符
const world = str.substr(6, 5);
console.log(world); // 输出: "World"

// 从索引0开始提取5个字符
const hello = str.substr(0, 5);
console.log(hello); // 输出: "Hello"

// 使用负数作为起始索引（从末尾开始计算）
const last3 = str.substr(-3);
console.log(last3); // 输出: "rld"

四、字符串转换方法

1. toLowerCase()

作用：将字符串转换为小写
语法：str.toLowerCase()
参数：无参数
返回值：字符串，转换为小写的新字符串
是否改变原字符串：否
示例：

const str = "Hello World";
// 将字符串转换为小写
const lowerStr = str.toLowerCase();
console.log(lowerStr); // 输出: "hello world"
console.log(str); // 输出: "Hello World"（原字符串未改变）

2. toUpperCase()

作用：将字符串转换为大写
语法：str.toUpperCase()
参数：无参数
返回值：字符串，转换为大写的新字符串
是否改变原字符串：否
示例：

const str = "Hello World";
// 将字符串转换为大写
const upperStr = str.toUpperCase();
console.log(upperStr); // 输出: "HELLO WORLD"
console.log(str); // 输出: "Hello World"（原字符串未改变）

3. toString()

作用：返回字符串本身
语法：str.toString()
参数：无参数
返回值：字符串，与原字符串相同
是否改变原字符串：否
示例：

const str = "Hello";
// 返回字符串本身
const sameStr = str.toString();
console.log(sameStr); // 输出: "Hello"

// 对于String对象特别有用
const strObj = new String("World");
console.log(typeof strObj); // 输出: "object"
const strVal = strObj.toString();
console.log(typeof strVal); // 输出: "string"

4. valueOf()

作用：返回字符串的原始值
语法：str.valueOf()
参数：无参数
返回值：字符串，字符串的原始值
是否改变原字符串：否
示例：

// 对于字符串字面量，与原字符串相同
const str = "Hello";
console.log(str.valueOf()); // 输出: "Hello"

// 对于String对象，返回其原始值
const strObj = new String("World");
console.log(strObj.valueOf()); // 输出: "World"
console.log(typeof strObj.valueOf()); // 输出: "string"

五、字符串替换/分割方法

1. replace()

作用：在字符串中查找匹配的子字符串，并替换为新的子字符串
语法：str.replace(regexp|substr, newSubstr|function)
参数：
- 第一个参数：可以是字符串或正则表达式，表示要查找的内容
- 第二个参数：可以是字符串或函数，表示替换的内容
返回值：字符串，替换后的新字符串
是否改变原字符串：否
示例：

const str = "Hello World, Hello JavaScript";

// 替换第一个匹配的子字符串
const replacedOnce = str.replace("Hello", "Hi");
console.log(replacedOnce); // 输出: "Hi World, Hello JavaScript"

// 使用正则表达式替换所有匹配项（g表示全局匹配）
const replacedAll = str.replace(/Hello/g, "Hi");
console.log(replacedAll); // 输出: "Hi World, Hi JavaScript"

// 使用函数作为替换值
const replacedWithFunc = str.replace(/Hello/g, (match) => {
  return match.toUpperCase();
});
console.log(replacedWithFunc); // 输出: "HELLO World, HELLO JavaScript"

2. split()

作用：将字符串分割成字符串数组
语法：str.split([separator[, limit]])
参数：
- separator - 可选，字符串或正则表达式，用于指定分割的位置
- limit - 可选，数字，限制返回的数组长度
返回值：数组，分割后的字符串数组
是否改变原字符串：否
示例：

const str = "apple,banana,orange,grape";

// 使用逗号作为分隔符
const fruits = str.split(",");
console.log(fruits); // 输出: ["apple", "banana", "orange", "grape"]

// 限制返回的数组长度为2
const limitedFruits = str.split(",", 2);
console.log(limitedFruits); // 输出: ["apple", "banana"]

// 使用空字符串作为分隔符，将每个字符作为数组元素
const chars = "hello".split("");
console.log(chars); // 输出: ["h", "e", "l", "l", "o"]

六、字符串修剪方法

1. trim()

作用：去除字符串两端的空白字符（包括空格、制表符、换行符等）
语法：str.trim()
参数：无参数
返回值：字符串，去除两端空白后的新字符串
是否改变原字符串：否
示例：

const str = "   Hello World   ";
// 去除两端空白
const trimmed = str.trim();
console.log(trimmed); // 输出: "Hello World"
console.log(trimmed.length); // 输出: 11（原长度为17）

2. trimStart() / trimLeft()

作用：去除字符串开头（左侧）的空白字符
语法：str.trimStart() 或 str.trimLeft()
参数：无参数
返回值：字符串，去除开头空白后的新字符串
是否改变原字符串：否
示例：

const str = "   Hello World   ";
// 去除左侧空白
const trimmedStart = str.trimStart();
console.log(trimmedStart); // 输出: "Hello World   "
console.log(trimmedStart.length); // 输出: 14（原长度为17）

// trimLeft是trimStart的别名
const trimmedLeft = str.trimLeft();
console.log(trimmedLeft); // 输出: "Hello World   "

3. trimEnd() / trimRight()

作用：去除字符串结尾（右侧）的空白字符
语法：str.trimEnd() 或 str.trimRight()
参数：无参数
返回值：字符串，去除结尾空白后的新字符串
是否改变原字符串：否
示例：

const str = "   Hello World   ";
// 去除右侧空白
const trimmedEnd = str.trimEnd();
console.log(trimmedEnd); // 输出: "   Hello World"
console.log(trimmedEnd.length); // 输出: 14（原长度为17）

// trimRight是trimEnd的别名
const trimmedRight = str.trimRight();
console.log(trimmedRight); // 输出: "   Hello World"

七、字符串重复方法

1. repeat()

作用：将字符串重复指定的次数
语法：str.repeat(count)
参数：count - 必需，数字，表示重复的次数（0 到正无穷大之间的整数）
返回值：字符串，重复指定次数后的新字符串
是否改变原字符串：否
示例：

const str = "Hi";
// 重复3次
const repeated = str.repeat(3);
console.log(repeated); // 输出: "HiHiHi"

// 重复0次，返回空字符串
const empty = str.repeat(0);
console.log(empty); // 输出: ""

// 重复次数为负数会报错
try {
  str.repeat(-1);
} catch (e) {
  console.log(e); // 输出: RangeError: Invalid count value
}

八、字符串连接方法

1. concat()

作用：连接两个或多个字符串
语法：str.concat(str1[, str2[, ...[, strN]]])
参数：str1, str2, ..., strN - 要连接的字符串
返回值：字符串，连接后的新字符串
是否改变原字符串：否
示例：

const str1 = "Hello";
const str2 = " ";
const str3 = "World";

// 连接多个字符串
const result = str1.concat(str2, str3, "!");
console.log(result); // 输出: "Hello World!"

// 与使用 + 运算符效果相同
const sameResult = str1 + str2 + str3 + "!";
console.log(sameResult); // 输出: "Hello World!"

九、字符串填充方法

1. padStart()

作用：在字符串的开头填充指定的字符，直到达到指定的长度
语法：str.padStart(targetLength[, padString])
参数：
- targetLength - 必需，数字，目标字符串的长度
- padString - 可选，用于填充的字符串，默认为空格
返回值：字符串，填充后的新字符串
是否改变原字符串：否
示例：

const str = "5";
// 填充到长度为3，使用默认空格填充
const padded = str.padStart(3);
console.log(padded); // 输出: "  5"

// 填充到长度为5，使用"0"填充
const zeroPadded = str.padStart(5, "0");
console.log(zeroPadded); // 输出: "00005"

// 如果目标长度小于原字符串长度，则返回原字符串
const shorter = str.padStart(1);
console.log(shorter); // 输出: "5"

2. padEnd()

作用：在字符串的结尾填充指定的字符，直到达到指定的长度
语法：str.padEnd(targetLength[, padString])
参数：
- targetLength - 必需，数字，目标字符串的长度
- padString - 可选，用于填充的字符串，默认为空格
返回值：字符串，填充后的新字符串
是否改变原字符串：否
示例：

const str = "5";
// 填充到长度为3，使用默认空格填充
const padded = str.padEnd(3);
console.log(padded); // 输出: "5  "

// 填充到长度为5，使用"0"填充
const zeroPadded = str.padEnd(5, "0");
console.log(zeroPadded); // 输出: "50000"

// 使用多个字符进行填充
const multiChar = "Hi".padEnd(7, "abc");
console.log(multiChar); // 输出: "Hiabcab"（循环使用填充字符串）

十、其他字符串方法

1. match()

作用：在字符串中查找匹配正则表达式的结果
语法：str.match(regexp)
参数：regexp - 必需，正则表达式对象
返回值：数组，包含匹配结果；如果没有找到匹配，则返回 null
是否改变原字符串：否
示例：

const str = "The quick brown fox jumps over the lazy dog";

// 查找所有以字母"o"开头的单词
const matches = str.match(/o\w+/g);
console.log(matches); // 输出: ["ox", "over", "og"]

// 查找第一个匹配项的详细信息
const firstMatch = str.match(/q\w+/);
console.log(firstMatch); 
// 输出: ["quick", index: 4, input: "The quick brown fox jumps over the lazy dog", groups: undefined]

// 没有找到匹配项
const noMatch = str.match(/z\w+/);
console.log(noMatch); // 输出: null

2. matchAll()

作用：返回一个包含所有匹配正则表达式的结果及分组捕获的迭代器
语法：str.matchAll(regexp)
参数：regexp - 必需，正则表达式对象（必须包含全局标志 g）
返回值：迭代器，包含所有匹配结果
是否改变原字符串：否
示例：

const str = "Hello 123, Hello 456";
const regex = /Hello (\d+)/g;

// 获取所有匹配结果的迭代器
const matches = str.matchAll(regex);

// 将迭代器转换为数组
const results = Array.from(matches);
console.log(results);
// 输出: [
//   ["Hello 123", "123", index: 0, input: "Hello 123, Hello 456", groups: undefined],
//   ["Hello 456", "456", index: 11, input: "Hello 123, Hello 456", groups: undefined]
// ]

3. search()

作用：查找与正则表达式相匹配的子字符串的位置
语法：str.search(regexp)
参数：regexp - 必需，正则表达式对象
返回值：数字，第一个匹配项的索引；如果没有找到匹配，则返回-1
是否改变原字符串：否
示例：

const str = "Hello World";
// 查找第一个大写字母的位置
const upperPos = str.search(/[A-Z]/);
console.log(upperPos); // 输出: 0

// 查找"World"的位置
const worldPos = str.search(/World/);
console.log(worldPos); // 输出: 6

// 查找不存在的模式
const noPos = str.search(/Java/);
console.log(noPos); // 输出: -1

4. localeCompare()

作用：比较两个字符串，考虑当前区域设置
语法：str.localeCompare(compareString[, locales[, options]])
参数：
- compareString - 必需，要比较的字符串
- locales - 可选，指定区域设置
- options - 可选，配置比较选项
返回值：数字，表示比较结果（-1：当前字符串在前；0：相等；1：当前字符串在后）
是否改变原字符串：否
示例：

const str1 = "apple";
const str2 = "banana";

// 比较两个字符串
console.log(str1.localeCompare(str2)); // 输出: -1（"apple" 在 "banana" 之前）
console.log(str2.localeCompare(str1)); // 输出: 1（"banana" 在 "apple" 之后）
console.log(str1.localeCompare("apple")); // 输出: 0（相等）

// 考虑地区的比较（德语中 "ä" 被视为 "a" 的变音）
console.log("ä".localeCompare("z", "de")); // 输出: -1
console.log("ä".localeCompare("z", "sv")); // 输出: 1（在瑞典语中 "ä" 排在 "z" 之后）

JavaScript 数组方法详细指南

Mon, 29 Sep 2025 02:54:00 GMT

一、方法分类总结

1. 修改原数组的方法（破坏性方法）

添加/删除: push(), pop(), unshift(), shift(), splice()
重排: reverse(), sort()
填充/复制: fill(), copyWithin()

2. 不修改原数组的方法（非破坏性方法）

创建新数组: concat(), slice(), map(), filter(), flat(), flatMap()
搜索查找: indexOf(), lastIndexOf(), find(), findIndex(), findLast(), findLastIndex(), includes()
检测判断: every(), some()
累积计算: reduce(), reduceRight()
字符串转换: join(), toString(), toLocaleString()
ES2023 新方法: toSorted(), toReversed(), toSpliced(), with()

3. 迭代器方法

遍历: entries(), keys(), values()

4. 静态方法

数组创建: Array.from(), Array.of()

二、使用场景建议

需要修改原数组时

// 添加元素
arr.push(newItem);        // 末尾添加
arr.unshift(newItem);     // 开头添加

// 删除元素
arr.pop();               // 删除末尾
arr.shift();             // 删除开头

// 复杂操作
arr.splice(index, count, ...newItems); // 添加/删除/替换

需要保持原数组不变时

// 创建新数组
const newArr = arr.map(x => x * 2);     // 转换
const filtered = arr.filter(x => x > 5); // 过滤
const combined = arr.concat(otherArr);  // 合并

// ES2023 新方法（推荐）
const sorted = arr.toSorted();          // 排序（不修改原数组）
const reversed = arr.toReversed();      // 反转（不修改原数组）

搜索和检测时

// 查找元素
arr.find(x => x > 10);          // 查找第一个满足条件的
arr.includes(value);            // 检查是否包含

// 检测条件
arr.every(x => x > 0);          // 所有元素都满足
arr.some(x => x < 0);           // 至少一个满足

三、修改原数组的方法

1. push()

作用: 向数组的末尾添加一个或多个元素

返回值: 修改后数组的新长度

是否修改原数组: ✅ 是

参数:

...elements (任意类型): 要添加到数组末尾的元素

const arr = [1, 2];
const result = arr.push(3, 4);
console.log(result); // 4 (新长度)
console.log(arr); // [1, 2, 3, 4] (原数组被修改)

2. pop()

作用: 移除并返回数组的最后一个元素

返回值: 被删除的元素，如果数组为空则返回 undefined

是否修改原数组: ✅ 是

参数: 无

const arr = [1, 2, 3];
const result = arr.pop();
console.log(result); // 3
console.log(arr); // [1, 2] (原数组被修改)

3. unshift()

作用: 向数组的开头添加一个或多个元素

返回值: 修改后数组的新长度

是否修改原数组: ✅ 是

参数:

...elements (任意类型): 要添加到数组开头的元素

const arr = [3, 4];
const result = arr.unshift(1, 2);
console.log(result); // 4 (新长度)
console.log(arr); // [1, 2, 3, 4] (原数组被修改)

4. shift()

作用: 移除并返回数组的第一个元素

返回值: 被删除的元素，如果数组为空则返回 undefined

是否修改原数组: ✅ 是

参数: 无

const arr = [1, 2, 3];
const result = arr.shift();
console.log(result); // 1
console.log(arr); // [2, 3] (原数组被修改)

5. splice()

作用: 在指定位置添加/删除/替换元素

返回值: 包含被删除元素的数组

是否修改原数组: ✅ 是

参数:

start (number): 开始修改的索引位置
deleteCount (number): 要删除的元素个数
...items (任意类型): 要添加的元素（可选）

const arr = [1, 2, 3, 4, 5];

// 删除元素
const deleted1 = arr.splice(1, 2);
console.log(deleted1); // [2, 3]
console.log(arr); // [1, 4, 5]

// 添加元素（不删除）
const deleted2 = arr.splice(1, 0, 'a', 'b');
console.log(deleted2); // [] (没有删除元素)
console.log(arr); // [1, 'a', 'b', 4, 5]

// 替换元素
const deleted3 = arr.splice(2, 2, 'x', 'y');
console.log(deleted3); // ['b', 4]
console.log(arr); // [1, 'a', 'x', 'y', 5]

6. reverse()

作用: 反转数组中元素的顺序

返回值: 反转后的数组（原数组的引）

是否修改原数组: ✅ 是

参数: 无

const arr = [1, 2, 3, 4];
const result = arr.reverse();
console.log(result); // [4, 3, 2, 1]
console.log(arr); // [4, 3, 2, 1] (原数组被修改)

7. sort()

作用: 对数组元素进行排序

返回值: 排序后的数组（原数组的引用）

是否修改原数组: ✅ 是

参数:

compareFunction (function, 可选): 定义排序顺序的函数

const arr = [3, 1, 4, 1, 5];
const result = arr.sort();
console.log(result); // [1, 1, 3, 4, 5]
console.log(arr); // [1, 1, 3, 4, 5] (原数组被修改)

// 数字排序
const numbers = [10, 5, 40, 25];
numbers.sort((a, b) => a - b); // 升序
console.log(numbers); // [5, 10, 25, 40]

8. fill()

作用: 用固定值填充数组中的元素

返回值: 修改后的数组（原数组的引用）

是否修改原数组: ✅ 是

参数:

value (任意类型): 填充的值
start (number, 可选): 开始索引，默认 0
end (number, 可选): 结束索引（不包含），默认数组长度

const arr = [1, 2, 3, 4, 5];
const result = arr.fill(0, 1, 3);
console.log(result); // [1, 0, 0, 4, 5]
console.log(arr); // [1, 0, 0, 4, 5] (原数组被修改)

9. copyWithin()

作用: 在数组内部复制元素序列到指定位置

返回值: 修改后的数组（原数组的引用）

是否修改原数组: ✅ 是

参数:

target (number): 复制到的目标索引位置
start (number, 可选): 开始复制的源索引，默认 0
end (number, 可选): 结束复制的源索引（不包含），默认数组长度

const arr = [1, 2, 3, 4, 5];
const result = arr.copyWithin(0, 3);
console.log(result); // [4, 5, 3, 4, 5]
console.log(arr); // [4, 5, 3, 4, 5] (原数组被修改)

四、不修改原数组的方法

10. concat()

作用: 合并两个或多个数组，创建新数组

返回值: 新的合并数组

是否修改原数组: ❌ 否

参数:

...values (任意类型): 要合并的数组或值

const arr1 = [1, 2];
const arr2 = [3, 4];
const result = arr1.concat(arr2, 5, [6, 7]);
console.log(result); // [1, 2, 3, 4, 5, 6, 7]
console.log(arr1); // [1, 2] (原数组不变)

11. slice()

作用: 提取数组的指定部分作为新数组

返回值: 新的数组片段

是否修改原数组: ❌ 否

参数:

start (number, 可选): 开始索引，默认 0
end (number, 可选): 结束索引（不包含），默认数组长度

const arr = [1, 2, 3, 4, 5];
const result1 = arr.slice(1, 3);
console.log(result1); // [2, 3]
console.log(arr); // [1, 2, 3, 4, 5] (原数组不变)

12. join()

作用: 将数组的所有元素连接成一个字符串

返回值: 连接后的字符串

是否修改原数组: ❌ 否

参数:

separator (string, 可选): 分隔符，默认逗号

const arr = [1, 2, 3];
const result1 = arr.join();
console.log(result1); // "1,2,3"
const result2 = arr.join('-');
console.log(result2); // "1-2-3"

13. toString()

作用: 返回数组的字符串表示形式

返回值: 数组的字符串表示

是否修改原数组: ❌ 否

参数: 无

const arr = [1, 2, 3];
const result = arr.toString();
console.log(result); // "1,2,3"
console.log(arr); // [1, 2, 3] (原数组不变)

14. toLocaleString()

作用: 返回数组的本地化字符串表示

返回值: 本地化格式的字符串

是否修改原数组: ❌ 否

参数:

locales (string/array, 可选): 语言代码
options (object, 可选): 格式选项

const arr = [1234.56, new Date()];
const result = arr.toLocaleString('en-US');
console.log(result); // "1,234.56,12/19/2012"

五、遍历和转换方法

15. forEach()

作用: 对数组的每个元素执行指定的函数

返回值: undefined

是否修改原数组: ❌ 否（但回调函数可以修改）

参数:

callback (function): 每个元素执行的函数
thisArg (任意类型, 可选): 回调函数的 this 值

const arr = [1, 2, 3];
let sum = 0;
const result = arr.forEach((element, index) => {
    sum += element;
    console.log(`索引 ${index}: 值 ${element}`);
});
console.log(result); // undefined
console.log(sum); // 6

16. map()

作用: 对每个元素执行回调函数，返回新数组

返回值: 新的映射数组

是否修改原数组: ❌ 否

参数:

callback (function): 每个元素执行的映射函数
thisArg (任意类型, 可选): 回调函数的 this 值

const arr = [1, 2, 3];
const result = arr.map((element, index) => element * 2 + index);
console.log(result); // [2, 5, 8]
console.log(arr); // [1, 2, 3] (原数组不变)

17. filter()

作用: 过滤数组，返回满足条件的元素组成的新数组

返回值: 新的过滤数组

是否修改原数组: ❌ 否

参数:

callback (function): 测试函数
thisArg (任意类型, 可选): 回调函数的 this 值

const arr = [1, 2, 3, 4, 5];
const result = arr.filter(element => element % 2 === 0);
console.log(result); // [2, 4]
console.log(arr); // [1, 2, 3, 4, 5] (原数组不变)

18. reduce()

作用: 对数组元素执行累积计算

返回值: 累积结果

是否修改原数组: ❌ 否

参数:

callback (function): 累积函数
initialValue (任意类型, 可选): 初始累积值

const arr = [1, 2, 3, 4];
const result = arr.reduce((acc, curr) => acc + curr, 0);
console.log(result); // 10

19. reduceRight()

作用: 从右向左对数组元素执行累积计算

返回值: 从右向左的累积结果

是否修改原数组: ❌ 否

参数:

callback (function): 累积函数
initialValue (任意类型, 可选): 初始累积值

const arr = [1, 2, 3, 4];
const result = arr.reduceRight((acc, curr) => acc - curr);
console.log(result); // -2

六、检测方法

20. every()

作用: 检测数组的所有元素是否都满足指定条件

返回值: 布尔值（是否所有元素都满足条件）

是否修改原数组: ❌ 否

参数:

callback (function): 测试函数
thisArg (任意类型, 可选): 回调函数的 this 值

const arr = [2, 4, 6, 8];
const result = arr.every(element => element % 2 === 0);
console.log(result); // true

21. some()

作用: 检测数组中是否至少有一个元素满足指定条件

返回值: 布尔值（是否至少一个元素满足条件）

是否修改原数组: ❌ 否

参数:

callback (function): 测试函数
thisArg (任意类型, 可选): 回调函数的 this 值

const arr = [1, 3, 5, 7, 8];
const result = arr.some(element => element % 2 === 0);
console.log(result); // true

七、搜索方法

22. indexOf()

作用: 查找指定元素在数组中第一次出现的索引

返回值: 元素的第一个索引，未找到返回 -1

是否修改原数组: ❌ 否

参数:

searchElement (任意类型): 要查找的元素
fromIndex (number, 可选): 开始查找的索引

const arr = [1, 2, 3, 2, 1];
console.log(arr.indexOf(2)); // 1
console.log(arr.indexOf(4)); // -1

23. lastIndexOf()

作用: 查找指定元素在数组中最后一次出现的索引

返回值: 元素的最后一个索引，未找到返回 -1

是否修改原数组: ❌ 否

参数:

searchElement (任意类型): 要查找的元素
fromIndex (number, 可选): 开始查找的索引

const arr = [1, 2, 3, 2, 1];
console.log(arr.lastIndexOf(2)); // 3

24. find()

作用: 查找数组中第一个满足条件的元素

返回值: 第一个满足条件的元素，未找到返回 undefined

是否修改原数组: ❌ 否

参数:

callback (function): 测试函数
thisArg (任意类型, 可选): 回调函数的 this 值

const arr = [1, 2, 3, 4, 5];
const result = arr.find(element => element > 3);
console.log(result); // 4

25. findIndex()

作用: 查找数组中第一个满足条件的元素的索引

返回值: 第一个满足条件的元素索引，未找到返回 -1

是否修改原数组: ❌ 否

参数:

callback (function): 测试函数
thisArg (任意类型, 可选): 回调函数的 this 值

const arr = [1, 2, 3, 4, 5];
const result = arr.findIndex(element => element > 3);
console.log(result); // 3

26. findLast() (ES2023)

作用: 查找数组中最后一个满足条件的元素

返回值: 最后一个满足条件的元素，未找到返回 undefined

是否修改原数组: ❌ 否

参数:

callback (function): 测试函数
thisArg (任意类型, 可选): 回调函数的 this 值

const arr = [1, 2, 3, 2, 1];
const result = arr.findLast(element => element === 2);
console.log(result); // 2

27. findLastIndex() (ES2023)

作用: 查找数组中最后一个满足条件的元素的索引

返回值: 最后一个满足条件的元素索引，未找到返回 -1

是否修改原数组: ❌ 否

参数:

callback (function): 测试函数
thisArg (任意类型, 可选): 回调函数的 this 值

const arr = [1, 2, 3, 2, 1];
const result = arr.findLastIndex(element => element === 2);
console.log(result); // 3

28. includes()

作用: 判断数组是否包含指定的元素

返回值: 布尔值（是否包含元素）

是否修改原数组: ❌ 否

参数:

searchElement (任意类型): 要查找的元素
fromIndex (number, 可选): 开始查找的索引

const arr = [1, 2, 3, NaN];
console.log(arr.includes(2)); // true
console.log(arr.includes(NaN)); // true

八、 ES6+ 新增方法

29. flat()

作用: 将嵌套数组扁平化

返回值: 新的扁平化数组

是否修改原数组: ❌ 否

参数:

depth (number, 可选): 扁平化深度，默认 1

const arr = [1, [2, [3, [4]]]];
console.log(arr.flat(2)); // [1, 2, 3, [4]]

30. flatMap()

作用: 先对每个元素执行映射函数，然后将结果扁平化一级

返回值: 新的映射并扁平化一级的数组

是否修改原数组: ❌ 否

参数:

callback (function): 映射函数
thisArg (任意类型, 可选): 回调函数的 this 值

const arr = [1, 2, 3];
const result = arr.flatMap(x => [x, x * 2]);
console.log(result); // [1, 2, 2, 4, 3, 6]

31. Array.from()

作用: 从类数组对象或可迭代对象创建新数组

返回值: 新的数组实例

是否修改原数组: ❌ 不适用（静态方法）

参数:

arrayLike (类数组对象): 要转换的对象
mapFn (function, 可选): 映射函数
thisArg (任意类型, 可选): 映射函数的 this 值

console.log(Array.from('hello')); // ['h', 'e', 'l', 'l', 'o']
console.log(Array.from([1, 2, 3], x => x * 2)); // [2, 4, 6]

32. Array.of()

作用: 创建具有可变数量参数的新数组

返回值: 新的数组实例

是否修改原数组: ❌ 不适用（静态方法）

参数:

...elements (任意类型): 数组元素

console.log(Array.of(1, 2, 3)); // [1, 2, 3]
console.log(Array.of(3)); // [3] (与 Array(3) 不同)

33. toSorted() (ES2023)

作用: 返回排序后的新数组，不修改原数组

返回值: 新的排序数组

是否修改原数组: ❌ 否

参数:

compareFunction (function, 可选): 排序函数

const arr = [3, 1, 4, 1, 5];
const sorted = arr.toSorted((a, b) => a - b);
console.log(sorted); // [1, 1, 3, 4, 5]
console.log(arr); // [3, 1, 4, 1, 5] (原数组不变)

34. toReversed() (ES2023)

作用: 返回反转后的新数组，不修改原数组

返回值: 新的反转数组

是否修改原数组: ❌ 否

参数: 无

const arr = [1, 2, 3, 4, 5];
const reversed = arr.toReversed();
console.log(reversed); // [5, 4, 3, 2, 1]
console.log(arr); // [1, 2, 3, 4, 5] (原数组不变)

35. toSpliced() (ES2023)

作用: 返回拼接后的新数组，不修改原数组

返回值: 新的拼接数组

是否修改原数组: ❌ 否

参数:

start (number): 开始位置
deleteCount (number): 删除数量
...items (任意类型): 要添加的元素

const arr = [1, 2, 3, 4, 5];
const spliced = arr.toSpliced(1, 2, 'a', 'b');
console.log(spliced); // [1, 'a', 'b', 4, 5]
console.log(arr); // [1, 2, 3, 4, 5] (原数组不变)

36. with() (ES2023)

作用: 返回修改指定索引值的新数组，不修改原数组

返回值: 新的修改后的数组

是否修改原数组: ❌ 否

参数:

index (number): 要修改的索引
value (任意类型): 新值

const arr = [1, 2, 3, 4, 5];
const newArr = arr.with(2, 99);
console.log(newArr); // [1, 2, 99, 4, 5]
console.log(arr); // [1, 2, 3, 4, 5] (原数组不变)

九、迭代器方法

37. entries()

作用: 返回包含数组键值对的迭代器

返回值: 新的数组迭代器

是否修改原数组: ❌ 否

参数: 无

const arr = ['a', 'b', 'c'];
for (const [index, value] of arr.entries()) {
    console.log(index, value); // 0 'a', 1 'b', 2 'c'
}

38. keys()

作用: 返回包含数组索引的迭代器

返回值: 新的数组索引迭代器

是否修改原数组: ❌ 否

参数: 无

const arr = ['a', 'b', 'c'];
for (const key of arr.keys()) {
    console.log(key); // 0, 1, 2
}

39. values()

作用: 返回包含数组元素的迭代器

返回值: 新的数组值迭代器

是否修改原数组: ❌ 否

参数: 无

const arr = ['a', 'b', 'c'];
for (const value of arr.values()) {
    console.log(value); // 'a', 'b', 'c'
}

this 的指向问题

Tue, 23 Sep 2025 01:00:00 GMT

必要知识准备

介绍 this 之前，先简单介绍 四个概念(普通函数、对象方法、构造函数、箭头函数)，作为我们的知识储备，为后面我们介绍 this 做铺垫

**普通函数：**函数是一段可以被重复调用的代码块，普通函数的声明方法基本结构很简单，我们都知道，就是下面的这种
```
function 函数名() {
  函数体
}
// 调用函数
函数名()
```
对象方法

什么是对象？
- 概念：对象也是 JS 数据类型的一种，和之前学习的数值类型、字符串类型、布尔类型是一样的。对象数据类型可以被理解成是一组 无序的键值对的 集合，是属性的容器
  - 键：又称属性名，通常是一个字符串
  - 值：可以是任何数据类型，包括：数字、字符串、布尔值、数组、函数，甚至是另一个对象(嵌套)
  - 属性：属性是成对出现的，包括属性名和属性值，它们之间使用英文 : 分隔，多个属性之间使用英文 , 分隔
怎样创建一个对象呢？
- 最常用的一种就是使用花括号直接创建
```
let 对象名 = {
  属性名1: 属性值1,
  属性名2: 属性值2,
  属性名3: 属性值3,
  属性名4: 函数,
  ...
}
```
什么是方法？
- 属性值可以是任何数据类型，这里面有一个数据类型比较特殊，就是函数，如果一个属性的值是一个函数，那么我们称这个属性是这个对象的一个方法
由于普通函数和方法之间有点像，所以我们举个例子带大家区分一下
```
// 创建一个函数
function fn() {
  console.log('111')
}

// 直接放在script标签里面，他就是一个普通函数
function fn() {
  console.log('111')
}

// 将这个函数放进一个对象里面
let obj = {
  
  fn:function() {  // 是这个obj对象的方法
    console.log('111')
  } 
  
}
```
怎样访问对象里面的属性呢？
- 创建了一个对象之后，我们怎么访问该怎样访问这个对象里面的属性呢？
  - 声明对象并添加了若干属性后，可以使用 . 或 [] 获得对象中属性对应的值，
  - 基本上写法就是 对象名.属性名 或者 对象名[‘属性名’]
  - 如果我们需要为这个属性重新赋值或者添加一个属性，也很简单 对象名.属性名 = 新的属性值
- 我们平常写代码经常写的
```
// 获取DOM元素
let oDiv = document.querySelector('div')

// 给这个元素添加一个字体颜色为红色的样式
oDiv.style.color = 'red'

// style 就是 oDiv 的一个属性，这个属性的值其实也是一个对象，而 color 是 style 的一个属性
```
上面的是不是很熟悉，其实当我们把 div 这个标签获取过来并赋给变量 oDiv 时，我们也相当于创建一个一个对象名为 oDiv 的对象，只是这个对象里面已经很多自带的属性和方法了，我们用的时候直接使用 . 调用我们需要的属性，并给它重新赋值就行了

怎样访问对象里面的方法呢？
- 基本上和访问属性的写法是一致的，只有一点不一样，我们都知道普通函数的调用方法，函数名() ，最后必须要加上一个小括号，这个函数的调用的方法是不论在哪里都不变的，前面讲到方法的属性值是函数，既然是函数，那我们也应该在属性名后面加上 () ，即 对象名.属性名()
```
let person = {
  name: '小红',
  age: 18,    
  singing: function() {
    console.log('两只老虎，两只老虎，跑的快，跑的快...')
  },
  run: function () {
    console.log('我跑的非常快...')
  }
}
    
// 调用person对象中 singing 方法
person.singing()
// 调用person对象中的 run 方法
person.run()
```
构造函数
- 在前面我们学习了对象之后，应该能更好的理解构造函数，因为构造函数其实也是在创建对象
- 什么是构造函数？
  - 本质上就是一个普通的函数，但是会有两个地方不太一样
    - 命名方面上，构造函数的名称首字母要大写，这其实是一种普遍的命名的约定用来区别普通函数
    - 与 new 操作符一起使用：构造函数通过 new 操作符来调用，用于创建并初始化一个新对象。你们也可以这样理解，当一个函数使用 new 操作符调用时，它就成为了“构造函数”，即一个用于构造新对象的函数
- 构造函数的作用：创建对象
  - 在没有构造函数之前，我们使用对象字面量创建单个对象
```
// 对象字面量创建单个对象
let person1 = {
 name: "Alice",
 age: 25,
 greet ：function() {
 console.log(Hello, my name is 11);
  }
}

person1.greet(); // 输出: Hello, my name is 11
```
  - 但如果要创建多个结构相似（都有 name, age, greet 属性）的对象，重复写对象字面量会很麻烦，这时构造函数就派上用场了
  - 构造函数就像一个“工厂模具”，可以批量生产具有相同属性和方法结构的对象
- 怎样使用构造函数呢？
  - 第一步：定义构造函数，在其内部使用 this 来定义未来的实例对象里面的属性和方法
  创建一个函数（首字母要大写）
```
// 1. 定义构造函数 (首字母大写)
// 这里相当于创建了一个模板
function Person(name, age) {
  // 2. 使用 this 来添加属性
  this.name = name;
  this.age = age;
}
```
  - 第二步：使用 new 调用构造函数，使用 new 操作符来调用 Person 函数，它会按照构造函数的模板创建一个新的对象并返回它
```
// 使用 new 创建实例
// 我们在这里调用这个模板
let person1 = new Person('Alice', 25);
let person2 = new Person('Bob', 30);

console.log(person1.name); // 输出: Alice
console.log(person2.age);  // 输出: 30
```
我们可以看一个例子：

例子1-准备月饼模具阶段

例子2-做月饼阶段

到这里，我想问大家，现在大家知道上面第二个图片里的变量 person1 和 person2 的值是什么数据类型吗？
箭头函数
- 箭头函数是 ES6 中引入的一种新的函数语法，它提供了一种更简洁的方式来编写函数
- 基本语法：
  - 我们与传统的函数表达式对比来学
```
const add = function(a, b) {
  return a + b
}
```
```
// 完整写法（多行语句或需要显式返回对象时）
const add = (a, b) => {
  return a + b
}

// 简洁写法（单行表达式，隐含 return）
const add = (a, b) => a + b
```
  - 大家观察上面的两种写法有什么不同？
    - 仔细观察，赋值等号左边的没有变化，变化在右边，箭头函数删去了 function ，变成了 => ，并且将 => 放到了小括号和大括号的中间
好啦，到这里我们的前置只知识准备就完成了，这就开始我们第二部分的介绍吧！

this 到底什么？

在正式开始介绍 this 到底是什么之前，这里有两个问题：
- this 是不是变量？
  - 不是，this 是一个特殊关键字（像 function, if, new 一样），不是可以声明的变量或对象的属性
- this 是对象吗？学到现在，大家应该或多或少都应该见过 this.sayName() 这种写法，那按照我们上面对于对象方法的学习，大家觉得 this 是对象吗？
  - 也不是，this 很多变，它本身不是一个对象，只是它的值实际根据是谁在调用它而变的，只是一般情况下 this 的值(它所指向的东西)，总是一个对象
- 有一个类比，万能电视遥控器(this)
  - 万能遥控器(this)本身不是电视，但按下遥控器的按钮（调用 this）的效果，取决于它当前指向并控制的是哪台电视，你可以用同一个遥控器（this），通过改变它的指向（不同的调用方式）来控制不同的电视（不同的对象）
所以 this 到底是什么呢？
- 一般来说，this 都是放在一个函数中使用的，调用这个函数也就相当于在调用这个 this ，
- 当我们总结上面的问题和类比例子后，其实可以用一句话总结，就是this 的值不是在我们定义函数时确定的，而是在我们调用这个函数时才被确定的
- 一个贴近生活的比喻：
  - 想象你是一个员工（函数），你有一句话（函数体）：“我正在为this公司工作“
  - 如果你在 A 公司 的办公室里说这句话，this 就代表 A 公司
  - 如果你在 B 公司 的办公室里说这句话，this 就代表 B 公司你（函数）本身没变，但你所在的环境（调用者）变了，this 的含义也就随之改变了

说多不如练多，这里有一个小问题，大家可以先试试能不能解答

const person = {
  name: '小明',
  sayHi: function() {
    console.log('你好，我是' + this.name)
  }
}

person.sayHi()

六个常见环境下的 this 指向问题

全局环境中的 this
1. 全局环境就是在<script></script>里（不在任何函数或对象内部），此时的 this 始终指向的是全局对象，在浏览器中就是 window
```
console.log(this)
```
普通函数中的 this

当一个函数被直接调用时，要考虑两种情况

this 在非严格模式下指向全局对象（window）
```
function fun() {
 	console.log(this)
}
fun() 
// 我们实际上是在全局作用域下直接调用函数
// fun() 实际上是window.fun(), 所以this -> window
```
在严格模式下指向 undefined

JS 严格模式：JavaScript 在语法和行为上存在一些模糊的特性，可能导致一些不易察觉的错误，为提高代码的质量和可维护性，JS 引入了严格模式，通过启用一些额外的规则，强制执行更严格的语法和行为，帮助提前发现和修复潜在 bug。
```
// 演示严格模式下的情况
function fu() {
  "use strict"  // 在函数体中写一句 "use strict" ，就可以启用函数的严格模式
  console.log(this)
}

fu() // this 指向 undefined
```

对像方法中的 this

当函数作为对象的方法被调用时，this 指向该方法所属的对象

let person = {
  name: "John",
  sayName: function () {
    console.log(this.name)
  }
}

person.sayName()

let name = '卡卡';
let cat = {
  name:'有鱼',
  eat1:{
    name:'年年',
    eat2:function(){
      console.log(this.name);
    }
  }
}
cat.eat1.eat2();

构造函数中的 this

使用 new 关键字（实例化）调用函数时，该函数被当作构造函数，this 会指向新创建的对象实例

// 构造函数
function Person(name) {
  this.name = name
  this.sayHello = function () {
    console.log("Hello, I'm " + this.name)
  }
}

// 创建实例
let john = new Person("John");
john.sayHello() // 输出 "Hello, I'm John"，这里 this 指向 john 实例

let john = {
  name : name,
  sayHello : function () {
    console.log("Hello, I'm " + this.name)
  }
}

// 构造函数
  function Person(name) {
      this.name = name
      this.sayHello = function() {
      console.log(`你好，我是 ${this.name}`)
  }
}

// 创建实例
const person1 = new Person('张三')
person1.sayHello()

事件处理中的 this

在 DOM 事件处理函数中，this 通常指向触发事件的元素

<button id="myButton">Click me</button>

<script>
  var button = document.getElementById("myButton")
  button.onclick = function () {
    console.log(this)  
  }
</script>

<button class = "btu">Click</button>

<script>
  let oBtu = document.querySelector('.btu')

  oBtn.addEventListenter('click',clickBtu)

    function clickBtu() {
    console.log(this)
  }
</script>

箭头函数中的 this
1. 箭头函数没有自己的 this，它的 this 直接“捕获”或“继承”**外层作用域（它父级）**的 this 的值
2. 前面介绍过普通函数的 this 是动态的，取决于如何被调用
3. 而箭头函数的 this 是词法的，取决于定义时的上下文，且一旦定义就固定不变
4. 词法的 = 写代码时候的位置决定的（this 的出生地）

// 普通函数
function outerFunction() {
  this.name = "Outer"
  
  var innerFunction = function () {
    console.log(this.name)
  }
  
  innerFunction()
}

// 箭头函数
function outerFunctionWithArrow() {
  this.name = "外层作用域的this"
  
  var innerFunction = () => {
    console.log(this.name)
  }
  
  innerFunction()
}

// 一种情况
new outerFunction()             
new outerFunctionWithArrow()

// 另一种调用情况
outerFunction()
outerFunctionWithArrow()

改变 this 指向的方法

由于箭头函数的 this 来自于继承，箭头函数无法使用以下三种方法改变 this 指向

call() 方法

call() 方法附加在函数调用后面使用，可以忽略函数本身的 this 指向，然后将这个函数本身的 this 指向绑定到 call() 方法的第一个参数上面
```
函数.call(thisArg,arg1,arg2,...,argN)
```
- 参数解析：
  - thisArg：就是你想将调用这个方法的函数本身的 this 指向绑定到哪个对象上面
  - arg1-argN：从参数 arg1 开始，依次是向函数传递参数
- 注意点：
  - 使用 call() 方法时，相当于你调用了这个函数，会立刻执行这个函数
```
function greet() {
  console.log(this.animal, "的睡眠时间一般在", this.sleepDuration, "之间");
}

const obj = {
  animal: "猫",
  sleepDuration: "12 到 16 小时",
};

greet.call(obj); // 猫 的睡眠时间一般在 12 到 16 小时 之间
```
apply() 方法

和 call() 方法很相似，几乎一样
```
函数名.apply(thisArg,[arg1,arg2,...,argN])
```
- 参数解析：
  - thisArg：同样为你想将这个函数本身的 this 指向绑定到哪个对象上面
  - [arg1,arg2,...,argN]（主要区别点）：一个数组，数组里面的每一项依次是向函数传递的参数，这里可以直接写入一个数组，也可以写一个值为数组的变量
bind() 方法

和上面两个方法不一样，bind() 方法创建一个新函数并且还有返回值，使用 bind() 方法后不会立即执行函数，而是返回一个已经改变了 this 指向的函数
```
函数名.bind(thisArg, arg1, arg2, ..,argN)
```
- 参数解析：
  - thisArg：作用与前两个一致
  - arg1, arg2, ..,argN：在调用函数时，插入到传入绑定函数的参数前的参数
- 返回值：
  - 一个改变了 this 指向以后的 function 函数

const module = {
  x: 42,
  getX: function () {
    return this.x;
  },
};

console.log(module.getX())

const unboundGetX = module.getX;//undefined 函数未被调用，存储的是一个值
console.log(unboundGetX()); 

const boundGetX = unboundGetX.bind(module);
console.log(boundGetX());

总结及综合演练

this 指向：

1、一般函数：谁调用函数，this 就指向谁，没有调用者就指向全局对象 Window

2、箭头函数：箭头函数不会创建 this，它的 this 继承自上层作用域中的 this

<button class = 'btu'>Click</button>

<script>
console.log(this)

// 一个普通函数
function fn() {
  console.log(this)
}

// 创建一个对象
let obj = {
  fn: fn
}

// 直接调用
fn()
// 对象方法调用
obj.fn()
// 事件处理中调用
let oBtu = document.querySelector('.btu')
oBtu.addEventLister('click',fn)
</script>

// 构造函数
function Fn(age) {
  this.name = 111
  this.age = age,
  this.currentAge = function() {
    console.log(this.age)
  }
}

let Fn1 = new Fn(16)
Fn1.currentAge()

// call()方法
function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = "food";
}

console.log(new Food("cheese", 5).name);

代码解析：
- 关键点：Product.call(this, name, price)
- 这行代码的作用是：
  - 在 Food 的上下文中调用 Product 构造函数
  - 第一个参数 this 是新创建的 Food 实例
  - call() 方法将 Product 中的 this 绑定到传入的 Food 实例上
  - 相当于在 Food 实例上设置 name 和 price 属性
- 执行过程：
  - new Food("cheese", 5) 创建 Food 实例
  - Food 构造函数中的 this 指向这个新实例
  - Product.call(this, "cheese", 5) 让 Product 构造函数在这个 Food 实例上工作
  - 最终创建的 Food 对象包含：{name: "cheese", price: 5, category: "food"}

const outer = {
  name: "Outer Object",
  
  innerFunction: function () {
    const inner = {
      name: "Inner Object",
      nestedFunction: function () {
        console.log(this.name)
      }
    }
    inner.nestedFunction()
  }
  
}
outer.innerFunction();