Web-Dev-For-Beginners 第 4 课：JavaScript 数组与循环——从数据组织到高效数据处理的完整实战指南-北京尧图网络

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 课程24 课 / 12 周 Web 开发者入门计划中的JavaScript 基础数组与循环一课为核心系统讲解数组的创建、索引、常用方法与四种循环写法for、while、for...of、forEach并深入拆解数组循环这一处理数据的黄金组合。读完本文你将掌握购物车计数、成绩统计、排行榜渲染、列表过滤等真实场景的编码能力并能在浏览器控制台独立完成从数据收集到统计输出的完整流程。文中所有示例代码均可直接复制运行作业练习与源码佐证均来自本仓库实际内容。为什么数组与循环是前端开发的基石网页购物车如何跟踪每一项商品好友列表如何逐条渲染排行榜如何从高分到低分排序答案都指向两个基本概念数组与循环。数组是数字容器能在单个有序结构中存放多条信息循环则让你不必逐行手写重复逻辑即可高效处理成百上千条数据。两个概念结合构成程序处理信息的基础。你将从手动编写每一个步骤进阶为编写几行代码完成复杂数据任务——这正是从入门走向实战的关键一跃。本课在课程中位于 2-js-basics 模块2-js-basics的第 4 小节是继数据类型、函数方法、条件判断之后把前面所有知识串联起来进行数据加工的核心一课。本课的 Sketchnote 视觉笔记一图概览数组结构、循环类型与数据处理应用。数组组织数据的数字容器把数组想象成一个数字档案柜——不再是一个抽屉放一份文档而是把多条相关数据放进同一个结构化容器。无论是照片画廊、待办清单还是游戏最高分数组都是数据组织的根基。✅ 生活思考数组无处不在你能举出一个现实中的数组例子吗比如太阳能电池板阵列solar panel array。创建数组创建数组只需方括号[]超级简单// 空数组——像一个等待装入商品的空购物车 const myArray [];也可以用初始值直接填充// 冰淇淋店的口味菜单 const iceCreamFlavors [Chocolate, Strawberry, Vanilla, Pistachio, Rocky Road]; // 用户资料信息混合不同类型的数据 const userData [John, 25, true, developer]; // 某门课的测验成绩 const scores [95, 87, 92, 78, 85];值得注意的要点同一个数组中既可以存文本、数字也可以存布尔值true/false用逗号分隔每一项即可简单直接数组非常适合把相关联的信息放在一起维护。数组索引从 0 开始计数数组有一个初看有点反直觉的规则从 0 开始编号。这种从零索引zero-based indexing源自计算机内存的工作方式是自 C 语言时代就延续下来的编程惯例。数组中的每个位置都有自己的地址号称为索引index。以iceCreamFlavors为例索引值描述0Chocolate第一个元素1Strawberry第二个元素2Vanilla第三个元素3Pistachio第四个元素4Rocky Road第五个元素✅ 某些编程语言的索引从 1 开始。数组为何普遍从 0 开始背后有一段有趣的历史可自行检索 Zero-based numbering 了解。访问数组元素使用方括号记法索引号const iceCreamFlavors [Chocolate, Strawberry, Vanilla, Pistachio, Rocky Road]; console.log(iceCreamFlavors[0]); // Chocolate - 第一个元素 console.log(iceCreamFlavors[2]); // Vanilla - 第三个元素 console.log(iceCreamFlavors[4]); // Rocky Road - 最后一个元素这里发生了什么使用方括号索引访问元素返回该位置存储的值从 0 计数因此第一个元素的索引是 0。修改与追加元素// 修改已有值 iceCreamFlavors[4] Butter Pecan; console.log(iceCreamFlavors[4]); // Butter Pecan // 在末尾追加新元素 iceCreamFlavors[5] Cookie Dough; console.log(iceCreamFlavors[5]); // Cookie Dough上面这段代码把索引 4 的值从 Rocky Road 改为 Butter Pecan在索引 5 新增元素 Cookie Dough当赋值超出当前范围时数组长度自动扩展。数组长度与常用方法数组自带属性与方法让数据处理轻松许多。获取数组长度const iceCreamFlavors [Chocolate, Strawberry, Vanilla, Pistachio, Rocky Road]; console.log(iceCreamFlavors.length); // 5 // 长度会随数组变化自动更新 iceCreamFlavors.push(Mint Chip); console.log(iceCreamFlavors.length); // 6关键点length返回元素总数增删元素时自动更新为循环边界和输入校验提供动态计数。核心数组方法const fruits [apple, banana, orange]; // 添加元素 fruits.push(grape); // 末尾添加[apple, banana, orange, grape] fruits.unshift(strawberry); // 开头添加[strawberry, apple, banana, orange, grape] // 移除元素 const lastFruit fruits.pop(); // 从末尾移除并返回 grape const firstFruit fruits.shift(); // 从开头移除并返回 strawberry // 查找元素 const index fruits.indexOf(banana); // 返回 1banana 的位置 const hasApple fruits.includes(apple); // 返回 true方法速览添加push()末尾、unshift()开头移除pop()末尾、shift()开头——两者都返回被移除的元素查找indexOf()定位元素位置includes()判断元素是否存在这些方法返回被移除元素或位置索引等有用值。✅ 动手试试打开浏览器控制台创建你自己的数组用这些方法增删改查。数组基础知识自检数组为什么从 0 而不是从 1 开始计数访问不存在的索引比如 5 个元素的数组访问arr[100]会发生什么你能举出三个数组适用的真实场景吗循环自动化重复执行想想狄更斯小说里的经典惩罚——学生被迫在石板上反复抄写句子。如果只需说一句把这句写 100 遍就能自动完成呢这正是循环为代码做的事。循环像不知疲倦的助手可以零差错地重复任务检查购物车每一项、渲染相册每张照片……JavaScript 提供了多种循环下面逐一分析并明确适用时机。for 循环精确控制的定时器for循环就像设定闹钟——你明确知道要重复多少次。它高度组织化、可预测最适合处理数组或计数任务。for 循环的三段式结构组成部分作用示例初始化设定起始值let i 0条件何时继续i 10增量如何更新i// 从 0 数到 9 for (let i 0; i 10; i) { console.log(Count: ${i}); } // 更实际的例子处理成绩 const testScores [85, 92, 78, 96, 88]; for (let i 0; i testScores.length; i) { console.log(Student ${i 1}: ${testScores[i]}%); }逐步拆解执行过程初始化计数器变量i为 0每次迭代前检查条件i 10条件为真则执行代码块每次迭代后通过i将i增加1当条件为假i达到 10时停止。✅ 在浏览器控制台运行这段代码。微调计数器、条件或增量表达式会发生什么能不能让它反向运行做一个倒计时for 循环掌握自检for 循环的三个部分分别是什么、各起什么作用如何反向遍历一个数组如果忘记写增量部分i会怎样实战智慧当你知道确切重复次数时for 循环是最佳选择也是数组处理最常用的写法while 循环条件驱动的直到……为止while循环就像说一直做直到……——你未必知道会执行多少次但知道何时该停。它非常适合反复向用户询问输入直到拿到想要的值、或在数据中搜索直到找到目标等场景。while 循环特征只要条件为真就继续执行计数器变量需手动管理每次迭代前检查条件若条件永不失效有死循环风险。// 基础计数示例 let i 0; while (i 10) { console.log(While count: ${i}); i; // 别忘了递增 } // 更实际的例子处理用户输入 let userInput ; let attempts 0; const maxAttempts 3; while (userInput ! quit attempts maxAttempts) { userInput prompt(Enter quit to exit (attempt ${attempts 1}):); attempts; } if (attempts maxAttempts) { console.log(Maximum attempts reached!); }这些例子展示了在循环体内部手动管理计数器i通过递增计数器防止死循环演示了用户输入尝试次数上限的实用场景内置安全机制避免无限执行。while 循环智慧自检使用 while 循环最大的危险是什么什么时候选 while 而不是 for如何防止死循环安全第一while 循环功能强大但必须谨慎管理条件。务必确保循环条件最终会变为假现代循环替代方案for...of 与 forEachJavaScript 提供更现代的循环语法让代码更易读、更不易出错。for...of 循环ES6const colors [red, green, blue, yellow]; // 现代写法——更干净、更安全 for (const color of colors) { console.log(Color: ${color}); } // 与传统 for 循环对比 for (let i 0; i colors.length; i) { console.log(Color: ${colors[i]}); }for...of 的核心优势消除索引管理与 off-by-one差一错误直接访问数组元素提升代码可读性、降低语法复杂度。forEach 方法const prices [9.99, 15.50, 22.75, 8.25]; // 用 forEach 体现函数式编程风格 prices.forEach((price, index) { console.log(Item ${index 1}: $${price.toFixed(2)}); }); // forEach 箭头函数适合简单操作 prices.forEach(price console.log(Price: $${price}));关于 forEach 要知道对每个元素执行一次回调函数回调参数同时提供元素值与索引无法提前终止不同于传统循环返回 undefined不会创建新数组。现代语法自检for...of相比传统 for 循环的优势有哪些什么时候你仍会倾向传统 for 循环forEach与map有何区别现代趋势ES6 的for...of与forEach正成为数组迭代的首选因为它们更干净、更不易出错。循环与数组数据处理黄金组合数组与循环结合产生强大的数据处理能力。从渲染列表到计算统计这一组合是无数编程任务的基础。传统方式遍历数组const iceCreamFlavors [Chocolate, Strawberry, Vanilla, Pistachio, Rocky Road]; // 经典 for 循环 for (let i 0; i iceCreamFlavors.length; i) { console.log(Flavor ${i 1}: ${iceCreamFlavors[i]}); } // 现代 for...of 方式 for (const flavor of iceCreamFlavors) { console.log(Available flavor: ${flavor}); }理解两种方式都用length属性确定循环边界传统 for 循环按索引访问元素for...of 循环直接访问元素每个元素都恰好处理一次。实战数据处理示例——成绩统计const studentGrades [85, 92, 78, 96, 88, 73, 89]; let total 0; let highestGrade studentGrades[0]; let lowestGrade studentGrades[0]; // 一个循环处理所有成绩 for (let i 0; i studentGrades.length; i) { const grade studentGrades[i]; total grade; if (grade highestGrade) { highestGrade grade; } if (grade lowestGrade) { lowestGrade grade; } } const average total / studentGrades.length; console.log(Average: ${average.toFixed(1)}); console.log(Highest: ${highestGrade}); console.log(Lowest: ${lowestGrade});这段代码的运行逻辑初始化总和与极值的跟踪变量用一次高效循环处理每条成绩累加总和用于计算平均值遍历过程中追踪最高、最低值循环结束后计算最终统计结果。✅ 在浏览器控制台对你自建的数组做循环实验。这里呈现的其实是数据处理四大模式累加求和、比较最大/最小、过滤条件判断、映射数据变换——它们几乎覆盖了日常数据处理的所有需求。仓库源码佐证数组与循环的真实工程用法理解理论后看看本仓库中真实运行的 JavaScript 项目是如何运用这些知识的。这些代码印证了本课概念的实战价值。太空游戏反向 for 循环 splice 的删除安全模式在 6-space-game/solution/app.js 中子弹、敌人和粒子的每帧更新都采用反向遍历原地删除的模式。例如子弹更新6-space-game/solution/app.js#L346-L354// Update bullets for (let i bullets.length - 1; i 0; i--) { const b bullets[i]; b.x Math.cos(b.a) * b.speed * dt; b.y Math.sin(b.a) * b.speed * dt; b.life - dt; if (b.life 0 || b.x -20 || b.x BASE_WIDTH 20 || b.y -20 || b.y BASE_HEIGHT 20) { bullets.splice(i, 1); } }这正是本课自检问题的工程答案为什么有时要反向遍历因为splice(i, 1)删除元素会使后续索引前移从末尾向开头遍历for (let i arr.length - 1; i 0; i--)时已处理位置不受删除影响可以安全地在遍历中移除元素。敌人与粒子的更新6-space-game/solution/app.js#L357-L408采用完全相同的模式。太空游戏for...of 渲染与 forEach sort slice 排行榜渲染阶段则展示了对数组直接迭代的现代写法6-space-game/solution/app.js#L451-L497如for (const e of enemies)、for (const b of bullets)正是本课for...of的直接应用。游戏结束保存高分时数组方法组合拳一气呵成6-space-game/solution/app.js#L593-L618const key spaceGameScores; const list JSON.parse(localStorage.getItem(key) || []); list.push({ initials: YOU, score: state.score, t: Date.now() }); list.sort((a, b) b.score - a.score); localStorage.setItem(key, JSON.stringify(list.slice(0, 10))); renderScores(list.slice(0, 10));这里依次用到push()追加新纪录、sort()降序排列、slice(0, 10)只保留前十名随后renderScores内部用list.forEach(item { ... })遍历生成li榜单项6-space-game/solution/app.js#L606-L618。这就是数组方法替代传统循环在现代项目中的标准用法。银行应用find / findIndex 的查找语义在 7-bank-project/solution/app.js 中账号查找使用accounts.find(acc acc.user user)7-bank-project/solution/app.js#L90-L93交易记录定位使用accounts.findIndex(acc acc.user user)7-bank-project/solution/app.js#L151事务数组同样通过transactions.push(newTx)追加7-bank-project/solution/app.js#L164。find/findIndex是indexOf语义在对象数组上的延伸是实际业务中高频使用的数组查找 API。盆栽应用重复代码正是循环的用武之地3-terrarium/solution/script.js 中14 株植物被逐行调用dragElement(document.getElementById(plant1))……plant143-terrarium/solution/script.js#L3-L16。这种机械重复正是本课开篇所说手动编写每一个步骤的典型反例——如果你维护的元素数量翻倍代码就得翻倍而用数组收集元素 ID 再配合for...of或forEach一行循环即可完成同等工作。对比之下数组循环的价值一目了然。GitHub Copilot Agent 挑战构建成绩分析器综合运用本课知识尝试用 Agent 模式完成如下挑战任务描述构建一个综合数据处理函数组合数组与循环来分析数据集并生成有意义的洞察。任务要求创建名为analyzeGrades的函数接收一个学生成绩对象数组每个对象含name和score属性返回包含以下统计信息的对象最高分、最低分、平均分、及格人数score 70以及高于平均分的学生姓名数组。解决方案中至少使用两种不同类型的循环。挑战用现代数组方法重构JavaScript 提供了多种可替代传统循环的现代数组方法forEach、for...of、map、filter、reduce。你的挑战用至少三种数组方法重构上文的学生成绩示例。观察使用现代 JavaScript 语法后代码变得多么简洁、可读。例如const studentGrades [85, 92, 78, 96, 88, 73, 89]; // map: 数据变换filter: 条件过滤reduce: 累加归约 const total studentGrades.reduce((sum, g) sum g, 0); const highestGrade Math.max(...studentGrades); const lowestGrade Math.min(...studentGrades); const average total / studentGrades.length; console.log(Average: ${average.toFixed(1)}); console.log(Highest: ${highestGrade}); console.log(Lowest: ${lowestGrade});复习与自学JavaScript 数组挂载了大量数据处理方法。建议系统查阅 MDN 的 Array 参考文档并在自建数组上逐一实践push、pop、slice、splice等方法理解它们各自返回什么、是否修改原数组。课后作业遍历数组的四个练习完成 2-js-basics/4-arrays-loops/assignment.md 中的练习把本课概念落到键盘上。四个练习由浅入深练习 1数字模式生成器。打印 1-20 之间所有第 3 个数字。要求使用带自定义增量的for循环以易读格式输出期望输出3, 6, 9, 12, 15, 18添加解释逻辑的注释。提示修改 for 循环的迭代表达式来跳数例如for (let i 3; i 20; i 3)。练习 2数组分析。创建至少包含 8 个数字的数组numbers编写findMaximum()、findMinimum()、calculateSum()三个函数分别返回最高、最低值与总和。加分挑战找出数组中第二大的数。练习 3字符串数组处理。创建至少 5 个电影/书籍/歌曲名称的数组分别用传统for循环带序号输出1. The Matrix格式for...of循环全大写输出forEach()统计并输出全部标题的总字符数。练习 4数据过滤进阶。创建至少 5 个学生对象属性name、age、grade用循环找出 18 岁及以上学生计算全体平均分生成仅含 85 分以上学生的新数组。测试与提交要求在浏览器控制台运行每个练习并核对输出用不同数据集测试检查边界情况空数组、单元素数组。提交时附上带注释的代码、运行截图/文本输出以及每个任务选择某种循环类型的理由说明。评分标准满分 3 分/项标准优秀3 分合格2 分待改进1 分功能全部练习正确完成并含加分项所有必做练习正确工作部分练习不完整或有错误代码质量整洁、组织良好、变量命名清晰代码可用但可更整洁代码混乱难懂注释注释全面解释逻辑与决策有基础注释注释极少或没有循环运用恰当展示了不同循环类型的理解循环使用正确但类型单一循环使用错误或低效测试多场景充分测试的证据有基础测试测试证据不足反思问题哪种循环用起来最顺手、为什么处理数组时遇到哪些挑战这些技能如何应用于真实 Web 开发项目若需优化性能你会做哪些不同选择小结你的数组与循环工具箱至此你已掌握数据组织与处理的核心能力数组基础[]创建、arr[0]索引、length属性、push/pop/shift/unshift/indexOf/includes等内建方法循环类型for已知迭代次数、while条件驱动、for...of直接取值、forEach函数式风格数据处理单循环内完成统计计算、极值追踪、条件过滤与数据变换现代技巧箭头函数、map/filter/reduce方法链、模板字符串等 ES6 语法。关键收益高效的数据处理能力、大幅减少代码重复、可扩展到数千条数据的解决方案、更干净的代码风格。数组与循环几乎是每一款应用的地基——从简单列表到复杂数据分析从动态网页到数据驱动应用。从 5 分钟上手创建电影列表数组、写一个 1 到 10 的计数循环、练习控制台索引到 1 小时进阶完成成绩分析器、实现增删商品的购物车、练习不同循环互转再到一周突破完成本课作业、构建待办清单应用、制作统计计算器、探索map/filter/reduce你的数据处理能力将随练习稳步升级。欢迎进入可扩展数据处理的世界【免费下载链接】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），仅供参考

Web-Dev-For-Beginners 第 4 课：JavaScript 数组与循环——从数据组织到高效数据处理的完整实战指南

相关推荐

卡麦角林：高泌乳素血症治疗中的精准滴定与安全警钟

Tracy 帧分析器部署完整指南：一条主线编译三大平台，附跑通验证与踩坑速查

Sway 光标主题完整指南：5 步换指针，动画与排错一次讲清

更多资讯

MySQL逻辑函数实战技巧与性能优化

Serenity OS 中 cut 命令的完整指南：按字节、字符与字段裁剪文本行

WeChatMsg：免费导出微信聊天记录，把三年的对话永久保存

WeChatMsg：微信聊天记录导出的最短路径，一次把 3 种格式存进硬盘

SSM框架实现澡堂预订微信小程序开发实战

OmniRoute 部署实战：使用 flyctl 将自托管 AI 网关发布到 Fly.io 的完整指南

今日更新

CopilotKit Vue Demo 与 React Demo 的 Parity 实现指南：路由、运行时端点与交互语义的全框架对齐

Harbor RBAC 实战：db_auth 模式下非管理员用户管理项目成员的完整验证与权限模型解析

STM32平衡车纯平衡程序从拆包到参数整定的完整调试指南

本周精选

超人会飞不算本事：系统稳定依赖清晰规则与边界设计

超人VS蜘蛛侠：拆解超级IP的影响力与传播方法论

基于CNN的调制信号识别：MATLAB实现时频图分类实战

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？