1. 主页 > 大智慧

3种JS数组排序方法:升序降序手把手教你实现


??为什么说JS数组排序容易踩坑???
许多开发者直接使用sort()方法时,会发现数字排序结果与预期不符。例如[10,5,80].sort()得到的结果是[10,5,80]而非[5,10,80],这是因为??默认的sort()会将元素转换为字符串再比较??。

??解决方法??:通过自定义比较函数实现数值排序。

javascript复制
// 升序排序
[10,5,80].sort((a,b) => a - b); // 输出 [5,10,80]
// 降序排序
[10,5,80].sort((a,b) => b - a); // 输出 [80,10,5]

??核心要点??:

  • ??升序规则??:a - b返回负数时,a排在b前面
  • ??降序规则??:b - a返回正数时,b排在a前面

??如何对对象数组按属性排序???
当数组元素是对象时(例如商品列表按价格排序),需??提取属性值作为比较依据??:

javascript复制
const products = [
  {name: '鼠标', price: 50},
  {name: '键盘', price: 120},
  {name: '耳机', price: 80}
];
// 按price升序
products.sort((a,b) => a.price - b.price);

??对比表格??:

排序目标比较函数写法
单层属性升序(a,b) => a.prop - b.prop
多层属性排序嵌套使用sort()或组合条件判断
含非数字的属性先转换类型再比较(如日期转时间戳)

??自定义排序规则有哪些高阶用法???
当业务需求超出简单升降序时(例如中文按拼音排序、特定状态优先级排序),需??构建更复杂的比较逻辑??:

??案例1:中文拼音排序??

javascript复制
const cities = ['北京','上海','广州','深圳'];
cities.sort((a,b) => a.localeCompare(b, 'zh')); 

??案例2:混合类型数据排序??

javascript复制
const data = [20, '苹果', 15, '香蕉'];
data.sort((a,b) => {
  if (typeof a === 'number' && typeof b === 'number') return a - b;
  if (typeof a === 'string') return 1;  // 字符串统一排在数字后面
  return -1;
});

??性能优化建议??:

  • 对超大数组优先使用??TypedArray??
  • 避免在比较函数中执行复杂计算

个人观点:虽然第三方库(如Lodash的_.orderBy)能简化排序操作,但掌握原生sort()的灵活用法仍是必备技能。遇到需要服务端分页排序的场景,建议优先在后端处理,避免前端性能损耗。

本文由嘻道妙招独家原创,未经允许,严禁转载