
阅读代码,很多时候比写代码更困难。
尤其是下面这些场景:
- 教程中的示例使用了没见过的语法。
- 接手一个项目,不知道文件之间如何关联。
- 看到一个函数,却不知道它为什么这样写。
- 代码可以运行,但不理解输入和输出。
- 只修改了一个小地方,却担心影响其他功能。
这时,很多人会把代码复制给 AI,然后问:
text
这段代码是什么意思?
AI 可能会回答,但结果不一定适合你的学习目标。
有时解释太简单,有时充满专业术语,有时只是把代码换一种方式重复一遍。
今天我们学习一种更有效的方式:
让 AI 按照你的基础、代码结构和阅读目标,分层解释一段代码。
这套方法既适合学习,也适合接手陌生项目。
一、为什么看懂代码不能只靠逐行翻译
假设你看到下面这段代码:
javascript
const activeUsers = users
.filter((user) => user.enabled)
.sort((a, b) => a.name.localeCompare(b.name));
如果只做逐行翻译,可能得到:
users调用了filter。filter里面有一个函数。- 之后调用了
sort。 localeCompare用来比较字符串。
这些解释没有错,但还没有回答更重要的问题:
- 这段代码整体想解决什么问题?
activeUsers最后得到的是什么?- 原数组
users会不会被修改? - 如果
users是空数组会怎样? - 如果某个用户没有
name字段会怎样?
所以,真正有效的代码解释至少应该包含 4 个层次:
text
整体目的
↓
执行流程
↓
关键语法
↓
输入、输出和边界情况
只看每一行的意思,不一定能理解整段代码的作用。
二、第一步:先告诉 AI 你的基础和目标
同一段代码,对不同的人应该有不同的解释方式。
如果你刚开始学习 JavaScript,可以这样告诉 AI:
text
我刚开始学习 JavaScript,目前只了解变量、函数、数组和 if 判断。
请不要默认我知道高级语法。
如果你已经有开发经验,只是刚接触一个新框架,可以这样说:
text
我熟悉 JavaScript 和基本前端开发,但刚开始学习 Vue 3。
请重点解释 Vue 相关的写法,以及它和普通 JavaScript 的区别。
如果你正在接手一个项目,可以这样说:
text
我正在接手一个陌生的 Vue 3 项目。
我想先理解这个文件在整个功能中的作用,
请重点说明它和其他模块的关系,不需要解释基础语法。
因此,提问前先说明两件事:
text
我的基础是什么?
我想通过这段代码了解什么?
三、模板一:解释一段简单代码
这是最适合初学者使用的模板。
text
我正在学习 [编程语言或框架]。
目前的基础是:[说明你已经学会的内容]。
下面是一段代码:
```[语言]
[粘贴代码]
请按以下顺序解释:
- 先用一句话说明这段代码整体要解决什么问题。
- 按执行顺序说明代码做了哪些事情。
- 解释关键变量、函数和判断条件。
- 说明输入是什么,输出是什么。
- 用一组简单数据演示执行过程。
- 列出空值、错误输入和边界情况下可能发生什么。
- 如果使用了我还不了解的语法,请先解释语法,再回到整体逻辑。
请使用初学者容易理解的语言,不要只把代码逐字翻译一遍。
php
### 示例
代码如下:
```javascript
function getCompletedTitles(todos) {
return todos
.filter((todo) => todo.completed)
.map((todo) => todo.title);
}
可以这样提问:
text
我正在学习 JavaScript,目前了解变量、函数和数组,
但还不熟悉 filter 和 map。
下面是一段代码:
```javascript
function getCompletedTitles(todos) {
return todos
.filter((todo) => todo.completed)
.map((todo) => todo.title);
}
请按以下顺序解释:
- 这段代码整体要解决什么问题?
- todos 需要是什么格式?
- filter 和 map 分别做什么?
- 代码执行了几步?
- 给出 3 条待办数据并演示最终结果。
- 如果 todos 是空数组会怎样?
- 如果某条数据没有 title,会怎样?
ini
这样得到的回答会比"解释这段代码"更具体。
## 四、第二步:让 AI 用示例演示执行过程
很多代码之所以难懂,是因为我们不知道数据是怎样流动的。
例如:
```javascript
const numbers = [1, 2, 3, 4, 5];
const result = numbers
.filter((number) => number % 2 === 0)
.map((number) => number * 10);
可以要求 AI 按中间结果解释:
text
请不要直接告诉我最终结果。
请按照每一步的中间结果解释:
1. numbers 的初始值是什么。
2. filter 执行后得到什么。
3. map 执行后得到什么。
4. result 最终是什么。
你会得到类似这样的过程:
text
初始数组:[1, 2, 3, 4, 5]
filter 后:[2, 4]
map 后:[20, 40]
最终 result:[20, 40]
对于数组处理、条件判断、循环和数据转换,这种"展示中间结果"的方式非常有效。
五、第三步:让 AI 解释输入、输出和副作用
看懂一段代码时,不能只关注它返回了什么。
还要确认它是否:
- 修改了传入的对象。
- 修改了数组内容。
- 写入了文件。
- 发送了网络请求。
- 修改了页面。
- 更新了数据库。
- 保存了登录状态。
可以这样要求 AI:
text
请额外说明:
1. 这段代码的输入是什么?
2. 返回值是什么?
3. 是否会修改输入数据?
4. 是否会产生网络、文件、页面或数据库副作用?
5. 调用它之前需要满足什么条件?
6. 调用它之后,哪些状态可能发生变化?
什么是副作用
简单来说,副作用就是:
除了计算并返回结果之外,代码对外部环境产生的影响。
例如:
javascript
function addTodo(todos, title) {
todos.push({ title, completed: false });
return todos;
}
这段代码返回了数组,但它同时也修改了原来的 todos。
如果你不知道这一点,可能会在其他地方遇到难以理解的问题。
可以继续问 AI:
text
这段函数是否修改了传入的 todos?
请说明修改前后的数组变化。
如果不希望修改原数组,请给出一个适合初学者的改写方式。
六、模板二:用学习模式解释代码
如果你的目标是学习,而不是马上修改代码,可以使用更完整的模板:
text
我想通过下面这段代码学习 [知识点]。
我的基础:
[说明已经学过什么]
代码:
```[语言]
[粘贴代码]
请按照"学习模式"回答:
- 这段代码最终完成了什么功能?
- 其中涉及哪些知识点?
- 按由浅到深的顺序解释这些知识点。
- 给出一个最小版本,让我先理解核心逻辑。
- 再说明原代码为什么写得更复杂。
- 给出 2 个我可以自己修改的练习。
- 列出初学者最容易误解的地方。
如果代码中存在不好的写法,请单独说明, 不要为了讲解而把它当作最佳实践。
markdown
这个模板适合:
- 看教程代码。
- 学习开源项目中的某个功能。
- 理解一个新语法。
- 对比简单写法和项目写法。
## 七、接手项目时,不要一上来解释整个仓库
陌生项目通常包含很多文件。
如果你把整个项目一次交给 AI,然后要求:
```text
请解释这个项目。
得到的结果可能很长,但不一定有用。
更好的方式是从小到大:
text
项目目录
↓
入口文件
↓
目标页面或接口
↓
核心函数
↓
调用链和数据流
第一步:解释目录结构
可以先提供目录结构:
text
这是一个前端项目的目录结构:
```text
src/
api/
components/
pages/
router/
store/
utils/
App.vue
main.js
请从初学者角度说明:
- 每个目录可能负责什么。
- 哪些目录通常和页面展示有关。
- 哪些目录通常和接口请求有关。
- 如果我要查找"用户列表页面",建议从哪里开始。
- 如果只是根据目录无法确定,请明确标记为推测。
perl
### 第二步:解释入口文件
找到入口文件后,再让 AI 解释:
```text
下面是项目入口文件:
```javascript
[粘贴 main.js 或 App.vue]
请说明:
- 项目从哪里开始执行。
- 创建了哪些应用对象。
- 注册了哪些插件或路由。
- 页面是如何被加载出来的。
- 我接下来应该查看哪些文件。
perl
### 第三步:解释一个具体功能
不要问"整个项目怎么工作",而要限定一个目标:
```text
我现在只想理解"用户列表"这个功能。
请根据下面的文件,梳理它的调用关系:
1. 页面组件
2. 接口文件
3. 数据请求方法
4. 列表渲染位置
5. 加载状态和错误处理
请先输出调用链,再逐个解释每个文件的作用。
八、模板三:梳理陌生项目的调用链
这个模板适合接手项目时使用:
text
我正在接手一个陌生的 [技术栈] 项目。
当前想理解的功能是:
[例如:用户登录 / 商品列表 / 订单提交]
相关文件如下:
文件 1:[文件路径]
```[语言]
[代码]
文件 2:文件路径
[语言]
[代码]
文件 3:文件路径
[语言]
[代码]
请按以下结构回答:
- 先画出从用户操作到最终结果的调用链。
- 说明每个文件的职责。
- 说明数据从哪里来,经过哪些处理。
- 说明哪些地方会修改状态或发送请求。
- 说明可能的错误处理路径。
- 列出我还需要查看的文件。
- 如果只能根据代码推测,请把推测单独列出。
bash
### 一个简单的调用链示例
假设用户点击"创建待办事项",代码可能经过:
```text
TodoForm.vue
↓
todoApi.create()
↓
POST /api/todos
↓
TodoController
↓
TodoService
↓
TodoRepository
↓
数据库
你可以让 AI 分别回答:
- 哪个文件负责接收用户输入?
- 哪个函数负责发送请求?
- 哪一层负责业务规则?
- 哪一层负责访问数据库?
- 请求失败后,错误最终显示在哪里?
这种方式比只看一个文件更接近真实项目的工作方式。
九、如何避免 AI 把猜测说成事实
解释陌生代码时,AI 可能根据常见项目模式进行推测。
例如,它说:
text
这个文件应该是用户登录后的首页。
"应该是"说明它并没有从代码中完全确认。
因此,建议在 Prompt 中加入:
text
请把回答分成三类:
1. 可以从代码直接确认的事实。
2. 根据命名或常见结构推测的内容。
3. 仍然需要查看其他文件才能确认的问题。
这会让解释结果更加可靠。
解释结果的三层结构
text
已确认:
代码调用了 getUser 方法,并把结果保存到 user 变量。
推测:
getUser 可能负责请求用户信息,但需要查看方法定义才能确认。
待确认:
用户信息是否来自缓存、接口或本地存储。
对于陌生项目,这种区分非常重要。
十、代码解释后,继续向 AI 提问
第一次回答通常只是开始。
看完后可以继续追问:
追问一:为什么这样写
text
这段代码为什么要先执行 A,再执行 B?
如果交换执行顺序,会发生什么?
追问二:能不能用简单写法表示
text
请给出一个功能相同但更适合初学者理解的版本。
并说明两个版本的区别。
追问三:哪里最容易出错
text
请列出这段代码最容易出错的 5 个地方,
并给出对应的测试方法。
追问四:修改前要注意什么
text
如果我要修改这段代码,
有哪些调用方、数据结构或副作用需要先确认?
好的代码解释,最终应该帮助你完成下一步行动:
- 能够修改。
- 能够测试。
- 能够排错。
- 能够判断影响范围。
十一、常见误区
误区一:一次粘贴太多代码
代码太多时,AI 可能抓不住重点,解释结果也会变得宽泛。
更好的方式是:
text
先提供目录和目标
↓
再提供入口文件
↓
再提供关键函数
↓
最后补充依赖文件
误区二:只要求逐行解释
逐行解释适合学习语法,但不一定能帮助你理解功能。
最好同时要求:
- 整体作用。
- 执行流程。
- 输入输出。
- 调用关系。
- 异常和副作用。
误区三:把 AI 的解释当作代码事实
如果 AI 没有看到某个函数的定义,它就不能准确说明这个函数内部做了什么。
遇到这种情况,应该继续提供相关代码,而不是直接相信猜测。
误区四:解释完不自己运行
看懂解释和真正理解之间,还有运行、修改和观察结果这一步。
至少尝试:
- 修改一个输入。
- 删除一条数据。
- 增加一个边界情况。
- 观察控制台或页面变化。
十二、一份可直接复用的代码阅读模板
text
我正在学习或接手一个 [语言 / 框架] 项目。
我的目标是:
[想理解的具体功能]
我的基础:
[已经掌握的内容]
下面是相关代码:
```[语言]
[粘贴代码]
请按以下结构解释:
- 这段代码整体要解决什么问题?
- 它从哪里开始执行?
- 按执行顺序说明主要步骤。
- 说明输入、输出和关键数据变化。
- 解释重要变量、函数和语法。
- 说明是否存在副作用。
- 列出正常、边界和异常情况。
- 区分代码中可以确认的事实、合理推测和待确认问题。
- 如果我需要修改它,应该先检查哪些调用方和相关文件?
请使用 初学者 / 有经验开发者 能理解的语言。 不要只逐行翻译,也不要把无法从代码确认的内容说成事实。
perl
## 十三、总结
让 AI 解释代码时,不要只问:
```text
这段代码是什么意思?
更好的提问方式是同时说明:
- 你的基础:你已经了解什么。
- 你的目标:想学习语法、理解功能,还是接手项目。
- 代码上下文:文件位置、调用方和相关模块。
- 输出要求:整体作用、执行流程、数据变化和边界情况。
代码阅读可以按照下面的顺序进行:
text
先看整体目的
↓
再看执行流程
↓
理解输入和输出
↓
确认调用关系
↓
检查异常和副作用
↓
自己运行并修改
请记住:
AI 可以帮你加快阅读代码的速度,但真正的理解来自你对代码的运行、修改和验证。
下一篇文章,我们继续进行一个小型实战:
用 AI 写一个小功能:从需求到代码的完整过程。
✍坚持原创,求关注,点赞,收藏