JS/TS项目中如何实现对象数组按name属性排序

核心用法说明 #

Array.sort() 支持传入自定义比较函数处理对象数组排序，函数接收两个待比较的元素a、b作为参数：

• 返回负数：a排在b前面
• 返回正数：b排在a前面
• 返回0：二者顺序不变

针对字符串类型的name属性排序，更推荐用localeCompare方法，相比直接比较字符串大小，它天然支持多语言、特殊字符的排序规则，适配性更强。
注意：sort是原地排序方法，会直接修改原数组，建议先浅拷贝数组再排序，避免修改原始数据引发副作用

你的代码调整方案 #

首先先修正现有代码的几处小问题：

• 类型定义里的FLower（F、L均大写）和组件里用的Flower拼写不一致
• 组件接收的items是数组类型，Props定义里写的是单个Flower类型
• 导入的Pokemon未使用，组件定义名和导出名不统一

调整后的完整代码 #

import ListItem from "../ListItem/ListItem";
import { FLower } from "../../interfaces/flower"; // 统一导入正确拼写的类型

type Props = {
  items: FLower[]; // 修正为数组类型
};

const PokemonList = ({ items }: Props) => {
  // 先拷贝数组再按name升序排序，避免修改原数组
  const sortedItems = [...items].sort((a, b) => {
    // 不需要不区分大小写排序可以去掉.toLowerCase()
    return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
  });

  // 如果要做降序，就改成下面的写法
  // const sortedItems = [...items].sort((a, b) => b.name.localeCompare(a.name));

  return (
    <>
      {sortedItems.map((item) => {
        // 尽量不用index做key，用唯一的name或者url更稳妥
        return <ListItem key={item.url} data={item}></ListItem>;
      })}
    </>
  );
};

export default PokemonList;

可选扩展：切换升降序 #

如果需要支持升降序切换，可以加一个状态控制排序逻辑：

import { useState } from "react";
// ...其他导入、Props定义不变

const PokemonList = ({ items }: Props) => {
  const [isAsc, setIsAsc] = useState(true); // true为升序，false为降序

  const sortedItems = [...items].sort((a, b) => {
    const compareResult = a.name.localeCompare(b.name);
    return isAsc ? compareResult : -compareResult;
  });

  return (
    <>
      <button onClick={() => setIsAsc(!isAsc)}>
        按名称{isAsc ? "降序" : "升序"}
      </button>
      {sortedItems.map((item) => (
        <ListItem key={item.url} data={item} />
      ))}
    </>
  );
};

内容的提问来源于stack exchange，提问作者Mohamed Ouedraogo