一、真实开发场景：商品价格错乱引发的事故

某电商平台新品上线后，前端出现诡异现象：

javascript复制
const prices = [88, 120, 9.9, 299];
prices.sort(); 
// 结果：[120, 299, 88, 9.9] (错误！)

用户投诉"价格筛选失效"，排查发现开发者直接调用sort()导致数字被当作字符串比较。这个典型案例揭示了JS数组排序的3个关键认知：

二、基础排序场景解决方案

▍场景1：简单数字列表排序

??正确实现方案??：

javascript复制
// 升序方案（价格从低到高）
const asc = prices.sort((a, b) => a - b);

// 降序方案（价格从高到低） 
const desc = prices.sort((a, b) => b - a);

▍原理图示：

[88, 120, 9.9, 299] 
   → sort((a,b)=>a-b)
   → [9.9, 88, 120, 299]
   
   → sort((a,b)=>b-a)
   → [299, 120, 88, 9.9]

三、复杂场景：对象数组排序

▍场景2：商品对象按价格排序

javascript复制
const products = [
  {id:1, price:88, stock:10},
  {id:2, price:9.9, stock:0},
  {id:3, price:299, stock:5}
];

// 价格升序（支持含小数价格）
products.sort((a,b) => a.price - b.price);

// 库存降序优先（有货商品置顶）
products.sort((a,b) => b.stock - a.stock);

▍混合排序规则：

javascript复制
// 优先展示有库存，同库存按价格升序
products.sort((a,b) => {
  if(a.stock === b.stock) {
    return a.price - b.price;
  }
  return b.stock - a.stock;
});

四、性能优化场景

▍场景3：万级商品数据排序

当遇到10,000+商品时，常规排序会出现卡顿：

javascript复制
// 优化方案1：使用TypedArray
const bigData = new Float64Array(10000);
// ...填充数据后
const sorted = bigData.sort((a,b) => a - b);

// 优化方案2：Web Worker分片处理
// 主线程
worker.postMessage(bigData);
// Worker线程
self.onmessage = (e) => e.data.sort(/*...*/);

▍性能对比（Chrome 115）：

五、最佳实践指南

1. ??防NaN策略??：排序前统一用Number()转换

   javascript复制
   arr.sort((a,b) => Number(a) - Number(b))

2. ??框架优化??：在Vue/React中避免重复排序

   javascript复制
   // 使用计算属性缓存排序结果
   computed: {
     sortedProducts() {
       return [...this.products].sort(/*...*/)
     }
   }

3. ??异常处理??：添加安全校验

   javascript复制
   function safeSort(arr) {
     return Array.isArray(arr) 
       ? arr.sort(/*...*/) 
       : console.error('非数组类型');
   }

六、应用场景总结