如何不使用lodash用JavaScript对对象数组分组并转换为指定结构

实现代码 #

你可以直接使用Array.reduce结合Object.values完成需求，无需引入任何第三方库：

let fruits = [
  { id: 1, expired_date: "2021-11-30", name: "mango" },
  { id: 2, expired_date: "2021-11-20", name: "kiwi" },
  { id: 3, expired_date: "2021-11-20", name: "orange" },
  { id: 4, expired_date: "2021-11-10", name: "banana" },
  { id: 5, expired_date: "2021-11-10", name: "apple" }
]

const groupKey = 'expired_date'
const result = Object.values(fruits.reduce((temp, item) => {
  const curValue = item[groupKey]
  // 不存在对应分组时先初始化
  if (!temp[curValue]) {
    temp[curValue] = {
      [groupKey]: curValue,
      rows: []
    }
  }
  // 当前项加入对应分组
  temp[curValue].rows.push(item)
  return temp
}, {}))

执行后result变量就是你需要的目标结构。

通用封装 #

你也可以把逻辑封装为通用分组函数，支持任意数组、任意分组字段使用：

/**
 * 对象数组按指定字段分组
 * @param {Array} array 原始对象数组
 * @param {String} groupKey 用于分组的字段名
 * @returns {Array} 分组后的数组
 */
function groupArrayByKey(array, groupKey) {
  return Object.values(array.reduce((temp, item) => {
    const curValue = item[groupKey]
    if (!temp[curValue]) {
      temp[curValue] = {
        [groupKey]: curValue,
        rows: []
      }
    }
    temp[curValue].rows.push(item)
    return temp
  }, {}))
}

// 调用示例
const groupedFruits = groupArrayByKey(fruits, 'expired_date')

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