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):

参考实现(可直接粘贴到浏览器控制台运行):

// 数字模式生成器:列出 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

两个实现细节值得注意:

1. 用函数封装而非写死数组。作业要求"编写函数",上面的实现都接收arr参数,因此换一个数据集也能复用,这正是提交指南中"用不同数据集测试"的要求所依赖的结构;
2. 边界情况。课程正文的统计示例(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: 42

const 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. 在浏览器控制台中运行每道练习;
2. 确认输出与预期结果一致(练习 1 有精确的预期输出3, 6, 9, 12, 15, 18,练习 3 有格式化的示例输出可对照);
3. 用不同的数据集测试(例如把numbers换成 12 个负数、把students换成 8 个人);
4. 确认代码能处理边界情况(空数组、只含一个元素的数组)——例如空数组时calculateSum应返回 0 而非NaN,求极值函数不应直接取arr[0]作为初值而不加保护。

提交指南(Submission Guidelines)

作业要求提交内容包含三部分:

• 每道练习附良好注释的 JavaScript 代码;
• 程序运行时的截图或文本输出;
• 简短说明每道任务选择了哪种循环类型、以及为什么(这一条直接对应量规中的"Loop Usage"评分项)。

评分量规(Rubric)

原文档的完整评分表(3 分 = 优秀,2 分 = 合格,1 分 = 需改进):

从量规设计可以看出判分重点:不只要求"跑通",还要求循环类型的多样性(练习 3 的三种循环即为此设计)、注释解释决策、以及多场景测试。

反思问题(Reflection Questions)

完成练习后,作业文档要求思考以下四个问题:

1. 哪种循环类型用起来最自然?为什么?
2. 处理数组时你遇到了哪些挑战?
3. 这些技能如何应用到真实的 Web 开发项目中?(课程正文给出的场景包括购物清单/购物车、社交动态流、照片画廊、游戏高分榜——它们背后都是数组 + 循环)
4. 如果需要对代码做性能优化,你会做哪些不同的做法?(可结合课程正文提示:单遍循环同时求和与求最值、用for...of减少索引运算等)

延伸:从本作业到课程后续内容

课程正文在本课末尾布置了两个挑战,与本作业形成衔接:一是用至少三种数组方法(map/filter/reduce等)重构"学生成绩统计"示例;二是用 AI 代理完成analyzeGrades函数(输入{name, score}对象数组,返回最高/最低/平均成绩、及格人数与高于平均分名单,且解法须包含至少两种循环)。本作业的练习 2 与练习 4 正是这些挑战的直接铺垫。相关文档入口:

• 课程总览 README
• JavaScript 基础模块
• 数组与循环课程正文(英文)
• 本作业孟加拉语版 / 英文原版
• 课程孟加拉语版总览

【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners