Web-Dev-For-Beginners 第 4 课实战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 课程 2-js-basics/4-arrays-loops/assignment.md 编写完整继承该作业的 4 道练习题目数字模式生成、数组分析、字符串数组处理、对象数组过滤、测试与提交规范、评分标准并逐题给出带注释的参考实现与循环选型说明。学完本文后你能够独立用for、for...of、forEach及push、length、splice等数组方法完成数据遍历与统计类任务并通过浏览器控制台验证边界情况。作业总览本练习要训练什么原作业开篇说明Instructions指出完成以下练习以练习数组与循环的处理。每道练习都建立在本课概念之上鼓励你应用不同的循环类型和数组方法Each exercise builds on concepts from the lesson and encourages you to apply different loop types and array methods。四道题的递进关系是练习名称核心训练点Exercise 1Number Pattern Generatorfor循环的自定义步长custom incrementExercise 2Array Analysis函数封装 循环求最大/最小/求和附加题求第二高值Exercise 3String Array Processing对比for、for...of、forEach三种遍历方式Exercise 4Data Filtering进阶对象数组的条件筛选、平均值计算、派生新数组这些语法点都可以回到本课程的正文 2-js-basics/4-arrays-loops/README.md 中复习正文用“冰淇淋口味数组”iceCreamFlavors演示了零基索引、length属性、push/pop/unshift/shift/indexOf/includes等常用方法并给出 for、while、for...of、forEach 四类循环的选型建议。整个 JavaScript 基础模块数据类型的 1-data-types/README.md 到本课的目录见 2-js-basics/README.md。Exercise 1数字模式生成器自定义步长 for 循环题目要求完整继承原文档创建一个程序列出 1 到 20 之间每第 3 个数字并打印到控制台Create a program that lists every 3rd number between 1-20 and prints it to the console。Requirements:使用带自定义步长的for循环Use aforloop with a custom increment以用户友好的格式显示数字Display numbers in a user-friendly format添加描述性注释解释你的逻辑Add descriptive comments explaining your logicExpected Output:3, 6, 9, 12, 15, 18Tip原文档提示:修改 for 循环中的迭代表达式iteration-expression来跳过数字。参考实现原作业给出的 Tip 直接指向for循环三要素中的“递增表达式”。for (let i 0; i 10; i)中的i每次加 1把这里改成i 3就是自定义步长——这一点在正文 2-js-basics/4-arrays-loops/README.md 的“Common Patterns”图中也列为常见模式之一for(let i0; iarr.length; i2)这类跳跃式迭代。// 收集 1-20 之间“每第 3 个”的数字即 3 的倍数 // 从 3 开始每次 i 3 跳到下一个 3 的倍数直到超过 20 const selected []; for (let i 3; i 20; i 3) { selected.push(i); // 把当前数字追加到结果数组末尾 } // 用 , 连接数组元素得到用户友好的单行输出 console.log(selected.join(, )); // 3, 6, 9, 12, 15, 18几点说明循环边界用i 20而不是i 20因为 18 是最后一个合法值21 已超出范围自然被i 20挡掉。Array.prototype.push()是正文“Essential Array Methods”一节讲解过的“添加到末尾”方法join(, )则避免了逐行打印凑成题目期望的单行格式。本题之所以选for循环而非for...of你需要显式控制计数变量和步长而这正是for循环“已知迭代次数、计数器驱动”的定位见正文 Loop Types 流程图。Exercise 2数组分析函数封装 循环统计题目要求完整继承原文档创建一个至少包含 8 个不同数字的数组并编写函数分析数据Create an array of at least 8 different numbers and write functions to analyze the data。Requirements:创建一个叫numbers的数组至少 8 个值编写函数findMaximum()返回最大值编写函数findMinimum()返回最小值编写函数calculateSum()返回所有数字之和测试每个函数并显示结果Bonus Challenge附加挑战:编写一个函数找出数组中第二大的数字。参考实现这道题对应正文“Practical Data Processing Example”的模式用一次遍历同时累加总和、追踪极值Accumulation / Comparison patterns。下面把它拆成三个独立函数正好满足题目对三个函数名的要求// 至少 8 个不同的数字 const numbers [12, 7, 45, 3, 28, 19, 56, 8]; // 返回数组中的最大值 // 思路先假设第 0 个元素是最大值逐个比较遇到更大的就替换 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; } // 返回数组所有元素之和累加器模式 function calculateSum(arr) { let total 0; // 累加器 for (const n of arr) { total n; // 不需要索引for...of 直接取元素更简洁 } return total; } // 逐一测试并显示结果 console.log(Maximum: ${findMaximum(numbers)}); // Maximum: 56 console.log(Minimum: ${findMinimum(numbers)}); // Minimum: 3 console.log(Sum: ${calculateSum(numbers)}); // Sum: 168为什么这样选循环求极值必须用索引比较位置用传统for循环从i 1开始避免与基准元素自身比较求和只关心元素值不关心索引所以用for...of更直白——这种按任务选循环类型正是提交要求中“解释你为每个任务选择哪种循环类型及原因”的答题素材。Bonus Challenge 参考实现第二大值附加题最容易踩的坑是“最大值出现多次”。一个稳妥且易读的做法是先把最大值删掉一次再在剩余元素中取最大。这里用到的splice()删除指定位置的元素正好是正文“Review Self Study”一节建议动手练习的方法之一push, pop, slice and splice// 找出数组中第二大的数字 function findSecondHighest(arr) { // 复制一份避免改动原数组 const copy [...arr]; // 定位最大值的下标indexOf 是正文讲过的查找方法 const maxIndex copy.indexOf(Math.max(...copy)); // 删除该最大值一次 copy.splice(maxIndex, 1); // 剩余元素中的最大值即“第二大” return Math.max(...copy); } console.log(findSecondHighest(numbers)); // 45对numbers [12, 7, 45, 3, 28, 19, 56, 8]最大值为 56删掉后剩余元素中最大的是 45与手动核对一致。Exercise 3字符串数组处理三种循环类型对比题目要求完整继承原文档创建一个你最喜欢的电影/书籍/歌曲数组练习不同的循环类型Create an array of your favorite movies/books/songs and practice different loop types。Requirements:创建至少 5 个字符串值的数组用传统for循环带编号显示条目1. Item Name用for...of循环以大写字母显示条目用forEach()方法统计并显示总字符数Example Output原文档示例输出: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: 42参考实现这道题是三节循环语法的“同题三解”正好对照正文 Modern Loop Alternatives 一节的结论for...of省去索引管理、减少差一错误forEach提供“元素 索引”回调参数但不能提前终止、且返回undefined不产生新数组。const favoriteMovies [The Matrix, Inception, Interstellar, Blade Runner, Arrival]; // 方式 1传统 for 循环 —— 需要编号索引 i 正好用来生成 1. 2. 3. console.log(Traditional for loop:); for (let i 0; i favoriteMovies.length; i) { console.log(${i 1}. ${favoriteMovies[i]}); } // 方式 2for...of 循环 —— 只关心元素本身直接用 toUpperCase() 转大写 console.log(For...of loop (uppercase):); for (const movie of favoriteMovies) { console.log(movie.toUpperCase()); } // 方式 3forEach 方法 —— 在循环外声明累加器回调里累加字符数 console.log(Character count:); let totalCharacters 0; favoriteMovies.forEach(movie { totalCharacters movie.length; // 字符串的 length 属性给出该标题的字符数 }); console.log(Total characters across all titles: ${totalCharacters});实际控制台输出以本文的 5 个标题计算10 9 12 12 8 51Traditional for loop: 1. The Matrix 2. Inception 3. Interstellar 4. Blade Runner 5. Arrival For...of loop (uppercase): THE MATRIX INCEPTION INTERSTELLAR BLADE RUNNER ARRIVAL Character count: Total characters across all titles: 51三种循环在此题中的分工是本题的“标准答案”需要索引编号时用for纯遍历元素时用for...of需要“对每个元素执行副作用式处理”这里是累加计数时用forEach。Exercise 4数据过滤进阶——对象数组的三重处理题目要求完整继承原文档编写一个处理“学生”对象数组的程序Create a program that processes an array of objects representing students。Requirements:创建至少 5 个学生对象的数组每个对象含name、age、grade三个属性用循环找出所有 18 岁及以上18 or older的学生计算所有学生的平均分average grade创建一个新数组只包含成绩高于 85 分的学生Example Structure原文档给出的结构示例:const students [ { name: Alice, age: 17, grade: 92 }, { name: Bob, age: 18, grade: 84 }, // Add more students... ];参考实现循环版const students [ { name: Alice, age: 17, grade: 92 }, { name: Bob, age: 18, grade: 84 }, { name: Carol, age: 19, grade: 78 }, { name: David, age: 20, grade: 95 }, { name: Eve, age: 17, grade: 88 } ]; // 任务 1用循环找出 18 岁及以上的学生 const adults []; for (const s of students) { if (s.age 18) { adults.push(s.name); // 条件成立才 push实现“过滤”语义 } } console.log(18 or older: adults.join(, )); // 18 or older: Bob, Carol, David // 任务 2计算所有学生的平均分先累加 grade再除以人数 let gradeTotal 0; for (const s of students) { gradeTotal s.grade; } const averageGrade gradeTotal / students.length; console.log(Average grade: ${averageGrade.toFixed(1)}); // Average grade: 87.4 // 任务 3派生新数组只保留成绩高于 85 的学生 const highGraders []; for (const s of students) { if (s.grade 85) { highGraders.push(s); // 保留整个对象便于后续访问 name/age/grade } } console.log(Above 85:); for (const s of highGraders) { console.log(- ${s.name} (${s.grade})); // - Alice (92) / - David (95) / - Eve (88) }同一需求的函数式写法呼应本课 Challenge 环节正文末尾的 Challenge 环节要求用forEach、for...of、map、filter、reduce等至少三种现代数组方法重构学生成绩示例并体会代码变得更简洁。Exercise 4 的三个任务恰好都可以用filter/reduce一行式表达作为进阶对照// 等价写法filter 负责“条件筛选”reduce 负责“累加求和” const adults2 students.filter(s s.age 18).map(s s.name); const averageGrade2 students.reduce((sum, s) sum s.grade, 0) / students.length; const highGraders2 students.filter(s s.grade 85);两种写法结果完全一致。理解filter内部“对每个元素调用回调、回调返回 true 才收入新数组”的机制后你会发现它与上面手写循环里“条件成立才push”的模式一一对应——这也是提交要求中解释循环选型时可以从原理层面展开的点。测试你的代码Testing Your Code原文档给出的测试清单完整保留如下四步缺一不可在浏览器控制台中运行每个练习Running each exercise in your browsers console验证输出与期望结果一致Verifying outputs match expected results用不同的数据集测试Testing with different data sets检查代码能否处理边界情况空数组、单元素数组Checking that your code handles edge cases: empty arrays, single elements结合参考实现边界情况的具体检验方式可以是对 Exercise 2把numbers换成[42]单元素findMaximum、findMinimum都应返回 42calculateSum返回 42对 Exercise 2 的findSecondHighest用[7, 7, 5]这样的重复最大值验证“删一次最大值”的逻辑仍正确对 Exercise 4把students换成[]空数组循环版三个任务均不产生错误结果或空数组但平均值处0 / 0会得到NaN这就是作业提示的边界问题可加一句if (students.length 0)保护。提交规范与评分标准Submission Guidelines完整继承原文档提交内容需包含每道练习的、注释良好的 JavaScript 代码Well-commented JavaScript code for each exercise展示程序运行结果的截图或文本输出Screenshots or text output showing your programs running对每个任务选择了哪种循环类型及其原因的简要说明Brief explanation of which loop type you chose for each task and whyRubric完整继承原文档CriteriaExemplary (3 points)Adequate (2 points)Needs Improvement (1 point)FunctionalityAll exercises completed correctly with bonus challengesAll required exercises work correctlySome exercises incomplete or contain errorsCode QualityClean, well-organized code with descriptive variable namesCode works but could be cleanerCode is messy or hard to understandCommentsComprehensive comments explaining logic and decisionsBasic comments presentMinimal or no commentsLoop UsageDemonstrates understanding of different loop types appropriatelyUses loops correctly but limited varietyIncorrect or inefficient loop usageTestingEvidence of thorough testing with multiple scenariosBasic testing demonstratedLittle evidence of testing从评分表可以读出判分重点Loop Usage一项明确要求“恰当展示对不同循环类型的理解”即 4 道练习里应当覆盖for自定义步长、for索引遍历、for...of、forEach至少四种形式而不是全部用同一种循环硬套。反思问题Reflection Questions完整继承原文档完成练习后原文档建议思考以下问题哪种类型的循环用起来最自然为什么处理数组时你遇到了什么挑战这些技能如何应用到真实的 Web 开发项目中如果要为性能优化代码你会做什么不同的选择参考思考路径问题 1 可结合 Exercise 3 的“同题三解”回答问题 3 可联系正文开头提到的场景——购物车条目、好友列表、相册展示都依赖数组加循环问题 4 可从“单遍循环同时完成累加与极值追踪”Exercise 2 与正文成绩统计示例的做法以及“用内置方法避免手写索引”两个角度展开。小结与延伸阅读本篇覆盖了 2-js-basics/4-arrays-loops/assignment.md 的全部 4 道练习、测试规范、提交要求与评分标准并为每题提供了可直接在浏览器控制台运行的参考实现。建议按以下顺序继续深入语法细节复习2-js-basics/4-arrays-loops/README.md数组创建与索引、length 与常用方法、四类循环、数组循环统计示例以及用map/filter/reduce重构的 Challenge 环节上一课作业 2-js-basics/3-making-decisions/assignment.md学生成绩处理器同样是“遍历数组 条件判断 push 收集”的组合与 Exercise 4 思路相通模块总目录 2-js-basics/README.md可回到数据类型与函数方法两课补齐前置知识。【免费下载链接】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），仅供参考