点击表头排序失效因sort()原地操作且返回undefined，正确做法是先用[...data]拷贝再排序，字符串比较需toLowerCase()，数字列须显式转Number。
点击表头后排序不生效，sort() 返回 undefined
JavaScript 的 Array.prototype.sort() 是原地排序，不返回新数组，直接赋值给变量会导致数据变 undefined。常见写法 data = data.sort(...) 就是典型错误。
正确做法是先拷贝再排序：
const sortedData = [...data].sort((a, b) => {
if (a[col] < b[col]) return order === 'asc' ? -1 : 1;
if (a[col] > b[col]) return order === 'asc' ? 1 : -1;
return 0;
});
- 用
[...data]或data.slice()避免污染原始数据 - 字符串比较注意大小写，建议统一转小写：
a[col].toString().toLowerCase() - 数字列必须显式转为数值，否则
'10' 会返回 <code>true：Number(a[col])或+a[col]
多次点击同一表头，升序/降序切换逻辑错乱
状态管理没跟上点击节奏，比如用布尔值 isAsc 却没在每次点击时翻转，或多个表头共用一个状态变量。
推荐每个表头维护独立排序状态：
立即学习“前端免费学习笔记（深入）”；
const sortState = { name: 'asc', age: 'desc', score: 'asc' };
绑定点击事件时传入字段名：
<th onclick="handleSort('name')">姓名</th>
-
handleSort(col)内部：先取当前状态sortState[col]，再设为sortState[col] = sortState[col] === 'asc' ? 'desc' : 'asc' - 避免用全局变量或闭包外的单个
direction变量，否则点不同列会互相覆盖 - 首次点击默认升序，不是“从降序开始切”
中文、数字、空值混合排序结果错位
纯 localeCompare() 对数字串排序无效（'10'.localeCompare('2') 返回 -1），而纯数值转换又会让中文变 NaN。
按字段类型分路径处理：
- 先判断字段是否全为数字（正则
^[+-]?\d*\.?\d+$）→ 走数值比较 - 含中文或字母 → 用
a[col].toString().localeCompare(b[col].toString(), 'zh-CN') - 遇到
null/undefined/ 空字符串，统一排在末尾：if (a[col] == null) return 1; if (b[col] == null) return -1;
不要试图写一个万能比较函数一统天下——类型不确定时，宁可按列配置比较器。
表格重绘后排序状态丢失，或 DOM 更新卡顿
直接操作 innerHTML 或频繁 appendChild 会清空事件监听，且大量 DOM 插入慢。
- 用
document.createDocumentFragment()批量生成行，最后一次性挂载 - 排序后只更新
<tbody>，不动<thead>，避免重绑点击事件 - 状态（如当前排序列、方向）存在 JS 变量里，不要依赖 DOM class（如
class="sorted-asc"）来读取 - 超过 500 行建议加
requestIdleCallback或简单节流，否则连续点击可能卡死
真实场景里，表头图标（↑↓）和排序状态同步最容易被忽略——状态改了，但箭头没更新，用户会以为没点动。
