如何使用Lodash对ReactJS中的特定格式对象进行分组？

嘿，这个需求其实很好实现，用JavaScript原生的数组和对象方法就能搞定，完全不用依赖额外库～

首先先确认下你提供的原始对象格式，应该是键用引号包裹的标准JSON格式对吧？我先把它修正成可运行的版本：

const rawContactData = {
  "autumn=firstContactPersonName": "John",
  "autumn=firstContactPersonPhone": "46442644",
  "autumn=secondContactPersonName": "Jhonny",
  "autumn=secondContactPersonPhone": "46442644",
  "christmas=firstContactPersonName": "Tommy",
  "christmas=firstContactPersonPhone": "46442644",
  "christmas=secondContactPersonPhone": "Thomas",
  "winter=firstContactPersonPhone": "46442644",
  "winter=firstContactPersonName": "Peter",
  "winter=secondContactPersonName": "Tom",
  "winter=secondContactPersonPhone": "44664455"
};

接下来核心思路就是遍历对象的所有键，拆分出前缀（autumn/christmas/winter）和实际字段名，然后把键值对归类到对应的分组里，具体实现用Object.entries()和reduce()组合起来就很顺畅：

const groupedContacts = Object.entries(rawContactData).reduce((result, [key, value]) => {
  // 拆分键的前缀和字段名，用split('=', 2)确保只拆分第一个=，避免键里有多个=的情况
  const [groupName, fieldName] = key.split('=', 2);
  
  // 如果当前分组还没创建，先初始化一个空对象
  if (!result[groupName]) {
    result[groupName] = {};
  }
  
  // 把当前字段和值添加到对应分组中
  result[groupName][fieldName] = value;
  
  return result;
}, {});

执行完这段代码后，groupedContacts的结构就会变成你想要的样子：

{
  autumn: {
    firstContactPersonName: "John",
    firstContactPersonPhone: "46442644",
    secondContactPersonName: "Jhonny",
    secondContactPersonPhone: "46442644"
  },
  christmas: {
    firstContactPersonName: "Tommy",
    firstContactPersonPhone: "46442644",
    secondContactPersonPhone: "Thomas"
  },
  winter: {
    firstContactPersonPhone: "46442644",
    firstContactPersonName: "Peter",
    secondContactPersonName: "Tom",
    secondContactPersonPhone: "44664455"
  }
}

小细节优化 #

我用了split('=', 2)而不是单纯的split('=')，这是为了兼容极端情况——如果你的键里不小心出现了多个=（比如autumn=contact=name），这样只会拆分第一个=，保证分组名和字段名的正确性，让代码更健壮。

在React组件里你可以直接把这个逻辑封装成一个函数，或者在useEffect、状态更新的时候调用，完全适配React的使用场景～

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