Web-Dev-For-Beginners:JavaScript「数组与循环」实战作业详解(附四道练习题参考实现)

Web-Dev-For-Beginners:JavaScript「数组与循环」实战作业详解(附四道练习题参考实现)【免费下载链接】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 基础模块的第 4 课《Arrays and Loops》(数组与循环)课后作业展开,以仓库中的孟加拉语(Bengali)版作业文档 assignment.md 为主体,完整覆盖全部 4 道练习题的要求、预期输出与评分标准,并结合课程正文 2-js-basics/4-arrays-loops/README.md 的讲解,为每道练习补充可运行的参考实现与边界情况处理。读完后,你将掌握用for、for...of、forEach等不同循环结构处理数组、编写统计函数、过滤对象数组的完整实战方法。作业定位:它在课程中的位置本作业属于课程「JavaScript Basics」模块的第 4 课,该模块共 4 课,依次为变量与数据类型、函数与方法、条件判断、数组与循环,详见 2-js-basics/README.md。课程正文先讲解数组的创建、零基索引、length属性与push/pop/indexOf等常用方法,再对比讲解for循环、while循环、for...of与forEach四种迭代方式的适用场景,最后给出数组 循环做数据统计的完整示例(如单遍循环同时求和、求最值的 studentGrades 示例)。作业文档 assignment.md 是上述课程的配套练习(英文原版为 2-js-basics/4-arrays-loops/assignment.md,孟加拉语版由课程的自动化翻译流水线生成,英文原版视为权威版本),其开头说明:完成以下练习以练习数组和循环的操作。每道练习都基于课程中的概念,鼓励你应用不同的循环类型和数组方法。四道练习的递进关系是:练习 1训练for循环的自定义步长;练习 2训练函数 循环的数据统计分析;练习 3强制你分别使用for、for...of、forEach三种循环;练习 4(进阶)训练对象数组的遍历、条件筛选与派生数组构建。练习 1:数字模式生成器(Number Pattern Generator)任务:创建一个程序,列出 1 到 20 之间每第 3 个数字,并打印到控制台。要求:使用带自定义增量(custom increment)的for循环;以用户友好的格式显示数字;添加解释你逻辑的描述性注释。预期输出:3, 6, 9, 12, 15, 18提示(原文档 Tip):修改for循环的迭代表达式(iteration-expression),让它跳过数字。这道题对应课程正文「For Loop」一节的三部分结构——初始化(initialization)、条件(condition)、递增(increment):组成部分作用本练习中的取值初始化设置起点let n 3条件何时继续n 20递增如何更新n 3(自定义步长)参考实现(可直接粘贴到浏览器控制台运行):// 数字模式生成器:列出 1-20 之间每第 3 个数字 // 逻辑:从 3 开始,每次 3,直到超过 20 为止 const pattern []; for (let n 3; n 20; n 3) { // 自定义增量 n 3 实现跳着数 pattern.push(n); // 收集数字,稍后统一格式化 } // 用逗号连接,得到用户友好的单行输出:3, 6, 9, 12, 15, 18 console.log(pattern.join(, ));要点在于把递增表达式从惯用的i改成n 3,起点直接从 3 开始,这样每个被访问到的值(3、6、9……18)恰好都是 3 的倍数且不超过 20,与预期输出完全一致。练习 2:数组分析(Array Analysis)任务:创建一个至少包含 8 个不同数字的数组,并编写函数来分析数据。要求:创建名为numbers的数组,至少包含 8 个值;编写函数findMaximum(),返回最大数字;编写函数findMinimum(),返回最小数字;编写函数calculateSum(),返回所有数字的总和;测试每个函数并显示结果。加分挑战(Bonus):创建一个函数,找出数组中第二大的数字。// 至少 8 个不同数字 const numbers [42, 7, 15, 93, 28, 61, 3, 77]; // 返回最大值:从第一个元素出发,逐个比较打擂台 function findMaximum(arr) { let max arr[0]; for (let i 1; i arr.length; i) { if (arr[i] max) { max arr[i]; } } return max; } // 返回最小值:逻辑与 findMaximum 对称 function findMinimum(arr) { let min arr[0]; for (let i 1; i arr.length; i) { if (arr[i] min) { min arr[i]; } } return min; } // 返回总和:累加器模式(accumulator),对应课程正文 // Loops and Arrays 一节的求和写法 function calculateSum(arr) { let total 0; for (const num of arr) { // 只关心值、不关心索引时,for...of 更简洁 total num; } return total; } // 逐函数测试并显示结果 console.log(findMaximum(numbers)); // 93 console.log(findMinimum(numbers)); // 3 console.log(calculateSum(numbers)); // 326 // 加分挑战:第二大数字 // 思路:先找到最大值,再把它屏蔽掉重新找最大值 function findSecondHighest(arr) { const highest findMaximum(arr); let second -Infinity; for (const num of arr) { if (num highest num second) { second num; } } return second; } console.log(findSecondHighest(numbers)); // 77两个实现细节值得注意:用函数封装而非写死数组。作业要求编写函数,上面的实现都接收arr参数,因此换一个数据集也能复用,这正是提交指南中用不同数据集测试的要求所依赖的结构;边界情况。课程正文的统计示例(2-js-basics/4-arrays-loops/README.md 第 551-575 行)直接以studentGrades[0]初始化极值变量,在空数组上会得到undefined。作业测试你的代码一节明确要求处理空数组、单元素数组,稳妥做法是在函数入口加保护:function calculateSum(arr) { if (arr.length 0) return 0; // 空数组边界:返回 0 而不是 NaN // ... }练习 3:字符串数组处理(String Array Processing)任务:创建一个你喜欢的电影/书籍/歌曲数组,练习不同的循环类型。要求:创建至少包含 5 个字符串值的数组;用传统for循环显示带编号的项(如1. 项目名);用for...of循环以大写字母显示各项;用forEach()方法统计并显示总字符数。示例输出:Traditional for loop: 1. The Matrix 2. Inception 3. Interstellar For...of loop (uppercase): THE MATRIX INCEPTION INTERSTELLAR Character count: Total characters across all titles: 42const movies [ The Matrix, Inception, Interstellar, Tenet, Arrival ]; // 1) 传统 for 循环:需要索引来生成编号,是最合适的方式 console.log(Traditional for loop:); for (let i 0; i movies.length; i) { console.log(${i 1}. ${movies[i]}); // i 1 把零基索引转成人类编号 } // 2) for...of 循环:直接拿到元素值,免去索引管理 console.log(\nFor...of loop (uppercase):); for (const movie of movies) { console.log(movie.toUpperCase()); } // 3) forEach 方法:函数式风格,回调接收 (元素, 索引) console.log(\nCharacter count:); let totalCharacters 0; movies.forEach(movie { totalCharacters movie.length; // 字符串的 length 即字符数 }); console.log(Total characters across all titles: ${totalCharacters});这道练习的设计意图是让三种循环各司其职,对应课程正文「Modern Loop Alternatives」一节的结论:for循环适合需要索引或倒序计数的场景;for...of省去索引管理、避免差一错误(off-by-one);forEach适合对每个元素执行一个副作用的场景,但它不能中途提前退出(break无效)且固定返回undefined,不适合需要在中途判断停止条件的任务。练习 4:数据过滤(进阶,Data Filtering)任务:创建一个处理学生对象数组的程序。要求:创建至少 5 个学生对象的数组,每个对象包含name、age、grade属性;用循环找出年龄达到 18 岁(含)的学生;计算所有学生的平均成绩;只保留成绩高于 85 的学生,构建一个新数组。示例结构(原文档给出):const students [ { name: Alice, age: 17, grade: 92 }, { name: Bob, age: 18, grade: 84 }, // Add more students... ];// 按作业示例结构补齐到至少 5 个学生 const students [ { name: Alice, age: 17, grade: 92 }, { name: Bob, age: 18, grade: 84 }, { name: Carol, age: 19, grade: 90 }, { name: David, age: 16, grade: 78 }, { name: Eve, age: 20, grade: 88 } ]; // 1) 循环找出 18 岁及以上的学生(作业明确要求用循环) const adults []; for (const student of students) { if (student.age 18) { adults.push(student); } } console.log(18 岁及以上:, adults.map(s s.name).join(, )); // 18 岁及以上: Bob, Carol, Eve // 2) 计算平均成绩:累加 grade 后除以人数 let gradeTotal 0; for (const student of students) { gradeTotal student.grade; } const average students.length 0 ? gradeTotal / students.length : 0; console.log(平均成绩: ${average.toFixed(1)}); // 平均成绩: 86.4 // 3) 构建成绩高于 85的新数组 // 方式 A:循环 条件 push(与要求 1 风格一致) const highGrades []; for (const student of students) { if (student.grade 85) { // 注意是高于 85,85 本身不含 highGrades.push(student); } } console.log(highGrades); // [ { name: Alice, age: 17, grade: 92 }, // { name: Carol, age: 19, grade: 90 }, // { name: Eve, age: 20, grade: 88 } ]进阶提示:课程正文的「Challenge」部分鼓励把传统循环改写成map、filter、reduce等现代数组方法。上面的第 2、3 步分别等价于students.reduce((sum, s) sum s.grade, 0)和students.filter(s s.grade 85);若你在提交说明中解释为什么此处选择循环而不是数组方法(例如作业明文要求 use loops),这正是评分量规中Loop Usage维度想看到的思考。测试你的代码(Testing Your Code)作业文档给出的验证清单,完成每道练习后逐条对照:在浏览器控制台中运行每道练习;确认输出与预期结果一致(练习 1 有精确的预期输出3, 6, 9, 12, 15, 18,练习 3 有格式化的示例输出可对照);用不同的数据集测试(例如把numbers换成 12 个负数、把students换成 8 个人);确认代码能处理边界情况(空数组、只含一个元素的数组)——例如空数组时calculateSum应返回 0 而非NaN,求极值函数不应直接取arr[0]作为初值而不加保护。提交指南(Submission Guidelines)作业要求提交内容包含三部分:每道练习附良好注释的 JavaScript 代码;程序运行时的截图或文本输出;简短说明每道任务选择了哪种循环类型、以及为什么(这一条直接对应量规中的Loop Usage评分项)。评分量规(Rubric)原文档的完整评分表(3 分 优秀,2 分 合格,1 分 需改进):标准优秀(3 分)合格(2 分)需改进(1 分)功能完整性(Functionality)所有练习均正确完成,并包含加分挑战所有必做练习均能正确运行部分练习未完成或包含错误代码质量(Code Quality)代码清晰、组织良好,变量命名有描述性代码能运行,但可以更清晰代码杂乱或难以理解注释(Comments)有解释逻辑与决策的全面注释有基础注释注释极少或没有循环使用(Loop Usage)恰当地展示了不同循环类型的理解循环使用正确但种类有限循环使用错误或低效测试(Testing)有多个场景的充分测试证据展示了基础测试几乎没有测试证据从量规设计可以看出判分重点:不只要求跑通,还要求循环类型的多样性(练习 3 的三种循环即为此设计)、注释解释决策、以及多场景测试。反思问题(Reflection Questions)完成练习后,作业文档要求思考以下四个问题:哪种循环类型用起来最自然?为什么?处理数组时你遇到了哪些挑战?这些技能如何应用到真实的 Web 开发项目中?(课程正文给出的场景包括购物清单/购物车、社交动态流、照片画廊、游戏高分榜——它们背后都是数组 循环)如果需要对代码做性能优化,你会做哪些不同的做法?(可结合课程正文提示:单遍循环同时求和与求最值、用for...of减少索引运算等)延伸:从本作业到课程后续内容课程正文在本课末尾布置了两个挑战,与本作业形成衔接:一是用至少三种数组方法(map/filter/reduce等)重构学生成绩统计示例;二是用 AI 代理完成analyzeGrades函数(输入{name, score}对象数组,返回最高/最低/平均成绩、及格人数与高于平均分名单,且解法须包含至少两种循环)。本作业的练习 2 与练习 4 正是这些挑战的直接铺垫。相关文档入口:课程总览 READMEJavaScript 基础模块数组与循环课程正文(英文)本作业孟加拉语版 / 英文原版课程孟加拉语版总览【免费下载链接】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），仅供参考