使用 JavaScript 根据多个属性对数组对象进行分组_技术教程

本文介绍如何使用 JavaScript 中的 reduce 方法，根据对象数组中多个属性的值对数组进行分组。通过修改现有的 groupByObjectKey 函数，使其能够接受一个属性键数组，并生成一个复合键来实现更细粒度的分组。

在处理数据时，经常需要根据对象的某些属性对数组进行分组。虽然根据单个属性分组相对简单，但有时需要根据多个属性进行分组以获得更精细的结果。本文将介绍如何修改现有的 JavaScript 函数，使其能够根据多个属性对对象数组进行分组。

现有代码分析

首先，我们回顾一下用于根据单个属性进行分组的原始函数：

const groupByObjectKey = (users, key) => {
  return users.reduce((rv, x) => {
    (rv[x[key]] = rv[x[key]] || []).push(x);
    return rv;
  }, {});
};

let users = [{
    "name": "john",
    "lastName": "doe",
    "gender": "male"
  },
  {
    "name": "jane",
    "lastName": "doe",
    "gender": "female"
  },
  {
    "name": "peter",
    "lastName": "dickons",
    "gender": "male"
  },
  {
    "name": "eva",
    "lastName": "dickons",
    "gender": "female"
  },
];

const usersGroupedByLastName = groupByObjectKey(
  users,
  "lastName"
);

console.log(usersGroupedByLastName);

此函数使用 reduce 方法遍历 users 数组，并根据指定的 key（例如，"lastName"）将对象分组到累加器对象 rv 中。

修改函数以支持多个属性

为了支持根据多个属性进行分组，我们需要修改 groupByObjectKey 函数，使其接受一个属性键数组，而不是单个属性键。修改后的函数如下所示：

const groupByObjectKeys = (users, keys) => {
  return users.reduce((rv, x) => {
    const key = keys.map(k => x[k]).join('-');
    (rv[key] = rv[key] || []).push(x);
    return rv;
  }, {});
};

在这个修改后的函数中，keys 参数是一个字符串数组，表示用于分组的属性。map 方法用于提取每个属性的值，join('-') 方法将这些值连接成一个复合键，用连字符分隔。然后，使用此复合键将对象分组到累加器对象 rv 中。

使用示例

以下是如何使用修改后的函数根据 lastName 和 gender 对 users 数组进行分组：

let users = [{
    "name": "john",
    "lastName": "doe",
    "gender": "male"
  },
  {
    "name": "jane",
    "lastName": "doe",
    "gender": "female"
  },
  {
    "name": "peter",
    "lastName": "dickons",
    "gender": "male"
  },
  {
    "name": "eva",
    "lastName": "dickons",
    "gender": "female"
  },
];

const usersGroupedByLastNameAndGender = groupByObjectKeys(
  users,
  ["lastName", "gender"]
);

console.log(usersGroupedByLastNameAndGender);

这将生成一个对象，其中键是 lastName-gender 的组合，值是具有该组合的对象的数组。例如：

{
  "doe-male": [
    {
      "name": "john",
      "lastName": "doe",
      "gender": "male"
    }
  ],
  "doe-female": [
    {
      "name": "jane",
      "lastName": "doe",
      "gender": "female"
    }
  ],
  "dickons-male": [
    {
      "name": "peter",
      "lastName": "dickons",
      "gender": "male"
    }
  ],
  "dickons-female": [
    {
      "name": "eva",
      "lastName": "dickons",
      "gender": "female"
    }
  ]
}