前两节课已讲基础循环数组、函数本课继续讲解数组高级循环综合实战。本课重点学习数组与函数、循环的综合应用核心是掌握数组作为参数传递时形参与实参的对应规则按顺序、按个数传递数据。通过遍历、求和、筛选、判断等实战案例理解如何在函数内使用循环批量处理数组数据。课程以儿童英语学习场景为主线强化代码复用思维让学习者能独立完成单词检测、成绩统计、列表筛选等实用功能。掌握本课内容可大幅提升逻辑处理能力为后续对象、DOM、前端项目打下重要基础是从基础语法走向实战开发的关键一步。一、课程学习目的掌握数组遍历、筛选、统计等高级处理方法熟练使用循环完成批量数据操作。深入理解形参与实参的对应关系能在函数中正确传递与接收数组数据。能够结合循环、函数、数组完成综合案例实现数据增删改查与逻辑判断。以儿童英语单词学习为实战场景写出结构清晰、可复用、可扩展的代码。二、核心知识点讲解1. 数组遍历与批量处理遍历依次访问数组每一个元素最常用for循环。统计求和、求最大值、最小值、计数。筛选按条件提取数组中的指定元素。长度数组.length获取元素个数索引从0开始。2. 函数中数组的传递 - 形参与实参对应形参函数定义时的“占位变量”用来接收数组。实参函数调用时传入的“真实数组”。规则实参传给形参形参名可任意顺序必须一致。作用函数内部可直接操作外部数组实现代码复用。3. 循环 函数 数组 综合流程定义数组存放数据单词、成绩、列表等。编写函数用形参接收数组。函数内部用循环遍历数组。完成判断、计算、筛选、输出。调用函数传入真实数组实参。三、示例程序示例1函数遍历数组 形参数组实参单词库// 定义函数形参 wordArr 用来接收数组 function showWords(wordArr) { // 循环遍历数组从第一个到最后一个 for (let i 0; i wordArr.length; i) { // 打印索引和单词 console.log(单词 (i 1) wordArr[i]); } } // 真实数组实参 let englishWords [apple, banana, cat, dog]; // 调用函数把真实数组传给形参 showWords(englishWords);示例说明本示例演示函数与数组结合的标准用法函数使用形参接收数组循环遍历输出所有内容。调用时传入真实数组实现一次定义、多次调用。清晰展示形参与实参一一对应的规则数组作为整体传递内部可直接访问元素适合批量展示数据场景。示例2数组求和 形参数字数组// 函数形参 arr 接收数字数组返回总和 function getSum(arr) { // 定义总和变量初始0 let sum 0; for (let i 0; i arr.length; i) { // 累加每一项 sum sum arr[i]; } // 返回最终结果 return sum; } // 实参数组 let scores [90, 85, 88, 92]; // 调用并接收结果 let total getSum(scores); console.log(数组总和 total);示例说明本示例通过函数形参接收数字数组循环累加实现求和功能。代码展示函数如何处理数组数据、如何返回计算结果。学习者可掌握数据统计逻辑理解形参接收实参数组后可直接读取元素并运算适合成绩统计、数值计算等场景。示例3数组筛选 - 筛选长单词// 函数接收单词数组返回长度4的单词 function filterLongWords(arr) { // 存放结果 let newArr []; for (let i 0; i arr.length; i) { // 判断单词长度 if (arr[i].length 4) { // 满足条件就加入新数组 newArr.push(arr[i]); } } return newArr; } // 实参 let words [apple, dog, cat, orange, egg]; // 调用 let result filterLongWords(words); console.log(长单词, result);示例说明本示例实现数组筛选功能函数接收单词数组遍历判断每一项符合条件的存入新数组并返回。展示循环条件数组方法组合使用体现形参接收实参后的完整数据处理流程可扩展为筛选高分、筛选指定内容等通用逻辑。示例4形参与实参多参数对应单词答案判断// 函数两个形参用户答案数组、正确答案数组 function checkWords(userArr, rightArr) { for (let i 0; i userArr.length; i) { if (userArr[i] rightArr[i]) { console.log(第 (i 1) 题正确); } else { console.log(第 (i 1) 题错误); } } } // 实参1用户输入 let userAnswers [apple, dg, cat]; // 实参2正确答案 let rightAnswers [apple, dog, cat]; // 调用实参顺序必须和形参一致 checkWords(userAnswers, rightAnswers);示例说明本示例演示多参数传递形参与实参按顺序一一对应用户答案数组与正确数组传入后逐项对比。适合儿童英语单词检测场景帮助理解多参数传递规则避免顺序错误导致逻辑异常是实战项目中最常用的判断逻辑。四、掌握技巧与方法形参和实参必须按顺序对应个数一致类型匹配。数组传递给函数时整个数组作为一个实参。遍历数组固定写法for(let i0; i数组.length; i){}函数内操作数组不影响原数组可使用新数组存储结果。复杂数据处理优先拆分为函数封装 循环遍历 条件判断。完成本节课后应掌握的核心知识点数组作为参数传递高级操作形参与实参一一对应顺序不能乱for 循环遍历数组批量处理函数封装逻辑代码复用数组增删题目无需改函数可扩展五、课后作业基础作业定义函数用形参接收数组循环输出所有元素。定义数字数组调用函数求数组最大值。进阶作业编写函数接收数组返回数组中偶数组成的新数组。编写函数接收两个数组判断两个数组长度是否相等。实战作业儿童英语单词判断小程序建立正确单词数组、用户输入数组。函数接收两个数组形参。循环对比输出正确/错误提示。统计答对数量。JavaScript 数组高级操作与循环综合应用附件实战作业答案#儿童英语单词判断小程序##完整 JavaScript 代码// 核心知识点数组存储数据 // 正确单词数组实参真实数据 let correctWordArray [apple, banana, dog, cat, orange]; // 用户答题数组实参真实数据 let userAnswerArray [apple, banana, dog, cat, orange]; // 核心知识点函数封装 形参接收数组 // 函数作用接收两个数组逐题判断、统计分数 // 【形参1】words接收【正确单词数组】 // 【形参2】answers接收【用户答案数组】 function checkEnglishWords(words, answers) { // 定义正确题数初始为0 let correctCount 0; // 核心知识点循环遍历数组高级批量处理 // 遍历数组i 为索引从 0 开始到数组结束 for (let i 0; i words.length; i) { // 当前正确单词 let currentCorrect words[i]; // 当前用户答案 let currentAnswer answers[i]; // 条件判断严格匹配单词 if (currentAnswer currentCorrect) { console.log(第 ${i1} 题答对 ✅); correctCount; } else { console.log(第 ${i1} 题答错 ❌); } } // 统计并输出最终结果 console.log(); console.log(本轮单词测试完成); console.log(总题数${words.length} 题); console.log(答对${correctCount} 题); } // 核心实参传递给形参严格对应顺序 // 调用函数 // 实参1correctWordArray → 对应 形参1words // 实参2userAnswerArray → 对应 形参2answers checkEnglishWords(correctWordArray, userAnswerArray);功能说明本程序是以儿童英语单词测试为场景完整运用数组存储、函数封装、形参实参传递、循环遍历、条件判断等核心知识点。程序用两个数组分别存放正确单词与用户答案通过自定义函数接收数组形参实现逻辑复用。循环遍历数组完成逐题对比自动判断对错并统计答对题数最后输出测试结果。程序严格遵循实参与形参按顺序对应**规则体现数组作为参数传递的标准用法具备可扩展、易维护、结构清晰的特点。只需修改数组内容即可更换单词题库无需改动核心判断逻辑适合儿童日常英语练习使用是前端批量数据处理的典型入门案例。
JavaScript基础课程八、JavaScript 数组高级操作与循环综合应用
前两节课已讲基础循环数组、函数本课继续讲解数组高级循环综合实战。本课重点学习数组与函数、循环的综合应用核心是掌握数组作为参数传递时形参与实参的对应规则按顺序、按个数传递数据。通过遍历、求和、筛选、判断等实战案例理解如何在函数内使用循环批量处理数组数据。课程以儿童英语学习场景为主线强化代码复用思维让学习者能独立完成单词检测、成绩统计、列表筛选等实用功能。掌握本课内容可大幅提升逻辑处理能力为后续对象、DOM、前端项目打下重要基础是从基础语法走向实战开发的关键一步。一、课程学习目的掌握数组遍历、筛选、统计等高级处理方法熟练使用循环完成批量数据操作。深入理解形参与实参的对应关系能在函数中正确传递与接收数组数据。能够结合循环、函数、数组完成综合案例实现数据增删改查与逻辑判断。以儿童英语单词学习为实战场景写出结构清晰、可复用、可扩展的代码。二、核心知识点讲解1. 数组遍历与批量处理遍历依次访问数组每一个元素最常用for循环。统计求和、求最大值、最小值、计数。筛选按条件提取数组中的指定元素。长度数组.length获取元素个数索引从0开始。2. 函数中数组的传递 - 形参与实参对应形参函数定义时的“占位变量”用来接收数组。实参函数调用时传入的“真实数组”。规则实参传给形参形参名可任意顺序必须一致。作用函数内部可直接操作外部数组实现代码复用。3. 循环 函数 数组 综合流程定义数组存放数据单词、成绩、列表等。编写函数用形参接收数组。函数内部用循环遍历数组。完成判断、计算、筛选、输出。调用函数传入真实数组实参。三、示例程序示例1函数遍历数组 形参数组实参单词库// 定义函数形参 wordArr 用来接收数组 function showWords(wordArr) { // 循环遍历数组从第一个到最后一个 for (let i 0; i wordArr.length; i) { // 打印索引和单词 console.log(单词 (i 1) wordArr[i]); } } // 真实数组实参 let englishWords [apple, banana, cat, dog]; // 调用函数把真实数组传给形参 showWords(englishWords);示例说明本示例演示函数与数组结合的标准用法函数使用形参接收数组循环遍历输出所有内容。调用时传入真实数组实现一次定义、多次调用。清晰展示形参与实参一一对应的规则数组作为整体传递内部可直接访问元素适合批量展示数据场景。示例2数组求和 形参数字数组// 函数形参 arr 接收数字数组返回总和 function getSum(arr) { // 定义总和变量初始0 let sum 0; for (let i 0; i arr.length; i) { // 累加每一项 sum sum arr[i]; } // 返回最终结果 return sum; } // 实参数组 let scores [90, 85, 88, 92]; // 调用并接收结果 let total getSum(scores); console.log(数组总和 total);示例说明本示例通过函数形参接收数字数组循环累加实现求和功能。代码展示函数如何处理数组数据、如何返回计算结果。学习者可掌握数据统计逻辑理解形参接收实参数组后可直接读取元素并运算适合成绩统计、数值计算等场景。示例3数组筛选 - 筛选长单词// 函数接收单词数组返回长度4的单词 function filterLongWords(arr) { // 存放结果 let newArr []; for (let i 0; i arr.length; i) { // 判断单词长度 if (arr[i].length 4) { // 满足条件就加入新数组 newArr.push(arr[i]); } } return newArr; } // 实参 let words [apple, dog, cat, orange, egg]; // 调用 let result filterLongWords(words); console.log(长单词, result);示例说明本示例实现数组筛选功能函数接收单词数组遍历判断每一项符合条件的存入新数组并返回。展示循环条件数组方法组合使用体现形参接收实参后的完整数据处理流程可扩展为筛选高分、筛选指定内容等通用逻辑。示例4形参与实参多参数对应单词答案判断// 函数两个形参用户答案数组、正确答案数组 function checkWords(userArr, rightArr) { for (let i 0; i userArr.length; i) { if (userArr[i] rightArr[i]) { console.log(第 (i 1) 题正确); } else { console.log(第 (i 1) 题错误); } } } // 实参1用户输入 let userAnswers [apple, dg, cat]; // 实参2正确答案 let rightAnswers [apple, dog, cat]; // 调用实参顺序必须和形参一致 checkWords(userAnswers, rightAnswers);示例说明本示例演示多参数传递形参与实参按顺序一一对应用户答案数组与正确数组传入后逐项对比。适合儿童英语单词检测场景帮助理解多参数传递规则避免顺序错误导致逻辑异常是实战项目中最常用的判断逻辑。四、掌握技巧与方法形参和实参必须按顺序对应个数一致类型匹配。数组传递给函数时整个数组作为一个实参。遍历数组固定写法for(let i0; i数组.length; i){}函数内操作数组不影响原数组可使用新数组存储结果。复杂数据处理优先拆分为函数封装 循环遍历 条件判断。完成本节课后应掌握的核心知识点数组作为参数传递高级操作形参与实参一一对应顺序不能乱for 循环遍历数组批量处理函数封装逻辑代码复用数组增删题目无需改函数可扩展五、课后作业基础作业定义函数用形参接收数组循环输出所有元素。定义数字数组调用函数求数组最大值。进阶作业编写函数接收数组返回数组中偶数组成的新数组。编写函数接收两个数组判断两个数组长度是否相等。实战作业儿童英语单词判断小程序建立正确单词数组、用户输入数组。函数接收两个数组形参。循环对比输出正确/错误提示。统计答对数量。JavaScript 数组高级操作与循环综合应用附件实战作业答案#儿童英语单词判断小程序##完整 JavaScript 代码// 核心知识点数组存储数据 // 正确单词数组实参真实数据 let correctWordArray [apple, banana, dog, cat, orange]; // 用户答题数组实参真实数据 let userAnswerArray [apple, banana, dog, cat, orange]; // 核心知识点函数封装 形参接收数组 // 函数作用接收两个数组逐题判断、统计分数 // 【形参1】words接收【正确单词数组】 // 【形参2】answers接收【用户答案数组】 function checkEnglishWords(words, answers) { // 定义正确题数初始为0 let correctCount 0; // 核心知识点循环遍历数组高级批量处理 // 遍历数组i 为索引从 0 开始到数组结束 for (let i 0; i words.length; i) { // 当前正确单词 let currentCorrect words[i]; // 当前用户答案 let currentAnswer answers[i]; // 条件判断严格匹配单词 if (currentAnswer currentCorrect) { console.log(第 ${i1} 题答对 ✅); correctCount; } else { console.log(第 ${i1} 题答错 ❌); } } // 统计并输出最终结果 console.log(); console.log(本轮单词测试完成); console.log(总题数${words.length} 题); console.log(答对${correctCount} 题); } // 核心实参传递给形参严格对应顺序 // 调用函数 // 实参1correctWordArray → 对应 形参1words // 实参2userAnswerArray → 对应 形参2answers checkEnglishWords(correctWordArray, userAnswerArray);功能说明本程序是以儿童英语单词测试为场景完整运用数组存储、函数封装、形参实参传递、循环遍历、条件判断等核心知识点。程序用两个数组分别存放正确单词与用户答案通过自定义函数接收数组形参实现逻辑复用。循环遍历数组完成逐题对比自动判断对错并统计答对题数最后输出测试结果。程序严格遵循实参与形参按顺序对应**规则体现数组作为参数传递的标准用法具备可扩展、易维护、结构清晰的特点。只需修改数组内容即可更换单词题库无需改动核心判断逻辑适合儿童日常英语练习使用是前端批量数据处理的典型入门案例。
