)
Web-Dev-For-Beginners 实战作业用 JavaScript 函数构建可复用逻辑Functions Methods 编程练习指南【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners本文是 Web-Dev-For-Beginners 课程中《JavaScript Basics: Methods and Functions》配套作业 Fun with Functions 的完整实战指南。你将通过 6 个由浅入深的编程任务亲手实践函数声明、参数与默认值、return返回值三大核心概念并对照仓库内真实项目源码如银行项目、太空游戏、打字游戏理解这些能力在真实 Web 应用中的落地方式。学完本文你将能独立写出结构清晰、可复用、可测试的 JavaScript 函数。作业背景从课程到实践本作业对应课程 2-js-basics/2-functions-methods/README.md 的最终环节。课程中你已经掌握函数声明语法function nameOfFunction() { ... }与调用方式nameOfFunction()参数parameters作为占位符接收传入值多个参数用逗号分隔默认参数default values通过等号为可选参数提供后备值return语句将计算结果交还给调用方且遇到return时函数立即结束现代语法匿名函数、箭头函数、以及函数作为参数传入回调函数。而这份作业要求你把上述知识点综合运用到 6 个具体函数上从无参数、只打印到必选参数 默认值 返回值层层递进最终完成一次完整的定义—实现—测试开发闭环。下面的完整任务拆解严格依据作业原文 translations/en/2-js-basics/2-functions-methods/assignment.md 展开。任务清单总览作业要求新建一个名为functions-practice.js的 JavaScript 文件依次实现 6 个函数并在文件末尾用console.log()调用它们以验证结果。整体任务分五部分部分函数参数返回值核心练习点Part 1sayHello无无仅输出最简单的函数声明与调用Part 1introduceYourselfname必选无仅输出参数传递、模板字符串Part 2greetPersonname必选、greeting默认Hello无仅输出默认参数Part 3addNumbersnum1、num2两数之和return返回值Part 3createFullNamefirstName、lastName拼接后的完整名字返回值 字符串拼接Part 4calculateTipbillAmount必选、tipPercentage默认 15小费金额默认值 计算 返回设计意图很清晰前 3 个函数练习输出型函数执行动作后 3 个练习计算型函数返回数据这也呼应了课程 README 中的关键观点——返回值让调用方决定如何使用结果使代码更加模块化、可复用。Part 1从零开始的基本函数1.1 无参数函数sayHello这是函数的最简形态——不需要任何输入只执行一段固定的代码function sayHello() { console.log(Hello!); }对照课程中的经典示例 2-js-basics/2-functions-methods/README.mdfunction displayGreeting() { console.log(Hello, world!); } // 调用 displayGreeting();两者的结构完全一致function关键字声明、函数名、空括号()表示不需要参数、花括号{}包裹函数体。调用时必须带括号sayHello()——省略括号不会执行函数只是引用函数本身这在后面函数作为参数的场景中反而是关键技巧。1.2 带参数函数introduceYourself参数让同一个函数能对不同输入做出不同反应function introduceYourself(name) { console.log(Hi, my name is ${name}); }这里使用了模板字符串template literal——用反引号包裹字符串用${}插入变量。课程 README 中的displayGreeting(name)是同一模式的经典演示function displayGreeting(name) { const message Hello, ${name}!; console.log(message); } displayGreeting(Christopher); // 显示 Hello, Christopher!调用introduceYourself(Sarah)时字符串Sarah会被赋值给参数name函数体中的${name}就会被替换为实际值输出Hi, my name is Sarah。Part 2默认参数让函数更灵活第三个函数引入作业的重点考察点——默认参数function greetPerson(name, greeting Hello) { console.log(${greeting}, ${name}!); }这里的规则是name是必选参数greeting是可选参数——当调用方未提供第二个实参时JavaScript 自动使用默认值Hello。这正是课程 README 中displayGreeting(name, salutationHello)的用法function displayGreeting(name, salutationHello) { console.log(${salutation}, ${name}); } displayGreeting(Christopher); // 显示 Hello, Christopher使用默认值 displayGreeting(Christopher, Hi); // 显示 Hi, Christopher传入自定义值使用要点默认值通过等号在参数列表中直接指定语法与变量赋值一致默认参数使函数开箱即用用户不传也能工作同时保留定制能力带默认值的参数一般放在参数列表靠后的位置避免调用时位置错乱。Part 3用 return 返回计算结果前两个函数只往控制台打印信息而计算型函数需要把结果交还给调用方这就需要return语句。课程 README 明确指出函数执行到return时立即停止并把该值返回给调用者。3.1 求和函数addNumbersfunction addNumbers(num1, num2) { return num1 num2; }调用时返回值可以存入变量也可以直接用于表达式const sum addNumbers(5, 3); console.log(The sum is: ${sum}); // The sum is: 8对照课程中的createGreetingMessage示例function createGreetingMessage(name) { const message Hello, ${name}; return message; } const greetingMessage createGreetingMessage(Christopher); // greetingMessage 现在包含 Hello, Christopher3.2 拼接函数createFullNamefunction createFullName(firstName, lastName) { return firstName lastName; }返回的字符串同样可以被存储、打印或传给其他函数const fullName createFullName(John, Doe); console.log(Full name: ${fullName}); // Full name: John Doe返回值 vs 直接打印的核心区别返回值的函数把决定权交给调用方——你可以打印它、存进变量、拼进网页、或作为参数传给另一个函数而只打印的函数则无法把结果用于后续计算。这也是评分标准中该返回的函数正确返回、不该返回的函数只执行动作的判定依据。Part 4综合实战——带默认值的计算函数calculateTip是本次作业的收官之作它同时考察参数、默认值与返回值三个知识点function calculateTip(billAmount, tipPercentage 15) { return (billAmount * tipPercentage) / 100; }逻辑拆解小费金额 账单金额 × 小费百分比 ÷ 100。billAmount为必选tipPercentage默认 15代表 15% 的标准小费比例。当调用方只传账单金额时默认按 15% 计算const tip calculateTip(50); // 默认 15% → 7.5 console.log(Tip for $50 bill: $${tip}); // Tip for $50 bill: $7.5 // 也可以显式传入自定义小费比例 console.log(calculateTip(50, 20)); // 10一个常见的边界点这里tipPercentage传的是百分比数值15 表示 15%因此需要在函数内部除以 100 换算。如果换一种约定——直接传入 0.15 表示比例——函数体就可以简化为billAmount * tipPercentage。两种约定都可行关键是函数内部与调用方的约定要保持一致这正是编写清晰函数时需要思考的接口设计问题。Part 5测试你的函数作业要求在文件末尾通过实际调用验证每个函数。完整的测试代码段如下来自作业原文 translations/en/2-js-basics/2-functions-methods/assignment.md// Test your functions here sayHello(); introduceYourself(Sarah); greetPerson(Alex); greetPerson(Maria, Hi); const sum addNumbers(5, 3); console.log(The sum is: ${sum}); const fullName createFullName(John, Doe); console.log(Full name: ${fullName}); const tip calculateTip(50); console.log(Tip for $50 bill: $${tip});注意观察其中的测试设计技巧greetPerson(Alex)与greetPerson(Maria, Hi)成对出现分别验证默认值生效与自定义值生效两条路径对返回型函数先用变量接收返回值再打印——这验证了返回值确实可被外部使用calculateTip(50)刻意省略第二个参数用于验证默认参数15是否生效。运行方式把functions-practice.js通过script标签引入 HTML或在浏览器开发者工具按F12打开的 Console 面板中执行即可看到全部输出。也可以使用 Node.js 直接运行node functions-practice.js。评分标准解读如何拿到 Exemplary作业提供了五维评分表理解标准才能有的放矢评分维度优秀Exemplary标准函数创建6 个函数全部正确实现语法规范、命名符合约定参数与默认值必选参数、可选参数、默认值全部按要求使用正确返回值该返回的函数正确返回不该返回的函数只执行动作不画蛇添足代码质量代码整洁、组织良好变量命名有意义缩进规范测试所有函数都被适当调用结果展示清晰对照自查要点命名风格使用 camelCase如calculateTip而非calculate_tip与课程推荐的calculateTotal风格一致专注单一职责每个函数只做一件事——打印的就只打印计算的就只返回测试覆盖两条路径默认值路径与自定义值路径都要测到输出清晰用带标签的模板字符串如Full name: ${fullName}让控制台结果一目了然。挑战进阶三个 Bonus 任务作业为学有余力者准备了三个可选挑战分别对应课程中的进阶概念 2-js-basics/2-functions-methods/README.mdBonus 1改写为箭头函数箭头函数省去function关键字语法更简洁// 传统写法 function addNumbers(num1, num2) { return num1 num2; } // 箭头函数写法 const addNumbers (num1, num2) num1 num2;课程中的计时器示例展示了三种写法传统具名函数、匿名函数、箭头函数的等价性// 传统函数 function displayDone() { console.log(3 seconds has elapsed); } setTimeout(displayDone, 3000); // 匿名函数 setTimeout(function() { console.log(3 seconds has elapsed); }, 3000); // 箭头函数 setTimeout(() { console.log(3 seconds has elapsed); }, 3000);Bonus 2函数作为参数回调这个挑战要求函数接受另一个函数作为参数。核心技巧在于传递时省略括号——就像setTimeout(displayDone, 3000)中传入的是displayDone而非displayDone()因为我们是把函数交给别人去调用而不是自己调用。课程 README 指出这是当某事发生时执行某代码如定时器结束、用户点击按钮这类场景的常用模式。Bonus 3输入校验为函数添加健壮性检查例如function calculateTip(billAmount, tipPercentage 15) { if (typeof billAmount ! number || billAmount 0) { console.warn(Invalid bill amount:, billAmount); return 0; } return (billAmount * tipPercentage) / 100; }仓库源码佐证这些模式在真实项目中如何被使用本次作业练习的函数能力在 Web-Dev-For-Beginners 仓库的真实项目源码中处处可见可作为学习参照。默认参数与查询工具函数——太空游戏在 6-space-game/solution/app.js 的入口处可以看到默认参数与箭头函数组合的典型用法const $ (sel, ctx document) ctx.querySelector(sel);ctx参数带有默认值document——调用$(button)时从文档中查找需要限定范围时再传入具体容器。这与作业中greeting Hello、tipPercentage 15的设计思路完全一致提供合理默认值让常见调用更简洁。计算 返回的封装——银行项目在 7-bank-project/solution/app.js 中可以看到接收参数、内部计算、返回结果的完整封装模式function toCurrency(amount, currency) { ... } // 返回格式化后的金额字符串 function formatDate(dateStr) { ... } // 返回格式化后的日期 function isIsoCurrency(code) { ... } // 返回布尔校验结果这些正是addNumbers、createFullName这类返回型函数在真实业务中的放大版——把格式化、校验逻辑封装成可复用的纯函数供页面各处调用。该文件中的异步封装则展示了回调与默认参数的综合运用async function getAccount(user) { return new Promise(resolve { setTimeout(() { ... resolve(...) }, 500); }); }箭头函数与回调——打字游戏在 4-typing-game/solution/index.js 中箭头函数大量用于事件回调与数据处理const getRandomQuote () quotes[Math.floor(Math.random() * quotes.length)]; startButton.addEventListener(click, startGame); typedValueElement.addEventListener(input, handleTyping);其中startGame、handleTyping作为具名函数被传入addEventListener与 Bonus 2 函数作为参数的挑战一一对应而renderQuote内部用map对数组逐项处理并拼接正是返回新数据供上层使用思想的体现。闭包与嵌套函数——植物培育器在 3-terrarium/solution/script.js 中dragElement内部定义了pointerDrag、elementDrag、stopElementDrag等嵌套函数闭包展示了函数内部组织子逻辑的实际场景可作为代码组织维度的进阶参考。小结作业中的 6 个函数虽小但sayHello→introduceYourself→greetPerson→addNumbers→createFullName→calculateTip这条练习路径完整覆盖了函数从打印输出到参数化再到返回数据的能力演进。完成本作业后你不仅具备了函数三大核心概念的实操能力也为自己后续阅读、理解仓库中真实项目的模块化代码打下了基础。【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考