使用 lodash 对对象进行分组

Question

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' },
];

我想按位置属性对以下对象数组进行分组。

预期的结果是一个对象数组 具有位置和点（具有相同位置的对象数组）。

使用 lodash 或数组归约方法对对象数组进行分组

Answer 1

您可以使用.reduce 将readings 按location 分组，然后将生成的地图转换为位置为key 和点列表为value 的对象的array：

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' },
];

//group by location
let res = _.reduce(readings, (acc,item) => {
  const { location: { lat, lng } } = item;
  const key = `${lat}-${lng}`;
  const prev = acc[key];
  if(!prev) acc[key] = [item];
  else acc[key].push(item);
  return acc;
}, {});
//transform to array of objects location-points
res = _.map(_.entries(res), ([location,points]) => ({ [location]: points }));

console.log(res);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js" integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww==" crossorigin="anonymous"></script>

Answer 2

Lodash groupBy 会让你更容易，只需传递一个比较函数，例如：

import _ from "lodash";

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'
  },
]

const getLocation = ({ location }) => `${location.lat}/${location.lng}`
const objGrouped = _.groupBy(readings, getLocation)
const arrayGrouped = Object.values(objGrouped)

Answer 3

使用#array.reduce方法

虽然lodash 的其他答案看起来不错，但您可以使用.reduce() 轻松实现。

这里的关键是获取key的格式。

const key = `lat.${curr.location.lat}-lng.${curr.location.lng}`

或任何您喜欢的格式。只要它基于location.lat & location.lng 以及密钥应该是string 而不是object。

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' },
];

var result = readings.reduce((acc, curr) => {
    const key = `lat.${curr.location.lat}-lng.${curr.location.lng}`
    acc[key] ??= {[key]: []};
    acc[key][key].push(curr);

    return acc;
  }, {})

console.log(Object.values(result));

Answer 4

_.groupBy() 函数接受定义分组依据的键的回调。您可以使用模板字符串连接lat 和lng，并将其用作键。

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"}];

const result = _.groupBy(readings, ({ location: { lat, lng} }) => `${lat}-${lng}`);

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js" integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww==" crossorigin="anonymous"></script>