使用 lodash 在 JavaScript 中对多行数据进行排序答案

【问题标题】：Sorting multiple rows of data in JavaScript with lodash使用 lodash 在 JavaScript 中对多行数据进行排序
【发布时间】：2019-02-09 09:05:18
【问题描述】：

我有一些数据希望整理到表格中。数据由行数组组成，行数组依次是单元格数组，这些单元格是具有属性column_name、column_value、column_type 和column_id 的对象（如下所示）。

我想按多列对数据进行排序，例如我想按city 升序排序，然后按age 降序排序。我相信lodash's _.orberBy() 可以做到这一点，但我不知道如何在这样的嵌套数据上实现它。

虽然我怀疑 lodash 会完成这项工作，但我怀疑可能还有另一种更好的方法。

我将如何按不同的列对以下嵌套数据进行排序？

import _ from 'lodash';

const sampleData = [
  [
    {
      column_name: 'id',
      column_value: '12345',
      column_type: 'string',
      column_id: 'item_attributes#id',
    },
    {
      column_name: 'age',
      column_value: '32',
      column_type: 'number',
      column_id: 'item_attributes#age',
    },
    {
      column_name: 'city',
      column_value: 'London',
      column_type: 'string',
      column_id: 'item_attributes#city',
    },
  ],
  [
    {
      column_name: 'id',
      column_value: 'abcde',
      column_type: 'string',
      column_id: 'item_attributes#id',
    },
    {
      column_name: 'age',
      column_value: '52',
      column_type: 'number',
      column_id: 'item_attributes#age',
    },
    {
      column_name: 'city',
      column_value: 'Bristol',
      column_type: 'string',
      column_id: 'item_attributes#city',
    },
  ],
  [
    {
      column_name: 'id',
      column_value: 'a1b2d',
      column_type: 'string',
      column_id: 'item_attributes#id',
    },
    {
      column_name: 'age',
      column_value: '21',
      column_type: 'number',
      column_id: 'item_attributes#age',
    },
    {
      column_name: 'city',
      column_value: 'London',
      column_type: 'string',
      column_id: 'item_attributes#city',
    },
  ],
];

const orderedData = _.orderBy(
  sampleData,
  // ?? what goes here?
  // ?? what goes here?
);

// desired output
// [
//   [
//     {
//       column_name: 'id',
//       column_value: 'abcde',
//       column_type: 'string',
//       column_id: 'item_attributes#id',
//     },
//     {
//       column_name: 'age',
//       column_value: '52',
//       column_type: 'number',
//       column_id: 'item_attributes#age',
//     },
//     {
//       column_name: 'city',
//       column_value: 'Bristol',
//       column_type: 'string',
//       column_id: 'item_attributes#city',
//     },
//   ],
//   [
//     {
//       column_name: 'id',
//       column_value: '12345',
//       column_type: 'string',
//       column_id: 'item_attributes#id',
//     },
//     {
//       column_name: 'age',
//       column_value: '32',
//       column_type: 'number',
//       column_id: 'item_attributes#age',
//     },
//     {
//       column_name: 'city',
//       column_value: 'London',
//       column_type: 'string',
//       column_id: 'item_attributes#city',
//     },
//   ],
//   [
//     {
//       column_name: 'id',
//       column_value: 'a1b2d',
//       column_type: 'string',
//       column_id: 'item_attributes#id',
//     },
//     {
//       column_name: 'age',
//       column_value: '21',
//       column_type: 'number',
//       column_id: 'item_attributes#age',
//     },
//     {
//       column_name: 'city',
//       column_value: 'London',
//       column_type: 'string',
//       column_id: 'item_attributes#city',
//     },
//   ],
// ]

【问题讨论】：

标签： javascript arrays functional-programming lodash

【解决方案1】：

我认为这应该可以满足您的需求。在尝试使用 lodash 进行排序之前，将每一行转换为更令人愉悦的对象是最简单的，但我们可以将其作为 lodash 的 orderBy 函数的一部分：

const sampleData = [
  [
    {
      column_name: 'id',
      column_value: '12345',
      column_type: 'string',
      column_id: 'item_attributes#id',
    },
    {
      column_name: 'age',
      column_value: '32',
      column_type: 'number',
      column_id: 'item_attributes#age',
    },
    {
      column_name: 'city',
      column_value: 'London',
      column_type: 'string',
      column_id: 'item_attributes#city',
    },
  ],
  [
    {
      column_name: 'id',
      column_value: 'abcde',
      column_type: 'string',
      column_id: 'item_attributes#id',
    },
    {
      column_name: 'age',
      column_value: '52',
      column_type: 'number',
      column_id: 'item_attributes#age',
    },
    {
      column_name: 'city',
      column_value: 'Bristol',
      column_type: 'string',
      column_id: 'item_attributes#city',
    },
  ],
  [
    {
      column_name: 'id',
      column_value: 'a1b2d',
      column_type: 'string',
      column_id: 'item_attributes#id',
    },
    {
      column_name: 'age',
      column_value: '21',
      column_type: 'number',
      column_id: 'item_attributes#age',
    },
    {
      column_name: 'city',
      column_value: 'London',
      column_type: 'string',
      column_id: 'item_attributes#city',
    },
  ],
];

const rowToNiceObject = row => row.reduce((prev, curr) => {
  const thisKey = curr['column_name'];
  const thisValue = curr['column_value'];
  
  const newObject = {};
  newObject[thisKey] = thisValue;
  
  return Object.assign(prev, newObject);
}, {});

const result = _.orderBy(sampleData, [
  row => rowToNiceObject(row).city,
  row => rowToNiceObject(row).age
], [
  'asc',
  'desc'
]);

console.dir(result);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

我个人认为您应该稍微映射一下您的数据结构以更好地适应 javascript 操作，例如{ id: '12345', age: 32, city: 'London'}。这些值可以保存类型。

但是，使用您当前的数据结构，您可以像这样进行排序：

const orderedData = _.orderBy(
  sampleData,
  entry => entry.find(valueObj => valueObj.column_name==='age').column_value
);

此示例使用您的 'age' 属性。它的工作原理是在您的对象集合数组中查找条目，获取描述年龄的名称，然后根据该 column_value 进行比较。

用'city' 或'id' 替换它可以正常工作。

【讨论】：