Web-Dev-For-Beginners JavaScript 函数实战：Fun with Functions 作业完整解析与实现

Web-Dev-For-Beginners JavaScript 函数实战Fun with Functions 作业完整解析与实现【免费下载链接】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 课程第 2 周 JavaScript 基础模块中的「Fun with Functions」作业展开该作业用于巩固函数声明、参数传递、默认参数与返回值四大核心概念。读完本文你将能够独立完成functions-practice.js中 6 个函数的实现理解每道题的考察点与评分标准并掌握箭头函数、高阶函数与输入校验等进阶技巧。作业定位它属于哪一课、解决什么问题「Fun with Functions」是 2-js-basics/2-functions-methods/ 一课配套的课后作业对应的课程说明文档为 2-js-basics/2-functions-methods/README.md德文翻译版见 translations/de/2-js-basics/2-functions-methods/README.md。这门课是 12 周、24 课时的 Web 开发入门课程Web-Dev-For-Beginners中「2-js-basics」模块的第 2 课前置内容是 2-js-basics/1-data-types/ 的 JavaScript 数据类型基础。本作业的核心目的是把课堂上学到的以下知识点转化为动手实践函数声明function declaration的语法与调用方式参数parameters与实参arguments的传递默认参数default values如何让函数更灵活return返回值的语义以及返回结果与直接打印两种写法的区别。作业要求新建一个名为functions-practice.js的 JavaScript 文件依次实现 6 个函数并在文件末尾通过console.log()验证每个函数的输出。环境准备创建 functions-practice.js 并查看输出在课程目录2-js-basics/2-functions-methods/下新建文件functions-practice.js也可放在任意练习目录然后把后续各节的实现代码依次写入。运行方式有两种浏览器开发者控制台作业推荐方式在任意 HTML 页面中打开开发者工具快捷键 F12将functions-practice.js的代码粘贴到 Console 面板回车执行即可看到所有console.log()输出Node.js 命令行在终端执行node functions-practice.js结果会直接打印到终端适合本地快速验证。提示console.log()本身就是一个方法method——它是挂在console对象上的函数与独立函数的区别在于方法依附于对象。在课程中你一直都在使用它这也是本作业选择它作为观察窗口的原因。Part 1基础函数——声明与调用课程文档给出了函数声明的标准语法见 2-js-basics/2-functions-methods/README.mdfunction nameOfFunction() { // 函数定义 // 函数体 }要点拆解function关键字声明我在创建一个函数函数名要具有描述性并采用 camelCase驼峰命名圆括号()用于放置参数花括号{}内是调用时真正执行的代码。第 1 题sayHello无参数输出问候语function sayHello() { console.log(Hello!); }第 2 题introduceYourself带 name 参数输出自我介绍function introduceYourself(name) { console.log(Hi, my name is name); }这两题考察无参函数与有参函数的对照sayHello()每次调用输出固定内容而introduceYourself(name)通过参数接收不同值。拼接字符串时既可以使用运算符也可以使用课程重点讲解的模板字面量template literal写法用反引号和${}把变量嵌入字符串可读性更好function introduceYourself(name) { console.log(Hi, my name is ${name}); }调用函数时必须带上圆括号()例如sayHello()如果只写函数名sayHello而不加括号JavaScript 不会执行函数体而只是把函数本身当作一个值引用——这也是后续高阶函数把函数当作参数传递的基础。Part 2默认参数——让参数可选课程中通过displayGreeting(name, salutation Hello)的例子讲解了默认参数用等号给参数指定一个后备值当调用方没有传入对应实参时JavaScript 自动使用该默认值。第 3 题greetPersonname 必填greeting 可选默认 Hellofunction greetPerson(name, greeting Hello) { console.log(${greeting}, ${name}!); }这道题要求区分必需参数name与可选参数greeting。两种调用方式验证默认值机制greetPerson(Alex); // 输出Hello, Alex!使用默认值 greetPerson(Maria, Hi); // 输出Hi, Maria!使用自定义问候语调用方式传入的实参greeting 取值控制台输出greetPerson(Alex)仅nameHello默认值Hello, Alex!greetPerson(Maria, Hi)namegreetingHi显式传入Hi, Maria!Part 3返回值——return 语句的语义前几道题的函数只负责把内容打印到控制台。从第 4 题开始函数需要计算并交回结果。课程文档强调了一个关键语义当函数执行到return语句时会立即停止运行并把return后面的值交还给调用方。返回的值可以存入变量、参与表达式或传给其他函数这让函数更通用、更模块化。第 4 题addNumbers两数求和并返回function addNumbers(num1, num2) { return num1 num2; }第 5 题createFullName拼接姓名并返回字符串function createFullName(firstName, lastName) { return firstName lastName; // 等价的模板字面量写法 // return ${firstName} ${lastName}; }注意第 4、5 题的函数不要在内部使用console.log打印结果而要用return返回。调用方决定如何使用返回值——这正是课程强调的返回值的函数由调用者决定结果去向也是评分标准中返回值维度的考察重点const sum addNumbers(5, 3); console.log(The sum is: ${sum}); // The sum is: 8 const fullName createFullName(John, Doe); console.log(Full name: ${fullName}); // Full name: John DoePart 4综合运用——calculateTip第 6 题calculateTip必填账单金额 可选小费比例默认 15function calculateTip(billAmount, tipPercentage 15) { return billAmount * (tipPercentage / 100); }这是全作业的综合题同时考察了三项能力必需参数与默认参数组合billAmount必填tipPercentage不传时取默认值15表示 15%百分比计算将比例除以 100 再乘以账单金额得到小费金额返回值调用方把结果存入变量后再格式化打印。const tip calculateTip(50); console.log(Tip for $50 bill: $${tip}); // Tip for $50 bill: $7.5 // 也可以显式传入比例覆盖默认值 const tip20 calculateTip(50, 20); console.log(Tip for $50 bill at 20%: $${tip20}); // Tip for $50 bill at 20%: $10这里calculateTip(50)返回50 × (15 / 100) 7.5calculateTip(50, 20)返回10。Part 5测试你的函数——完整测试代码与期望输出作业要求为每个函数添加测试调用并用console.log()展示结果。下面的完整测试段直接复用了作业给出的示例调用并补充了一行自定义小费比例的验证// 测试你的函数 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});预期输出对照表可在浏览器 F12 控制台或 Node.js 终端逐行核对测试调用期望输出sayHello()Hello!introduceYourself(Sarah)Hi, my name is SarahgreetPerson(Alex)Hello, Alex!greetPerson(Maria, Hi)Hi, Maria!console.log(\The sum is: ${sum})|The sum is: 8console.log(\Full name: ${fullName})|Full name: John Doeconsole.log(\Tip for $50 bill: $${tip})|Tip for $50 bill: $7.5完整参考实现一份可运行的 functions-practice.js将以下内容合并保存为functions-practice.js即为本作业的一份完整、可运行参考实现// Part 1: 基础函数 function sayHello() { console.log(Hello!); } function introduceYourself(name) { console.log(Hi, my name is ${name}); } // Part 2: 默认参数 function greetPerson(name, greeting Hello) { console.log(${greeting}, ${name}!); } // Part 3: 返回值 function addNumbers(num1, num2) { return num1 num2; } function createFullName(firstName, lastName) { return ${firstName} ${lastName}; } // Part 4: 综合运用 function calculateTip(billAmount, tipPercentage 15) { return billAmount * (tipPercentage / 100); } // Part 5: 测试 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});评分标准解读如何拿满分作业附带的评分表rubric从 5 个维度评估理解每个维度的优秀标准是拿到满分的关键依据作业原文整理维度优秀Hervorragend合格Ausreichend待改进Verbesserungsbedürftig函数创建6 个函数全部正确实现语法与命名规范4–5 个函数正确存在轻微语法问题仅实现 3 个及以下或存在严重语法错误参数与默认值正确使用必需参数、可选参数与默认值参数使用正确但默认值处理可能有误参数实现错误或缺失返回值应返回值的函数正确返回不应返回值的函数仅执行动作大部分返回值正确存在小错误返回值存在明显问题代码质量代码整洁、组织良好变量名有意义缩进正确代码可运行但不够整洁代码难以阅读或结构混乱测试所有函数均用合适的调用测试结果展示清晰大部分函数得到适当测试测试不充分或存在错误自查要点greetPerson这类只输出的函数不要画蛇添足加returnaddNumbers、createFullName、calculateTip这类计算型函数必须return打印工作交给调用方完成——这正是返回值维度的核心考察点。进阶挑战箭头函数、高阶函数与输入校验作业末尾提供了三道选做挑战全部都能在课程文档 2-js-basics/2-functions-methods/README.md 中找到对应的语法依据。挑战 1改写为箭头函数课程讲解了现代 JavaScript 的箭头函数fat arrow function写法用替代function关键字代码更简洁。将已实现的函数改写为箭头函数// 传统写法 → 箭头函数 const sayHelloArrow () { console.log(Hello!); }; // 单表达式还可以省略 return隐式返回 const addNumbersArrow (num1, num2) num1 num2; console.log(addNumbersArrow(5, 3)); // 8挑战 2接受函数作为参数的函数高阶函数课程中的setTimeout例子是函数作为参数最典型的场景——把displayDone不带括号交给setTimeout由定时器在 3 秒后替你调用它function displayDone() { console.log(3 seconds has elapsed); } // 时间值单位是毫秒 setTimeout(displayDone, 3000);基于这一模式可以封装自己的高阶函数以及用箭头函数简化回调// 高阶函数把回调函数交给 setTimeout function runAfterDelay(callback, milliseconds) { setTimeout(callback, milliseconds); } runAfterDelay(() console.log(3 seconds has elapsed), 3000); // 通用操作器把二元运算函数作为参数传入 function applyOperation(num1, num2, operation) { return operation(num1, num2); } console.log(applyOperation(5, 3, addNumbers)); // 8挑战 3输入校验为函数增加防御性校验让其在非法输入下优雅降级而不是报错。以calculateTip为例function calculateTipSafe(billAmount, tipPercentage 15) { if (typeof billAmount ! number || billAmount 0) { console.error(Invalid billAmount: please provide a non-negative number.); return 0; } if (typeof tipPercentage ! number || tipPercentage 0 || tipPercentage 100) { console.error(Invalid tipPercentage: please provide a number between 0 and 100.); return 0; } return billAmount * (tipPercentage / 100); }校验顺序值得注意先校验typeof类型是否为 number再校验数值范围最后才执行计算并返回。延伸学习与课程资源课程正文英文2-js-basics/2-functions-methods/README.md——函数语法、默认参数、返回值、匿名函数与箭头函数的完整讲解课程正文德文翻译translations/de/2-js-basics/2-functions-methods/README.md作业原文英文版2-js-basics/2-functions-methods/assignment.md与本文依据的德文版 translations/de/2-js-basics/2-functions-methods/assignment.md 内容一致前置课程2-js-basics/1-data-types/README.md复习字符串、数字等数据类型有助于理解参数类型速记图本文开头的函数速记图位于 sketchnotes/webdev101-js-functions.png可作为考前复习的浓缩大纲。完成本作业后可以继续进入同一模块的 2-js-basics/3-making-decisions/条件判断与 2-js-basics/4-arrays-loops/数组与循环函数的返回值与参数机制会在后续课程中被大量复用——它是整个 JavaScript 学习路径的地基。【免费下载链接】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），仅供参考