如何使用JavaScript或Lodash对对象数组按locationCode分组并合并属性

没问题，我来帮你搞定这个分组合并的需求，下面分别用原生JavaScript和Lodash两种方式实现，顺便拆解每一步的逻辑~

一、原生JavaScript实现 #

思路 #

核心用**Array.reduce()**方法来遍历数组，借助一个临时对象存储分组结果：

1. 以locationCode作为临时对象的键，对应值是合并后的目标对象
2. 遍历每个元素时，判断当前locationCode是否已经在临时对象中存在：
   • 存在：把当前元素的属性合并到已有的对象中
   • 不存在：直接把当前元素作为新条目加入临时对象
3. 最后把临时对象的所有值提取出来，转成目标数组

代码实现 #

const originalData = [
  { locationCode: 'GMP', Qr: 46 },
  { locationCode: 'CMT', Qr: 35 },
  { locationCode: 'GMP', Cash: 29 },
  { locationCode: 'CMT', Cash: 26 },
  { locationCode: 'CMS', Qr: 22 },
  { locationCode: 'CMT', Voucher: 6 },
  { locationCode: 'CMS', Cash: 2 }
];

const groupedResult = originalData.reduce((acc, current) => {
  // 解构出locationCode和剩余属性
  const { locationCode, ...rest } = current;
  // 如果分组已存在，合并属性；不存在则创建新分组
  if (acc[locationCode]) {
    Object.assign(acc[locationCode], rest);
  } else {
    acc[locationCode] = { ...current };
  }
  return acc;
}, {});

// 把临时对象的值转为数组，得到最终结果
const finalResult = Object.values(groupedResult);
console.log(finalResult);

代码解释 #

• reduce的初始值{}是我们用来存分组的临时对象
• 每次遍历用解构语法分离locationCode和其他属性，方便后续合并
• Object.assign()或者展开运算符{...}都可以用来合并对象属性：新建分组时用展开运算符拷贝当前对象，避免原数组被修改；合并属性时用Object.assign直接修改已有对象
• Object.values()把临时对象的所有值（也就是合并后的对象）提取出来，转成数组就是我们要的结果

二、Lodash实现 #

如果你项目里已经引入了Lodash，用它的工具函数可以更简洁地完成需求：

思路 #

1. 用**_.groupBy()**把原数组按locationCode分组，得到一个以locationCode为键、对应数组为值的对象
2. 用**.map()遍历每个分组，再用.merge()**把分组内的所有对象合并成一个

代码实现 #

const _ = require('lodash');

const originalData = [
  { locationCode: 'GMP', Qr: 46 },
  { locationCode: 'CMT', Qr: 35 },
  { locationCode: 'GMP', Cash: 29 },
  { locationCode: 'CMT', Cash: 26 },
  { locationCode: 'CMS', Qr: 22 },
  { locationCode: 'CMT', Voucher: 6 },
  { locationCode: 'CMS', Cash: 2 }
];

const finalResult = _.map(_.groupBy(originalData, 'locationCode'), group => 
  _.merge({}, ...group)
);

console.log(finalResult);

代码解释 #

• _.groupBy(originalData, 'locationCode')会把原数组按locationCode分组，比如得到{ GMP: [{}, {}], CMT: [{}, {}, {}], ... }这样的结构
• _.map()遍历这个分组对象的每个值（也就是每个分组的数组）
• _.merge({}, ...group)把分组里的所有对象合并到一个空对象中，...group是展开分组数组的所有元素，_.merge会自动处理属性合并，这里因为同一分组里的属性不重复，所以直接合并即可

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