JavaScript数组排序核心是sort()方法，需用比较函数处理数字、字符串及对象字段排序，配合map()等方法实现数据展示，注意原地修改、空值处理及localeCompare()使用。
JavaScript 数组方法是实现数据排序与展示最常用、最灵活的方式，核心在于 sort() 方法的正确使用，配合 map()、filter() 等方法可完成从原始数据到最终展示的完整流程。
用 sort() 实现基础数值和字符串排序
sort() 默认按字符串 Unicode 编码排序，直接用于数字会出错（如 [10, 2, 33] 排成 [10, 2, 33]）。需传入比较函数：
- 升序数字：
arr.sort((a, b) => a - b) - 降序数字：
arr.sort((a, b) => b - a) - 字符串忽略大小写升序：
arr.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
对对象数组按字段排序
实际业务中常处理用户列表、商品列表等对象数组。可封装通用排序函数：
- 按单个字段升序：
data.sort((a, b) => a.name.localeCompare(b.name)) - 按数字字段降序：
data.sort((a, b) => b.price - a.price) - 多级排序（先按状态，再按时间）：
data.sort((a, b) => a.status.localeCompare(b.status) || b.createdAt - a.createdAt)
排序后结合 map() 渲染展示内容
排序本身不改变页面，需配合 DOM 操作或框架逻辑输出。纯 JS 示例：
立即学习“Java免费学习笔记（深入）”；
- 排序后生成 HTML 字符串：
const html = sortedData.map(item => `<div>${item.name} — ¥${item.price}</div>`).join('') - 插入到容器：
document.getElementById('list').innerHTML = html - 注意：若需保留原始数组，排序前用
[...arr]或arr.slice()创建副本
避免常见陷阱
排序容易踩坑，关键点要留心：
-
sort()是原地修改，会改变原数组 - 浮点数比较慎用
===，排序中用减法更稳妥 - 中文、日文等语言排序推荐用
localeCompare()，而非简单a > b - 空值或 undefined 字段需提前处理，否则可能中断排序或排到最前
