点击<th>无反应需用事件委托并阻止默认行为；Array.prototype.sort()须传比较函数处理中文、数字及空值；切换升序/降序应缓存状态至JS对象而非DOM；IE兼容需用getAttribute、slice.call等降级方案。
点击 <th> 触发排序，但没反应？检查事件绑定位置
直接给 <th> 绑 onclick 是最常见写法，但容易忽略两点：一是表格可能动态生成，静态绑定会失效；二是未阻止默认行为（比如链接跳转或表单提交），导致页面刷新。建议统一用事件委托，监听 <table> 或 <thead> 的点击，再判断目标是否为 <th>。
实操建议：
- 用
event.target.tagName === 'TH'做类型判断，比classList.contains()更轻量 - 给每个
<th>加data-sort-key="name"属性，避免靠索引硬编码列序号 - 如果用了框架（如 Vue/React），别在模板里写
onclick，优先走响应式数据驱动
Array.prototype.sort() 排中文、数字、空值时乱序？必须传比较函数
直接 arr.sort() 会把所有值转成字符串再比较，10 会排在 2 前面，null 和 undefined 会被排到开头，中文按 Unicode 码点排（不是拼音）。排序前先做类型归一化处理更稳妥。
实操建议：
- 数字列：用
(a, b) => a - b（注意 NaN 安全，可加?? 0） - 字符串列：用
(a, b) => String(a).localeCompare(String(b))，支持中文拼音排序 - 空值统一置底：比较函数里先
if (a == null) return 1; if (b == null) return -1;
多次点击同一列，如何切换升序/降序？用状态变量别存 DOM 上
有人习惯在 <th> 上写 data-sort-dir="asc"，每次点击 toggle。问题在于：DOM 属性易被其他脚本污染，且服务端渲染后初始状态难同步。更好的方式是用一个纯 JS 对象缓存当前排序状态，例如 { key: 'price', dir: 'desc' }。
实操建议：
- 点击时先查当前状态，再决定是取反还是重设新列
- 给当前排序列的
<th>动态加 class（如sorted-asc），样式用 CSS 控制箭头图标 - 如果表格有分页，排序状态要和当前页数据解耦——只对原始数据排序，再切片分页
IE 下 Array.from() 或 dataset 报错？降级方案要精简
老项目还要兼容 IE11，event.target.dataset.sortKey 会是 undefined，Array.from() 也不支持。没必要引入整个 Babel 或 Polyfill，几行代码就能兜底。
实操建议：
- 取 data 属性：用
event.target.getAttribute('data-sort-key')，IE6+ 都支持 - 转数组：用
[].slice.call(rows)替代Array.from(rows) - 箭头函数不支持？改用
function(a, b) { return a - b; }，别为了语法糖牺牲兼容性
排序逻辑本身不复杂，真正卡住人的往往是数据类型混合、DOM 状态不同步、以及跨浏览器的细节点。尤其是中文排序和空值处理，线上出过问题的几乎都栽在这两处。
