异常教程

JavaScript Array toSorted 方法（保姆级教程）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
  • 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言

在 JavaScript 开发中，数组的排序是一个高频需求场景。从早期的 sort() 方法到现代的 toSorted() 方法，语言特性不断演进，为开发者提供了更安全、更直观的解决方案。本文将深入探讨 JavaScript Array toSorted 方法 的核心概念、使用技巧及实际应用场景，帮助开发者高效掌握这一现代工具。

基础语法与核心特性

基本用法：无参数排序

toSorted() 方法默认按字符编码的 Unicode 码点进行排序，适用于字符串或数字类型的简单排序。其语法简洁直观：

const numbers = [3, 1, 4, 1, 5];  
const sortedNumbers = numbers.toSorted();  
console.log(sortedNumbers); // [1, 1, 3, 4, 5]  

const words = ["banana", "apple", "cherry"];  
const sortedWords = words.toSorted();  
console.log(sortedWords); // ["apple", "banana", "cherry"]

与 sort() 不同，toSorted() 不会直接修改原数组，而是返回一个新数组，这一特性极大提升了代码的可维护性，避免了意外的副作用。

参数详解：自定义排序逻辑

通过传递一个比较函数（compare function）作为参数，toSorted() 可以实现更复杂的排序规则。比较函数的语法与 sort() 完全一致：

array.toSorted((a, b) => {  
  if (a > b) return 1;  
  if (a < b) return -1;  
  return 0;  
});

参数对比表

参数作用
compareFunction定义排序逻辑，返回正值表示 a 应排在 b 之后，负值则相反，零值表示相等

案例：按对象属性排序

const users = [  
  { name: "Alice", age: 30 },  
  { name: "Bob", age: 25 },  
  { name: "Eve", age: 28 }  
];  

const sortedUsers = users.toSorted((a, b) => a.age - b.age);  
console.log(sortedUsers); // 按年龄从小到大排序

核心优势：不可变性与安全性

不可变性设计

toSorted() 遵循函数式编程原则，始终返回新数组而非修改原数组。这一特性在以下场景中尤为重要：

  • 避免副作用：确保原数组数据不被意外覆盖。
  • 链式调用：可与其他数组方法（如 map()、filter()）无缝结合。

对比示例：

const arr = [5, 3, 1];  

// 使用 sort() 会修改原数组  
arr.sort();  
console.log(arr); // [1, 3, 5]  

// 使用 toSorted() 保持原数组不变  
const sortedArr = arr.toSorted();  
console.log(arr); // [5, 3, 1]  
console.log(sortedArr); // [1, 3, 5]

安全性提升

toSorted() 的设计规避了 sort() 的两个常见陷阱：

  1. 默认排序的缺陷：当元素为数字时，sort() 会隐式转换为字符串比较，导致意外结果。

    const nums = [10, 2, 20];  
console.log(nums.sort()); // [10, 2, 20]（错误排序）

    toSorted() 强制开发者显式声明排序逻辑，避免此类问题。

  2. 原数组污染：sort() 直接修改原数组，可能引发难以调试的 bug。

实际应用场景与案例

场景 1：多条件排序

通过嵌套比较逻辑，可实现多字段排序：

const products = [  
  { category: "Electronics", price: 299 },  
  { category: "Books", price: 19.99 },  
  { category: "Electronics", price: 199 }  
];  

const sortedProducts = products.toSorted((a, b) => {  
  // 先按分类排序，再按价格排序  
  if (a.category < b.category) return -1;  
  if (a.category > b.category) return 1;  
  return a.price - b.price;  
});

场景 2：随机排序

通过随机比较函数实现数组元素的随机排列：

const shuffled = [1, 2, 3, 4, 5].toSorted(() => 0.5 - Math.random());  
console.log(shuffled); // 输出随机顺序

与 sort 方法的对比

核心差异总结

特性sort()toSorted()
原数组修改直接修改原数组返回新数组，原数组不变
默认排序行为字符串比较（隐式转换）报错，强制要求提供比较函数
安全性易引发副作用更安全，避免意外数据污染

兼容性说明

toSorted() 是 ES2023 新增特性，需通过 Babel 等工具转译以支持旧环境。开发者可通过以下方式检查兼容性：

if (Array.prototype.toSorted) {  
  // 使用现代语法  
} else {  
  // 回退到 sort() 或 polyfill  
}

常见问题与解决方案

Q1：为什么 toSorted() 要求必须提供比较函数？

A：设计者希望通过强制显式声明排序逻辑，避免 sort() 默认行为带来的隐式字符串转换问题。若需简单升序排序，可传递 (a, b) => a - b。

Q2：如何对对象数组按多个属性排序？

A：通过嵌套条件判断实现：

users.toSorted((a, b) => {  
  const nameCompare = a.name.localeCompare(b.name);  
  return nameCompare !== 0 ? nameCompare : a.age - b.age;  
});

Q3：能否结合其他高阶函数使用？

A：当然！例如先过滤再排序：

const filteredAndSorted = arr  
  .filter(item => item.value > 10)  
  .toSorted((a, b) => a.time - b.time);

最佳实践与进阶技巧

技巧 1：类型安全排序

在 TypeScript 中，可定义泛型约束确保比较函数的参数类型：

function sortByProperty<T, K extends keyof T>(  
  arr: T[],  
  key: K  
): T[] {  
  return arr.toSorted((a, b) => a[key] - b[key]);  
}

技巧 2：结合国际化排序

通过 Intl.Collator 实现多语言敏感排序：

const collator = new Intl.Collator("zh-CN");  
const sorted = ["苹果", "香蕉", "橙子"].toSorted(collator.compare);

技巧 3：性能优化

对于大型数组，可考虑：

  1. 使用 Array.from() 结合 toSorted() 避免原数组污染。
  2. 将复杂计算移到比较函数外，减少重复计算。

未来展望与生态支持

标准化进展

toSorted() 已正式纳入 ECMAScript 标准（ES2023），主流浏览器和 Node.js 环境的支持情况如下：
| 环境 | 支持版本 |
|--------------------|-------------------|
| Chrome | 115+ |
| Firefox | 115+ |
| Edge | 115+ |
| Node.js | 20.0.0+ |

生态工具集成

  • TypeScript：已原生支持类型推断。
  • Linter 规则：可通过 ESLint 的 prefer-to-sorted 规则鼓励使用新语法。

结论

JavaScript Array toSorted 方法 通过不可变性设计和强制显式比较函数，显著提升了代码的安全性和可维护性。无论是基础排序还是复杂场景，它都能提供直观、高效的解决方案。随着现代 JavaScript 生态的持续演进，掌握这一工具将成为开发者提升代码质量的重要一步。

建议读者通过实际项目逐步替换旧有的 sort() 调用，同时结合类型系统和性能优化策略，最大化新特性的价值。

最新发布

查看更多文章