郑哲东写下这篇东西之前，我先交代一下背景。我刷到“JS作业三”这个标题的时候，第一反应是亲切，第二反应是“果然又是这样”。到了第三份JS作业，基本可以判定课程已经过了基础语法阶段，开始往函数、字符串处理、循环控制、DOM操作这些真正的“前端日常”靠拢了。搜了一圈关联词，里面反复出现的 js判断字符串是否包含、js for循环跳出循环、js三级联动、js动态创建的表格合并、js原型和原型链、js深入浅出vue，其实都是这份作业里常见的小题，也是实际项目里天天用的东西。
这篇我不会给你一份标准答案完事，而是把这份作业当成一次综合演练，逐题拆透：考什么、为什么这么考、真实场景里对应什么需求，以及我自己写代码时踩过的坑。不管你是刚学到函数的初学者，还是已经开始接触框架的进阶选手，都能从这里找到能用的东西。先记住一句话：前端作业不是写给老师看的，是写给三个月后的自己看的。
1. “JS作业三”到底在考什么
1.1 从题目分布看核心知识的覆盖盘
作业做到第三份，课程节奏通常已经走到了“JavaScript核心语法 + 浏览器DOM操作”的交界处。这个阶段的题目分布非常有规律：前半部分是函数和逻辑题，考的是语言基础；后半部分是DOM交互题，考的是“代码怎么影响页面”；偶尔还会冒出一道字符串处理题，考的是API熟练度和边界意识。
比如“判断字符串是否包含某个词”这种题，看起来很基础，但它把所有新手容易犯的错误全踩了一遍。你写 str.indexOf(keyword) > -1 还是 str.includes(keyword)，不只是写法差异，背后是“返回值语义”“ES6特性支持”这些知识点的理解深度。再比如“for循环跳出循环”，单层循环好写，双层循环怎么跳？break 跳内层还是外层？这题一改，就能筛掉一批只会背语法的人。
我见过很多学生卡在“动态创建表格合并单元格”这种题上，其实本质是“数据 + 渲染”的分离问题。你得先明确数据模型，再根据数据的连续相等性决定哪些单元格要 rowSpan，最后才是DOM操作。这个思路一旦建立，后面写任何报表、日历、数据可视化组件，都是同一套逻辑。
1.2 这作业放在真实项目里是什么位置
别觉得作业小题“太假”。把题目的场景换成真实业务，你会发现全是同款需求：输入框校验要用到字符串包含判断，商品列表筛选要用到循环和 break 提前终止，城市三级联动是后台管理系统的高频组件，表格合并是导出报表、排课表、排班表的基本功。至于原型链，那是你理解Vue响应式原理、搞懂 this 指向的必经之路，热搜里同时出现“js深入浅出vue”和“js原型和原型链”，不是偶然。
所以我一直建议大家写作业的时候多问一句：“这个功能上线之后，用户在哪个页面、什么操作下会触发它？”这么一想，你的代码自然就会从“能运行”变成“能看”——参数会校验了、边界会处理了、命名也像人话了。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 函数与字符串处理：作业里最阴险的送分题
2.1 函数声明的三种写法，怎么选
作业里几乎必有一道“封装一个函数”的题目。新手常犯的第一个错，就是把所有逻辑堆在全局，写一个巨型 function 然后一路 var 到底。这种做法能跑，但毫无扩展性。正确的姿势是先分清三种函数写法：
- 函数声明：
function foo() {}，有提升，定义在哪都能调，适合顶层工具函数。 - 函数表达式：
const foo = function() {}，没有提升，必须先赋值再调用，适合回调场景。 - 箭头函数：
const foo = () => {}，不绑定this，适合短逻辑和需要捕获外层this的场景。
作业里我建议默认用函数表达式，因为从现在开始养成“函数也是值”的认知，后面学高阶函数会轻松非常多。比如你写一个“判断字符串是否含有指定字母，忽略大小写”的函数：
javascript复制function containsIgnoreCase(str, keyword) {
// 先统一转小写，再判断
return str.toLowerCase().includes(keyword.toLowerCase());
}
console.log(containsIgnoreCase('Hello JS', 'js')); // true
console.log(containsIgnoreCase('Hello World', 'js')); // false
这里有两个关键点：第一，toLowerCase() 是为了把“忽略大小写”变成“统一小写后精确匹配”，这种“归一化”思想在几乎所有数据处理场景里都适用；第二，把判断逻辑封装进函数而不是写在业务代码里，意味着同样的逻辑可以在多个页面复用。这就是函数存在的全部意义。
2.2 字符串包含判断的三种姿势，别只会一种
很多教程只教 indexOf()，但实际开发里你需要根据场景选工具。我把三种方式整理成一个简单对照：
| 方法 | 返回结果 | 适用场景 | 注意点 |
|---|---|---|---|
str.indexOf(keyword) |
位置索引，找不到为 -1 | 需要知道匹配位置时 | 必须判 !== -1，直接 if(str.indexOf('a')) 遇到位置0会被误判为false |
str.includes(keyword) |
布尔值 | 只关心“有没有”时 | 语义最清晰，ES6支持，现代环境无压力 |
str.match(/正则/) |
数组或 null | 需要匹配规则复杂时 | 性能较前两者差，别在循环里用 |
你自己写作业时，先用 includes 解决问题，如果题目要求返回位置再用 indexOf。至于正则，那是字符串处理的进阶玩法，作业里出现“忽略大小写”“只匹配数字”这种题时再祭出来。一个小小的建议：每道题提交前，在控制台里把边界值跑一遍——空字符串、全匹配、首字符匹配、完全不存在，这组测试能在5分钟内帮你挡住一半的隐性错误。
2.3 重新声明let到底会不会覆盖
这个热搜词“js 重新声明let 会覆盖前面吗”非常典型，几乎每次讲作用域都会有人问。答案很简单：同一个作用域内重复 let 声明同一个变量，直接报错，不是覆盖而是语法错误。var 可以重复声明并覆盖，这也是 var 的一大坑。
javascript复制var a = 1;
var a = 2;
console.log(a); // 2
let b = 1;
let b = 2; // SyntaxError: Identifier 'b' has already been declared
这个知识点看起来只是“会不会报错”的区别，背后却是“块级作用域”和“变量提升”的理解。我在作业里见过太多人声明 let arr 后又声明一次想“重置”，结果直接白屏。记住：let 和 const 的精神是“一个变量只在一个作用域里存在一次”，如果你想重置，用赋值而不是重新声明。这也是ES6之后社区普遍推崇 const 优先、需要变了才用 let 的原因——它把“我这个变量不打算换指向”的意图直接写进了代码里。
3. 循环控制与数据遍历：从会写循环到会用循环
3.1 for循环里的break和continue，什么时候用哪个
作业里大概率出现“在数组中找到第一个满足条件的元素”这种题。新手第一反应是 for 循环跑完整个数组，然后懵了：明明找到了还得继续跑？这时候 break 就派上用场了。简单说：
break：立即终止整个循环，后面的迭代不再执行。continue：跳过当前这一次迭代，继续下一次。
“找到第一个就停”用 break；“过滤掉某些值再处理”用 continue。光这俩还不够，还有一个细节：双层循环时 break 只跳出最内层。如果你要跳出外层，用“标签语句”。
javascript复制outer: for (let i = 0; i < 5; i++) {
for (let j = 0; j < 5; j++) {
if (j === 2) {
break outer; // 直接跳出两层循环
}
console.log(i, j);
}
}
说实话，标签语句我在真实项目里很少用，因为可读性差。更常见的做法是在外层循环加一个标志位 let found = false，内层满足条件时给标志位置为 true，然后再一次性跳出。但这个标签语法你必须知道——它在某些“矩阵查找”“扑克牌对子判断”的题里是优雅解，也能让你在面试时显得不是只会背API。
3.2 数组遍历方法的选型陷阱
作业做到后面，你会发现 for 循环写得越来越烦。这时候就该引入 forEach、map、filter 了。但很多新手在这里犯了一个认知错误：觉得 forEach 可以完全替代 for。事实差远了，两个最典型的差异就是：
forEach不能break，不能continue，想中途退出必须抛异常，纯属自找麻烦。for...of可以break，而且能拿value，语义清晰，是遍历首选。
所以遇到“遍历且在满足条件时提前退出”的需求，用 for...of 而不是 forEach。我个人的作业自查清单是这样的：需要跳过或提前结束时用 for...of；需要对每个元素做映射并产出新数组时用 map；需要筛选子集时用 filter；只是逐个执行副作用时用 forEach。把这套选型逻辑记住，比背十种数组方法更有用。
3.3 遍历中的数组长度变化：一个隐藏的致命bug
再分享一个容易踩的坑。你在 for 循环里用 arr.length 作为边界条件，循环体里又删除了数组元素，索引就会错位。比如：
javascript复制const list = [1, 2, 3, 4];
for (let i = 0; i < list.length; i++) {
if (list[i] % 2 === 0) {
list.splice(i, 1);
i--; // 关键：删除后索引回退，避免跳过元素
}
}
不加上那一句 i--，循环会跳过被删除元素后面的那一个。这个bug在作业里不一定被发现，因为数据量小，但在真实项目里会直接导致线上数据错乱。好一点的方案是“倒序遍历”或“先筛选再重新赋值”，无论如何，你得知道“遍历同时修改容器”本身就是危险的。
4. DOM交互实战：三级联动与表格合并
4.1 三级联动：先设计数据，再管DOM
三级联动是什么？省、市、区三个下拉框，选完省，市级下拉框自动填充该省的城市；选完市，区级下拉框跟着变。热搜里“js三级联动”常年占据高频，是因为它看起来简单，写起来却有讲究。
最快实现方式是这样的：先设计一个省份-城市-区域的数据结构，用对象嵌套或数组关联。然后监听省下拉框的 change 事件，根据选中的省份重新渲染市级下拉框，再触发一次渲染逻辑更新区级下拉框。
javascript复制const regions = {
广东省: {
广州市: ['天河区', '越秀区'],
深圳市: ['南山区', '福田区']
},
浙江省: {
杭州市: ['西湖区', '滨江区'],
宁波市: ['鄞州区', '海曙区']
}
};
function renderCities(province) {
const citySelect = document.getElementById('city');
citySelect.length = 1; // 保留“请选择”占位
if (!province) return;
Object.keys(regions[province]).forEach(city => {
const option = new Option(city, city);
citySelect.appendChild(option);
});
}
我特别想强调“先设计数据，再管DOM”这个顺序。很多人一上来就写操作DOM的代码，结果发现一个个 appendChild 写到最后自己都晕。其实只要把数据结构理顺了，DOM操作就是“根据数据重新渲染”而已——这也正是后来你学Vue、React时“数据驱动视图”思想的雏形。作业里如果你能把这一层说出来，分数一般不会低。
4.2 动态表格合并：合并单元格的本质是数据分组
“js动态创建的表格合并怎么弄成一个”这个热搜词一看就是批改网上的经典题目。动态表格合并单元格到底在考什么？首先是 rowSpan 属性，其次是“数据分组”的逻辑。
举个例子，你要渲染一个排班表，某个老师连续三天都排了课，那么“教师名”这一列应该合并成一行，跨三行。怎么做？先别急着写DOM，先遍历数据，找出“相邻且相同的字段”，记录每个组从哪一行开始、共有多少行。然后渲染时，只在组的起始行设置 rowSpan，其他行跳过单元格输出。
javascript复制function renderTable(data) {
const tbody = document.getElementById('tbody');
tbody.innerHTML = '';
// key是分组的依据，比如教师名
// 遍历时统计连续相同值的跨度 groupCount
// 渲染时按 groupCount 设置 rowSpan
}
合并单元格的难点不在于 rowSpan 怎么写，而在于你没想清楚“合并”是一个数据层面的操作，不是一个纯样式层面的事。你在作业里把这个思路写出来，老师一眼就能看出你是真会，还是在网上抄了一段改了个数字。
4.3 附赠高频场景：iframe里关页面，还要刷新父页面
热搜里还有一个“iframe + 关闭 + jquery + 并刷新 + 父页面 + js”，这是一个很实际的场景，比如后台系统里嵌了一个子页面，子页面上有个“关闭并保存”按钮，目标是关掉当前iframe面板并让父页面刷新数据。这个需求拆开就两步：通过 window.parent 找到父页面上下文，然后调用父页面定义的刷新方法。
javascript复制// 子页面中
const parentWindow = window.parent;
if (parentWindow && parentWindow.refreshTable) {
parentWindow.refreshTable();
}
// 关闭iframe面板的操作，取决于你的具体实现方式
要注意的是跨域问题：如果iframe里的页面和父页面不同源，window.parent 你不能直接访问，得靠 postMessage 传递消息。作业里一般不会考跨域，但真实项目里这个坑我会提前跟你说。另外，如果你用的是jQuery，记得在操作DOM前先等 $(document).ready()，不然很可能出现“脚本已经执行但元素还没加载完”的情况。
5. 从作业走向项目：原型链、WebSocket和后端框架
5.1 原型和原型链，作业里最“没用”却最值钱的题
“js原型和原型链”这个热搜词几乎每个JavaScript学习者都会搜。为什么作业要考它？因为它是理解JavaScript对象系统的钥匙。简单版的理解如下：每个函数都有 prototype 属性，指向一个对象；每个对象都有 __proto__ 属性，指向创建它的构造函数的 prototype。当访问一个对象的属性时，如果该对象自己没有，就顺着 __proto__ 一路往上找，这就是“原型链”。
javascript复制function Dog(name) {
this.name = name;
}
Dog.prototype.bark = function() {
console.log(this.name + '叫了');
};
const d = new Dog('旺财');
d.bark(); // 旺财叫了
// d实例上没有bark，但顺着原型链找到了Dog.prototype.bark
以后你看Vue、看类组件的 extends、看各种“继承”的实现，底层都是这套东西。理解了原型链，你就不需要死记硬背“为什么可以用数组的 .map()”，因为那是 Array.prototype 上的方法。做作业的时候，不必在所有小题里都用原型链，但你要看得懂。
5.2 异步和事件循环：setTimeout真的“准时”吗
热搜里“js settimeout 返回值的范围 有0存在么”看起来奇怪，其实是在问 setTimeout 的延时精度问题。答案很简单：返回值是定时器ID，和延时多少没关系；延时范围可以传0，但就算传0，也不是马上执行，而是至少等到当前任务队列清空后再执行。这就是事件循环的核心表现。
javascript复制console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');
// 输出顺序：1 4 3 2
你有没有发现，Promise 的回调比 setTimeout(0) 先执行？因为微任务队列优先于宏任务队列。这个知识点在你写作业时可能用不上，但一旦你开始做接口请求、防抖节流、websocket消息处理，就会体会到：不了解异步顺序，代码里全是“神秘bug”。
5.3 顺带回应一个高频搜索：“我想用JS写一个后端项目，用什么框架好”
既然搜到“JS作业三”的人多半在学前端，那总会有个阶段想“用JS写后端”。我的建议很直接：先装Node.js，然后从 Express 或 Koa 入手。Express老牌稳定、生态成熟、教程多，适合第一个后端项目；Koa更现代，中间件模型用 async/await，写过之后对“洋葱模型”的理解会上一个台阶。如果你想走精细化路线，NestJS 是更好的工程化选择，但它带来的TypeScript、依赖注入、模块划分这些概念对新手并不友好。
打个比方：Express是一辆手动挡捷达，什么路都能跑，维修手册满大街都是；NestJS是一辆配置齐全的SUV，功能强大但你先得有驾照。作业阶段，先用捷达把路跑熟，比什么都重要。
6. 作业验收：自查清单与调试实操
6.1 用浏览器控制台，而不是“感觉没问题”
作业写完，我强烈建议你在浏览器里按 F12 打开控制台，把每一步输出都打出来看。这习惯如果你现在养成，后面做项目会少掉无数个“为什么我的页面白屏”的时刻。具体自查两步：
- 打开 Console 面板，看有没有红色报错。看到
Cannot read property 'xxx' of undefined这种，就是某个变量还没拿到数据就用了，先去打印这个变量，看它到底是什么。 - 打开 Sources 面板，找到你写的JS文件，在关键行打一个断点，一行一行执行，观察变量的变化过程。
断点调试看起来比 console.log 慢，但实际排查问题时它是核武器。你会一眼看到哪一行之后数据没按预期走，而不是在几十行日志里慢慢猜。
6.2 常见报错速查表，作业里最常碰到的五种
| 报错信息 | 含义 | 快速解法 |
|---|---|---|
xxx is not defined |
变量没声明或拼写错误 | 检查变量名，确认声明在调用之前 |
Cannot read property 'a' of undefined |
对象为 undefined 却访问了属性 | 先在前面打印该对象，确认数据是否已加载 |
Unexpected token '}' |
语法错误，多半是括号不匹配 | 用编辑器的括号匹配功能逐段检查 |
forEach is not a function |
你给 forEach 传的东西不是数组 |
打印目标变量，确认它真的是数组 |
Identifier already declared |
同一个作用域里重复 let/const 声明 |
改成赋值，或换个变量名 |
还有人会在控制台看到带 Deprecation warning 字样的提示，比如 deprecation warning [legacy-js-api]。这种通常是浏览器在提醒“某个旧API已被新API取代”。见到先别慌，复制这段提示去搜一下，看是哪个库的哪个API，然后按照提示换成新的写法即可。作业一般不会因为警告扣分，但你得知道它不是报错。
6.3 一个习惯：每道小题留一个运行入口
作业提交前，把每个小题改成“可以在页面里直接触发”的形式。比如在HTML里放几个按钮，每个按钮对应一道题的运行结果；或者用一组whitespace 控制条件，把不同题目的输出分开。这样做的价值在于：批改的人不用去翻代码逻辑，点一下按钮就能验证；你自己复查的时候，也不用一次跑全部，一题一题来，哪里有错立刻锁定。
我在实际批改别人作业时发现，最大的差距不在于谁的正确率高，而在于谁的代码“好读”。好读的标准很朴素：函数名是动词、变量名是名词、关键的算法步骤有注释、输出入口清晰。作业做到这份上，已经是在模拟真实团队协作的代码审查了。
7. 写在最后的一点体会
这套“JS作业三”做完，我最大的体会是：题目本身不难，难的是把每道小题的“工程习惯”带出来。字符串包含判断练的是归一化处理，循环跳出练的是终止条件设计，三级联动练的是数据驱动视图，表格合并练的是分组统计思维。这些习惯，比会背一百个API值钱得多。
我踩过最深的坑，是写完一个功能觉得自己“会了”，等到下一个作业直接套代码才发现完全套不上。后来我改成每次写完顺手写三行注释：这段代码解决什么问题、为什么用这个方案、还有没有别的写法。注释写不出，说明还没真懂。这次做完作业，你也可以试试这个方法，不亏。
最后再分享一个小技巧：作业里写完三级联动后，试着自己把数据从“写死的对象”换成“模拟接口返回的JSON”，再加一个加载中的提示。这么一改，你的作业就不是作业了，是一个能放进作品集的小demo。学习JavaScript最爽的瞬间，不是作业得了满分，而是你发现课上的小玩具，居然能长成真实项目里的一个正经功能。