npm 包 array-pivot 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

array-pivot 是一个 npm 包，用于将数组转换为特定格式的二维数组或对象。它可以轻松地处理大型数据集，并提供快速轴向变换。

在前端开发中，我们经常需要将数据按照不同的维度进行变换和聚合。例如，将用户的购物车信息按照商品进行分类，或者将商品的销售量按照日期进行汇总。而 array-pivot 包就是为了解决这类问题而设计的。

安装

使用 npm 命令来安装 array-pivot 包：

npm install array-pivot

使用方法

基本用法

array-pivot 提供两个主要的 API：

pivot：将数组转换为按照指定维度进行聚合的二维数组
pivotObject：将数组转换为按照指定维度进行聚合的对象

下面是 pivot 方法的参数说明：

function pivot(
  data: { [x: string]: any }[],
  rowFields: string[],
  columnField: string,
  valueField: string,
  defaultValue?: any
): PivotData[];

data：需要转换的数组
rowFields：聚合后的行的字段数组，表示按照哪些维度进行聚合
columnField：聚合后的列的字段，表示将哪个字段的值作为列名
valueField：将哪个字段的值作为聚合统计用的值
defaultValue：列的默认值

以一个简单的示例数组为例：

const data = [
  { site: 'site1', date: '2019-01-01', views: 100, clicks: 20 },
  { site: 'site1', date: '2019-01-02', views: 80, clicks: 10 },
  { site: 'site2', date: '2019-01-01', views: 120, clicks: 25 },
  { site: 'site2', date: '2019-01-02', views: 90, clicks: 15 },
];

将其按照 site 字段和 date 字段进行聚合，统计 views 和 clicks 字段的值，可以使用如下代码：

const pivot = require('array-pivot');
const result = pivot(data, ['site'], 'date', 'views');
console.log(result);

输出结果如下：

[
  { site: 'site1', '2019-01-01': 100, '2019-01-02': 80 },
  { site: 'site2', '2019-01-01': 120, '2019-01-02': 90 }
]

上述结果表示将原数组按照 site 字段进行了聚合，并将 date 字段的值作为列名，统计了 views 字段的值。可以看到，输出结果是一个二维数组，其中每一行表示一个 site，每一列表示一个日期。

类似地，如果我们需要统计 clicks 字段的值，可以将上面的代码中第 4 个参数 'views' 改为 'clicks'，然后再次运行程序。

更高级的用法

array-pivot 还提供了一些高级的用法，可以进一步扩展转换的功能。

定义聚合函数

pivot 方法的第 6 个参数可以用来定义聚合函数。如果没有指定该参数，则默认使用 sum 函数。

例如，我们需要计算 views 和 clicks 字段的平均值，可以采用如下代码：

const avg = (arr) => arr.reduce((acc, val) => acc + val, 0) / arr.length;

const result = pivot(data, ['site'], 'date', 'views', avg);
console.log(result);

在上述代码中，我们自定义了一个 avg 函数，用于计算数组的平均值。然后将该函数作为 pivot 方法的第 6 个参数传递进去，就可以实现按照 site 字段和 date 字段聚合，并求出 views 字段的平均值。

使用自定义格式化函数

pivotObject 方法还可以使用第 5 个参数来指定格式化输出结果的函数。默认情况下，输出的对象结构是嵌套的，可以使用自定义的格式化函数，将其转换为扁平化的结构。

例如，我们希望将上面的例子中的对象格式化为以下结构：

-- -------------------- ---- -------
-
  ------ -
    ------------- - ------ ---- ------- -- --
    ------------- - ------ --- ------- -- -
  --
  ------ -
    ------------- - ------ ---- ------- -- --
    ------------- - ------ --- ------- -- -
  -
-展开代码

可以使用如下代码：

const result = pivotObject(data, ['site'], 'date', 'views', (item) => {
  delete item['site'];
  return item;
});

console.log(result);

在上述代码中，我们传入了一个自定义的格式化函数，先删除了 site 字段，然后返回了新的对象。执行结果为嵌套的对象，与上面的表格相同。

支持多列聚合

pivot 方法可以同时使用多个列进行聚合，只需要将 rowFields 参数设置为一个数组即可。

例如，我们希望将上面的示例中的数组按照 site 字段和 date 字段进行聚合，并且对 views 和 clicks 两个字段进行计数和求和，可以使用如下代码：

const result = pivot(data, ['site', 'date'], 'field', 'value', {
  count: (arr) => arr.length,
  sum: (arr) => arr.reduce((acc, val) => acc + val, 0),
});

console.log(JSON.stringify(result, null, 2));

在上述代码中，我们传入了两个聚合函数，分别是 count 和 sum，用于计算数组的数量和总和。执行结果为嵌套的对象，与上面的表格相同。

总结

array-pivot 是一个非常实用的 npm 包，可以在前端开发中轻松解决数据聚合和变换的问题。在使用过程中，需要注意一些细节和注意事项，例如定义聚合函数和格式化输出结果的方式。通过学习本文提供的使用方法和示例代码，相信读者能够轻松掌握 array-pivot 的使用方法，并将其应用到实际开发当中。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/111939

npm 包 array-pivot 使用教程

介绍

安装