JavaScript sort() 方法你真的了解吗?

简介: JavaScript sort() 方法你真的了解吗?

JavaScript sort() 方法你真的了解吗?

有一次,我在刷 LeetCode 的时候,明明觉得没有问题,然而最后还是答案错误。经过调试发现原来问题出现在 sort() 这个数组方法。sort 作为一个很常见的数组方法,却是数组方法中最复杂的方法之一。我们直接看下面代码:

const arr = [3, 15, 8, 29, 102, 22];
arr.sort();
console.log(arr);

相信很多人会这么想:这不就是对数组排序嘛,没指定规则,一般默认升序,所以输出结果为:[3, 8, 15, 22, 29, 102]。然而结果却出乎意料:[102, 15, 22, 29, 3, 8]。这又是为什么呢?看完后面的内容,相信你会明白这其中的原理了。

1. sort 的定义

sort() 方法对数组的元素进行排序,并返回数组。默认排序顺序是在「将元素转换为字符串」,然后比较它们的 UTF-16 代码单元值序列时构建的。

我们知道 unicode 编码中,「数字 < 大写字母 < 小写字母 < 汉字」。因此,在开头那个栗子中:

  1. 首先先将每个元素转为字符串:['3', '15', '8', '29', '102', '22']
  2. 紧接着 sort 会从左到右对比每个字符串
  3. 根据第一个字符排序得到:['15', '102', '29', '22', '3', '8']
  4. 然后根据第二个字符排序得到:['102', '15', '22', '29', '3', '8']
  5. 最后得到结果:['102', '15', '22', '29', '3', '8']

现在应该明白为什么会出现这种结果了吧。那么问题来了,如果我们想要实现数字的升序排序或者降序排序,那该怎么办呢?这个时候我们得先了解一下它的用法。

2. sort 的用法

arr.sort([compareFunction])

可以看到 sort 方法是可以传递一个参数 compareFunction,该参数用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的各个字符的 Unicode 位点进行排序。

如果指明了 compareFunction,那么数组会按照调用该函数的返回值排序。即 ab 是两个将要被比较的元素:

  • 如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前;
  • 如果 compareFunction(a, b) 等于 0ab 的相对位置不变。
  • 如果 compareFunction(a, b) 大于 0b 会被排列到 a 之前。
  • compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果,否则排序的结果将是不确定的。

因此要比较数字而非字符串,比较函数可以简单的以 ab,如下的函数将会将数组升序排列:

function compareNumbers(a, b) {
  return a - b;
}

sort 方法可以使用函数表达式方便地书写:

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers);
// 也可以写成:
var numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => a - b);
console.log(numbers);
// [1, 2, 3, 4, 5]

3. sort 的原理

或许读者会好奇,sort 底层讲究是如何实现排序的?

查阅 v8源码sort部分 我们可以发现,对于需要排序的元素个数 n,具体排序策略有几下中情形:

  • 当 n<=10 时,采用插入排序;
  • 当 n >10 时,采用三路快速排序;
  • 10 < n <= 1000,采用中位数作为哨兵元素;
  • n > 1000,每隔 200~215 个元素挑出一个元素,放到一个新数组中,然后对它排序,找到中间位置的数,以此作为中位数。
相关文章
|
6天前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
19天前
|
缓存 监控 前端开发
JavaScript 实现大文件上传的方法
【10月更文挑战第17天】通过以上步骤和方法,我们可以实现较为可靠和高效的大文件上传功能。当然,具体的实现方式还需要根据实际的应用场景和服务器要求进行调整和优化。
|
6天前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
6天前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
6天前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
20 7
|
7天前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
12天前
|
JavaScript 前端开发 Go
异步加载 JS 的方法
【10月更文挑战第24天】异步加载 JavaScript 是提高网页性能和用户体验的重要手段。通过使用不同的方法和技术,可以实现灵活、高效的异步加载 JavaScript。在实际应用中,需要根据具体情况选择合适的方法,并注意处理可能出现的问题,以确保网页能够正常加载和执行。
|
23天前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
7天前
|
JavaScript 前端开发 开发者
|
24天前
|
存储 JavaScript 前端开发
JavaScript数组去重的八种方法详解及性能对比
在JavaScript开发中,数组去重是一个常见的操作。本文详细介绍了八种实现数组去重的方法,从基础的双重循环和 indexOf() 方法,到较为高级的 Set 和 Map 实现。同时,分析了每种方法的原理和适用场景,并指出了使用 Set 和 Map 是目前最优的解决方案。通过本文,读者可以深入理解每种方法的优缺点,并选择最合适的数组去重方式。
45 0