JavaScript 实现JSON 对象数组以某个属性进行分组处理

JavaScript 实现 JSON 对象数组以某个属性进行分组处理

实现方法一

假设有一个 JSON 对象数组，每个对象都有category属性，想要按照category属性进行分组。

const data = [
  { name: "Item 1", category: "A" },
  { name: "Item 2", category: "B" },
  { name: "Item 3", category: "A" },
  { name: "Item 4", category: "C" },
  { name: "Item 5", category: "B" },
];

// 创建一个空对象来存储分组后的结果
const groupedData = {};

// 遍历数据数组
data.forEach(function (item) {
  const category = item.category;

  // 如果分组对象中不存在该类别，则创建一个新的数组存储该类别下的项
  if (!groupedData[category]) {
    groupedData[category] = [];
  }

  // 将项添加到相应的类别数组中
  groupedData[category].push(item);
});

// 打印分组后的结果
console.log(groupedData);

在这个示例中，遍历了 JSON 对象数组data，对每个对象的category属性进行分组处理。使用一个空对象groupedData来存储分组后的结果，键是类别，值是相应类别下的对象数组。

输出结果：

{
  A: [
    { name: "Item 1", category: "A" },
    { name: "Item 3", category: "A" },
  ],
  B: [
    { name: "Item 2", category: "B" },
    { name: "Item 5", category: "B" },
  ],
  C: [{ name: "Item 4", category: "C" }],
}

实现方法二（类似于方法一）

// 示例数据
const data = [
  { id: 1, category: "fruit", name: "apple" },
  { id: 2, category: "fruit", name: "banana" },
  { id: 3, category: "vegetable", name: "carrot" },
  { id: 4, category: "fruit", name: "orange" },
  { id: 5, category: "vegetable", name: "cucumber" },
];

// groupBy 函数
const groupBy = (array, key) => {
  return array.reduce((result, currentValue) => {
    // 如果 result 中没有这个 key，则创建一个空数组
    if (!result[currentValue[key]]) {
      result[currentValue[key]] = [];
    }
    // 将当前对象 push 到对应的 key 数组中
    result[currentValue[key]].push(currentValue);
    return result;
  }, {}); // 初始值是一个空对象
};

// 使用 groupBy 函数按 'category' 属性分组
const groupedData = groupBy(data, "category");
console.log(groupedData);

groupBy 函数接受两个参数：一个是数组 array，另一个是需要按其分组的键 key。 在 reduce 方法的回调函数中，检查结果对象 result 中是否已经存在当前对象的 key 值。如果不存在，则初始化为一个空数组。 将当前对象添加到对应的 key 数组中。 最终返回分组后的对象。

输出结果：

{
  fruit: [
    { id: 1, category: "fruit", name: "apple" },
    { id: 2, category: "fruit", name: "banana" },
    { id: 4, category: "fruit", name: "orange" },
  ],
  vegetable: [
    { id: 3, category: "vegetable", name: "carrot" },
    { id: 5, category: "vegetable", name: "cucumber" },
  ],
}

实现方法三：使用 Object.groupBy()（不推荐，这是一项实验性技术，存在兼容性问题）

const inventory = [
  { name: "芦笋", type: "蔬菜", quantity: 5 },
  { name: "香蕉", type: "水果", quantity: 0 },
  { name: "山羊", type: "肉", quantity: 23 },
  { name: "樱桃", type: "水果", quantity: 5 },
  { name: "鱼", type: "肉", quantity: 22 },
];

const result = Object.groupBy(inventory, ({ type }) => type);

console.log(result);

输出结果：

{
  水果: [
    { name: "香蕉", type: "水果", quantity: 0 },
    { name: "樱桃", type: "水果", quantity: 5 },
  ],
  肉: [
    { name: "山羊", type: "肉", quantity: 23 },
    { name: "鱼", type: "肉", quantity: 22 },
  ],
  蔬菜: [{ name: "芦笋", type: "蔬菜", quantity: 5 }],
}