企业官网建设流程全解析

• 教程
• 示例工程

导读

本文围绕 learning-area 仓库中 javascript/building-blocks/tasks/functions/marking.md 这份函数任务评测指南展开，系统拆解四道 JavaScript 函数练习题的目标、思路与参考答案，并结合仓库内真实的任务页面源码验证运行机制。读完本文，你将掌握函数声明、参数传递、返回值、Canvas 绘图函数与箭头函数等核心概念的实战用法，并能独立完成并校验这组 MDN 学习任务。

任务背景与评测机制

这组任务旨在验证学习者是否理解 MDN《Learn Web Development》中三个函数的系列课程内容：函数——可复用代码块（Functions — reusable blocks of code）、构建你自己的函数（Build your own function）以及函数返回值（Function return values）。四道任务由浅入深，从"创建并调用一个简单函数"逐步推进到"重构复用 + 返回值的函数"和"箭头函数表达式"。

值得注意的是评测指南开篇给出的提示：如果代码中存在错误，错误信息会输出到页面上的结果面板（results panel）中，帮助学习者定位问题；在可下载版本中，错误则会输出到浏览器 JavaScript 控制台。这个机制在仓库中确实有源码支撑——playable.js 中的fillCode()函数使用eval()执行编辑区代码，并用try/catch捕获运行时错误后渲染到结果区：

function fillCode() { editable.textContent = textareaJS.value; section.innerHTML = ' '; try { eval(editable.textContent); } catch(e) { let para = document.createElement('p'); para.textContent = e; section.appendChild(para); } }

同时，input事件与load事件都会触发fillCode()，意味着在文本域中每敲入一个字符，代码都会即时重新执行并刷新预览，这是实现"即时评测反馈"的关键。

Task 1：创建函数、调用一次，把随机名字写入段落

任务要求

第一题要求创建一个简单的函数，从给定的名字数组中随机挑出一个名字，写入页面提供的<p>段落，然后调用该函数一次。这道题考察的是函数声明 + 函数调用的最基本形态：函数体内通过Math.random()生成随机索引，再从数组取值并更新 DOM。

参考解法

const names = [ "Chris", "Li Kang", "Anne", "Francesca", "Mustafa", "Tina", "Bert", "Jada", ]; const para = document.querySelector("p"); function chooseName() { const randomNumber = Math.floor(Math.random() * names.length); const choice = names[randomNumber]; para.textContent = choice; } chooseName();

关键点拆解：

• Math.random()返回[0, 1)区间的浮点数，乘以names.length（8）后得到[0, 8)的浮点数，再经Math.floor()向下取整得到0 ~ 7的整数索引，恰好覆盖数组全部下标；
• para.textContent = choice将选中名字写入段落文本，这是对 DOM 的最基础操作；
• 函数定义后必须显式调用chooseName()，否则函数体不会执行。

仓库中的任务脚手架

在线版 functions1.html 已预先给出names数组与para段落对象，学习者在// Add your code here注释处补充函数定义即可；文件末尾的section.innerHTML = ' '; section.appendChild(para);属于评测基础设施，用于重置预览区。可下载版 functions1-download.html 则将section的获取放在代码之后，供脱离在线编辑器独立运行。

Task 2：带五个参数的 Canvas 绘图函数

任务要求

第二题要求编写一个函数，在给定的<canvas>上绘制一个矩形，函数接收五个输入变量：x、y、width、height和color。指南特别强调：绘制前要先清空画布，否则在线版本在代码更新时会不断叠加矩形，画面会越来越乱。

参考解法

const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); const x = 50; const y = 60; const width = 100; const height = 75; const color = "blue"; function drawSquare(x, y, width, height, color) { ctx.fillStyle = "white"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = color; ctx.fillRect(x, y, width, height); } drawSquare(x, y, width, height, color);

这道题的价值在于理解参数化函数：

• getContext("2d")拿到 2D 绘图上下文，所有绘制操作都通过ctx完成；
• 函数先用白色填充整个画布（fillRect(0, 0, canvas.width, canvas.height)）实现"清屏"，再用目标颜色绘制指定位置与尺寸的矩形，两段fillStyle的设置体现了"先设样式、再执行绘制"的 Canvas 固定套路；
• 形参（函数定义处的x, y, width, height, color）与实参（调用处的x, y, width, height, color）同名，恰好示范了参数从调用方传递到函数体内的映射关系，初学者最容易在这里困惑：函数内部使用的是形参，与外部变量同名也只是巧合或刻意为之，二者互不干扰。

仓库中的任务脚手架

functions2.html 提供了 480×320 的画布（带 1px 黑色边框样式）以及五个变量定义，学习者只需补全drawSquare函数并调用。在线编辑机制与 Task 1 相同，均由 playable.js 驱动；下载版 functions2-download.html 结构一致，可独立在浏览器中打开调试。

Task 3：重构升级——拆分随机函数与返回值

任务要求

第三题回到 Task 1 的场景，要求做三处改进，这也是本组任务的核心题：

1. 把生成随机数的逻辑抽取为独立函数，接收两个通用边界参数（最小值、最大值），并返回结果；
2. 改造chooseName()，让它调用随机数函数、接收要选择的数组作为参数（提升灵活性），并返回结果；
3. 把返回结果打印到段落中。

参考解法

const names = [ "Chris", "Li Kang", "Anne", "Francesca", "Mustafa", "Tina", "Bert", "Jada", ]; const para = document.querySelector("p"); function random(min, max) { const num = Math.floor(Math.random() * (max - min)) + min; return num; } function chooseItem(array) { const choice = array[random(0, array.length)]; return choice; } para.textContent = chooseItem(names);

这道题浓缩了函数式重构的精髓：

• random(min, max)是通用工具函数：Math.random() * (max - min)产生[0, max-min)区间浮点数，加min后落入[min, max)，Math.floor取整得到[min, max-1]的整数；return num把结果交还调用方；
• chooseItem(array)把数组本身作为参数，与names全局变量解耦，将来换数组复用零成本；它通过random(0, array.length)生成合法下标并return choice；
• 最终一行para.textContent = chooseItem(names)展示了"函数返回值的流向"：chooseItem的返回值直接作为textContent的赋值源，无需中间变量。

相比 Task 1，这里函数从"操作全局变量 + 无返回值"进化为"纯输入输出"模式——参数进、返回值出，代码可读性与可测试性显著提升，这正是 MDN 课程中"函数返回值"章节的核心思想。任务脚手架见 functions3.html 与 functions3-download.html。

Task 4：把命名函数改写为箭头函数

任务要求

第四题要求把具名的isShort()函数改写成箭头函数表达式。在改写前，原代码用names.filter(isShort)筛选出长度小于 5 的名字：

function isShort(name) { return name.length < 5; } const shortNames = names.filter(isShort);

参考解法

const names = [ "Chris", "Li Kang", "Anne", "Francesca", "Mustafa", "Tina", "Bert", "Jada", ]; const para = document.createElement("p"); const shortNames = names.filter((name) => name.length < 5); para.textContent = shortNames;

改写要点：

• 箭头函数(name) => name.length < 5把"形参 + 返回表达式"压缩为一行：单参数可省略括号，单表达式可省略{}与return，隐式返回表达式结果；
• 直接把箭头函数内联进filter调用，省略了中间命名函数，体现了箭头函数作为高阶函数回调时的简洁性；
• 值得一提的是para.textContent = shortNames会把数组隐式转换为逗号分隔的字符串（如"Chris, Anne, Tina"）写入段落，这是数组参与的隐式类型转换行为，可作为附加知识点向学习者讲解。

注意此题的下载版 functions4-download.html 保留了原始的isShort命名函数版本，而在线版 functions4.html 同样以isShort版本作为起始代码，学习者需自行将其替换为箭头函数——这与评测指南中"改为箭头函数表达式"的要求一致，体现"就地改写"的意图。

四道任务的知识点脉络总结

从评测视角看，四道题全部可以在仓库的在线编辑器（由 playable.js 与 styles.css 提供排版与即时求值能力）中直接作答并看到运行结果，也可以下载对应的-download.html文件在本地浏览器控制台调试。若你在作答时遇到输出与预期不符，请优先检查结果面板或控制台中的报错信息——这正是评测指南提示的排错路径。

延伸阅读

• 评测指南原文：marking.md
• 在线任务页：functions1.html、functions2.html、functions3.html、functions4.html
• 可下载版本：functions1-download.html、functions2-download.html、functions3-download.html、functions4-download.html
• 交互评测引擎与样式：playable.js、styles.css

• 教程
• 示例工程