首页 > 资讯 > 前端开发 > JavaScript >一文详解如何在前端使用JS进行分类汇总

381

分享到

一文详解如何在前端使用JS进行分类汇总

js 分类 javascript分类 js分类汇总 2023-05-14 11:05:53 381人浏览八月长安

摘要

目录前言提出问题原数据（按部门再按业务）的轻维表呈现按业务再按部门分组的轻维表呈现按业务按年统计的轻维表呈现展平多级数据晋级：如果想用递归该怎么处理？分类及分类汇总按业务再按部门分组

前言

最近遇到一些同学在问 js 中进行数据统计的问题。虽然数据统计一般会在数据库中进行，但是后端遇到需要使用程序来进行统计的情况也非常多。.net 就为了对内存数据和数据库数据进行统一地数据处理，发明了 LINQ (Language-Integrated Query)。其实 LINQ 语法本身没什么，关键是为了实现 LINQ 而设计的表达式树、IEnumerable 和 IQueryable 的各种扩展等。

提出问题

不扯远了，先来看问题。根据下面的样例数据，要求得到

先按业务，再按部门分组的数据；
不按部门，直接按业务分别统计每年的数据

[
  {
    name: "部门1",
    businesses: [
      {
        name: "产品销售",
        years: [
          { name: "2021", value: 132 }, { name: "2022", value: 183 }, { name: "2023", value: 207 }
        ]
      },
      {
        name: "原料采购",
        years: [
          { name: "2021", value: 143 }, { name: "2022", value: 121 }, { name: "2023", value: 120 }
        ]
      }
    ]
  },
  {
    name: "部门2",
    businesses: [
      {
        name: "产品销售",
        years: [
          { name: "2021", value: 230 }, { name: "2022", value: 112 }, { name: "2023", value: 288 }
        ]
      },
      {
        name: "原料采购",
        years: [
          { name: "2021", value: 168 }, { name: "2022", value: 203 }, { name: "2023", value: 115 }
        ]
      }
    ]
  },
  {
    name: "部门3",
    businesses: [
      {
        name: "产品销售",
        years: [
          { name: "2021", value: 279 }, { name: "2022", value: 163 }, { name: "2023", value: 271 }
        ]
      },
      {
        name: "原料采购",
        years: [
          { name: "2021", value: 129 }, { name: "2022", value: 121 }, { name: "2023", value: 226 }
        ]
      }
    ]
  }
];

这个数据，如果用金山文档的轻维表（飞书多维表类似）来查看，会更直观

原数据（按部门再按业务）的轻维表呈现

按业务再按部门分组的轻维表呈现

按业务按年统计的轻维表呈现

展平多级数据

原数据按部门再按业务进行了两级分类，所以它不是简单的二维表（行/列）数据，而是在二维表的基础上增加了两个维度（部门/业务）。从要求来看，我们需要的是从另外的维度（业务/部门，业务/年度）来进行处理。所以需要先把这些数据降维展开成可以重新划分维度的程度，也就是二维表。

JS 中二维表的表示方法挺多，行对象集合是最常见的一种，这里我们也就采用这种表示方法。

还有一种常见的方式是列集合+行集合，其中行集合可以是对象表示（字段名对应）也可以是数组表示（索引号对应）。不过这种表示一会是用在 UI 中。单纯数据处理用行对象集合就够了，不需要单独的列信息。

观察原数据的每一级，发现名称都命名为 name，但是子集命名各不相同，层级有限。由于对每一层需要去处理名称到列（对象属性名）的转换，也需要对不同名称的子集进行进一步处理，各层级之间缺乏显而易见的共性，不太适合递归的方式来处理。所以我们定做一个展开函数。

下面是对原数据量身定做的展开函数，展开后会得到一个包含部门 (dept)、业务 (business)、年份 (year)、数值 (value) 四个属性的对象集合。

function flatBusinesses(list) {
    return list.flatMap(({ name: dept, businesses }) => {
        return businesses.flatMap(({ name: business, years }) => {
            return years.map(({ name: year, value }) => ({
                dept,
                business,
                year,
                value
            }));
        });
    });
}

晋级：如果想用递归该怎么处理？

并不是多级展开就一定会用到递归。比如规则的数组结构，比如规则的树结构，是可以使用递归遍历展开的。但是像这个案例的数据，每一层的子级属性名称都不同，层级有限，需要逐级处理。

如果实在想用递归的话，也可以通过一个参数来定义每一级的处理规则。以这个例子来说，每一级要处理两件事：① 找到子级节点属性名；② 将 name 处理成适当的名称用在展开的数据中。
function flatMultiLevelList(list, rules) {
    return flatList(list, 0);

    function flatList(list, level) {
        const rule = rules[level];
        if (!rule) { return [{}]; }
        // 取得 field（子级属性名）和 convert（属性处理器）
        // 如果没有 convert 则指定一个默认的 it => it，即不做转换
        const { field, convert = it => it } = rule;
        if (field) {
            // 如果存在子级，则继续 flatMap，展平。
            // ❶ { fff, ...others } 可以将 fff 属性从原对象中剥离出来
            // ❷ { [feild]: nodes } 解构可以将 field 的值所指向的属性取出来赋予一个叫 nodes 的变量
            return list.flatMap(({ [field]: nodes, ...props }) => {
                return flatList(nodes, level + 1).map(it => ({ ...convert(props), ...it }));
            });
        } else {
            // 如果不存在子级，只需要对当前节点进行转换，直接返回即可
            return list.map(it => convert(it));
        }
    }
}

展开后会拿到这样的数据（假设赋值变量 table）

[
    { "dept": "部门1", "business": "产品销售", "year": 2021, "value": 132 },
    { "dept": "部门1", "business": "产品销售", "year": 2022, "value": 183 },
    { "dept": "部门1", "business": "产品销售", "year": 2023, "value": 207 },
    { "dept": "部门1", "business": "原料采购", "year": 2021, "value": 143 },
    { "dept": "部门1", "business": "原料采购", "year": 2022, "value": 121 },
    { "dept": "部门1", "business": "原料采购", "year": 2023, "value": 120 },
    { "dept": "部门2", "business": "产品销售", "year": 2021, "value": 230 },
    { "dept": "部门2", "business": "产品销售", "year": 2022, "value": 112 },
    ...
]

拿到二维表之后，某些需要的数据或视图就可以通过电子表格来获得。比如问题一中需要的统计数据，使用电子表格的透视图功能就能实现，而金山文档的轻维表，或者飞书的多维表可以实现得更容易。不过我们现在需要用代码来实现。

分类及分类汇总

第一个问题的需求是分类和分类汇总。说到分类，那首先想到的肯定是 group 操作。很可惜原生 JS 不支持 group，如果想用现成的，可以考虑 Lodash，要自己写一个倒也不难。group 操作前面提到的展开操作的逆操作。

function groupBy(list, key) {
    // 这里简单地兼容一下传入 key 值和 keyGetter 的情况
    const geTKEy = typeof key === "function" ? key : it => it[key];
    return list.reduce(
        (groups, it) => {
            (groups[getKey(it)] ??= []).push(it);
            return groups;
        },
        {}  // 空对象作为初始 groups
    );
}

按业务再按部门分组

有了 groupBy，可以先按业务进行分组

// 前面假设展平的数据存放在变量 table 中
const groups = groupBy(table, "dept");

现在我们拿到的 byDept 是一个 JS 对象（注意不是数组哦），其键是部门名称，值是一个数组，包含该部门下的所有数据。接下来进行第二层分组，是需要对 byDept 的每一个“值”进行分组处理。

for (const key in groups) {
    const list = groups[key];
    groups[key] = groupBy(list, "business");
}

处理之后的 groups 长得像这样

{
    "产品销售": {
        "部门1": [
            { dept: "部门1", business: "产品销售", year: "2021", value: 132 },
            ...
        ],
        "部门2": [
            { dept: "部门2", business: "产品销售", year: "2021", value: 230 },
            ...
        ],
        "部门3": ...
    },
    "原料采购": ...
}

结果是拿到了，但是和符合原始的数据规范（原始层级每层是用 name 属性作为字段名，子级命名各不相同）所以还需要做一次转换。比如第一层的转换是这样：

const converted = Object.entries(groups)
    .map(([name, depts]) => ({ name, depts }));

它会把第一层（对象）处理成数组，每个元素包含 name 和 depts 两个属性，name 属性是名称，depts 则是按部门分组的结果（目前还是对象）。那么第二、三层转换也类似。把前面的分组和后面的转换合并起来，是这样

const result1 = Object.entries(groupBy(table, "business"))
    .map(([name, list]) => ({
        name,
        depts: Object.entries(groupBy(list, "dept"))
            .map(([name, list]) => ({
                name,
                years: list.map(({ year: name, value }) => ({ name, value }))
            }))
    }));

得到最终结果

[
  {
    name: "产品销售",
    depts: [
      {
        name: "部门1",
        years: [{ name: "2021", value: 132 }, { name: "2022", value: 183 }, { name: "2023", value: 207 }]
      },
      {
        name: "部门2",
        years: [{ name: "2021", value: 230 }, { name: "2022", value: 112 }, { name: "2023", value: 288 }]
      },
      {
        name: "部门3",
        years: [{ name: "2021", value: 279 }, { name: "2022", value: 163 }, { name: "2023", value: 271 }]
      }
    ]
  },
  ...
]

按业务分组再按年统计

对于第一个问题的第二个需求，要按年统计业务（忽略部门），处理方法与上面的方法类型。第二层分组改为按年份，而不是按部门；同时第二层的数组转换时不再转换第三层的数据，而是对第三层数据进行汇总。

const result2 = Object.entries(groupBy(table, "business"))
    .map(([name, list]) => ({
        name,
        years: Object.entries(groupBy(list, "year"))
//      ^^^^^                               ^^^^^^ 按年分组
            .map(([name, list]) => ({
                name,
                value: list.reduce((sum, { value }) => sum + value, 0)
//              ^^^^^ 直接取值，使用 reduce 汇总
            }))
    }));

结果（用前面做的轻维表统计来核对一下，完全正确）

[
  {
    name: "产品销售",
    years: [{ name: "2021", value: 641 }, { name: "2022", value: 458 }, { name: "2023", value: 766 }]
  },
  {
    name: "原料采购",
    years: [{ name: "2021", value: 440 }, { name: "2022", value: 445 }, { name: "2023", value: 461 }]
  }
]

如果用 Lodash 会怎么写

用 Lodash 来处理代码结构看起来更清晰一些，但代码量不见得少。

展开的部分用 Lodash 和使用原生方法没什么区别，都是使用 flatMap。Lodash 提供的 flatMapDeep 可以用来展开纯粹的多级数组，但在这里不适用，因为每一级都不是单纯的展开，而是要进行单独的映射处理。Lodash 的 flatMapDeep 更像是原生的 map().flat(Number.MAX_SAFE_INTEGER)。

const result1 = _(table)
    // groupBy 的结果是一个对象，属性名是组名，属性值是组内数据列表。
    .groupBy("business")
    // 第一种处理值集的方法，先把值处理了 (mapValues)，再来处理键值对 (map)
    .mapValues(depts => _(depts)
        .groupBy("dept")
        // 第二种处理值集的方法，处理键值对的时候，同时处理值集合
        .map((values, name) => ({
            name,
            years: values.map(({ year: name, value }) => ({ name, value }))
        }))
        .value()
    )
    .map((depts, name) => ({ name, depts }))
    .value();

const result2 = _(table).groupBy("business")
    .map((list, name) => ({
        name,
        years: _(list).groupBy("year")
            .map((list, name) => ({
                name,
                value: _.sumBy(list, "value")
            }))
            .value()
    }))
    .value();

小结

如果需要对某个数据进行分类或者分类汇总，首先得拿到这个数据的二维表，也就是完全展开的数据列表。多数情况下从后端拿到的数据都是二维表，毕竟关系型数据库逻辑结构是表存储。接下来所谓的“分类”其实就是分组操作，而“汇总”就是把分类后的子列表拿来进行聚合计算（计数、合计、平均、最大/小等都是聚合计算），得到最终的结果。

总结

到此这篇关于如何在前端使用JS进行分类汇总的文章就介绍到这了,更多相关JS分类汇总内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 一文详解如何在前端使用JS进行分类汇总

本文链接: https://www.lsjlt.com/news/203126.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

一文详解如何在前端使用JS进行分类汇总

目录前言提出问题原数据（按部门再按业务）的轻维表呈现按业务再按部门分组的轻维表呈现按业务按年统计的轻维表呈现展平多级数据晋级：如果想用递归该怎么处理？分类及分类汇总按业务再按部门分组...

99+

2023-05-14

js 分类 javascript分类 js分类汇总
怎么在前端使用JS进行分类

今天小编给大家分享一下怎么在前端使用JS进行分类的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。提出问题不扯远了，先来看问题。...

99+

2023-07-05
一文详解如何使用node执行js文件

目录知识回顾CommentJS规范ECMAScript标准规范模块化CommonJS规范模块化总结知识回顾 I/O (Input/output) &...

99+

2023-01-09

node 执行js文件 node执行js文件 nodejs运行js代码
一文详解如何在前端中动态生成API接口

本篇文章给大家带来了关于前端的相关知识，其中主要介绍了怎么在前端中动态的生成API接口，下面一起来看一下，希望对大家有帮助。在ts横行的时代，接口请求和返回参数定义类型成了繁琐的一件事情，在这样的情况下，我们可以通过node服务，来进行自...

99+

2023-05-14

node API
前端如何调用后端接口进行数据交互详解(axios和SpringBoot)

目录一、介绍二、项目结构三、代码编写四、运用总结前端调用后端接口，获得数据并渲染一、介绍一个完善的系统，前后端交互是必不可少的，这个过程可以分成下面几步：前端向后端发起请求后端...

99+

2023-03-19

前端和后端怎么进行数据交互的前端如何调用后端数据前端与后端接口的交互案例
一文详解Python如何优雅地对数据进行分组

假设我们有这样一种数据： data = [ ("apple", 30), ("apple", 35), ("apple", 32), ("pear", 60), ...

99+

2024-04-02
详解Python如何使用Netmiko进行文件传输

目录Netmiko简介Netmiko安装使用Netmiko的SCP函数传输文件从设备传输文件到本地计算机从本地计算机传输文件到设备总结在网络设备管理中，传输配置文件、镜像文件等是经常...

99+

2023-05-18

Python Netmiko实现文件传输 Python Netmiko文件传输 Python Netmiko
如何使用pandas对超大csv文件进行快速拆分详解

目录前言1. 操作步骤1.1 安装pandas1.2 拆分大文件2. 再多了解一点儿2.1 pandas读取csv文件后，返回的是什么类型？2.2 如何从DataFrame中读取某一...

99+

2024-04-02
一文详解如何在Vue3中使用jsx/tsx

目录JSX 如何用插值条件渲染(v-if)列表循环(v-for)事件绑定事件修饰符v-model插槽最后我们都知道,通常情况下我们使用 vue 大多都是用的 SFC(Signle F...

99+

2023-03-23

Vue3使用jsx/tsx Vue3 jsx/tsx Vue jsx tsx
一文详解如何在Vue3+Vite中使用JSX

目录JSX介绍在 Vue3 中使用 JSX安装插件（@vitejs/plugin-vue-jsx）新建 jsx 文件语法补充知识：注意事项总结JSX介绍 JSX（JavaScript...

99+

2023-02-16

vue3 vite使用jsx vue3+vite 前端 vite搭建vue3
Java如何使用spire进行word文档的替换详解

目录前言spire.doc介绍前提准备准备word模板引入spire.do依赖案例演示单个内容替换批量内容替换方式1方式2总结前言今天遇到一个需求，需要对word模板进行替换制定的...

99+

2023-01-09

java word文档替换方案 java word替换 java spire
一文详解如何在uniapp中优雅地使用WebView

目录从webview页面传值到uniapp中从uniapp中动态传值到webview页面调用webview中的方法总结这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助从...

99+

2023-01-03

uniapp使用webview的方法 uniapp和webview实时交互 uniapp使用webview
如何在spark集群环境下使用hanlp进行中文分词

这篇文章主要介绍“如何在spark集群环境下使用hanlp进行中文分词”，在日常操作中，相信很多人在如何在spark集群环境下使用hanlp进行中文分词问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何在sp...

99+

2023-06-02
如何在 PHP 中使用自然语言处理 API 进行文本分析？

PHP 是一门流行的编程语言，广泛应用于 Web 开发和数据处理领域。自然语言处理 (NLP) 是人工智能领域的一个重要分支，它的目标是使计算机能够理解和处理人类语言。在本文中，我们将介绍如何在 PHP 中使用自然语言处理 API 进行文本...

99+

2023-07-06

关键字自然语言处理 api
一文详解在Go中如何使用Viper来管理配置

目录为什么选择 Viper把配置值读入 Viper设置默认配置值从配置文件读取配置监控并重新读取配置文件从 io.Reader 读取配置从环境变量读取配置从命令行...

99+

2023-05-19

Go使用Viper管理配置 Go Viper管理配置 Go Viper
C++ 友元函数详解：如何使用友元函数进行跨类访问？

c++++ 中的友元函数允许非成员函数访问类的私有和受保护成员，在实现跨类操作、adt 和单元测试中十分有用：声明友元函数：使用 friend 关键字声明一个类外的函数。使用友元函数：直...

99+

2024-04-29

c++ 友元函数
如何在 Python 中使用 NumPy 库对文件中的数据进行统计分析？

Python 是一种强大的编程语言，它拥有众多的库和工具可以帮助开发者更高效地完成任务。其中，NumPy 库是一款专门用于数值计算的库，在处理大量数据时可以提供高效的处理速度和良好的性能。在本文中，我们将介绍如何使用 NumPy 库对文件...

99+

2023-11-04

文件关键字 numy
如何在分布式文件系统中使用Java和Numpy进行矩阵计算？

分布式文件系统（Distributed File System，DFS）是一种将文件存储在多个计算机节点上的文件系统。在分布式系统中，矩阵计算是一个非常常见的任务。本文将介绍如何使用Java和Numpy在分布式文件系统中进行矩阵计算。一、...

99+

2023-07-28

文件分布式 numpy
如何在 Python API 中使用自然语言处理对象进行文本分析？

自然语言处理（NLP）是人工智能领域中的一个重要分支，它涉及到计算机对人类自然语言的理解和生成。在现代社会中，人们在日常生活中产生了大量的文本数据，如新闻、社交媒体、电子邮件等，这些文本数据需要进行有效的分析才能得出有用的信息。Pytho...

99+

2023-09-09

api 自然语言处理对象
一篇教你如何在go语言中使用npm进行大数据分析的教程

在现代互联网时代，大数据已经成为了不可忽视的一部分。而在数据处理领域，Go语言以其高效、快速、稳定的特性受到了许多程序员的青睐。在Go语言的生态系统中，NPM（Node Package Manager）是一个非常重要的工具，可以帮助我们在G...

99+

2023-07-01

npm 教程大数据