前端處理後端返回的 JSON 數組時，Array.prototype.sort() 是原生高效的排序利器。本文通過實戰案例講解多字段升降序排序技巧。
arr.sort(function(a, b) {
// 升序：a - b
// 降序：b - a
return a.num - b.num;
});
$.post("data.json", function(data) {
// 數據結構：[{num: "5"}, {num: "1"}, {num: "3"}, {num: "2"}]
// 字符串數值需轉換，或使用一元加號
data.sort(function(a, b) {
return +a.num - +b.num; // 升序
// return +b.num - +a.num; // 降序
});
for (var i = 0; i < data.length; i++) {
document.writeln(data[i].num); // 輸出: 1 2 3 5
}
}, "json");
// 數據：[{name: "李四", age: 25, score: 90}, {name: "張三", age: 25, score: 85}, ...]
data.sort(function(a, b) {
// 主鍵：age 升序
if (a.age !== b.age) return a.age - b.age;
// 次鍵：score 降序
return b.score - a.score;
});
| 陷阱 | 現象 | 解決方案 |
|---|---|---|
| 字符串數值直接相減 | "10" - "2" = 8 ✓ 但 "10" > "2" 字符串比較錯誤 | 使用 +a.num 或 Number(a.num) 強制轉型 |
| sort 修改原數組 | 副作用影響後續邏輯 | 先拷貝：[...data].sort(...) |
| 對象屬性缺失 | 返回 NaN 導致順序混亂 | 加默認值：(a.num||0) - (b.num||0) |
| 穩定性依賴 | ES2019 前 sort 不穩定 | 現代瀏覽器已穩定，舊環境用索引輔助 |
data.map(x => ({...x, _key: +x.num})).sort((a,b)=>a._key-b._key)sort() 配合箭頭函數可寫出極簡代碼：data.sort((a,b) => +a.num - +b.num)。掌握比較函數返回值語義（負/零/正），靈活組合多字段排序，是前端數據處理的基本功。
