js 如何使用sort对数组进行排序-js教程-PHP中文网

<p>javascript中对数组排序最直接的方法是使用sort()方法，但需注意其默认将元素转为字符串比较，可能导致数字排序异常；1. 使用比较函数可实现数字升序（a - b）或降序（b - a）；2. 字符串排序推荐使用localecompare()以支持本地化和忽略大小写；3. 对象数组排序可通过访问属性并结合比较逻辑实现多条件排序；4. 为避免修改原数组，应先用slice()或扩展运算符创建副本再排序；5. 健壮的比较函数需处理null、undefined和nan等特殊值，确保排序结果符合预期；正确使用这些方法可有效避免sort()的“表现失常”问题，最终实现稳定、可预测的排序结果。</p>

js 如何使用sort对数组进行排序

JavaScript中对数组进行排序，最直接的方法就是使用数组自带的

sort()

登录后复制

方法。它会原地修改原数组，并返回排序后的数组。默认情况下，

sort()

登录后复制

会将数组元素转换为字符串，然后按照它们的UTF-16码点值进行比较，这对于数字数组来说，往往不是你想要的结果。所以，通常你需要给它传递一个比较函数，来定义你自己的排序逻辑。

解决方案

Array.prototype.sort()

登录后复制

是我们处理数组排序的核心工具。当你直接调用

arr.sort()

登录后复制

而不传入任何参数时，它会把数组里的每个元素都当成字符串，然后按照字典顺序来排列。举个例子，数字

登录后复制

会排在

登录后复制

的前面，因为字符串

'10'

登录后复制

在字典上比

'2'

登录后复制

小。这显然不是我们对数字排序的直观理解。

为了让

sort()

登录后复制

按照我们期望的方式工作，我们通常会给它传入一个比较函数（

compareFunction

登录后复制

）。这个函数接收两个参数

登录后复制

和

登录后复制

，分别代表数组中相邻的两个元素。它的返回值决定了

登录后复制

和

登录后复制

的相对顺序：

如果
```
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;
    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()

登录后复制

的“表现失常”，这其实不是它失常，而是我们没有完全理解它的默认行为。我个人觉得最让人头疼的，就是它在没有比较函数时的那个默认行为：把所有元素都当成字符串来比。这对于数字数组来说，简直是个陷阱。你可能写了

[1, 10, 2]

登录后复制

，期望得到

[1, 2, 10]

登录后复制

，结果出来却是

[1, 10, 2]

登录后复制

，因为字符串

'10'

登录后复制

在字典序上确实比

'2'

登录后复制

小。这是很多初学者，包括我自己在内，刚接触时都会踩的坑。

另一个需要注意的点是，

sort()

登录后复制

方法是原地修改原数组的。这意味着它不会返回一个新的排序后的数组，而是直接在原来的数组上进行操作。如果你不希望修改原始数据，这就会带来副作用。比如你有一个全局配置数组，不小心直接

sort()

登录后复制

了，那其他地方用到这个数组的代码可能就会出问题。这在函数式编程或者需要保持数据不可变性的场景下，是个挺大的麻烦。

简篇AI排版

AI排版工具，上传图文素材，秒出专业效果！

554

查看详情

还有一些更细致的“失常”：

undefined

登录后复制

元素在排序时会被移动到数组的末尾。而

null

登录后复制

和

NaN

登录后复制

的行为则可能更复杂，它们在默认的字符串比较下会转换为

"null"

登录后复制

和

"NaN"

登录后复制

，这通常也不是你想要的。所以，如果数组中可能含有这些特殊值，你的比较函数就得特别小心地处理它们。这事儿听起来有点繁琐，但为了代码的健壮性，是值得的。

如何编写一个“健壮”的比较函数？

编写一个“健壮”的比较函数，说白了就是让它能应对各种情况，并且给出我们期望的排序结果。关键在于理解

登录后复制

和

登录后复制

的相对顺序，以及如何返回正确的正数、负数或零。

一个健壮的比较函数，首先要确保它能正确处理你预期的数据类型。比如，如果你在排数字，就别让它去做字符串比较。

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()

登录后复制

是你的好朋友。它能正确处理不同语言的字符排序规则，比如德语的

ä

登录后复制

和

登录后复制

的关系，或者中文的拼音排序。通过

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"]

登录后复制

这两种方法都能有效地创建一个新的数组实例，然后在这个新实例上执行