3种JS数组排序方法:升序降序手把手教你实现
日期:2025-05-19 12:02:19 •原创
??为什么说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()
的灵活用法仍是必备技能。遇到需要服务端分页排序的场景,建议优先在后端处理,避免前端性能损耗。
本文由嘻道妙招独家原创,未经允许,严禁转载