按名字首字符分组JSON，需返回Key和Data结构（Lodash实现遇阻）

嘿，我来帮你搞定这个分组问题！看起来你用Lodash的时候已经完成了核心分组，但离预期的Key+Data结构还差一步转换，咱们一步步来调整～

问题回顾 #

你需要将JSON格式的UserData按用户名字（first name）的首字符分组，最终的分组结果每个项都要包含Key（首字符）和Data（对应组的用户数据数组）两个属性，但目前的实现只得到了部分结果。

示例UserData #

[
  {
    "gender":"male",
    "name":{
      "title":"mr",
      "first":"landon",
      "last":"gonzalez"
    },
    "location":{
      "street":"7927 bollinger rd",
      "city":"san diego"
    }
  },
  {
    "gender":"female",
    "name":{
      "title":"ms",
      "first":"ava",
      "last":"wright"
    },
    "location":{
      "street":"123 main st",
      "city":"new york"
    }
  },
  {
    "gender":"male",
    "name":{
      "title":"mr",
      "first":"liam",
      "last":"thompson"
    },
    "location":{
      "street":"456 oak ave",
      "city":"chicago"
    }
  }
]

预期结果 #

[
  {
    "Key": "A",
    "Data": [
      {
        "gender":"female",
        "name":{
          "title":"ms",
          "first":"ava",
          "last":"wright"
        },
        "location":{
          "street":"123 main st",
          "city":"new york"
        }
      }
    ]
  },
  {
    "Key": "L",
    "Data": [
      {
        "gender":"male",
        "name":{
          "title":"mr",
          "first":"landon",
          "last":"gonzalez"
        },
        "location":{
          "street":"7927 bollinger rd",
          "city":"san diego"
        }
      },
      {
        "gender":"male",
        "name":{
          "title":"mr",
          "first":"liam",
          "last":"thompson"
        },
        "location":{
          "street":"456 oak ave",
          "city":"chicago"
        }
      }
    ]
  }
]

你当前的Lodash代码 #

const grouped = _.groupBy(userData, user => user.name.first.charAt(0).toUpperCase());

问题分析 #

_.groupBy确实能帮你按首字符完成分组，但它返回的是一个以首字符为键、用户数组为值的对象，而不是你需要的Key/Data结构的数组。所以咱们需要在分组后多做一步转换。

修正后的实现 #

// 先分组，再将对象转换为目标数组结构
const groupedResult = _.map(
  _.groupBy(userData, user => user.name.first.charAt(0).toUpperCase()),
  (data, key) => ({ Key: key, Data: data })
);

代码解释 #

1. _.groupBy：负责核心的分组逻辑，按用户first name的首字符（转成大写）分组，得到键值对对象
2. _.map：遍历这个分组对象的每一项，把键（首字符）赋值给Key，对应的用户数组赋值给Data，最终输出你需要的数组结构

可选：按首字符排序 #

如果需要让分组结果按A-Z的顺序排列，可以再加一层_.sortBy：

const groupedResult = _.sortBy(
  _.map(
    _.groupBy(userData, user => user.name.first.charAt(0).toUpperCase()),
    (data, key) => ({ Key: key, Data: data })
  ),
  'Key'
);

这样就能得到完全符合你预期的分组结果啦！

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