JS数组排序实用技巧分享

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《JS数组排序技巧分享》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

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

还有一些更细致的“失常”：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() 之前，先创建一个数组的浅拷贝。

最常用的方法有两种：

1. 使用 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]

2. 使用扩展运算符 (...)： 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数组排序实用技巧分享》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！