因为sort()默认将元素转为字符串按Unicode码点比较，"10"的首字符"1"码点小于"2"，故排在前面；需对数字、日期、布尔值等显式转换类型或编写对应比较函数，并通过data-type属性动态分发排序逻辑。
点击表头触发排序时，为什么 sort() 会把数字当字符串排？
默认 sort() 比较的是字符串 Unicode 值，"10" 会排在 "2" 前面。表格里数字、日期、布尔值混排时必须显式转类型或写比较函数。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对纯数字列：用
(a, b) => Number(a) - Number(b)，比parseInt()更安全（能处理小数和空字符串） - 对日期列：先转成
Date对象再比毫秒值，比如(a, b) => new Date(a) - new Date(b) - 对布尔列：直接用
(a, b) => a === b ? 0 : a ? -1 : 1 - 避免在排序函数里反复调用
textContent或innerText——提前把数据抽成数组，排序后再回填
怎么给不同列绑定各自的排序逻辑？
不能所有列都用同一套比较函数。需要按列类型动态选择规则，常见做法是用一个映射对象存每列的解析器和比较器。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
<th>加data-type="number"、data-type="date"等属性，JS 读取后分发逻辑 - 用
Map或普通对象缓存已解析的数据，避免重复解析（比如日期列每次点都 new Date() 很慢） - 注意空值/非法值处理：
Number("abc")是NaN，排序时会跑到末尾，可统一转为0或Infinity控制位置 - 示例片段：
const sortHandlers = { number: (a, b) => Number(a) || 0 - (Number(b) || 0), date: (a, b) => new Date(a).getTime() - new Date(b).getTime(), string: (a, b) => a.localeCompare(b) };
点击排序后，如何保持当前列的升/降序状态并切换？
用户第二次点同一列，应该反转顺序，而不是重置为升序。靠全局变量或 DOM 属性记状态最直接。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
th.setAttribute("data-sort", "asc")切换，再读取判断方向，比维护独立变量更可靠 - 升序时直接用原比较函数；降序时交换参数顺序：
(a, b) => handler(b, a) - 其他列恢复默认未排序样式（比如清除箭头图标），只保留当前列的视觉标识
- 别忘了在排序前把
<tbody>的所有<tr>提前存成数组——直接操作 DOM 移动节点比重新 innerHTML 更稳定
表格有分页或虚拟滚动时，还能用原生 JS 排序吗？
不能直接对当前页面的 <tr> 排序，那只是视图子集。真实数据源必须参与排序，否则翻页后顺序错乱。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把原始数据存在 JS 变量（如
let rawData = [...]），所有排序操作基于它，渲染只负责同步视图 - 分页场景下，先
rawData.sort(...)，再取.slice(currentPage * pageSize)渲染 - 虚拟滚动要配合
scrollTop和渲染窗口计算，排序后需重置滚动位置或保留锚点（比如记住原第 5 行内容，排序后定位到它） - 性能敏感时，避免每次点击都全量排序——用
Array.from().sort()创建新数组，别改原数组，方便后续对比或撤销
实际项目里最容易漏掉的是数据类型推断和空值边界处理，尤其是从 HTML 表格里直接读 textContent 时，看似是数字，实则带空格或单位（如 " 42 kg"）。先清洗再排序，比事后 debug 强得多。
