JavaScript 實戰：冒泡、插入、快速排序可視化演示與代碼詳解

面試高頻考點排序算法，本文提供一個開箱即用的 HTML/JS 互動頁面：輸入 10 個數字，點擊按鈕即可並排顯示三種排序結果，附完整代碼與邏輯註解，適合前端初學者與面試複習。

頁面結構 (index.html)

<input id="number" placeholder="請輸入 10 位數字(無空格)" />
<a id="resultBtn" href="javascript:void(0)">排序</a>
<label class="result" for="bubblesort"></label>  <!-- 冒泡結果 -->
<label class="result" for="insertsort"></label>  <!-- 插入結果 -->
<label class="result" for="quicksort"></label>  <!-- 快速結果 -->

核心算法實現 (script.js)

1. 冒泡排序 O(n²)

var bubble = function(arr) {
    for (var i = 0; i < 9; i++) {
        for (var j = 0; j < 9 - i; j++) {
            if (arr[j] > arr[j + 1]) {
                var temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }
    }
    return arr;
};

2. 插入排序 O(n²)

var insersort = function(arr) {
    for (var i = 1; i < 10; i++) {
        var temp = arr[i], j = i;
        while (j > 0 && arr[j - 1] > temp) {
            arr[j] = arr[j - 1];
            j--;
        }
        arr[j] = temp;
    }
    return arr;
};

3. 快速排序 平均 O(n log n)

var quicksort = function(arr) {
    if (arr.length <= 1) return arr;
    var midIndex = Math.floor(arr.length / 2);
    var pivot = arr.splice(midIndex, 1)[0];
    var left = [], right = [];
    for (var i = 0; i < arr.length; i++) {
        arr[i] < pivot ? left.push(arr[i]) : right.push(arr[i]);
    }
    return quicksort(left).concat([pivot], quicksort(right));
};

輸入驗證與交互

• 僅接受 10 位純數字，長度不足/超出/含非數字均提示錯誤。
• 輸入框無需空格分隔，直接輸入如 3829105647。

樣式美化 (style.css)

採用居中容器、圓角輸入框、懸浮變色按鈕、結果區塊清晰分隔，提升體驗感。

將三個文件放入同一目錄，瀏覽器打開 index.html 即可體驗。代碼結構清晰，易於擴展希爾、堆、歸併等更多算法。