JavaScript的sort()默认按Unicode排序导致数字错排，需用比较函数如(a,b)=>a-b；应复制数组避免副作用；按钮切换排序需用数据属性或闭包维护状态；DOM更新推荐DocumentFragment；深层字段排序须安全取值并处理null/undefined。
点击按钮触发数组排序时，为什么 sort() 没效果或排错？
JavaScript 的 sort() 默认按字符串 Unicode 码点排序，数字会变成 [1, 10, 2] 这种结果。直接对原始数组调用 sort() 还可能引发副作用——比如你绑定了多次点击事件，但数组已被原地修改，第二次点“正序”就不是初始顺序了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 永远用比较函数：数字排序写成
(a, b) => a - b（升序）或(a, b) => b - a（降序） - 不要复用原始数据数组；每次排序前用
[...originalArray]或originalArray.slice()创建副本 - 避免在事件监听里反复
push或splice原数组，否则状态不可控
HTML 按钮如何绑定两种排序并切换状态？
一个按钮实现“正序⇄倒序”切换，核心是记录当前排序方向。别用两个独立按钮（容易状态不一致），也别靠 DOM 文本判断（如读取按钮文字“正序”来决定下一次动作），而是用布尔变量或数据属性控制逻辑。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给按钮加
data-sort-order="asc"属性，点击时用dataset.sortOrder读取并翻转 - 用
let isAsc = true在闭包或组件作用域中维护状态，比查 DOM 更可靠 - 排序后立即更新按钮文案：
btn.textContent = isAsc ? '倒序' : '正序'，保持 UI 与逻辑同步
表格数据重排时，DOM 怎么高效更新而不闪屏？
直接删光 <tbody> 再逐行 appendChild 容易造成重排闪烁，尤其数据量稍大（>50 行）时明显。浏览器渲染是异步的，频繁 DOM 操作还会阻塞主线程。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
DocumentFragment批量构建新行，最后一次性挂载：frag.appendChild(row)循环完再tbody.replaceChildren(frag) - 如果用现代框架（如 React/Vue），别手动操作 DOM；纯 JS 场景下，避免用
innerHTML += ...拼接，它会销毁重建所有子节点 - 对超长列表（>500 行），考虑虚拟滚动，排序只影响数据源，视图层按需渲染可见区域
后端返回的数据带嵌套字段，怎么按 user.name 或 order.totalPrice 排序？
深层属性排序不能直接传 a.user.name - b.user.name，因为可能遇到 undefined 或 null 导致 NaN，整个排序就乱了。另外大小写、空格、中文拼音顺序也要处理。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 提取字段用安全访问：写个工具函数
get(obj, path)，支持'user.name'或['user', 'name']路径 - 字符串排序加
.toLowerCase().trim()，中文可用localeCompare('zh-CN', { numeric: true }) - 对可能为空的字段，统一转成空字符串或 0 再比，例如：
const aVal = get(a, 'order.totalPrice') || 0
排序逻辑本身不难，难的是状态管理、DOM 更新节奏和边界值处理。最容易被忽略的是：没做深拷贝导致多次点击后数据源污染，以及没处理 null/undefined 就直接进比较函数。
