又到交JavaScript作业的季节了。我这些年帮学弟学妹和网上的朋友看过少说几百份作业代码最深的感受是大部分人不是不会写而是压根没搞清楚题目到底想考什么。这篇东西是冲着JavaScript作业这几个字来的——不管你是卡在函数定义、被保留两位小数折磨、对着运行时报错发懵还是接到了Canvas绘图甚至OC与JavaScript互相调用这类混合开发作业我都按实际帮人Debug的经验把最常考、最容易翻车的点给你拆开讲清楚。适合所有拿JavaScript当课程作业、又不想只是抄一份代码交差的同学。1. 动笔之前先拆题把作业需求翻译成技术点清单很多同学打开编辑器就开始敲敲到一半发现不知道自己在干嘛。这不是态度问题是缺了拆题这一步。作业题干通常不会直接告诉你这里用addEventListener那里要处理浮点精度你需要自己把它们挖出来。1.1 我见过的三类作业题干对应三种应对策略第一类是功能描述型比如做一个计算器做一个待办清单。这类题考的是综合能力题干里每个动词都是一个考点输入意味着DOM取值和事件绑定计算意味着函数和运算符显示意味着修改页面内容。第二类是知识点指向型比如用函数实现数组去重使用Canvas绘制一个时钟。用函数使用Canvas就是在提示你这次作业的重点是某个API或某个语言特性不是功能本身有多炫。第三类是效果还原型给你一个现成的网页或动图让你照着做。这类题的重点在观察布局结构、交互细节、动画节奏每一个都要量化成代码里的参数。1.2 拆题实例一个简单计算器背后的考点清单来做一个常见的练手题编写一个页面用户输入商品单价和购买数量点击按钮后计算总价结果保留两位小数显示在页面上。看起来就一句话但拆开是这些东西输入框的值是字符串必须先转换成数字才能参与计算按钮要绑定点击事件这里考的是addEventListener或者onclick的区别总价要保留两位小数这就涉及JavaScript的数值精度和toFixed方法结果要显示到页面上涉及innerText或textContent的用法如果用户没输入、输入负数、输入字母你的程序要给出合理反馈这是隐藏考点。把题干拆成这张清单之后你会发现作业的难度一下子降了——你不是在面对着做一个计算器这个模糊的大任务而是在按顺序完成五个明确的小任务。每个小任务单独搜索、单独验证写完再拼起来就行。1.3 隐藏得分点边界条件与输入校验批改作业的老师最烦的不是功能做不出来而是功能能跑但一输入异常数据就崩。你说单价填了个abc程序报NaN这能算写完吗严格来说真不算。我推荐所有作业都做一道最基础的校验拿到输入值后用Number()转一次再用isNaN()判断一下。如果是空字符串Number()会变成0这也是个坑——用户在输入框里什么都没填你的程序不该默认按0算应该提示请输入内容。判断空串、判断NaN、判断负数三行代码就能让作业的完成度上一个档次这属于老师最喜欢看的考虑问题全面。写代码之前花十分钟做拆题和边界设计等于给后面所有的Debug环节提前扫雷。2. 函数作业的高分写法三种定义方式与参数陷阱函数几乎是每份JavaScript作业里绕不开的考点。可以说前面说的计算器如果不用函数组织代码老师大概率会扣代码结构的分。但函数这部分有几个经典误区几乎每个学期都能见到。2.1 声明式、表达式、箭头函数作业里怎么选// 声明式函数声明 function calculateTotal(price, count) { return price * count; } // 表达式函数表达式 const calculateTotal function(price, count) { return price * count; }; // 箭头函数 const calculateTotal (price, count) price * count;三者在作业场景里的差异主要是两个提升和this。声明式有变量提升你在函数定义之前调用它也没问题表达式和箭头函数定义之前调用会报calculateTotal is not defined。this的差异更隐蔽箭头函数没有自己的this它继承自外层作用域。作业里我的建议是普通工具函数用声明式因为提升特性让你可以把函数都写在文件底部、调用写在顶部代码读起来像文章一样从上到下。需要回调函数的地方比如事件处理、forEach、定时器用箭头函数简洁而且this指向不容易出错。如果老师指定了必须用函数表达式那你就老老实实用表达式得分比风格重要。2.2 参数与返回值学生最容易丢分的地方我改作业时最常看到的问题有三个。第一函数内部改了外部变量却不返回任何东西调用方拿不到结果。第二参数顺序记反或者少传参数JavaScript不会报错但结果全是undefined。第三混淆传值和传引用——对象和数组作为参数时函数内部修改会直接影响原始数据这在做数组去重、排序作业时特别容易犯。补一个实用的思路函数设计的标准是输入参数、返回结果、内部无副作用。也就是说函数内部尽量不要去动外层的全局变量要改什么先把结果return出来交给调用方处理。这样的代码逻辑清晰、也好测试老师看起来一眼就能懂你在写什么。2.3 一个完整示例用函数重构计算器逻辑还是拿计算器举例拆题之后对应的函数划分是这样的function getInputValue(selector) { const value document.querySelector(selector).value; return value; } function validateNumber(value) { if (value.trim() ) return { valid: false, message: 输入不能为空 }; const num Number(value); if (isNaN(num)) return { valid: false, message: 请输入数字 }; if (num 0) return { valid: false, message: 数值不能为负数 }; return { valid: true, num }; } function calculateTotal(price, count) { return Math.round(price * count * 100) / 100; } function renderResult(total) { document.querySelector(#result).textContent total.toFixed(2); } document.querySelector(#calcBtn).addEventListener(click, function() { const priceCheck validateNumber(getInputValue(#price)); if (!priceCheck.valid) { alert(priceCheck.message); return; } const countCheck validateNumber(getInputValue(#count)); if (!countCheck.valid) { alert(countCheck.message); return; } renderResult(calculateTotal(priceCheck.num, countCheck.num)); });每个函数只做一件事validateNumber返回一个对象来携带校验结果而不用全局变量calculateTotal里用乘100再取整的方式规避浮点误差renderResult只负责显示。这套结构放到任何作业里都不丢人。3. 保留两位小数toFixed之外的完整落地方案JavaScript保留两位小数是学生搜索次数最高的需求没有之一。但toFixed这方法坑非常多网上吐槽它的帖子能堆成山。你在作业里直接用toFixed十有八九会在某些特殊数字上报错或者结果不对。3.1 toFixed为什么总在金额计算里翻车先看最经典的现象(1.005).toFixed(2); // 结果居然是 1.00 而不是 1.01 0.1 0.2; // 0.30000000000000004问题出在JavaScript的Number类型采用的是二进制浮点数表示法很多十进制小数在二进制里是无限循环小数计算机只能存一个近似值。1.005实际存进去的值比1.005稍微小一点点toFixed四舍五入时就把那一小点差距放大成了结果错误。另外很多人忽略的是toFixed返回的是字符串而不是数字。你做完toFixed紧接着去乘另一个数JavaScript会把字符串转回数字再计算转来转去不仅慢还容易在判断等值的时候得到false。3.2 一套可以直接抄的金额格式化函数我在作业里推荐的做法是先转成分来算再除以100最后再用toFixed补两位小数展示。这样把浮点误差控制在实际操作里可以接受的范围内function formatMoney(value) { const num Number(value); if (value || value null || isNaN(num)) { return 0.00; } // 先转成整数分避免小数计算 const cents Math.round(num * 100); return (cents / 100).toFixed(2); } console.log(formatMoney(1.005)); // 1.01 console.log(formatMoney(3)); // 3.00 console.log(formatMoney(abc)); // 0.00核心就一句话Math.round(num * 100) / 100先把数字放大100倍取整把浮点误差消除在整数运算这一步再除回来。对课程作业的绝大多数场景这个方案的精度都够用了。3.3 精度问题的根源与边界处理你不需要把IEEE 754标准背下来但得记住一个原则不要直接对浮点数做等值判断和精确计算尤其是金额、分数这类不能有一分一毫偏差的数据。真要追求极致精确个人项目可以上decimal.js这类库但作业里一般用不上——你要做的是让老师在测试用例里输入1.005、99.99、0这样的数字时结果都是对的。边界处理上别忘了这么几条字符串形式的数字比如12.5Number()能正常转换空字符串转成0但你应该拦截null、undefined、Infinity都要考虑。把这些场景都测过一遍比写十行业务代码更能体现你的水平。4. 运行时报错排查作业里出现频率最高的三类错误报错不可怕可怕的是看着报错不知道从哪下手。我几乎每周都会收到运行时报错的截图截图上只有一行红字连console的堆栈信息都没展开。这里讲讲作业里最容易出现的三类报错以及完整的定位思路。4.1 TypeError: Cannot read properties of undefined这大概是所有学生都见过的报错完整版通常是Cannot read properties of undefined (reading xxx)。意思是你想读某个对象的某个属性但这个对象是undefined。最常见的诱因是DOM没找对。比如脚本写在body开头此时后面的DOM元素还没解析出来document.querySelector(#app)拿到的是null再对null读style或者textContent就报这个错。解决办法是把script标签放到body结尾或者用DOMContentLoaded包一层。还有一类诱因是从接口或数组里取值时对方返回的数据跟你预期不一样。比如data.list[0].name实际data里压根没有list字段。排查方法很简单报错行前面加一句console.log(data)看一眼真实结构是什么再决定代码怎么改。4.2 xxx is not defined / is not a functionxxx is not defined表示整个变量不存在常见原因是函数名拼写错误、变量声明被注释掉、或者引用的函数定义在另一个文件里没被加载。xxx is not a function则复杂一些——变量存在但它不是函数。你可能会在以下情况遇到把对象属性名写成了数组下标obj[0]()或者把一个函数的返回值当函数继续调用比如getData()()但getData返回的是数字。这类报错的排查有个笨但有效的方法搜索项目里所有出现xxx的地方逐个看定义和调用的位置。作业代码一般只有几百行人工检查一遍远比你在那里猜效率高。4.3 从报错到修复的完整排查链路我总结一个标准流程你按这个顺序走大多数报错十分钟内能解决第一展开console的完整报错看具体描述而不是只看红字摘要第二点报错信息右侧的文件名和行号跳转到出错的代码行第三在那行代码前面加console.log打印相关变量的值和类型确认到底是undefined、字符串还是对象第四修复后不要急着关console多输入几组异常数据测试确认报错真的被消灭了。批改作业的老师其实不反感你报错反感的是报错之后完全不理解为什么。你在作业注释里写一句这里因为DOM未加载报错所以把脚本移到了body末尾老师会认为你是真在调试而不是瞎蒙的。5. Canvas作业路线从画一个矩形到交一个动效项目Canvas是很多学校Web前端课的期末大作业热门选项因为能做出来视觉效果。但Canvas的API倒是不难难在坐标系理解和动画循环这两件事上。5.1 坐标系与五个核心APICanvas的坐标系原点是画布左上角x轴向右、y轴向下。这一点和数学课上的坐标系完全相反很多作业画出来图形位置不对问题基本都出在这里。const canvas document.getElementById(myCanvas); const ctx canvas.getContext(2d); ctx.fillStyle #3498db; ctx.fillRect(50, 50, 120, 80); // 实心矩形x, y, width, height ctx.strokeStyle #e74c3c; ctx.lineWidth 2; ctx.strokeRect(200, 50, 120, 80); // 空心矩形 // 画路径 ctx.beginPath(); ctx.moveTo(50, 200); // 起点 ctx.lineTo(200, 200); // 连线 ctx.lineTo(125, 120); ctx.closePath(); ctx.fill(); // 填充成三角形你只需要记住五组API就能应付大部分静态绘图作业fillRect/strokeRect画矩形beginPath/moveTo/lineTo画路径fill/stroke执行填充或描边arc画圆弧clearRect清除区域。剩下的fillStyle、strokeStyle、lineWidth都是设置没啥难度。5.2 动效作业requestAnimationFrame模板期末大作业喜欢要求动画比如粒子系统、小球碰撞、简易时钟。网上很多教程让你用setInterval但浏览器里更推荐requestAnimationFrame它跟屏幕刷新率同步动画更流畅而且页面切到后台会自动暂停省CPU。let x 50; let speed 2; function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle #2ecc71; ctx.beginPath(); ctx.arc(x, 100, 20, 0, Math.PI * 2); ctx.fill(); x speed; if (x canvas.width - 20 || x 20) { speed -speed; // 碰到边界反弹 } requestAnimationFrame(draw); } draw();这套模板是清屏—更新状态—绘制—请求下一帧四步循环。你作业里的任何动画本质都是重复这四步。需要停的时候用cancelAnimationFrame注意把requestAnimationFrame返回的ID存起来。5.3 canvas尺寸和CSS尺寸不一致这个经典坑Canvas的宽高属性决定绘图坐标系CSS的宽高决定元素在页面上显示的大小。这两个不一样时你画的图形会变形或者被裁掉。一个经典场景在CSS里写了width: 100%但canvas标签的width属性还是默认的300结果你在300宽的坐标系里画的图形被拉伸得不成样子。解决办法是让两者保持一致要么在canvas标签上直接写死width和height要么在JS里读CSS渲染后的尺寸再赋值给canvas属性。我自己写作业时习惯了后者至少在响应式布局下图形比例不会乱。6. OC与JavaScript互相调用iOS混合开发作业的入门示例这个点出现在热搜里说明不少同学接到了iOS混合开发的作业——用Objective-C写一个原生壳里面嵌WebView加载网页然后要求原生和网页互相传递数据。说实话这题对没接触过iOS的人来说挺懵的但拆开看也就是两条链路的事。6.1 两条调用链路分别怎么走第一条JavaScript调用Objective-C。网页里的JS通过window.webkit.messageHandlers.某个名字.postMessage(数据)发送消息原生端要提前通过WKUserContentController注册一个对应的消息处理器收到消息后取出body里的数据。第二条Objective-C调用JavaScript。原生端拿到WKWebView实例后调用evaluateJavaScript:completionHandler:方法把要执行的JS代码作为字符串传进去执行完通过回调拿到JS的返回值。这两条链路方向相反用的API也完全不同最容易搞混的就是把JS端的postMessage写到了原生端。6.2 最小可运行示例JS调用OC再回调网页端的JS代码大概长这样// index.html 里的一段JS function sendToNative() { const message { type: getUserInfo, id: 1001 }; window.webkit.messageHandlers.bridge.postMessage(message); } // 这个函数会被OC端调用 window.showMessageFromOC function(text) { document.getElementById(result).textContent text; };原生端的Objective-C代码里核心是这样一段#import WebKit/WebKit.h WKUserContentController *userContentController [[WKUserContentController alloc] init]; [userContentController addScriptMessageHandler:self name:bridge]; WKWebViewConfiguration *config [[WKWebViewConfiguration alloc] init]; config.userContentController userContentController; self.webView [[WKWebView alloc] initWithFrame:self.view.frame configuration:config]; // 遵守WKScriptMessageHandler协议实现代理方法 - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message { if ([message.name isEqualToString:bridge]) { NSDictionary *body (NSDictionary *)message.body; NSLog(收到JS消息: %, body); // 原生回调JS NSString *js [NSString stringWithFormat:showMessageFromOC(%), 收到这是OC的消息]; [self.webView evaluateJavaScript:js completionHandler:^(id result, NSError *error) { if (error) { NSLog(执行JS出错: %, error); } }]; } }核心逻辑就是JS发消息 - 原生代理方法收到并解析body - 原生用evaluateJavaScript调用JS里定义的全局函数。一旦这个闭环走通剩下的业务逻辑只是在这个框架里填充数据而已。6.3 混合调试时最容易被忽略的点调试这种作业有个手机端独有的麻烦Safari的开发者工具要连真机或模拟器很多同学不知道。你可以在Mac的Safari菜单里打开开发选项卡选择你的模拟器页面就能像Chrome DevTools一样调试WebView里的JS断点、看console、查DOM都行。另外有两个特别容易踩的坑。一个是循环引用addScriptMessageHandler的handler是强引用如果控制器dealloc之前不移除会造成内存泄漏甚至控制器无法释放记得在dealloc里调用removeScriptMessageHandlerForName:。另一个是JS里调用了原生API但页面还没加载完会拿到一个undefined。稳妥的做法是在原生端等webView:didFinishNavigation:回调里确认页面加载完成后再执行evaluateJavaScript。7. 交作业之前的最后一轮自查附清单帮人看了这么多年作业我把提交前必查的项目整理成了一张清单。你每次交JavaScript作业之前对照过一遍基本能避免所有低级扣分。检查项具体操作通过了没控制台无报错打开DevTools Console确认没有任何红色报错是 / 否边界输入依次输入空值、字母、负数、0、极大数字是 / 否数据精度用1.005、0.10.2这类数字测试保留两位小数逻辑是 / 否函数命名与职责每个函数名能看出用途函数内不做无关的事情是 / 否注释质量核心逻辑处有简短的注释解释为什么而非做什么是 / 否页面布局缩放浏览器窗口确认元素不重叠、不溢出是 / 否代码格式缩进统一没有大段注释掉的死代码是 / 否这里多说一句注释的事。我看到很多学生喜欢写这里把x加1这种废话注释老师看了不会给你加分反而觉得你在凑行数。真正有用的注释是解释你为什么这么写比如用Math.round(num*100)/100而不是toFixed因为toFixed在1.005上有精度问题。这种注释一看就是自己踩过坑的人写的。最后再分享一个我个人习惯交作业前我会把代码从头到尾读一遍每读到一个函数就问自己如果老师现在让我现场解释这段代码我能说清楚吗。任何一个答不上来的角落都是还没真正掌握的知识点。作业只是手段这四个字才是你花时间做它的意义。