javascript - 在 JS 中的数组中将数组中的相同值分组

Question

如何将数组中的相同数字分组到一个数组中？

我有以下数字数组:

var arr = [1,1,1,1,2,2,3,3,3,4,5,5,6];

我的输出应该是

[[1,1,1,1],[2,2],[3,3,3],4,[5,5],6]

Answer 1

我最近遇到了这个问题。提供的答案效果很好，但我想要一种更简单的方法，而不必从 lodash 或下划线导入。这是 tl;dr(太久没读):

  const groupedObj = arr.reduce(
    (prev, current) => ({
      ...prev,
      [current]: [...(prev[current] || []), current],
    }),
    {}
  );

const groupedObjToArr = Object.values(groupedObj);

说明

我们要创建一个对象，其中每个唯一 数字是对象中的属性或键，它的值是所有相同数字的数组。对于提供的数组:

const arr = [1,1,1,1,2,2,3,3,3,4,5,5,6];

我们的对象应该是:

{ 
    1: [1,1,1,1],
    2: [2,2],
    3: [3,3,3],
    4: [4],
    5: [5,5],
    6: [6]
}

为此，我们将减少提供的数组(可以通过搜索数组 reduce 在 MDN 上找到有关 .reduce 方法的文档)。

arr.reduce((previous, current, idx, array) => {}, {});

Reduce 快速分解

Reduce 是 Array 上的一种方法，它接受两个参数:回调 和初始值。 Reduce 为我们的回调提供了四个参数:previous 项目，它在开始时与我们的初始值相同，所以在这种情况下 previous 是 {} 在 reduce 的第一次迭代中； current 是我们在迭代中使用的数组中的值； index为当前元素的索引；并且，array 是原始数组的浅拷贝。出于我们的目的，我们不需要索引或数组参数。

当我们遍历数组时，我们希望将数字或元素设置为对象中的键:

arr.reduce((previous, current) => {
    return {...prev, [current]: []};
}, {});

这是前几次迭代的样子:

// 1 (first element of arr)
// returns {...{}, [1]: []} => {1: []}

// 1 (second element of arr)
// returns {...{ 1: [] }, [1]: []} => {1: []}  we have a duplicate key so the previous is overwritten

// 1 (third element of arr)
// returns {...{ 1: [] }, [1]: []} => {1: []}  same thing here, we have a duplicate key so the previous is overwritten

// ...

// 2 (fifth element of arr)
// returns {...{ 1: [] }, [2]: []} => {1: [], 2: []}  2 is a unique key so we add it to our object

我们有一个对象，其中包含与数组中所有数字匹配的所有唯一键。下一步是用与该键匹配的所有元素填充每个“子数组”。

arr.reduce((previous, current) => {
    return {...prev, [current]: [current]}; // n.b. [current]: allows us to use the value of a variable as a key in an obj where the right side [current] is an array with an element current
}, {});

这没有完成我们需要的，因为以前的子将在每次迭代时被覆盖而不是附加到。这个简单的修改修复了:

arr.reduce((previous, current) => {
    return {...prev, [current]: [...prev[current], current]};
}, {});

prev[current] 返回与匹配当前项的键关联的数组。使用 ... 扩展数组允许我们将当前项附加到现有数组。

// 1 (second element of arr)
// returns {...{ 1: [1] }, [1]: [...[1], 1]} => {1: [1, 1]}  
// 1 (third element of arr)
// returns {...{ 1: [1, 1] }, [1]: [...[1, 1], 1]} => {1: [1, 1, 1]}

// ...

// 2 (fifth element of arr)
// returns {...{ 1: [1,1,1,1] }, [2]: [...[], 2]} => {1: [1,1,1,1], 2: [2]}

我们很快就会发现问题。我们无法为 undefined 的 current 编制索引。换句话说，当我们最初启动时，我们的对象是空的(记住我们的 reduce 的初始值为 {})。我们要做的是为这种情况创建一个回退，只需添加 || 即可完成[] 意思还是一个空数组:

// let's assign the return of our reduce (our object) to a variable
const groupedObj = arr.reduce((prev, current) => {
    return {...prev, [current]: [...prev[current] || [], current]};
}, {});

最后，我们可以使用 Object 类型的 values 方法将此对象转换为数组:Object.values(groupedObj) .

断言

这是一个快速的小断言测试(不全面):

const arr = [1,1,1,1,2,2,3,3,3,4,5,5,6];
  const groupedObj = arr.reduce(
    (prev, current) => ({
      ...prev,
      [current]: [...(prev[current] || []), current],
    }),
    {}
  );

const groupedObjToArr = Object.values(groupedObj);

const flattenGroup = groupedObjToArr.flat(); // takes sub arrays and flattens them into the "parent" array [1, [2, 3], 4, [5, 6]] => [1, 2, 3, 4, 5, 6]
const isSameLength = arr.length === flattenGroup.length;
const hasSameElements = arr.every((x) => flattenGroup.includes(x)); // is every element in arr in our flattened array
const assertion = isSameLength && hasSameElements;

console.log(assertion); //should be true