learning-area 数学运算实战练习：MDN JavaScript 基础算术三连测（运算符、优先级与类型转换）

• 教程
• 示例工程

导读

本文以 learning-area 仓库中的 JavaScript 数学练习评分指南 为骨架，完整拆解其中三道 JavaScript 基础算术任务的出题意图、标准答案与隐藏评分点。这三道题分别覆盖 MDN《Basic math in JavaScript — numbers and operators》课程中的核心知识点：基本算术运算符、运算符优先级与括号、乘法赋值运算符、toFixed()精度控制、typeof类型检测与Number()显式转换、以及比较运算符。读完本文，你将能独立完成三道题，并理解每道题背后"为什么要这样写"的工程理由，以及仓库中配套的在线自测与可下载版本如何帮助你即时验证答案。

任务背景：这道练习测什么

三道任务共同检验读者对 JavaScript 数字与运算符这一课的掌握程度，覆盖以下能力点：

• 算术运算符：加+、减-、乘*、除/、取模%；
• 变量声明与命名：const/let的选择，以及符合最佳实践的命名（小驼峰、语义化、长度适中）；
• 运算符优先级与括号：何时必须用()改变计算顺序；
• 赋值运算符：*=这类复合赋值写法；
• Number 方法与类型转换：toFixed()保留小数位、typeof检测类型、Number()把字符串转回数字；
• 比较运算符：<、>、===，包括对"严格相等"与大小比较语义的理解。

Marking guide 中特别说明：如果你的代码有误，错误会被输出到页面上的结果面板（在线版），或浏览器 JavaScript 控制台（可下载版），帮助你自己排查答案。仓库中 playable.js 正是实现这一自测机制的代码：它把<textarea>中的 JS 代码注入.editable元素并eval执行，捕获异常后把错误信息渲染到结果面板；同时监听input事件与window.load实时重跑，并提供 Reset 按钮恢复初始代码。

Task 1：基础四则运算 + 取模奇偶判断

任务要求

创建四个存放数字的变量：前两个相加并存储结果，第四个从第三个中减去并存储结果；再把这两个运算结果相乘得到 48，存入finalResult。最后写一个判断该数是偶数还是奇数的计算，结果存入evenOddResult——这里必须用取模运算符%：若finalResult % 2 === 0，即为偶数。

参考答案

const number1 = 4; const number2 = 8; const number3 = 12; const number4 = 8; const additionResult = number1 + number2; const subtractionResult = number3 - number4; finalResult = additionResult * subtractionResult; evenOddResult = finalResult % 2;

运算链验证：4 + 8 = 12，12 - 8 = 4，12 * 4 = 48，48 % 2 === 0，输出"偶数"。在仓库的在线版 math1.html 中，自测代码会用finalResult === 48判断你的乘积是否等于 48，用evenOddResult === 0判断奇偶，并给出对应的提示文案；math1-download.html 是可下载版本，错误信息会输出到浏览器控制台。

隐藏评分点：变量命名

Marking guide 明确表示：这道题还测试你的变量命名能力——如果变量名符合最佳实践（小驼峰 camelCase、语义化、不过长），可以额外加分。对比两种写法：

• 推荐：additionResult、subtractionResult、finalResult——一看即知含义；
• 不佳：a、b、r、x1——虽然能跑通，但可读性差，不利于维护。

注意finalResult与evenOddResult在 math1-download.html 中已用let预先声明，因此答案中直接赋值即可，无需重复声明；而number1等四个变量是你自己新引入的，用const声明（数值不会变）是更严谨的选择。

Task 2：优先级、复合赋值与数字类型转换

任务要求

第一，考虑运算符优先级，用括号让前两个计算得出预期结果；第二，尽量用乘法赋值运算符*=把两个结果相乘并赋值回result；第三，用数字自带的toFixed()把result四舍五入到 2 位小数，存入finalResult；第四，用typeof检测变量是否为字符串类型，再用Number()把finalResult转回数字类型，最终存入finalNumber。

参考答案

let result = (7 + 13) / (9 + 7); let result2 = 100 / (2 * 6); result *= result2; const finalResult = result.toFixed(2); const finalNumber = Number(finalResult);

关键知识点拆解

为什么必须加括号？如果不加括号，7 + 13 / 9 + 7会按"乘除优先于加减"的规则被解析为7 + (13 / 9) + 7，结果与题目预期完全不同。加括号(7 + 13) / (9 + 7)后得到20 / 16 = 1.25；100 / (2 * 6)不加括号时会被解析为(100 / 2) * 6 = 300，加括号后才是100 / 12 ≈ 8.33。这正是运算符优先级（先乘除后加减、括号优先）的实战演示。

为什么用*=？result *= result2等价于result = result * result2，是 JavaScript 提供的复合赋值运算符之一，写法更简洁。计算过程：1.25 * 8.333... ≈ 10.416666...。

toFixed()做了什么？result.toFixed(2)返回一个字符串（如"10.42"），按四舍五入规则把数字保留到 2 位小数——题目注释"Final result should be 4633.33"是下载模板的原始目标值（针对未加括号的初始代码），在线版以finalResult的实际输出为准。这是本题容易踩坑的点：toFixed()的输出不是数字。

为什么最后要Number()转换？因为toFixed()返回字符串，所以typeof finalResult是"string"。用Number(finalResult)显式转换回数字后，finalNumber才是真正的 number 类型。在 math2.html 的自测代码中，typeof finalNumber === 'number'会输出"finalNumber is a number type. Well done!"；而下载版 math2-download.html 则用isNaN(finalNumber) === false判断其是否为有效数字。两种检查方式殊途同归，都是验证类型转换是否完成。

const与let的选择：result、result2后续还会被重新赋值（result *= result2），所以必须用let；finalResult、finalNumber声明后不再修改，用const更合适。

Task 3：用比较运算符"证明"数学命题

任务要求

这道题考察比较运算符的使用。需要写若干测试，用数学上正确/错误的结果分别验证题目给出的三个命题，结果分别存入weightComparison、heightComparison、pwdMatch三个变量。

参考答案

const weightComparison = eleWeight < mouseWeight; const heightComparison = ostrichHeight > duckHeight; const pwdMatch = pwd1 === pwd2;

命题验证与输出逻辑

仓库中的 math3.html 预置了三组数据（下载版 math3-download.html 内容相同）：

const eleWeight = 1000; // 大象体重 const mouseWeight = 2; // 老鼠体重 const ostrichHeight = 2; // 鸵鸟身高 const duckHeight = 0.3; // 鸭子身高 const pwd1 = 'stromboli'; const pwd2 = 'stROmBoLi'; // 注意大小写不同

对照自测代码中的三句判断文案，可以推理出每个比较的预期结果：

• 命题 1「大象比老鼠轻」：1000 < 2为false，输出 "False — of course an elephant is heavier than a mouse!"，即用比较运算证伪了一个常识错误命题；
• 命题 2「鸵鸟比鸭子高」：2 > 0.3为true，输出 "True — an ostrich is indeed taller than a duck!"，证实命题；
• 命题 3「两个密码匹配」：pwd1 === pwd2为false（'stromboli'与'stROmBoLi'大小写不同），输出 "False — the passwords do not match; please check them"。

这里刻意埋了两个"陷阱"：一是数值比较要读懂命题的字面表述（"轻于/高于"对应的运算符方向），二是字符串比较要意识到===是严格相等、区分大小写。若改用==也不会通过本题的字符串比较预期——这正好强化了"严格相等优于宽松相等"的现代 JavaScript 实践。

如何运行与自测三道题

三道题在仓库中都有两种形态，均只读运行、无需修改仓库文件：

• 在线可编辑版：直接打开 math1.html、math2.html、math3.html。页面的<textarea>内是待补全代码，由 playable.js 驱动：输入即执行，代码出错时错误信息会渲染到结果面板，Reset 按钮可一键恢复初始代码。结果面板根据你的变量输出"通过/未通过"的提示，与 Marking guide 的判定逻辑一一对应；
• 可下载版：math1-download.html、math2-download.html、math3-download.html 将代码直接写在<script>中，适合离线练习，错误输出到浏览器控制台（F12 / DevTools）。

两道题的页面样式由 styles.css 提供，仅影响展示，与判题逻辑无关。全部题目与评分的完整说明见 marking.md；同一目录下还有 variables、strings、arrays 等其他主题的配套练习，可对照学习。

小结：三题串起的知识闭环

三道任务构成一条完整的进阶线索：Task 1夯实加减乘与取模%的基础运算，并训练语义化命名习惯；Task 2深入运算符优先级、*=复合赋值，并暴露toFixed()返回字符串这一典型陷阱，逼你用typeof检测、用Number()显式还原数字类型；Task 3让比较运算符<、>、===服务于真实命题验证，同时强化严格相等与大小写敏感的意识。对照仓库中的自测页面逐题调试，即可确认自己是否真正掌握了 JavaScript 数字运算的这套核心组合拳。

• 教程
• 示例工程