javascript中对数组排序最直接的方法是使用sort()方法，但需注意其默认将元素转为字符串比较，可能导致数字排序异常；1. 使用比较函数可实现数字升序（a – b）或降序（b – a）；2. 字符串排序推荐使用localecompare()以支持本地化和忽略大小写；3. 对象数组排序可通过访问属性并结合比较逻辑实现多条件排序；4. 为避免修改原数组，应先用slice()或扩展运算符创建副本再排序；5. 健壮的比较函数需处理null、undefined和nan等特殊值，确保排序结果符合预期；正确使用这些方法可有效避免sort()的“表现失常”问题，最终实现稳定、可预测的排序结果。
JavaScript中对数组进行排序，最直接的方法就是使用数组自带的
sort()
方法。它会原地修改原数组，并返回排序后的数组。默认情况下，
sort()
会将数组元素转换为字符串，然后按照它们的UTF-16码点值进行比较，这对于数字数组来说，往往不是你想要的结果。所以，通常你需要给它传递一个比较函数，来定义你自己的排序逻辑。
解决方案
Array.prototype.sort()
是我们处理数组排序的核心工具。当你直接调用
arr.sort()
而不传入任何参数时，它会把数组里的每个元素都当成字符串，然后按照字典顺序来排列。举个例子，数字
10
会排在
2
的前面，因为字符串
'10'
在字典上比
'2'
小。这显然不是我们对数字排序的直观理解。
为了让
sort()
按照我们期望的方式工作，我们通常会给它传入一个比较函数（
compareFunction
）。这个函数接收两个参数
a
和
b
，分别代表数组中相邻的两个元素。它的返回值决定了
a
和
b
的相对顺序：
如果
compareFunction(a, b)
返回一个负数，那么
a
会排在
b
的前面。如果返回零，
a
和
b
的相对位置不变（但要注意，ECMAScript标准不保证这种情况下元素的相对顺序不变，虽然现代浏览器通常会保持稳定）。如果返回一个正数，那么
b
会排在
a
的前面。
数字排序的常见写法：
升序：
arr.sort((a, b) => a - b);
降序：
arr.sort((a, b) => b - a);
// 示例：数字排序const numbers = [40, 1, 5, 200, 10];// 默认排序（会出乎意料）const defaultSorted = [...numbers].sort();console.log("默认排序 (字符串比较):", defaultSorted); // [1, 10, 200, 40, 5]// 升序排序const ascendingSorted = [...numbers].sort((a, b) => a - b);console.log("数字升序:", ascendingSorted); // [1, 5, 10, 40, 200]// 降序排序const descendingSorted = [...numbers].sort((a, b) => b - a);console.log("数字降序:", descendingSorted); // [200, 40, 10, 5, 1]
字符串排序（考虑大小写和本地化）：
对于纯英文字符串，直接比较通常没问题。但如果涉及到不同语言的字符，或者需要忽略大小写，
localeCompare()
方法就显得非常有用。
// 示例：字符串排序const fruits = ["Banana", "orange", "Apple", "Mango"];// 默认排序 (区分大小写)const defaultStringSorted = [...fruits].sort();console.log("默认字符串排序:", defaultStringSorted); // ["Apple", "Banana", "Mango", "orange"] (注意'o'排在'M'后面)// 忽略大小写排序const caseInsensitiveSorted = [...fruits].sort((a, b) => { const nameA = a.toUpperCase(); // 转换为大写进行比较 const nameB = b.toUpperCase(); if (nameA nameB) return 1; return 0;});console.log("忽略大小写排序:", caseInsensitiveSorted); // ["Apple", "Banana", "Mango", "orange"] (顺序正确了)// 使用 localeCompare 进行本地化排序（更推荐）const localeSorted = [...fruits].sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' }));console.log("使用 localeCompare (忽略大小写):", localeSorted); // ["Apple", "Banana", "Mango", "orange"]
对象数组按某个属性排序：
这是日常开发中非常常见的需求。我们只需要在比较函数中访问对象的对应属性即可。
// 示例：对象数组排序const users = [ { name: "Alice", age: 30 }, { name: "Bob", age: 25 }, { name: "Charlie", age: 30 }, { name: "David", age: 28 }];// 按年龄升序const sortedByAge = [...users].sort((a, b) => a.age - b.age);console.log("按年龄升序:", sortedByAge);/*[ { name: 'Bob', age: 25 }, { name: 'David', age: 28 }, { name: 'Alice', age: 30 }, { name: 'Charlie', age: 30 }]*/// 按年龄升序，年龄相同则按名字字母序const sortedByAgeThenName = [...users].sort((a, b) => { if (a.age !== b.age) { return a.age - b.age; } return a.name.localeCompare(b.name); // 年龄相同，按名字排序});console.log("按年龄升序，年龄相同按名字:", sortedByAgeThenName);/*[ { name: 'Bob', age: 25 }, { name: 'David', age: 28 }, { name: 'Alice', age: 30 }, { name: 'Charlie', age: 30 }]*/
JavaScript
sort()
sort()
方法为何有时会“表现失常”？
说到
sort()
的“表现失常”，这其实不是它失常，而是我们没有完全理解它的默认行为。我个人觉得最让人头疼的，就是它在没有比较函数时的那个默认行为：把所有元素都当成字符串来比。这对于数字数组来说，简直是个陷阱。你可能写了
[1, 10, 2]
，期望得到
[1, 2, 10]
，结果出来却是
[1, 10, 2]
，因为字符串
'10'
在字典序上确实比
'2'
小。这是很多初学者，包括我自己在内，刚接触时都会踩的坑。
另一个需要注意的点是，
sort()
方法是原地修改原数组的。这意味着它不会返回一个新的排序后的数组，而是直接在原来的数组上进行操作。如果你不希望修改原始数据，这就会带来副作用。比如你有一个全局配置数组，不小心直接
sort()
了，那其他地方用到这个数组的代码可能就会出问题。这在函数式编程或者需要保持数据不可变性的场景下，是个挺大的麻烦。
还有一些更细致的“失常”：
undefined
元素在排序时会被移动到数组的末尾。而
null
和
NaN
的行为则可能更复杂，它们在默认的字符串比较下会转换为
"null"
和
"NaN"
，这通常也不是你想要的。所以，如果数组中可能含有这些特殊值，你的比较函数就得特别小心地处理它们。这事儿听起来有点繁琐，但为了代码的健壮性，是值得的。
如何编写一个“健壮”的比较函数？
编写一个“健壮”的比较函数，说白了就是让它能应对各种情况，并且给出我们期望的排序结果。关键在于理解
a
和
b
的相对顺序，以及如何返回正确的正数、负数或零。
一个健壮的比较函数，首先要确保它能正确处理你预期的数据类型。比如，如果你在排数字，就别让它去做字符串比较。
a - b
这种简洁的写法，在处理纯数字数组时，效率高又直观。
但如果数据类型不确定，或者可能包含
null
、
undefined
甚至
NaN
这种“不确定”的值，你的比较函数就需要额外的逻辑来处理。例如，你可能需要把
null
和
undefined
都统一放到最后，或者根据业务逻辑赋予它们特定的排序优先级。
// 示例：处理特殊值的比较函数const mixedArray = [10, null, 5, undefined, 20, NaN, 1];const robustSort = [...mixedArray].sort((a, b) => { // 优先处理 undefined 和 null，将它们放到最后 if (a === undefined && b === undefined) return 0; if (a === undefined) return 1; if (b === undefined) return -1; if (a === null && b === null) return 0; if (a === null) return 1; if (b === null) return -1; // 处理 NaN，将 NaN 放到 null/undefined 之前，数字之后 if (isNaN(a) && isNaN(b)) return 0; if (isNaN(a)) return 1; // NaN 放到后面 if (isNaN(b)) return -1; // 非 NaN 放到前面 // 假设剩下的都是数字，进行数字比较 return a - b;});console.log("健壮的比较函数处理特殊值:", robustSort); // [1, 5, 10, 20, NaN, null, undefined]
对于字符串排序，尤其是涉及到多语言环境，
String.prototype.localeCompare()
是你的好朋友。它能正确处理不同语言的字符排序规则，比如德语的
ä
和
a
的关系，或者中文的拼音排序。通过
options
参数，你还可以控制是否区分大小写 (
sensitivity: 'base'
)，或者是否考虑重音符号 (
sensitivity: 'accent'
)。这比手动
toUpperCase()
或
toLowerCase()
再比较要强大得多。
最后，当需要根据多个条件进行排序时，比较函数内部可以嵌套逻辑。比如，先按年龄排，年龄相同再按名字排。这个模式在处理复杂数据结构时非常有用，确保了排序的层次性和准确性。
避免副作用：如何排序而不改变原数组？
正如前面提到的，
sort()
方法会直接修改原数组，这在很多场景下是不可接受的，尤其是在你追求函数式编程风格，或者需要保持数据不可变性的时候。为了避免这种副作用，我们可以在调用
sort()
之前，先创建一个数组的浅拷贝。
最常用的方法有两种：
使用
Array.prototype.slice()
方法：
slice()
方法不带任何参数时，会返回一个数组的浅拷贝。
const originalArray = [3, 1, 4, 1, 5, 9];const sortedArray = originalArray.slice().sort((a, b) => a - b);console.log("原数组 (未改变):", originalArray); // [3, 1, 4, 1, 5, 9]console.log("排序后的新数组:", sortedArray); // [1, 1, 3, 4, 5, 9]
使用扩展运算符 (
...
)：ES6 引入的扩展运算符是创建数组浅拷贝的另一种简洁方式。
const anotherOriginalArray = ["apple", "zebra", "banana"];const newSortedArray = [...anotherOriginalArray].sort();console.log("原数组 (未改变):", anotherOriginalArray); // ["apple", "zebra", "banana"]console.log("排序后的新数组 (使用扩展运算符):", newSortedArray); // ["apple", "banana", "zebra"]
这两种方法都能有效地创建一个新的数组实例，然后在这个新实例上执行
sort()
操作，从而确保原始数组保持不变。这对于维护应用程序的状态一致性，以及编写更可预测、更易于调试的代码至关重要。我个人倾向于使用扩展运算符，因为它看起来更现代，也更简洁。但无论哪种方式，目的都是一样的：让
sort()
成为一个“纯函数”操作，不产生意外的副作用。
以上就是js 如何使用sort对数组进行排序的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1516321.html
微信扫一扫 
支付宝扫一扫 
