Typescript关于sort需要注意的地方

TypeScript(继承自 JavaScript)数组 sort() 方法的默认排序规则是:‌将所有元素转换为字符串,然后按 UTF-16 码元值(Unicode Code Point)升序排列‌。‌‌

这意味着:

  • ‌非数值排序 ‌:数字会被先转为字符串再比较。例如 [10, 2].sort() 结果是 [10, 2],因为字符串 "10" 的首字符 "1" 小于 "2"。
  • ‌区分大小写 ‌:大写字母的 Unicode 值小于小写字母,因此 "Z" 会排在 "a" 前面。
  • ‌原地修改‌:该方法会直接改变原数组,并返回该数组的引用。

若需按数值大小或其他逻辑排序,必须传入‌比较函数 ‌,例如数字升序使用 (a, b) => a - b。‌‌

TypeScript 的 sort() 本质上和 JavaScript 一样,用于原地排序数组。

1. 数字排序

升序

bash 复制代码
const nums = [5, 2, 8, 1, 9];

nums.sort((a, b) => a - b);

console.log(nums);
// [1, 2, 5, 8, 9]

降序

bash 复制代码
const nums = [5, 2, 8, 1, 9];

nums.sort((a, b) => b - a);

console.log(nums);
// [9, 8, 5, 2, 1]

2. 字符串排序

字母升序

bash 复制代码
const names = ["Tom", "Alice", "Bob"];

names.sort();

console.log(names);
// ["Alice", "Bob", "Tom"]

忽略大小写

bash 复制代码
const names = ["tom", "Alice", "bob"];

names.sort((a, b) =>
  a.toLowerCase().localeCompare(b.toLowerCase())
);

console.log(names);
// ["Alice", "bob", "tom"]

3. 对象数组排序

假设:

bash 复制代码
interface User {
  name: string;
  age: number;
}

const users: User[] = [
  { name: "Tom", age: 25 },
  { name: "Alice", age: 18 },
  { name: "Bob", age: 30 },
];

按年龄升序

bash 复制代码
users.sort((a, b) => a.age - b.age);

结果:

bash 复制代码
[
  { name: "Alice", age: 18 },
  { name: "Tom", age: 25 },
  { name: "Bob", age: 30 },
]

按年龄降序

bash 复制代码
users.sort((a, b) => b.age - a.age);

按名字排序

bash 复制代码
users.sort((a, b) =>
  a.name.localeCompare(b.name)
);

4. 多字段排序

先按年龄,再按名字:

bash 复制代码
users.sort((a, b) => {
  if (a.age !== b.age) {
    return a.age - b.age;
  }

  return a.name.localeCompare(b.name);
});

例如:

bash 复制代码
[
  { name: "Tom", age: 20 },
  { name: "Alice", age: 20 },
  { name: "Bob", age: 18 },
]

排序后:

bash 复制代码
[
  { name: "Bob", age: 18 },
  { name: "Alice", age: 20 },
  { name: "Tom", age: 20 },
]

5. 日期排序

bash 复制代码
interface Order {
  id: number;
  createdAt: string;
}

const orders: Order[] = [
  { id: 1, createdAt: "2026-06-01" },
  { id: 2, createdAt: "2026-05-01" },
  { id: 3, createdAt: "2026-07-01" },
];

orders.sort(
  (a, b) =>
    new Date(a.createdAt).getTime() -
    new Date(b.createdAt).getTime()
);

6. 不修改原数组

sort() 会修改原数组:

bash 复制代码
const arr = [3, 1, 2];

const sorted = [...arr].sort((a, b) => a - b);

console.log(arr);    // [3,1,2]
console.log(sorted); // [1,2,3]

或者现代写法(Node.js 20+ / 新浏览器):

bash 复制代码
const sorted = arr.toSorted((a, b) => a - b);

面试常考点

默认排序是按字符串比较:

bash 复制代码
[1, 10, 2].sort();

结果:

bash 复制代码
[1, 10, 2]

因为实际上比较的是:

bash 复制代码
["1", "10", "2"]

数字排序一定要写:

bash 复制代码
arr.sort((a, b) => a - b);

===================

Theoweb3

CSDN 用户 ID:wwh1st,GitHub:theoweb3,TG:theo_liu,X:theoweb33,谷歌邮箱:wwh9th,公众号:穗余

深耕 Web3 领域,为公链与分布式底层基础设施建设者,长期聚焦公链底层架构、链上基础设施、跨链协议、去中心化系统研发,持续落地基础设施相关技术实践与开源项目。

作为中文 Web3 领域内容创作者与行业 KOL,持续输出底层技术解析、生态研究、行业观察内容,面向开发者与从业者普及区块链底层逻辑,搭建技术沟通桥梁,拥有持续行业影响力。

华语 Web3 开源社区参与者与共建者,积极推动开源协作、开发者交流、技术落地实践,持续赋能华语开发者生态,推动开源方案在公链基础设施场景落地,拓展华语开源社区对外技术交流边界。

长期持续输出技术博客,记录公链底层开发、分布式系统、Web3 工程实践、开源项目落地经验,沉淀可复用技术方案,致力于用技术推动去中心化基础设施持续发展。

相关推荐
Flynt7 小时前
Cloudflare 用 Rust 重写了 TypeScript:我拿同一批代码跑了跑,报错一模一样,退出码不一样
rust·typescript·前端工程化
落花看风雪7 小时前
从零开始搭建后台系统(vue3+TypeScript+Vite)01
typescript·vue·js
行者全栈架构师12 小时前
我让 AI 独立开发了一款游戏:零依赖、188 个测试全绿、工期压到四分之一
typescript·canvas·vibecoding
Eyfcom13 小时前
〖深度〗鸿蒙 ArkTS 移动应用开发经验:从 TypeScript 心智模型到声明式运行时的六层认知重构
typescript·移动开发·harmonyos·arkts
Patrick_Wilson2 天前
悬浮提示从哪来:LSP、tsserver 与 .d.ts
typescript·npm·前端工程化
oldnicke2 天前
理解 TRAE 的 Agent + IDE 思路:用一个 Markdown 检查器拆解完整交付
typescript
钱栈up2 天前
GitHub 热榜实测|REA:用 Agent 逆向一切
typescript·开源·github
keyipatience2 天前
TypeScript学习(1)
前端·javascript·学习·typescript·html·css3
RuoyiOffice3 天前
Vue3+TypeScript 企业管理平台统一UI:新增一个模块,为什么还要重新调样式?
spring boot·typescript·vue3·组件化开发·企业管理软件·ruoyi office·统一ui
Shockang4 天前
TanStack Router 实战:URL 校验、Loader 与路由权限
typescript·react·路由·前端开发·tanstack router