JavaScript基础课程八、JavaScript 数组高级操作与循环综合应用

前两节课已讲基础循环+数组、函数，本课继续讲解数组高级+循环综合实战。
本课重点学习数组与函数、循环的综合应用，核心是掌握数组作为参数传递时形参与实参的对应规则，按顺序、按个数传递数据。通过遍历、求和、筛选、判断等实战案例，理解如何在函数内使用循环批量处理数组数据。课程以儿童英语学习场景为主线，强化代码复用思维，让学习者能独立完成单词检测、成绩统计、列表筛选等实用功能。掌握本课内容，可大幅提升逻辑处理能力，为后续对象、DOM、前端项目打下重要基础，是从基础语法走向实战开发的关键一步。

一、课程学习目的

1. 掌握数组遍历、筛选、统计等高级处理方法，熟练使用循环完成批量数据操作。

2. 深入理解形参与实参的对应关系，能在函数中正确传递与接收数组数据。

3. 能够结合循环、函数、数组完成综合案例，实现数据增删改查与逻辑判断。

4. 以儿童英语单词学习为实战场景，写出结构清晰、可复用、可扩展的代码。

---

二、核心知识点讲解

1. 数组遍历与批量处理

• 遍历：依次访问数组每一个元素，最常用 for 循环。

• 统计：求和、求最大值、最小值、计数。

• 筛选：按条件提取数组中的指定元素。

• 长度：数组.length 获取元素个数，索引从 0 开始。

2. 函数中数组的传递 - 形参与实参对应

• 形参：函数定义时的"占位变量"，用来接收数组。

• 实参：函数调用时传入的"真实数组"。

• 规则：实参传给形参，形参名可任意，顺序必须一致。

• 作用：函数内部可直接操作外部数组，实现代码复用。

3. 循环 + 函数 + 数组 综合流程

1. 定义数组存放数据（单词、成绩、列表等）。

2. 编写函数，用形参接收数组。

3. 函数内部用循环遍历数组。

4. 完成判断、计算、筛选、输出。

5. 调用函数，传入真实数组（实参）。

---

三、示例程序

示例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);

示例说明：本示例演示多参数传递，形参与实参按顺序一一对应，用户答案数组与正确数组传入后逐项对比。适合儿童英语单词检测场景，帮助理解多参数传递规则，避免顺序错误导致逻辑异常，是实战项目中最常用的判断逻辑。

---

四、掌握技巧与方法

1. 形参和实参必须按顺序对应，个数一致，类型匹配。

2. 数组传递给函数时，整个数组作为一个实参。

3. 遍历数组固定写法：

for(let i=0; i<数组.length; i++){}

1. 函数内操作数组不影响原数组，可使用新数组存储结果。

2. 复杂数据处理优先拆分为：函数封装 + 循环遍历 + 条件判断。

---

完成本节课后，应掌握的核心知识点：

1. 数组作为参数传递（高级操作）

2. 形参与实参一一对应（顺序不能乱）

3. for 循环遍历数组（批量处理）

4. 函数封装逻辑（代码复用）

5. 数组增删题目无需改函数（可扩展）

五、课后作业

基础作业

1. 定义函数，用形参接收数组，循环输出所有元素。

2. 定义数字数组，调用函数求数组最大值。

进阶作业

1. 编写函数，接收数组，返回数组中偶数组成的新数组。

2. 编写函数，接收两个数组，判断两个数组长度是否相等。

实战作业

1. 儿童英语单词判断小程序：

   • 建立正确单词数组、用户输入数组。

   • 函数接收两个数组（形参）。

   • 循环对比，输出正确/错误提示。

   • 统计答对数量。

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(`第 ${i+1} 题：答对 ✅`);
            correctCount++;
        } else {
            console.log(`第 ${i+1} 题：答错 ❌`);
        }
    }

    // 统计并输出最终结果
    console.log("======================");
    console.log("本轮单词测试完成！");
    console.log(`总题数：${words.length} 题`);
    console.log(`答对：${correctCount} 题`);
}

// ========== 核心：实参传递给形参（严格对应顺序） ==========
// 调用函数
// 实参1：correctWordArray → 对应 形参1：words
// 实参2：userAnswerArray → 对应 形参2：answers
checkEnglishWords(correctWordArray, userAnswerArray);

---

功能说明

本程序是以儿童英语单词测试为场景，完整运用数组存储、函数封装、形参实参传递、循环遍历、条件判断等核心知识点。程序用两个数组分别存放正确单词与用户答案，通过自定义函数接收数组形参，实现逻辑复用。循环遍历数组完成逐题对比，自动判断对错并统计答对题数，最后输出测试结果。程序严格遵循实参与形参按顺序对应**规则，体现数组作为参数传递的标准用法，具备可扩展、易维护、结构清晰的特点。只需修改数组内容，即可更换单词题库，无需改动核心判断逻辑，适合儿童日常英语练习使用，是前端批量数据处理的典型入门案例。