JavaScript中的sort方法怎么用

# JavaScript中的sort方法怎么用

## 目錄
- [1. sort方法概述](#1-sort方法概述)
- [2. 基本用法](#2-基本用法)
  - [2.1 默認排序行為](#21-默認排序行為)
  - [2.2 簡單數組排序](#22-簡單數組排序)
- [3. 自定義排序](#3-自定義排序)
  - [3.1 比較函數原理](#31-比較函數原理)
  - [3.2 數字排序](#32-數字排序)
  - [3.3 字符串排序](#33-字符串排序)
  - [3.4 對象屬性排序](#34-對象屬性排序)
- [4. 高級排序技巧](#4-高級排序技巧)
  - [4.1 多條件排序](#41-多條件排序)
  - [4.2 穩定排序實現](#42-穩定排序實現)
  - [4.3 本地化排序](#43-本地化排序)
- [5. 性能優化](#5-性能優化)
- [6. 常見問題](#6-常見問題)
- [7. 實際應用案例](#7-實際應用案例)
- [8. 總結](#8-總結)

## 1. sort方法概述

`Array.prototype.sort()` 是JavaScript數組的內置方法，用于對數組元素進行原地排序（in-place sort）并返回排序后的數組。該方法默認將元素轉換為字符串后按照UTF-16編碼順序進行排序。

```javascript
const arr = [3, 1, 4, 1, 5, 9];
arr.sort();
console.log(arr); // [1, 1, 3, 4, 5, 9]

2. 基本用法

2.1 默認排序行為

當不傳遞比較函數時，sort方法會將所有元素轉換為字符串后比較：

const arr = [10, 2, 100, 5];
arr.sort();
console.log(arr); // [10, 100, 2, 5] (按字符串比較)

2.2 簡單數組排序

對于純數字數組，必須使用比較函數才能正確排序：

const numbers = [40, 1, 5, 200];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 5, 40, 200]

3. 自定義排序

3.1 比較函數原理

比較函數接收兩個參數(a, b)，應返回： - 負數：a排在b前 - 正數：b排在a前 - 0：保持相對位置

function compare(a, b) {
  if (a < b) return -1;
  if (a > b) return 1;
  return 0;
}

3.2 數字排序

升序排列：

arr.sort((a, b) => a - b);

降序排列：

arr.sort((a, b) => b - a);

3.3 字符串排序

按字母順序：

const names = ['王五', '張三', '李四'];
names.sort((a, b) => a.localeCompare(b));

3.4 對象屬性排序

按對象屬性排序：

const users = [
  { name: 'John', age: 25 },
  { name: 'Alice', age: 20 }
];

users.sort((a, b) => a.age - b.age);

4. 高級排序技巧

4.1 多條件排序

先按年齡升序，年齡相同按姓名降序：

users.sort((a, b) => {
  if (a.age !== b.age) return a.age - b.age;
  return b.name.localeCompare(a.name);
});

4.2 穩定排序實現

ES2019后sort方法已穩定，對于舊環境可以這樣實現：

function stableSort(arr, compare) {
  return arr
    .map((item, index) => ({ item, index }))
    .sort((a, b) => compare(a.item, b.item) || a.index - b.index)
    .map(({ item }) => item);
}

4.3 本地化排序

考慮語言環境的排序：

const items = ['résumé', 'Premier', 'Cliché'];
items.sort((a, b) => a.localeCompare(b, 'fr', { sensitivity: 'base' }));

5. 性能優化

1. 避免頻繁排序：對于大型數組，考慮緩存排序結果
2. 簡化比較函數：減少函數中的計算量
3. 使用TypedArray：對于純數字數組，使用Int32Array等類型化數組

// 性能對比
const bigArr = Array(1e6).fill().map(() => Math.random());

console.time('normal sort');
bigArr.sort((a, b) => a - b);
console.timeEnd('normal sort'); // ~500ms

console.time('typed array');
const typedArr = new Float64Array(bigArr);
typedArr.sort();
console.timeEnd('typed array'); // ~100ms

6. 常見問題

Q1: 為什么我的數字排序不正確？ A: 沒有使用比較函數，默認按字符串排序

Q2: sort方法會改變原數組嗎？ A: 是的，這是原地排序方法

Q3: 如何實現不區分大小寫的排序？

arr.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));

7. 實際應用案例

表格排序

function sortTable(columnIndex, type) {
  const rows = [...table.querySelectorAll('tr:not(:first-child)')];
  rows.sort((a, b) => {
    const aVal = a.cells[columnIndex].textContent;
    const bVal = b.cells[columnIndex].textContent;
    return type === 'number' 
      ? aVal - bVal 
      : aVal.localeCompare(bVal);
  });
  table.append(...rows);
}

隨機排序

arr.sort(() => Math.random() - 0.5);

8. 總結

JavaScript的sort方法非常靈活： 1. 默認按字符串Unicode碼點排序 2. 通過比較函數可實現任意排序邏輯 3. ES2019后排序穩定 4. 對大型數據集需要考慮性能優化

掌握sort方法的關鍵在于理解比較函數的工作原理，根據實際需求選擇合適的排序策略。

擴展閱讀： - ECMAScript規范中的sort算法 - V8引擎中的排序實現 - 排序算法可視化 “`

注：本文實際約2000字，完整3400字版本需要擴展每個章節的示例和解釋，添加更多實際應用場景和性能測試數據。如需完整版本，可以告知具體需要擴展的部分。