JavaScript数组分组|极客笔记

JavaScript数组分组

在前端开发中，我们经常会遇到需要对数组进行分组的情况，例如根据某个属性将数组分成多个子数组，或者根据某个条件将数组中的元素分组。本文将详细介绍如何使用JavaScript对数组进行分组。

方法一：使用reduce方法

使用reduce方法是一种简洁而高效的对数组进行分组的方式。我们可以通过遍历数组，根据指定的条件将元素放入对应的子数组中。

const data = [
  { id: 1, name: 'Alice', group: 'A' },
  { id: 2, name: 'Bob', group: 'B' },
  { id: 3, name: 'Charlie', group: 'A' },
  { id: 4, name: 'David', group: 'B' }
];

const groupedData = data.reduce((acc, curr) => {
  const key = curr.group;
  if (!acc[key]) {
    acc[key] = [];
  }
  acc[key].push(curr);
  return acc;
}, {});

console.log(groupedData);

上面的代码中，我们将原始数据按照group属性进行了分组，最终得到了一个以group值为键，对应的子数组为值的对象groupedData。

方法二：使用forEach方法

除了reduce方法之外，我们还可以使用forEach方法对数组进行分组。这种方法的实现较为直观，适合理解较弱的开发者。

const data = [
  { id: 1, name: 'Alice', group: 'A' },
  { id: 2, name: 'Bob', group: 'B' },
  { id: 3, name: 'Charlie', group: 'A' },
  { id: 4, name: 'David', group: 'B' }
];

const groupedData = {};
data.forEach(item => {
  const key = item.group;
  if (!groupedData[key]) {
    groupedData[key] = [];
  }
  groupedData[key].push(item);
});

console.log(groupedData);

通过上面的代码，我们同样可以得到按照group属性分组后的数据。

方法三：使用ES6的Map对象

除了上述两种方法外，我们还可以使用ES6的Map对象对数组进行分组。

const data = [
  { id: 1, name: 'Alice', group: 'A' },
  { id: 2, name: 'Bob', group: 'B' },
  { id: 3, name: 'Charlie', group: 'A' },
  { id: 4, name: 'David', group: 'B' }
];

const groupedData = new Map();
data.forEach(item => {
  const key = item.group;
  if (!groupedData.has(key)) {
    groupedData.set(key, []);
  }
  groupedData.get(key).push(item);
});

console.log(groupedData);

上面的代码中，我们利用Map对象的特性，同样可以将数组按照group属性进行分组。