【前端js】基于某个特定属性创建嵌套数组

参考下面的代码，想要根据对象的group属性，将下面的数组进行重组，组成group相同的对象放在一个数组的嵌套新数组

const arr = [
  { name: 'Alice', age: 25, group: 'A' },
  { name: 'Bob', age: 30, group: 'B' },
  { name: 'Charlie', age: 35, group: 'A' },
  { name: 'Dave', age: 40, group: 'C' },
  { name: 'Eve', age: 45, group: 'B' },
];

const nestedArr = Object.values(arr.reduce((acc, curr) => {
  // acc是上次调用函数的返回值
  // 会保留上次调用函数进行操作后的值
  // acc初始值是空对象
  // curr是当前元素
  const group = curr.group;
  if (!acc[group]) {
    acc[group] = [];
  }
  // acc[group] 相当于以group作为键 该键对应的值是数组（在上一步就初始化为数组）
  // 相同的group被添加到相同键下面的值
  acc[group].push(curr);
  return acc;
}, {}));

console.log(nestedArr);

在上面的代码中，使用了reduce方法对数组进行迭代，对于数组中的每个对象，检查group属性是否已经作为关键字存在于acc对象中。如果没有，为该组创建一个新的空数组。Object.values则将嵌套数组的索引变为数字。

上面代码生成的结果为

[
    [
        {
            "name": "Alice",
            "age": 25,
            "group": "A"
        },
        {
            "name": "Charlie",
            "age": 35,
            "group": "A"
        }
    ],
    [
        {
            "name": "Bob",
            "age": 30,
            "group": "B"
        },
        {
            "name": "Eve",
            "age": 45,
            "group": "B"
        }
    ],
    [
        {
            "name": "Dave",
            "age": 40,
            "group": "C"
        }
    ]
]

关于数组的reduce方法，这个方法和迭代方法（map,forEach,filter…）一样，都会对数组进行遍历。reduce与他们不同的是函数的第一个参数得到的是迭代计算后的效果
语法：array.reduce(function(prev, currentValue, currentIndex, arr), initValue)

参数介绍
prev：上次调用函数的返回值
currentValue：当前元素
currentIndex：当前元素索引
arr：被遍历的数组

Object.values()
语法: Object.values(obj)
参数：obj 是 被返回可枚举属性值的对象。
Object.values()返回一个数组，返回的数组的内容是传入的对象中 所有键的值，跟对象的keys方法刚好是相对的，因为对象内部的元素是以键值对的形式存在的，所以很好理解。从方法名称的释义也可以大概的知道，英文单词 key有 键 的意思，单词 value 有值、价值的意思，所以方法的作用显而易见。
看下面的例子：

var obj={
    name:'张三',
    age:20,
    gender:'男'
}

var arr=Object.values(obj);
console.log(arr);  // ['张三', 20, '男']

结合上面的例子

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

返回的结果是

{
    "A": [
        {
            "name": "Alice",
            "age": 25,
            "group": "A"
        },
        {
            "name": "Charlie",
            "age": 35,
            "group": "A"
        }
    ],
    "B": [
        {
            "name": "Bob",
            "age": 30,
            "group": "B"
        },
        {
            "name": "Eve",
            "age": 45,
            "group": "B"
        }
    ],
    "C": [
        {
            "name": "Dave",
            "age": 40,
            "group": "C"
        }
    ]
}

再通过Object.values()来将键值对对应的值取出，组成新数组

[
    [
        {
            "name": "Alice",
            "age": 25,
            "group": "A"
        },
        {
            "name": "Charlie",
            "age": 35,
            "group": "A"
        }
    ],
    [
        {
            "name": "Bob",
            "age": 30,
            "group": "B"
        },
        {
            "name": "Eve",
            "age": 45,
            "group": "B"
        }
    ],
    [
        {
            "name": "Dave",
            "age": 40,
            "group": "C"
        }
    ]
]