如何在 React 中对对象中的“类别”数据进行排序答案

【问题标题】：How to sort "category" data from object in React如何在 React 中对对象中的“类别”数据进行排序
【发布时间】：2019-04-10 01:23:42
【问题描述】：

我是新来的，所以我希望我能正确地为你做每一件事。

我有这样的对象：

this.state = {
      commandersArray: {
        1: {
          name: "Horattio",
          amountOfPlanets: "120",
          rank: "Field-Marshal",
          equipment: "Strong",
          army: "190 123 122"
        },
        2: {
          name: "Tento",
          amountOfPlanets: "69",
          rank: "General",
          equipment: "Medium",
          army: "40 123 912"
        },

有军衔：军衔内部有一些军衔值。我按字母顺序对名称进行了排序，然后对 amountofPlanets asc 和 desc 进行了排序。很好，但是现在我想按照我个人的意愿进行排序，这意味着，当我单击某个按钮进行 RANK 排序时，我希望拥有 1）位置元帅，2）将军 3）队长 4 )...

我知道我需要以某种方式分配新值，例如 marshal === 1、general === 2。我有想法，但我不知道从哪里开始，它看起来像一个糟糕的解决方案，为对象中的每个项目添加一些其他值。

感谢您的建议，如果您还有任何问题或我做错了什么，我错过了一些信息等，请告诉我。

我试图检查相关问题，但对我没有任何帮助。感谢您的帮助。

【问题讨论】：

欢迎来到 Stack Overflow Nejtn！ commandersArray 是一个对象，而不是一个数组。你确定不希望它变成一个数组吗？
@Tholle 什么是最好的好处，当然我应该重命名以便更好地将“commandersArray”命名为“commandersObject”，但我为什么要将我的对象更改为数组？
拥有一个键只是数字索引的对象表明数组将是更好的数据结构。然后你可以排序，删除某个元素，所有其他索引仍然是正确的，等等。

标签： javascript reactjs sorting object

【解决方案1】：

您可以将排名按照您希望的顺序放入一个数组中，然后在进行排序时检查该数组中的对象rank 索引。

示例

const state = {
  commandersObject: {
    0: {
      name: "Foo",
      amountOfPlanets: "12",
      rank: "Captain",
      equipment: "Weak",
      army: "123 456 789"
    },
    1: {
      name: "Horattio",
      amountOfPlanets: "120",
      rank: "Field-Marshal",
      equipment: "Strong",
      army: "190 123 122"
    },
    2: {
      name: "Tento",
      amountOfPlanets: "69",
      rank: "General",
      equipment: "Medium",
      army: "40 123 912"
    }
  }
};
const rankOrder = ["Field-Marshal", "General", "Captain"];
const commandersArray = Object.keys(state.commandersObject)
  .map(key => state.commandersObject[key]);
  
commandersArray.sort((a, b) =>
  rankOrder.indexOf(a.rank) - rankOrder.indexOf(b.rank)
);

console.log(commandersArray);

【讨论】：

你就不能const commandersArray = Object.values(state.commandersObject);吗？
@PatrickRoberts 是的，你是对的，但我倾向于不在我的答案中使用它，因为它不支持 IE。
使用shim。

【解决方案2】：

尝试获取对象并使其等于您的新值！您将从中进行比较。

commandersArray.2.rank === "General"

试试类似的东西！

试试冒泡、选择或插入排序算法！

【讨论】：