关于javascript:arraysort-的坑你踩过没有

在 JavaScript 中能够用 array.sort() 对数组进行排序。上面用它来对一些数字进行排序：

const numbers = [10, 5, 11];
numbers.sort(); // => [10, 11, 5]

呃。。。numbers.sort() 的返回值竟然是 [10，11，5]，这是怎么回事？

为什么在不带参数的状况下调用 array.sort() 时，没有按预期排序？

1. array.sort() 不带参数

array.sort() 是数组实例上的一个办法，用于对数组进行适当的排序（在原始数组上原地操作）并返回排序后的数组。

当不带参数调用时，数组元素项会被转换为字符串并按字母序进行排序。

例如对上面的数组进行排序：

const names = ['joker', 'batman', 'catwoman'];
names.sort(); // => ['batman', 'catwoman', 'joker']

会依照按字母程序排序：['batman'，'catwoman'，'joker']。

然而，对数字调用该办法也会依照字母序进行排序：

const numbers = [10, 5, 11];

numbers.sort(); // => [10, 11, 5]

2. 带比拟器的 array.sort()

不过 array.sort() 办法有一个可选参数：比拟器函数。

const mutatedArray = array.sort([comparator]);

用这个函数能够管制排序过程中元素在数组中的排序形式。

如果 comparator(a，b) 的返回值为：

• 正数 <0：那么 a 会被放在 b 之前
• 负数“> 0”：那么 b 会被搁置在 a 之前
• 0：则比拟元素的地位不变

为了正确地对数字按升序进行排序，应该用上面的比拟器函数：

const numbers = [10, 5, 11];

numbers.sort((a, b) => {if (a < b) {return -1;}
  if (a > b) {return 1;}
  return 0;
}); // => [5, 10, 11]

这样就能够正确地对数字进行排序了：[5, 10, 11]。

在升序排列的数组中，较小的数字位于较大的数字之前。这是在编写比拟器函数时须要保护的属性：

• 如果 a < b：函数返回 -1，将 a 放在 b 的后面（例如 5 <8，因而 5 在 8 之前）
• 如果 a> b：函数返回 1，将 b 放在 a 之前（例如 10> 3，因而 3 在 10 的后面）
• 如果 a === b：程序不变。

后面例子中的比拟器函数有些长。咱们能够这样简化：

const numbers = [10, 5, 11];
numbers.sort((a, b) => a - b); // => [5, 10, 11]

3. 对类型化数组排序

JavaScript 中的类型化数组蕴含特定类型的元素，例如 UInt8：8 位无符号整数，Float64：64 位浮点数等。而一般数组中的元素能够是任何类型，甚至能够是多种类型。

类型化数组的益处是，默认状况下它们的 sort() 办法对数字按升序进行排序。

如果不必比拟器函数，那么利用类型化数组是对数字进行排序的好方法：

const numbers = [10, 5, 11];

const sortedNumbers = [...new Float64Array(numbers).sort()];

sortedNumbers; // => [5, 10, 11]

new Float64Array(numbers) 创立一个类型化数组的实例并初始化。

new Float64Array(numbers).sort() 按升序排序类型数组。在这里不须要比拟器函数。

最初，开展运算符 [...new Float64Array(numbers).sort()] 把类型数组中的排序数字提取到惯例数组中。

总结

如果不带参数调用 array.sort() 办法，将会按字母序对元素进行排序。所以不应该简略的用 array.sort() 对数字进行升序排序。

然而你能够指定一个比拟器函数 array.sort(comparator) 来定制元素的排序形式。倡议应用 numbers.sort((a, b) => a - b) 这种最简洁的形式对数字数组进行排序。

本文首发微信公众号：前端先锋

欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章

欢送持续浏览本专栏其它高赞文章：

• 深刻了解 Shadow DOM v1
• 一步步教你用 WebVR 实现虚拟现实游戏
• 13 个帮你进步开发效率的古代 CSS 框架
• 疾速上手 BootstrapVue
• JavaScript 引擎是如何工作的？从调用栈到 Promise 你须要晓得的所有
• WebSocket 实战：在 Node 和 React 之间进行实时通信
• 对于 Git 的 20 个面试题
• 深刻解析 Node.js 的 console.log
• Node.js 到底是什么？
• 30 分钟用 Node.js 构建一个 API 服务器
• Javascript 的对象拷贝
• 程序员 30 岁前月薪达不到 30K，该何去何从
• 14 个最好的 JavaScript 数据可视化库
• 8 个给前端的顶级 VS Code 扩大插件
• Node.js 多线程齐全指南
• 把 HTML 转成 PDF 的 4 个计划及实现

• 更多文章 …