使用对象道具（名称）对js对象进行排序答案

【问题标题】：Sorting js object by using objects props (name)使用对象道具（名称）对js对象进行排序
【发布时间】：2021-05-17 17:51:02
【问题描述】：

我需要你帮助我进行培训。我尝试通过利用外部公共 API 来学习 Js 和 Ts。当我获取数据并正确显示它们时，我现在想添加排序功能。为此，我需要首先按名称对对象进行排序。我阅读了 array.sort() 函数按默认字符串排序。这是我的起点。

但我的问题是，我不知道在我的情况下如何使用排序功能。也许我的数组元素是对象或其他东西，但我不知道。我需要你的帮助，让我弄清楚我可以做些什么来使用这个功能。

上面的代码是我如何创建和获取我的数组

import ListItem from "../ListItem/ListItem";
import { Pokemon } from "../../interfaces/flower";

type Props = {
  items: Flower;
};
const List = ({ items }: any) => {
  return (
    <>
      {items.map((item, index) => {
        return (
          <>
            <ListItem key={index} data={item}></ListItem>
          </>
        );
      })}
    </>
  );
};

export default PokemonList;

以下是花的详细信息

import {FlowerDetail} from "./flowerDetail";
export type FLower = {
  name: string,
  url: string,
  FLowerDetail: FLowerDetail[]
}

PS：对不起我的英语，不是我的母语，还在学习XD

【问题讨论】：

在 items.sort((a, b) => a.name.localeCompare(b.name)).map 之间添加排序，但最好先排序然后显示数组，而不是显示时排序。所以最好在收到数据时对其进行排序，然后将其传递给 UI 进行渲染

标签： javascript reactjs typescript next.js

【解决方案1】：

您需要包含一个排序回调函数。此函数有 2 个参数，分别称为 a 和 b。这个回调函数可以使用 string::localeCompare

  items.sort((a, b) => a.name.localeCompare(b.name)).map(...)

【讨论】：

感谢您的帮助

【解决方案2】：

最好在 js 部分对列表进行排序，然后您收到数据，然后将其传递给 UI 进行渲染。所以对于js部分数组的排序可以通过调用来完成

let orgArray = []
.....
items = orgArray.slice();
items.sort((a,b)=>{
   // Use toUpperCase() to ignore character casing
  const nameA = a.name.toUpperCase();
  const nameB = b.name.toUpperCase();

  let comparison = 0;
  if (nameA > nameB) {
    comparison = 1;
  } else if (nameA < nameB) {
    comparison = -1;
  }
  return comparison;
})

因此，原始数组不受影响，但排序不受影响，您可以再次使用它。有关排序的更多参考，请参阅link

在渲染中排序会导致不必要地盯着浏览器

【讨论】：

感谢您的帮助