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 个元素挑出一个元素,放到一个新数组中,然后对它排序,找到中间位置的数,以此作为中位数。
相关文章
|
26天前
|
前端开发 JavaScript
有没有方法可以保证在JavaScript中多个异步操作的执行顺序?
有没有方法可以保证在JavaScript中多个异步操作的执行顺序?
85 58
|
4月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
2天前
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
2天前
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
2天前
|
供应链 JavaScript 前端开发
通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
array.every()可以用来数据验证、权限检查、一致性检查等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
4月前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
355 62
|
2月前
|
JavaScript 前端开发 开发者
JavaScript字符串的常用方法
在JavaScript中,字符串处理是一个非常常见的任务。JavaScript提供了丰富的字符串操作方法,使开发者能够高效地处理和操作字符串。本文将详细介绍JavaScript字符串的常用方法,并提供示例代码以便更好地理解和应用这些方法。
69 13
|
4月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
112 5
|
4月前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
53 1
|
4月前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
96 7

热门文章

最新文章