如何从单个JavaScript数组拆分出相同元素分组的子数组

嘿，我来帮你搞定这个需求！把包含重复元素的数组按相同项拆分成子数组，其实有几种实用又简洁的实现方式，下面给你分享最常用的两种：

方法一：使用Array.reduce()（推荐，ES6+） #

这是现代JavaScript里最优雅的分组方案，用reduce方法就能一步完成分组逻辑：

var temp = ['3_2', '3_2', '3_2', '4_2', '4_2', '5_2', '5_2'];

// 第一步：将原数组按元素值分组，得到键值对格式的分组对象
const grouped = temp.reduce((acc, current) => {
  // 如果当前元素对应的分组数组不存在，先初始化一个空数组
  if (!acc[current]) {
    acc[current] = [];
  }
  // 把当前元素推入对应的分组数组
  acc[current].push(current);
  return acc;
}, {});

// 第二步：提取分组对象里的子数组，解构赋值到你需要的变量中
const [temp1, temp2, temp3] = Object.values(grouped);

console.log(temp1); // ['3_2', '3_2', '3_2']
console.log(temp2); // ['4_2', '4_2']
console.log(temp3); // ['5_2', '5_2']

简单解释下：reduce会遍历原数组的每一个元素，把相同值的元素归集到同一个子数组里，最终得到一个以元素值为键、对应子数组为值的对象。再用Object.values()把对象中的子数组提取出来，就能直接解构赋值给temp1、temp2这类变量了。

方法二：传统循环方式（兼容旧环境） #

如果需要兼容ES6之前的老环境，可以用普通for循环来实现：

var temp = ['3_2', '3_2', '3_2', '4_2', '4_2', '5_2', '5_2'];
var grouped = {};

// 遍历原数组完成分组
for (var i = 0; i < temp.length; i++) {
  var item = temp[i];
  if (!grouped[item]) {
    grouped[item] = [];
  }
  grouped[item].push(item);
}

// 提取子数组并赋值到目标变量
var tempArr = Object.values(grouped);
var temp1 = tempArr[0];
var temp2 = tempArr[1];
var temp3 = tempArr[2];

console.log(temp1); // ['3_2', '3_2', '3_2']

小建议 #

其实不太推荐手动生成temp1、temp2这类固定命名的变量——如果原数组的重复项变多，你就得手动添加更多变量。更灵活的方式是直接使用Object.values(grouped)返回的数组，通过索引访问各个分组（比如groupedArr[0]、groupedArr[1]），这样不管有多少分组都能轻松处理~

内容的提问来源于stack exchange，提问作者Santhosh