JavaScript的sort()默认按字符串Unicode码点排序，导致数字[10,2,15]排成[10,15,2]；需传入比较函数适配数值、日期、字符串类型，并用快照保存原始顺序，结合step状态实现原始/升序/降序三态切换。
点击表头触发排序时，sort() 为什么总把数字当字符串排？
因为 JavaScript 的 Array.prototype.sort() 默认按字符串 Unicode 码点比较，[10, 2, 15] 排出来是 [10, 15, 2]。真实列表数据常混着数字、日期、空值，直接 .sort() 必踩坑。
解决方法是传入比较函数，并对每列类型做适配：
- 数值列：用
a - b（升序）或b - a（降序），自动处理null/undefined（可先转为 0 或Infinity） - 日期列：先转成
new Date()或时间戳再比，避免字符串格式差异（如"2023-01-05"vs"5/1/2023"） - 字符串列：统一转小写 +
localeCompare()，支持中文和特殊字符
示例：对含数字的姓名/年龄列表排序
function compareBy(field, order = 'asc') {
return (a, b) => {
let aa = a[field], bb = b[field];
if (typeof aa === 'number' && typeof bb === 'number') {
return order === 'asc' ? aa - bb : bb - aa;
}
aa = String(aa).toLowerCase();
bb = String(bb).toLowerCase();
return order === 'asc'
? aa.localeCompare(bb)
: bb.localeCompare(aa);
};
}怎么让点击一次升序、再点降序、第三次恢复原始顺序？
不能只靠布尔值翻转，因为「原始顺序」不是简单地再排一次——它得是 DOM 渲染前的初始数组状态。必须提前存一份快照。
立即学习“前端免费学习笔记（深入）”；
实操要点：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 初始化时用
const originalData = [...data]深拷贝（若含对象，需结构化克隆或JSON.parse(JSON.stringify())） - 维护一个状态变量，比如
sortState = { field: null, order: 'asc', step: 0 }，step为 0/1/2 分别对应原始/升序/降序 - 每次点击表头：先
step = (step + 1) % 3，再按step值决定是用originalData、升序sort()还是降序sort()
注意：如果列表支持分页或搜索过滤，「原始顺序」应指当前可见数据的初始顺序，而非全量原始数据。
innerHTML 重绘列表太卡？用 DocumentFragment 还是虚拟 DOM？
纯前端排序后直接拼 HTML 字符串再赋给 innerHTML，在百条以上数据时会明显卡顿，且丢失输入框焦点、滚动位置等状态。
更轻量的解法是操作 DOM 节点本身：
- 用
document.createDocumentFragment()批量插入新顺序的<li>或<tr>，最后一次性 append 到父容器<li>不重建节点，只调用 <code>parentNode.appendChild(child)—— 浏览器会自动移动节点，保留绑定事件和 focus 状态 - 避免在循环里反复读写
offsetHeight等触发重排的属性
示例（假设列表是 <ul id="list"></ul>）：
const frag = document.createDocumentFragment();
sortedItems.forEach(item => {
const li = document.querySelector(`[data-id="${item.id}"]`);
if (li) frag.appendChild(li); // 移动已有节点
});
list.appendChild(frag); // 一次重排服务端排序和前端排序到底该选哪个？
不是「非此即彼」，而是看数据规模和交互要求：
- 前端排序适合：静态列表、
- 服务端排序必须用：数据持续更新、含权限过滤、要结合搜索/分页、总数超万级（浏览器排序慢且内存溢出风险高）
- 混合策略常见：首次加载带默认排序的第一页（服务端返回），后续点击排序按钮时，若已缓存全量数据则前端重排；否则发带
?sort=price&order=desc的请求
关键提醒：服务端接口必须明确约定排序字段名与允许值（如只接受 name、created_at），防止被注入恶意 SQL 或 NoSQL 查询。
