html无内置排序能力，前端排序必须用javascript实现；数组对象排序需用sort()并注意数值比较、大小写处理、多级排序及性能；表格排序须分离数据与视图；国际化排序推荐intl.collator；关键在于明确排序时机与范围。
HTML 本身不提供数据排序能力——它只是标记语言，没有内置的排序函数或逻辑。所有前端数据排序都必须靠 JavaScript 实现，且实际效果高度依赖你用的是静态 HTML 表格、动态渲染的列表，还是绑定了框架（如 Vue/React）的数据。
原生 JavaScript 对数组对象排序（最常用场景）
如果你的数据是 JS 数组（比如从 API 拿到的 users 列表），直接用 Array.prototype.sort() 即可，但要注意：它会原地修改数组，且默认按字符串 Unicode 码点排序，容易出错。
- 数字字段排序必须显式转为数值比较：
arr.sort((a, b) => a.age - b.age) - 字符串字段注意大小写：
arr.sort((a, b) => a.name.localeCompare(b.name)) - 多级排序可链式处理，比如先按状态再按时间：
arr.sort((a, b) => a.status.localeCompare(b.status) || b.createdAt - a.createdAt) - 避免在
sort()回调里做耗时操作（如 DOM 查询、正则匹配），否则卡顿明显
对 HTML 表格（<table>）内容排序<p>不能直接对 <code><tr> 元素调用 <code>sort()，得先提取数据、排序、再重排 DOM。手动操作易出错，关键是要「分离数据与视图」。
- 推荐做法：把表格行对应的数据存成数组，排序后用
innerHTML 或 DocumentFragment 一次性重绘，避免逐行 appendChild 触发多次重排
- 如果表格有分页或筛选，排序前务必确认当前只对「全量数据」排序，而不是仅对当前页 DOM 节点排序（常见 bug）
- 点击表头触发排序时，记得记录上次排序字段和方向，实现升/降序切换：
currentSort = { field: 'name', desc: true }
使用 Intl.Collator 处理国际化排序
innerHTML 或 DocumentFragment 一次性重绘，避免逐行 appendChild 触发多次重排currentSort = { field: 'name', desc: true }
Intl.Collator 处理国际化排序当用户语言是中文、阿拉伯语或带重音符号的西语时，String.prototype.localeCompare() 可能不够稳，Intl.Collator 更可靠，尤其在排序姓名、地名等场景。
- 基础用法：
new Intl.Collator('zh-CN').compare(a.name, b.name) - 支持忽略大小写、变音符号：
new Intl.Collator('en', { sensitivity: 'base' }).compare(...) - 性能稍低，别在每轮循环里重复创建实例——定义一次复用
- 注意浏览器兼容性：
Intl.Collator在 IE 中完全不可用，需降级到localeCompare或引入 polyfill
真正难的不是写排序逻辑，而是决定「什么时候重新排序」和「排序范围是否和用户预期一致」。比如搜索过滤后点了排序，该对全部数据排，还是只排已过滤结果？这个逻辑一旦写错，用户就会觉得“怎么点都不对”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
