js array排序

js array排序

在JavaScript中，数组是一种常见的数据结构，它可以用来存储多个值。数组中的元素可以是不同类型的数据，例如数字、字符串、对象等。而排序就是对数组中的元素进行重新排列，以按照一定的顺序呈现。

JavaScript中提供了多种方法来对数组进行排序，本文将详细介绍这些方法及其使用。

1. Array.prototype.sort()

Array.prototype.sort() 是 JavaScript 中用于对数组进行排序的最常用的方法。它可以按照默认的字母/数字顺序对数组进行排序，也可以使用自定义的排序函数进行排序。下面是一些示例：

1.1 简单排序

const fruits = ['apple', 'banana', 'orange', 'grape'];
fruits.sort();
console.log(fruits); // 输出：["apple", "banana", "grape", "orange"]

const numbers = [10, 5, 8, 3, 2, 1];
numbers.sort();
console.log(numbers); // 输出：[1, 10, 2, 3, 5, 8]

1.2 自定义排序

sort() 方法还可以接受一个比较函数作为参数，用于自定义排序规则。比较函数接收两个参数，分别是要比较的两个元素，返回一个负数表示第一个元素应该在前，返回0表示两个元素相等，返回一个正数表示第二个元素应该在前。

下面是一个按照数字从小到大排序的示例：

const numbers = [10, 5, 8, 3, 2, 1];
numbers.sort((a, b) => a - b);
console.log(numbers); // 输出：[1, 2, 3, 5, 8, 10]

同样，我们也可以按照自定义的规则对字符串进行排序：

const fruits = ['apple', 'banana', 'orange', 'grape'];
fruits.sort((a, b) => a.length - b.length);
console.log(fruits); // 输出：["apple", "grape", "banana", "orange"]

需要注意的是，sort() 方法会直接修改原数组，如果你不希望改变原数组，可以先使用 slice() 方法创建一个副本再进行排序。

2. lodash.sortBy()

除了原生的 sort() 方法之外，还可以使用第三方库 lodash 中的 sortBy() 方法进行排序。lodash 是一个实用的 JavaScript 工具库，提供了很多对数组、对象等操作的便捷方法。下面是一个使用 sortBy() 方法对对象数组进行排序的示例：

const users = [
  { name: 'John', age: 30 },
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 35 }
];

const sortedUsers = _.sortBy(users, 'age');
console.log(sortedUsers);

输出为：

[
  { name: 'Alice', age: 25 },
  { name: 'John', age: 30 },
  { name: 'Bob', age: 35 }
]

sortBy() 方法的第一个参数是要排序的数组，第二个参数可以是字符串或者一个函数。如果是字符串，表示按照对象的某个属性进行排序；如果是函数，表示按照自定义规则进行排序。

3. 自定义排序规则

除了在 sort()、sortBy() 方法中传入比较函数来进行自定义排序外，还可以使用其他方式来实现自定义排序规则。例如，可以先将数组中的元素转为字符串进行比较，再将其转回原来的类型。

下面是一个按照长度进行排序的示例：

const array = [10, 5, 8, 3, 2, 1];
array.sort((a, b) => {
  const aLength = a.toString().length;
  const bLength = b.toString().length;
  return aLength - bLength;
});
console.log(array); // 输出：[1, 2, 3, 5, 8, 10]

这种方式虽然比较灵活，但需要注意转换类型可能会带来一些性能上的开销。

4. 数字排序的坑

在进行数字排序时，需要特别注意 JavaScript 中的一些特殊情况，以避免踩坑。下面是两个经典的示例：

4.1 字符串数字排序

const numbers = ['1', '10', '2'];
numbers.sort();
console.log(numbers); // 输出：["1", "10", "2"]

这是因为 sort() 方法默认按照字符串进行排序，而字符串排序是按照字符的 Unicode 编码进行的。所以在排序时，实际上是先比较了 “1” 和 “10” 的第一个字符 “1” 和 “2”，因为 “1” 的 Unicode 编码小于 “2”，所以 “1” 在 “2” 的前面，导致结果不符合预期。

解决这个问题的方法是在 sort() 方法中传入一个排序函数，将字符串转为数字进行比较。

const numbers = ['1', '10', '2'];
numbers.sort((a, b) => parseInt(a) - parseInt(b));
console.log(numbers); // 输出：["1", "2", "10"]

4.2 小数排序

对于小数的排序，同样需要注意 JavaScript 的一些特殊情况。例如：

const numbers = [0.1, 0.3, 0.2];
numbers.sort();
console.log(numbers); // 输出：[0.1, 0.2, 0.3]

实际上，排序结果并不正确，这是因为 JavaScript 中浮点数的精度问题导致。解决方法是在排序时使用 toFixed() 方法将浮点数转为固定的字符串进行比较。

const numbers = [0.1, 0.3, 0.2];
numbers.sort((a, b) => a.toFixed(2) - b.toFixed(2));
console.log(numbers); // 输出：[0.1, 0.2, 0.3]

这样可以确保排序结果的正确性。

总结

本文介绍了 JavaScript 中对数组进行排序的几种常见方法，包括使用 sort() 方法、lodash 库的 sortBy() 方法，以及自定义排序规则。在使用这些方法时，需要注意一些特殊情况，如字符串数字和小数的排序问题。