JS中Array数组方法的实战案例

目录

一、学生信息统计

二、购物车案例

三、学生成绩排序

四、总结

---

当我们掌握了数组的基本方法及其用法后，现在可以将这些知识应用到实际场景中，通过实战来加深理解并提升技能水平。

一、学生信息统计

假设我们有一个包含学生信息的数组，每个学生都有姓名、年龄和分数。我们需要完成以下任务：

1. 找出所有年龄大于等于 18 岁且分数大于等于 60 分的学生。
2. 计算这些学生的平均年龄和平均分数。
3. 找出分数最高的学生。

在我们探索学生信息时，我们可以借助数组的 filter() 方法，精准地筛选出我们所需的学生。

filter() 方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。

语法：

const newArray = array.filter(callback(element, index, array), thisArg);

• callback：用于测试每个元素的函数，返回 true 表示该元素保留在新数组中，否则被过滤掉。
• element：当前正在处理的数组元素。
• index（可选）：当前正在处理的元素的索引。
• array（可选）：调用了 filter 方法的数组。
• thisArg（可选）：执行 callback 函数时使用的 this 值。

 例如我们如果想查找数组中的偶数时：

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter((number) => {
  return number % 2 === 0;
});
console.log(evenNumbers); // 输出：[2, 4, 6]

当我们需要对数组中的数值进行计算时，我们可以信手拈来地运用 reduce() 函数，轻松而高效地实现数值累积与汇总。

reduce() 方法对数组中的每个元素执行提供的函数（从左到右），将其结果汇总为单个值。

语法：

const result = array.reduce(callback(accumulator, currentValue, index, array), initialValue);

• callback：执行每个元素的函数，包含四个参数：
  • accumulator：累计器，累积回调的返回值；它是上一次调用回调时返回的累积值，或者是 initialValue（如果提供的话）。
  • currentValue：当前正在处理的数组元素。
  • index（可选）：当前正在处理的元素的索引。
  • array（可选）：调用了 reduce 方法的数组。
• initialValue（可选）：作为第一次调用 callback 函数时的第一个参数的值。
• result：函数累积处理的结果。

 例如计算数组元素的总和：

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);
console.log(sum); // 输出：15

当我们掌握了上述方法的应用技巧，我们便能够游刃有余地解决这道题目，轻松应对各种数组操作需求。

以下是解决方法（不唯一）：

const students = [
  { name: 'Alice', age: 20, score: 75 },
  { name: 'Bob', age: 22, score: 80 },
  { name: 'Charlie', age: 17, score: 65 },
  { name: 'David', age: 19, score: 90 },
  { name: 'Eve', age: 18, score: 55 }
];

// 1. 找出所有年龄大于等于 18 岁且分数大于等于 60 分的学生
const qualifiedStudents = students.filter((student) => {
  return student.age >= 18 && student.score >= 60;
});
console.log('Qualified students:', qualifiedStudents);

// 2. 计算这些学生的平均年龄和平均分数
const totalAge = qualifiedStudents.reduce((sum, student) => {
  return sum + student.age;
}, 0);
const averageAge = totalAge / qualifiedStudents.length;

const totalScore = qualifiedStudents.reduce((sum, student) => {
  return sum + student.score;
}, 0);
const averageScore = totalScore / qualifiedStudents.length;

console.log('Average age:', averageAge);
console.log('Average score:', averageScore);

// 3. 找出分数最高的学生
const highestScoreStudent = qualifiedStudents.reduce((highest, student) => {
  return student.score > highest.score ? student : highest;
}, qualifiedStudents[0]);
console.log('Student with highest score:', highestScoreStudent);

 综合运用了 filter()、reduce() 方法来处理学生数组，并完成了一系列任务：筛选符合条件的学生、计算平均年龄和平均分数、找出分数最高的学生。

二、购物车案例

假设我们有一个购物车，其中包含多个商品对象，每个商品对象包含名称、价格和数量属性。我们的任务是计算购物车中所有商品的总价值。

我们可以使用数组的 map() 方法将每个商品的价格乘以数量，然后使用 reduce() 方法将所有商品的总价值相加。

以下是解决方法（不唯一）：

// 购物车中的商品数组
const cart = [
    { name: '手机', price: 2000, quantity: 1 },
    { name: '电脑', price: 5000, quantity: 2 },
    { name: '平板电脑', price: 3000, quantity: 1 },
    { name: '耳机', price: 500, quantity: 3 }
];

// 使用 map() 方法计算每个商品的总价值
const totalPricePerItem = cart.map(item => item.price * item.quantity);

// 使用 reduce() 方法计算购物车中所有商品的总价值
const totalPrice = totalPricePerItem.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log("购物车中所有商品的总价值为：", totalPrice);

这段代码首先通过 map() 方法计算每个商品的总价值，然后使用 reduce() 方法将所有商品的总价值相加，最终得到购物车中所有商品的总价值。

三、学生成绩排序

有一个学校，有不同年级的学生。每个学生有姓名、年级、成绩等属性。现在需要实现以下功能：

1. 计算每个年级的平均成绩。
2. 找到每个年级中成绩最高的学生。
3. 将学生按照年级分组，并且每个年级内按照成绩降序排序。

我们将使用 reduce() 方法结合对象来完成以上任务。

以下是解决方法（不唯一）：

// 学生数组
const students = [
    { name: '小明', grade: 10, score: 85 },
    { name: '小红', grade: 11, score: 90 },
    { name: '小亮', grade: 10, score: 75 },
    { name: '小华', grade: 11, score: 80 },
    { name: '小丽', grade: 10, score: 95 }
];

// 计算每个年级的平均成绩和找到每个年级中成绩最高的学生
const gradeStats = students.reduce((acc, student) => {
    if (!acc[student.grade]) {
        acc[student.grade] = { totalScore: 0, count: 0, highestScore: 0, highestScorer: null };
    }
    acc[student.grade].totalScore += student.score;
    acc[student.grade].count++;
    if (student.score > acc[student.grade].highestScore) {
        acc[student.grade].highestScore = student.score;
        acc[student.grade].highestScorer = student.name;
    }
    return acc;
}, {});

// 计算每个年级的平均成绩
for (const grade in gradeStats) {
    gradeStats[grade].averageScore = gradeStats[grade].totalScore / gradeStats[grade].count;
}

console.log("每个年级的平均成绩和成绩最高的学生：", gradeStats);

// 将学生按照年级分组，并且每个年级内按照成绩降序排序
const sortedStudentsByGrade = Object.entries(gradeStats).map(([grade, stats]) => {
    const studentsInGrade = students.filter(student => student.grade == grade);
    const sortedStudents = studentsInGrade.sort((a, b) => b.score - a.score);
    return { grade, students: sortedStudents };
});

console.log("按照年级分组并且每个年级内按照成绩降序排序的学生数组：", sortedStudentsByGrade);

这段代码首先使用 reduce() 方法来计算每个年级的平均成绩，并找到每个年级中成绩最高的学生。然后，使用 filter() 方法将学生按年级分组，并且使用 sort() 方法对每个年级内的学生按成绩降序排序。通过这些步骤，我们实现了给定问题的要求。

四、总结

当处理数组时，JavaScript提供了许多有用的数组方法。下面是常用的一些数组方法及其应用：

1. forEach()：对数组中的每个元素执行给定的函数。

   • 应用：循环遍历数组并对每个元素执行操作。

2. map()：对数组中的每个元素执行给定的函数，并返回一个新数组。

   • 应用：在原始数组的基础上创建一个新数组，每个元素经过函数处理后得到新的值。

3. filter()：根据给定的条件筛选出数组中的元素，并返回一个新数组。

   • 应用：从数组中筛选出满足特定条件的元素，生成一个新的子集。

4. reduce()：将数组中的元素通过指定的函数进行累积计算，返回一个结果。

   • 应用：对数组中的所有元素进行累积计算，比如求和、求平均值等。

5. some()：检查数组中是否至少有一个元素满足给定的条件，返回布尔值。

   • 应用：判断数组中是否存在满足特定条件的元素。

6. every()：检查数组中的所有元素是否都满足给定的条件，返回布尔值。

   • 应用：判断数组中的所有元素是否都满足特定条件。

7. sort()：对数组进行排序，可以接受一个比较函数进行自定义排序。

   • 应用：对数组按照指定条件进行排序，如数字排序、字符串排序等。

8. find()：查找数组中第一个满足给定条件的元素，如果找到则返回该元素，否则返回 undefined。

   • 应用：在数组中查找满足特定条件的元素。

9. findIndex()：查找数组中第一个满足给定条件的元素的索引，如果找到则返回该索引，否则返回 -1。

   • 应用：在数组中查找满足特定条件的元素的索引。

10. slice()：返回数组的一个片段（浅拷贝），接受起始索引和结束索引作为参数。

    • 应用：获取数组的一个子集，不会修改原始数组。

这些数组方法可以灵活地处理数组，使我们能够高效地操作和处理数据。根据具体需求，选择合适的数组方法可以简化代码并提高效率。