247 - 数组分组 - 数组分组应用 - 数据分类统计示例

数组分组 - 数组分组应用 - 数据分类统计示例

在前端开发中，处理数据是一项常见且重要的任务。而数组作为 JavaScript 中最常用的数据结构之一，对数组进行分组和分类统计是非常实用的操作。本文将深入探讨数组分组的方法，并通过实际的示例展示如何应用数组分组进行数据分类统计。

为什么需要数组分组和分类统计

在实际开发中，我们经常会遇到需要将数据按照某种规则进行分组，并对每组数据进行统计分析的情况。例如，在一个电商网站中，我们可能需要统计每个商品类别的销售数量；在一个学生成绩管理系统中，我们可能需要统计每个班级的平均分等。通过数组分组和分类统计，我们可以更清晰地了解数据的分布情况，为后续的决策提供有力支持。

数组分组的方法

1. 使用 for 循环

这是最基本的方法，通过遍历数组，根据分组规则将元素添加到不同的组中。

// 示例数据
const products = [
    { name: 'iPhone', category: '手机' },
    { name: 'iPad', category: '平板' },
    { name: 'MacBook', category: '笔记本电脑' },
    { name: '小米手机', category: '手机' }
];
// 分组结果对象
const groupedProducts = {};
// 遍历数组
for (let i = 0; i < products.length; i++) {
    const product = products[i];
    const category = product.category;
    // 如果该类别还没有分组，则创建一个新的数组
    if (!groupedProducts[category]) {
        groupedProducts[category] = [];
    }
    // 将产品添加到对应的分组中
    groupedProducts[category].push(product);
}
console.log(groupedProducts);

2. 使用 reduce 方法

reduce 方法是 JavaScript 数组的一个强大方法，可以将数组的元素依次处理并返回一个累加值。我们可以利用 reduce 方法来实现数组分组。

const groupedProducts2 = products.reduce((acc, product) => {
    const category = product.category;
    acc[category] = acc[category] || [];
    acc[category].push(product);
    return acc;
}, {});
console.log(groupedProducts2);

两种方法的比较

数据分类统计示例

统计每个商品类别的数量

const categoryCount = {};
for (let i = 0; i < products.length; i++) {
    const product = products[i];
    const category = product.category;
    if (!categoryCount[category]) {
        categoryCount[category] = 0;
    }
    categoryCount[category]++;
}
console.log(categoryCount);

使用 reduce 方法统计每个商品类别的数量

const categoryCount2 = products.reduce((acc, product) => {
    const category = product.category;
    acc[category] = (acc[category] || 0) + 1;
    return acc;
}, {});
console.log(categoryCount2);

统计每个班级学生的平均分

const students = [
    { name: '张三', class: '一班', score: 80 },
    { name: '李四', class: '二班', score: 90 },
    { name: '王五', class: '一班', score: 70 }
];
const classScores = students.reduce((acc, student) => {
    const className = student.class;
    if (!acc[className]) {
        acc[className] = { totalScore: 0, count: 0 };
    }
    acc[className].totalScore += student.score;
    acc[className].count++;
    return acc;
}, {});
const classAverages = {};
for (const className in classScores) {
    const { totalScore, count } = classScores[className];
    classAverages[className] = totalScore / count;
}
console.log(classAverages);

总结

数组分组和分类统计是前端开发中非常实用的技巧。通过 for 循环和 reduce 方法，我们可以方便地对数组进行分组，并对每组数据进行统计分析。在实际开发中，我们可以根据具体情况选择合适的方法。希望本文的示例能够帮助你更好地理解和应用数组分组和分类统计。