与 AI 一起学前端

本节目标:建立正确的 AI 协作观 —— AI 是放大器,不是替代品;学会用 AI 加速学习和开发,而不是绕过学习。

先想清楚:AI 时代为什么还要学基础

毕业后你的真实工作流几乎必然包含 AI。但企业招聘看的是你对 AI 产出的把控力:

• AI 生成的布局塌了,你能不能说清楚问题("flex 容器没设高度导致子项溢出"),而不是只会说"页面乱了"?
• AI 给了两个修复方案,你能不能判断哪个是对的?
• 上线出了 bug,老板要的是你负责修好,"AI 写的"不是理由。

只会写提示词的人和会打字的人没有区别;懂概念、会调试、能负责的人,AI 才能放大他的产出。这就是本指南把调试和核心概念放在如此重要位置的原因。

AI 的四种正确用法

1. 当"随叫随到的助教":解释概念和代码

遇到看不懂的代码,别硬啃也别跳过:

我是 JS 初学者,请逐行解释这段代码,重点说明 reduce 的回调参数是怎么变化的:

const total = goodsList.reduce((sum, g) => sum + g.price * g.stock, 0)

追问技巧:"用一个生活中的类比解释闭包"、"这两种写法有什么区别?"、"什么场景下会用到它?"

2. 当"陪练":让 AI 出题和批改

我刚学完 JS 数组的 map/filter/reduce,请出 5 道由易到难的练习题,先不要给答案。我做完发你,请你批改并指出更优雅的写法。

这比被动看教程高效得多 —— 学习的本质是检索练习,不是重复阅读。

3. 当"排错搭档":高效提问模板

排错求助时,提供完整上下文,一次问清:

【目标】点击按钮后列表应该新增一项 【现象】点击无反应,控制台报错:Cannot read properties of null (reading 'addEventListener') 【代码】(贴出相关 HTML 和 JS) 【已尝试】确认了按钮 id 没拼错 请解释报错原因,并告诉我排查思路,而不是直接给完整代码。

注意最后一句 —— 主动要"思路"而不是"答案",几次之后你自己就会排查了。

4. 当"结对程序员":生成代码,但你做主

让 AI 写代码时,你的价值体现在前置的清晰描述和后置的审查验证:

• 描述时用准确的术语:"用事件委托处理列表点击"、"给搜索框加 300ms 防抖" —— 术语密度决定生成质量,这正是基础知识的回报;
• 生成后逐行读懂再使用,问自己:边界情况处理了吗?(空数组?接口失败?)有没有更简单的写法?
• 验证后再信任:跑起来、点一点、看控制台。AI 会一本正经地写出有 bug 的代码。

三条红线(给自己的纪律)

1. 不懂的代码不复制。 每一行都要能向别人解释 —— 面试官、组长真的会让你解释;
2. 作业和练习先自己写。 卡住 20 分钟后再问 AI,并且先要提示再要答案;
3. AI 说的不一定对。 它可能引用过时的 API、编造不存在的方法。以运行结果和 MDN 文档为准。

一个自测标准

关掉 AI,你还能不能独立完成待办清单和请求渲染列表这两个案例?能 —— AI 是你的杠杆;不能 —— AI 暂时是你的拐杖,得加练。

练习

1. 挑一段本指南里你没完全看懂的代码,用"逐行解释"提示词问 AI,再用自己的话写一段注释。
2. 用"出题模板"让 AI 给你出 5 道闭包题,完成并让它批改。
3. 找一个你之前解决过的 bug,用"排错模板"完整复盘一遍:目标、现象、原因、修复。