前端開發必學的 JavaScript 排序算法

作者：web前端開發 2025-08-12 09:11:25

掌握基礎的JavaScript排序算法是前端工程師的核心能力。這篇文章介紹五種最常用的排序方法，用簡單語言和實際代碼幫你徹底理解它們。

在網頁和APP開發中，經常要處理列表數據排序。掌握基礎的JavaScript排序算法是前端工程師的核心能力。這篇文章介紹五種最常用的排序方法，用簡單語言和實際代碼幫你徹底理解它們。

為什么排序算法對前端很重要？

處理用戶數據：用戶列表、商品價格、日期排序都需要用到
優化性能：了解算法效率能提升大型數據集處理速度
面試必考：前端技術面試幾乎都會考察排序算法基礎

1. 冒泡排序：最基礎的交換排序

想象水中的氣泡向上冒。它反復比較相鄰元素，順序錯誤就交換：

functionbubbleSort(arr) {
for (let i = 0; i < arr.length; i++) {
for (let j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
// 交換位置
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
      }
    }
  }
return arr;
}

特點：代碼簡單但速度慢，小數據集可用

2. 選擇排序：每次找到最小值

像打撲克時按順序理牌：

functionselectionSort(arr) {
for (let i = 0; i < arr.length; i++) {
let minIndex = i;
for (let j = i + 1; j < arr.length; j++) {
if (arr[j] < arr[minIndex]) minIndex = j;
    }
    [arr[i], arr[minIndex]] = [arr[minIndex], arr[i]]; // 交換
  }
return arr;
}

適用場景：數據量中等且要求簡單實現時

3. 插入排序：像理撲克牌

逐個將元素插入已排序序列的正確位置：

functioninsertionSort(arr) {
for (let i = 1; i < arr.length; i++) {
let current = arr[i];
let j = i - 1;
while (j >= 0 && arr[j] > current) {
      arr[j + 1] = arr[j]; // 后移元素
      j--;
    }
    arr[j + 1] = current; // 插入
  }
return arr;
}

優勢：對基本有序的數據排序非常快

4. 快速排序：最高效的通用排序

function quickSort(arr) {
if (arr.length <= 1) return arr;

  const pivot = arr[0];
  const left = [];
  const right = [];

for (let i = 1; i < arr.length; i++) {
    arr[i] < pivot ? left.push(arr[i]) : right.push(arr[i]);
  }

return [...quickSort(left), pivot, ...quickSort(right)];
}

為什么前端要掌握它：處理大量數據時速度優勢明顯

5. 歸并排序：穩定高效的排序

先分割再合并的典型算法：

function mergeSort(arr) {
if (arr.length < 2) return arr;

constmid = Math.floor(arr.length / 2);
constleft = arr.slice(0, mid);
constright = arr.slice(mid);

  return merge(mergeSort(left), mergeSort(right));
}

function merge(left, right) {
const result = [];
while (left.length && right.length) {
left[0] <= right[0] 
      ? result.push(left.shift()) 
      : result.push(right.shift());
  }
  return [...result, ...left, ...right];
}

核心優勢：穩定排序且速度有保障

算法速度比較（時間復雜度）

算法	平均速度	最快情況	最慢情況
冒泡排序	O(n2)	O(n)	O(n2)
插入排序	O(n2)	O(n)	O(n2)
選擇排序	O(n2)	O(n2)	O(n2)
快速排序	O(n log n)	O(n log n)	O(n2)
歸并排序	O(n log n)	O(n log n)	O(n log n)

前端開發怎么選擇排序方法？

小數組（<100項）：插入排序簡單高效
通用需求：優先用內置的array.sort()
大數據集：快速排序或歸并排序
需要穩定排序：選擇歸并排序

理解這些JavaScript排序算法原理能讓你：

更高效處理前端數據展示
在技術面試中脫穎而出
根據場景選擇最優排序方案

實際開發中，JavaScript自帶的array.sort()方法通常足夠使用（它使用優化后的Timsort算法）。

但手動實現這些算法能顯著提升你的編程思維。嘗試在CodePen或LeetCode上練習這些代碼，親手調試能加深理解。

掌握排序算法，你的前端開發基礎會更扎實可靠。

責任編輯：龐桂玉來源： web前端開發