如何使用Lodash或Array Reduce方法按location属性分组指定对象数组

嘿，我来给你详细讲讲怎么实现这个按location属性分组的需求，两种实用方法都安排上——用Lodash工具库或者原生JS的Array.reduce，都能完美搞定！

先明确下我们的输入数组：

const readings = [
  { location: { lat: '21.4', lng: '23.5' }, vehicle: 'sdkhf', id:'1' },
  { location: { lat: '22.4', lng: '25.5' }, vehicle: 'sdkhf', id:'2' },
  { location: { lat: '21.4', lng: '23.5' }, vehicle: 'sdkhf', id:'3' },
  { location: { lat: '22.4', lng: '25.5' }, vehicle: 'sdkhf', id:'2' },
  { location: { lat: '28.4', lng: '21.5' }, vehicle: 'sdkhf', id:'5' },
];

我们要得到的结果是一个对象数组，每个对象包含location属性（对应分组的位置）和points数组（存储所有同位置的原数组元素）。

方法一：使用Lodash快速实现 #

Lodash的_.groupBy方法是分组的利器，但因为location是引用类型的对象，直接用它做分组键会按对象引用判断，所以我们需要先把location转成唯一的字符串（比如用JSON.stringify），再进行分组，最后转换成目标格式：

// 先确保已经引入Lodash
const _ = require('lodash');

// 1. 按location的字符串形式分组，得到键为location字符串的对象
const groupedData = _.groupBy(readings, item => JSON.stringify(item.location));

// 2. 把分组结果转换成目标格式的数组
const finalResult = Object.values(groupedData).map(group => ({
  location: group[0].location, // 同一组的location都相同，取第一个即可
  points: group
}));

console.log(finalResult);

方法二：使用原生Array.reduce实现（无需额外依赖） #

如果不想引入第三方库，用原生JS的reduce方法也能实现，思路和上面一致：先构建一个临时的分组对象，最后再转换成目标数组：

const finalResult = Object.values(
  readings.reduce((acc, currentItem) => {
    // 生成唯一的分组键：把location对象转成字符串
    const locationKey = JSON.stringify(currentItem.location);
    
    // 如果当前键还没在临时对象里，初始化一个空数组
    if (!acc[locationKey]) {
      acc[locationKey] = [];
    }
    
    // 将当前元素加入对应分组
    acc[locationKey].push(currentItem);
    
    return acc;
  }, {}) // reduce的初始值是一个空对象，用于存储分组
).map(group => ({
  location: group[0].location,
  points: group
}));

console.log(finalResult);

两种方法最终得到的结果完全一致，结构如下：

[
  {
    location: { lat: '21.4', lng: '23.5' },
    points: [
      { location: { lat: '21.4', lng: '23.5' }, vehicle: 'sdkhf', id:'1' },
      { location: { lat: '21.4', lng: '23.5' }, vehicle: 'sdkhf', id:'3' }
    ]
  },
  {
    location: { lat: '22.4', lng: '25.5' },
    points: [
      { location: { lat: '22.4', lng: '25.5' }, vehicle: 'sdkhf', id:'2' },
      { location: { lat: '22.4', lng: '25.5' }, vehicle: 'sdkhf', id:'2' }
    ]
  },
  {
    location: { lat: '28.4', lng: '21.5' },
    points: [
      { location: { lat: '28.4', lng: '21.5' }, vehicle: 'sdkhf', id:'5' }
    ]
  }
]

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