跟着 MDN 学JavaScript day_20：函数技能测试与实战解析

引言在 JavaScript 的学习旅程中函数是无可争议的核心支柱。它们不仅帮助我们封装可复用的逻辑更是通往高阶编程范式的大门。MDN 的技能测试环节提供了一系列经典的实战练习从基础的函数定义到高级的数组方法与箭头函数重构层层递进。本文将深入解析这四个挑战任务并探讨它们背后的 DOM 操作与编程思维。一、DOM 操作连接逻辑与界面的桥梁在进行本次函数测试之前部分题目需要借助 DOM 操作来完成任务。在实际开发中函数往往不是孤立的纯逻辑单元它们需要从页面获取输入并将计算结果渲染到页面上。本题中涉及的 DOM 操作相对基础API用途document.querySelector(p)选中页面上的第一个段落元素element.textContent读取或修改元素的文本内容这种模式反映了前端开发的基本范式通过 JavaScript 选中节点 → 读取或修改其状态 → 驱动用户界面变化。二、任务一基础函数定义与随机逻辑封装任务描述定义一个名为chooseName()的函数从预定义的姓名数组中随机选取一个名字并将其显示在页面上的段落元素中。constnames[Chris,Li Kang,Anne,Francesca,Mustafa,Tina,Bert,Jada,];constparadocument.querySelector(p);// 在此处补全代码chooseName();解题思路生成随机数组索引Math.random()生成[0, 1)的浮点数乘以names.length后得到[0, length)范围Math.floor()向下取整得到有效整数索引用索引取值并赋给para.textContentfunctionchooseName(){constrandomIndexMath.floor(Math.random()*names.length);constrandomNamenames[randomIndex];para.textContentrandomName;}chooseName();核心收获将一段具有特定功能的代码封装起来通过一次调用即可执行避免重复编写相同逻辑。三、任务二Canvas 绘图与函数参数化任务描述创建一个函数根据传入的坐标、尺寸和颜色参数在 Canvas 画布上绘制一个矩形。constcanvasdocument.querySelector(canvas);constctxcanvas.getContext(2d);constx50;consty60;constwidth100;constheight75;constcolorblue;// 在此处补全代码解题思路函数通过参数接收外部数据内部只关心通用绘图逻辑。fillRect()接收四个参数横坐标、纵坐标、宽度、高度与题目变量完美对应。functiondrawRectangle(x,y,width,height,color){ctx.fillStylecolor;ctx.fillRect(x,y,width,height);}drawRectangle(x,y,width,height,color);参数用途传入值x矩形左上角横坐标50y矩形左上角纵坐标60width矩形宽度100height矩形高度75color填充颜色blue核心收获设计良好的函数应当通过参数来接受外部数据内部只关心通用逻辑的实现同一个函数可以绘制出无数种不同外观和位置的矩形。四、任务三函数的返回值与单一职责任务描述对任务一进行深度重构引入两个软件设计原则单一职责和函数返回值。原始chooseName()函数包揽了三件事生成随机数、选取名字、修改页面内容。这种全能函数难以测试和复用。constnames[Chris,Li Kang,Anne,Francesca,Mustafa,Tina,Bert,Jada,];constparadocument.querySelector(p);// 在此处补全代码重构目标函数职责输入输出random(min, max)生成指定范围的随机整数min,max随机整数chooseName(array)从数组中随机选取一个元素数组选中的元素重构后的代码functionrandom(min,max){returnMath.floor(Math.random()*(max-min1))min;}functionchooseName(array){constrandomIndexrandom(0,array.length-1);returnarray[randomIndex];}// 在函数外部将数据处理结果渲染到页面constselectedNamechooseName(names);para.textContentselectedName;设计对比❌ 重构前全能函数 chooseName() ├── 生成随机数 ├── 选取名字 └── 修改 DOM ✅ 重构后职责分离 random(min, max) → 纯数据计算返回随机整数 chooseName(array) → 纯数据选取返回名字 外部代码 → DOM 渲染核心收获random()现在可用于任何需要随机整数的场景复用性极大提升chooseName()成为纯粹的数据处理函数输入确定则输出确定易于测试数据处理逻辑与界面展示逻辑彻底分离符合前端开发的关注点分离原则。五、任务四箭头函数与数组过滤的简洁之道任务描述聚焦于 ES6 箭头函数及其在数组回调方法中的优雅应用。原始代码定义了一个独立的命名函数isShort()要求将其以内联箭头函数的形式直接写入filter()调用中越简洁越好。constnames[Chris,Li Kang,Anne,Francesca,Mustafa,Tina,Bert,Jada,];constparadocument.querySelector(p);// 在此处补全代码从具名函数到箭头函数// 原始写法独立的具名函数functionisShort(name){returnname.length5;}constshortNamesnames.filter(isShort);// 写法一完整箭头函数constshortNamesnames.filter((name){returnname.length5;});// 写法二省略花括号和 returnconstshortNamesnames.filter((name)name.length5);// 写法三最简洁——单参数省略括号constshortNamesnames.filter(namename.length5);箭头函数简写规则场景完整写法简写单个参数(name) name 单行返回{ return expr; }expr最终代码constshortNamesnames.filter(namename.length5);para.textContentshortNames;// 输出Chris, Anne, Tina, Bert, Jada长度小于5的名字核心收获从具名函数到箭头函数的内联重构不仅是语法糖的使用更代表了 JavaScript 社区向函数式编程、声明式编程风格演进的趋势。代码更紧凑核心逻辑 “过滤出长度小于5的名字” 更加聚焦。总结MDN 的这一系列函数测试精心设计了一条从基础到进阶的学习路径任务核心技能关键收获任务一函数定义 随机数基本封装一次定义多次调用任务二参数化函数 Canvas通过参数让函数通用化任务三返回值 单一职责数据逻辑与DOM渲染分离任务四箭头函数 filter声明式编程简洁表达掌握这些逐步递进的模式对于写出高质量、易维护的 JavaScript 代码至关重要。还在为 JavaScript 代码写得像“意大利面条”、逻辑混乱难以维护而头秃收藏本文持续跟进后续将系统分享 JS 高效语法糖、浏览器兼容与 Polyfill 实战、手写核心源码解析、常见坑点避雷指南从基础语法到进阶逻辑一站式打通助你快速提升前端开发硬实力