直接对含空值或非数字文本的字符串调用Number()或使用-运算符会导致NaN，引发排序异常；应采用Intl.Collator({numeric: true})实现自然排序，确保“item2”正确排在“item10”前。
点击表头触发排序时，sort() 返回 NaN 或乱序
常见原因是直接对字符串调用 Number() 或用 - 运算符处理空值、非数字文本（如“—”、“暂无”、“-”）。浏览器会把它们转成 NaN，而 NaN > 任何数 和 NaN 都是 <code>false，导致排序算法行为不可预测。
正确做法是先清洗数据：提取纯数字部分，对无效值统一设为 Infinity（升序排最后）或 -Infinity（降序排最后）。示例：
function safeNumber(str) {
const num = Number(str?.toString().replace(/[^\d.-]/g, ''));
return isNaN(num) ? Infinity : num;
}
- 用正则
/[^\d.-]/g剔除非数字字符（保留负号和小数点），再转Number - 避免用
parseInt(str, 10)——它遇到“2.5万”会截成2，且“abc123”返回NaN - 注意
textContent可能含空格或换行，建议先.trim()
同一列反复点击需切换升序/降序，但状态总重置
问题根源是每次点击都新建排序逻辑，没记录当前排序方向。必须在 DOM 元素上挂载状态，推荐用 dataset：
th.addEventListener('click', function() {
const order = this.dataset.order === 'asc' ? 'desc' : 'asc';
this.dataset.order = order;
sortTable(this.cellIndex, order);
});
- 不要用全局变量存当前列索引和方向——多列同时可排序时会冲突
-
dataset.order初始为空，第一次点击时this.dataset.order === 'asc'是false，自然走desc分支 - 若需默认某列为升序，初始化时加
th.dataset.order = 'asc'
中文、数字混合内容（如“苹果12”“华为Mate60”）按字典序排错位
纯 String.prototype.localeCompare() 对含数字的字符串效果差（“Item2” > “Item10”）。需实现自然排序（natural sort）。
立即学习“前端免费学习笔记（深入）”；
简单可靠的方案是用 Intl.Collator 启用数字敏感模式：
const collator = new Intl.Collator('zh', { numeric: true, sensitivity: 'base' });
rows.sort((a, b) => collator.compare(
a.cells[colIndex].textContent.trim(),
b.cells[colIndex].textContent.trim()
));
-
numeric: true是关键，让 “item2” -
sensitivity: 'base'忽略大小写和重音，适合中文场景 - 不推荐手写正则分割数字/非数字——边界情况多（负数、小数、单位符号等）
表格含 <tbody> 和 <tfoot> 时，rows 选错范围
直接用 table.rows 会把 <thead> 和 <tfoot> 行也纳入排序，导致表头被拖进数据区。必须限定只排 <tbody> 内的 <tr>。
- 正确获取数据行：
Array.from(table.tBodies[0].rows) - 如果表格有多个
<tbody>，按需选索引，别用querySelector('tbody').rows（返回HTMLCollection，需转数组） - 排序后插入前，先清空
tBodies[0]，再用append(...sortedRows)，避免重复节点报错
真实项目里最常漏掉的是空单元格处理和多 tbody 场景——不显式限定范围，上线后点几次表头就发现表头不见了。
