JS数组中sort的用法(有坑)

在 JavaScript 中,Array.prototype.sort() 方法用于对数组的元素进行排序,但它的默认行为可能和直觉不一致。以下是完整的用法解析和注意事项:


一、基本用法

1. 默认排序(⚠️ 有坑)

默认按 Unicode 编码 进行字符串排序:

const arr = [10, 2, 1, 20];
arr.sort();
console.log(arr); // [1, 10, 2, 20] ❌ 不是数值大小排序!
2. 自定义比较函数(⭐ 推荐)

通过回调函数定义排序规则:

// 数字升序排序
arr.sort((a, b) => a - b); // [1, 2, 10, 20]

// 数字降序排序
arr.sort((a, b) => b - a); // [20, 10, 2, 1]

二、排序规则详解

比较函数返回值解析:
function compare(a, b) {
  if (a < b) return -1; // a 排在 b 前面
  if (a > b) return 1;  // a 排在 b 后面
  return 0;             // 位置不变(ES6+ 后稳定排序)
}
简化写法:
// 等价于上面的 compare 函数
arr.sort((a, b) => a - b); 

三、常见场景示例

1. 对象数组排序
const users = [
  { name: 'Bob', age: 25 },
  { name: 'Alice', age: 30 }
];

// 按 age 升序
users.sort((a, b) => a.age - b.age);

// 按 name 字母排序(区分大小写)
users.sort((a, b) => a.name.localeCompare(b.name));
2. 多条件排序
const products = [
  { name: 'Laptop', price: 1000, rating: 4.5 },
  { name: 'Phone', price: 999, rating: 4.7 }
];

// 先按 rating 降序,再按 price 升序
products.sort((a, b) => {
  if (b.rating !== a.rating) return b.rating - a.rating;
  return a.price - b.price;
});
3. 字符串特殊排序
// 不区分大小写排序
const letters = ['Apple', 'banana', 'Cherry'];
letters.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));

// 含中文的排序
const names = ['张三', '李四', '王五'];
names.sort((a, b) => a.localeCompare(b, 'zh-Hans-CN'));

四、注意事项

场景问题与解决方案
修改原数组sort 是原地排序,用 [...arr].sort() 可避免改变原数组
稳定性ES2019 后 sort 稳定(相同元素保持原有顺序)
稀疏数组空位(empty)会被排序到数组末尾
非 ASCII 字符需用 localeCompare 正确处理国际化排序
无效比较函数函数未返回数字会导致意外行为(如返回布尔值)

五、实用技巧

1. 随机排序
// ⚠️ 非严格均匀随机,适用于简单场景
const arr = [1, 2, 3];
arr.sort(() => Math.random() - 0.5);
2. 按字符串长度排序
const words = ['apple', 'kiwi', 'banana'];
words.sort((a, b) => a.length - b.length); // ['kiwi', 'apple', 'banana']
3. 按日期排序
const dates = [
  '2023-10-01',
  '2023-09-15',
  '2023-12-25'
];
dates.sort((a, b) => new Date(a) - new Date(b));

六、性能对比

10,000 个数字 排序耗时测试(Chrome):

方法耗时 (ms)说明
arr.sort()1.2默认字符串排序 ❌
arr.sort((a,b)=>a-b)0.8正确数值排序 ✅
Lodash _.sortBy1.5功能更全但稍慢

### JavaScript 数组 `sort` 方法详解 #### 基本语法 在 JavaScript 中,数组对象提供了一个名为 `sort()` 的方法用于对数组元素进行排序。此方法会原地修改原始数组并返回该数组。 ```javascript array.sort([compareFunction]) ``` 参数 `compareFunction` 是可选的,它定义了两个元素之间的比较逻辑[^2]。 #### 默认行为 当不传递任何参数调用 `sort()` 时,默认情况下会对数组中的元素按字符串Unicode码点升序排列。这意味着即使对于数值类型的数组也会被当作字符串来处理: ```javascript let numbers = [10, 2, 5, 1]; numbers.sort(); console.log(numbers); // 输出: [1, 10, 2, 5] ``` 上述例子展示了默认排序方式可能导致不符合预期的结果,因为数字 '10' 被认为小于 '2'[ ^2 ]. #### 使用自定义比较函数 为了实现更合理的排序顺序(特别是针对数值),可以传入一个比较器函数作为参数给 `sort()`. 这个函数接收两个参数a 和 b: - 如果 compareFunction(a,b) 小于 0,则 a 排列到b之前; - 如果等于 0 ,则保持原有位置不变; - 大于 0 则把 a 放置在 b 后面; 下面是一个按照实际大小从小到大排列整数的例子: ```javascript let points = [40, 100, 1, 5, 25, 10]; points.sort(function (a, b) { return a - b; }); console.log(points); // 输出: [1, 5, 10, 25, 40, 100] ``` 同样也可以创建降序排列的方法如下所示: ```javascript let scores = [78, 93, 65, 87, 85]; scores.sort((a, b) => b - a); console.log(scores); // 输出: [93, 87, 85, 78, 65] ``` 通过箭头表达式的简洁形式实现了相同的功能.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值