使用 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 或數組 reduce 方法對對象數組進行分組

Answer 1

您可以使用.reduce按location對readings進行分組，然后將生成的 map 轉換為以位置為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 會讓你更容易，通過一個比較 function 就可以了，例如：

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 的其他答案看起來不錯，但您可以使用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() function 接受定義分組依據的鍵的回調。 您可以使用模板字符串連接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>