JS数组排序方法全解析

本文深入解析了JavaScript数组排序的核心方法`sort()`。`sort()`默认按照字符串Unicode码点排序，易导致数字排序错误。针对数字排序，需自定义比较函数实现升序或降序。对于对象数组，比较函数可基于对象属性值进行排序，并支持忽略大小写等高级处理。为避免修改原数组，推荐使用扩展运算符或`slice()`创建数组副本再排序。此外，文章还介绍了如何通过在比较函数中实现多条件判断，构建复杂的排序逻辑，例如先按评分降序再按价格升序，满足多样化业务需求，保证排序结果的准确性和原始数据的完整性。掌握`sort()`方法和自定义比较函数，是高效处理JS数组排序的关键。

JavaScript数组排序最常用sort()方法，其默认按字符串Unicode码点排序，可能导致数字排序异常，因此数字排序需传入比较函数实现升序或降序；对对象数组排序时，比较函数可基于属性值进行比较，并支持忽略大小写等处理；为保持原数组不变，应使用扩展运算符或slice()创建副本后再排序；复杂排序逻辑可通过在比较函数中实现多条件判断来完成，如先按评分降序再按价格升序，从而满足多样化业务需求，最终确保排序结果准确且原始数据不受影响。

对数组进行排序，JavaScript 提供了多种方法，最常用的是 sort() 方法，但需要注意其默认行为和自定义排序方式。

解决方案

JavaScript 提供了内置的 sort() 方法来对数组进行排序。默认情况下，sort() 方法将数组元素转换为字符串，并按照 Unicode 码点进行排序，这可能会导致数字排序出现问题。因此，对于数字数组或需要自定义排序规则的情况，需要提供一个比较函数。

1. 默认排序（字符串排序）：

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort(); // fruits 现在是 ["Apple", "Banana", "Mango", "Orange"]

const numbers = [1, 10, 2, 20];
numbers.sort(); // numbers 现在是 [1, 10, 2, 20]  (注意：不是数字排序)

2. 数字排序（使用比较函数）：

为了正确地对数字进行排序，需要提供一个比较函数作为 sort() 方法的参数。比较函数应该返回一个数字：

• 如果第一个参数小于第二个参数，返回负数。
• 如果第一个参数大于第二个参数，返回正数。
• 如果两个参数相等，返回 0。

const numbers = [1, 10, 2, 20];
numbers.sort((a, b) => a - b); // numbers 现在是 [1, 2, 10, 20]  (升序)

numbers.sort((a, b) => b - a); // numbers 现在是 [20, 10, 2, 1]  (降序)

3. 对象数组排序：

如果要对对象数组进行排序，比较函数需要访问对象的属性。

const items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic', value: 13 },
  { name: 'Zeros', value: 37 }
];

// 按 value 升序排序
items.sort((a, b) => a.value - b.value);

// 按 name 排序 (字符串比较)
items.sort((a, b) => {
  const nameA = a.name.toUpperCase(); // 忽略大小写
  const nameB = b.name.toUpperCase();
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }
  return 0;
});

数组排序后如何保持原始数组不变？

sort() 方法会直接修改原始数组。如果需要保持原始数组不变，可以先创建一个数组的副本，然后再对副本进行排序。

const originalArray = [3, 1, 4, 1, 5, 9, 2, 6];
const sortedArray = [...originalArray].sort((a, b) => a - b); // 使用扩展运算符创建副本

console.log(originalArray); // 输出: [3, 1, 4, 1, 5, 9, 2, 6] (未修改)
console.log(sortedArray);   // 输出: [1, 1, 2, 3, 4, 5, 6, 9]

或者使用 slice() 方法：

const originalArray = [3, 1, 4, 1, 5, 9, 2, 6];
const sortedArray = originalArray.slice().sort((a, b) => a - b); // 使用 slice() 创建副本

console.log(originalArray); // 输出: [3, 1, 4, 1, 5, 9, 2, 6] (未修改)
console.log(sortedArray);   // 输出: [1, 1, 2, 3, 4, 5, 6, 9]

如何实现更复杂的排序逻辑？

比较函数可以包含更复杂的逻辑，例如多条件排序。假设要先按一个属性升序排序，如果该属性相等，则按另一个属性降序排序。

const products = [
  { name: 'Laptop', price: 1200, rating: 4.5 },
  { name: 'Keyboard', price: 75, rating: 4.8 },
  { name: 'Mouse', price: 25, rating: 4.2 },
  { name: 'Monitor', price: 300, rating: 4.5 },
  { name: 'Headphones', price: 100, rating: 4.8 }
];

products.sort((a, b) => {
  // 先按 rating 降序排序
  if (b.rating !== a.rating) {
    return b.rating - a.rating;
  }

  // 如果 rating 相等，则按 price 升序排序
  return a.price - b.price;
});

console.log(products);

这个例子展示了如何根据多个条件对对象数组进行排序，使得排序更加灵活和强大。 实际应用中，可能需要根据具体的业务需求来定制排序规则。 记住，理解 sort() 方法的默认行为以及如何使用比较函数是掌握 JavaScript 数组排序的关键。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~