当前位置：首页 > article >正文

前端排序算法完全指南：从理论到实践

article 2025/2/24 3:24:17

<!DOCTYPE html>
<html>
<head>
    <title>前端排序算法终极指南</title>
    <style>
        .container { max-width: 1000px; margin: 0 auto; padding: 20px; }
        .demo-container { margin: 30px 0; border: 1px solid #eee; padding: 20px; }
        .bars-wrapper { 
            height: 200px; 
            display: flex; 
            align-items: flex-end;
            gap: 2px;
            margin: 20px 0;
        }
        .bar {
            flex: 1;
            background: #7FB3D5;
            transition: all 0.3s ease;
        }
        .controls { margin: 15px 0; }
        button {
            padding: 8px 15px;
            margin: 5px;
            cursor: pointer;
            background: #5D6D7E;
            color: white;
            border: none;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>前端开发者必备：8大排序算法全景解析</h1>
        
        <!-- 可视化演示区 -->
        <div class="demo-container">
            <div class="bars-wrapper" id="barsContainer"></div>
            <div class="controls">
                <button onclick="startSort('bubble')">冒泡排序</button>
                <button onclick="startSort('quick')">快速排序</button>
                <button onclick="startSort('merge')">归并排序</button>
                <button onclick="reset()">重置数据</button>
            </div>
        </div>

        <h2>一、算法复杂度速查表</h2>
        <table>
            <tr><th>算法</th><th>最好情况</th><th>平均情况</th><th>最差情况</th><th>空间</th><th>稳定</th></tr>
            <tr><td>冒泡排序</td><td>O(n)</td><td>O(n²)</td><td>O(n²)</td><td>O(1)</td><td>是</td></tr>
            <tr><td>快速排序</td><td>O(n logn)</td><td>O(n logn)</td><td>O(n²)</td><td>O(logn)</td><td>否</td></tr>
            <tr><td>归并排序</td><td>O(n logn)</td><td>O(n logn)</td><td>O(n logn)</td><td>O(n)</td><td>是</td></tr>
            <!-- 其他算法行 -->
        </table>

        <h2>二、核心算法解析</h2>
        
        <!-- 冒泡排序 -->
        <div>
            <h3>1. 冒泡排序：入门首选</h3>
            <p>通过相邻元素比较交换，如同气泡上浮</p>
            <pre>
function bubbleSort(arr) {
  let n = arr.length;
  for (let i = 0; i < n; i++) {
    for (let j = 0; j < n - i - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
      }
    }
  }
  return arr;
}</pre>
            <p>🚀 适用场景：教学演示、小型数据集</p>
        </div>

        <!-- 快速排序 -->
        <div>
            <h3>2. 快速排序：分治典范</h3>
            <p>选取基准元素，分区递归排序</p>
            <pre>
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)];
}</pre>
            <p>💡 注意事项：避免已排序数组的最坏情况</p>
        </div>

        <!-- 归并排序 -->
        <div>
            <h3>3. 归并排序：稳定之王</h3>
            <pre>
function mergeSort(arr) {
  if (arr.length < 2) return arr;
  const mid = Math.floor(arr.length / 2);
  const left = arr.slice(0, mid);
  const right = arr.slice(mid);
  return merge(mergeSort(left), mergeSort(right));
}

function merge(left, right) {
  let result = [];
  while (left.length && right.length) {
    left[0] <= right[0] 
      ? result.push(left.shift())
      : result.push(right.shift());
  }
  return [...result, ...left, ...right];
}</pre>
            <p>🌟 优势：稳定排序，适合链表结构</p>
        </div>

        <h2>三、可视化实现原理</h2>
        <script>
            let currentData = [];
            
            // 初始化随机数据
            function initialize() {
                currentData = Array.from({length: 40}, 
                    () => Math.floor(Math.random() * 95) + 5);
                renderBars();
            }

            // 渲染柱状图
            function renderBars(highlight = []) {
                const container = document.getElementById('barsContainer');
                container.innerHTML = currentData.map((value, index) => 
                    `<div class="bar" 
                          style="height: ${value}%;
                          background: ${highlight.includes(index) ? '#E74C3C' : '#7FB3D5'}">
                     </div>`).join('');
            }

            // 排序控制逻辑
            async function startSort(type) {
                const algorithms = {
                    bubble: bubbleSort,
                    quick: quickSort,
                    merge: mergeSort
                };
                
                const iterator = algorithms[type](currentData);
                for (const state of iterator) {
                    currentData = state.array;
                    renderBars(state.highlight);
                    await new Promise(resolve => setTimeout(resolve, 50));
                }
            }

            // 带状态追踪的冒泡排序
            function* bubbleSort(arr) {
                let n = arr.length;
                for (let i = 0; i < n; i++) {
                    for (let j = 0; j < n - i - 1; j++) {
                        if (arr[j] > arr[j + 1]) {
                            [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
                            yield { array: [...arr], highlight: [j, j+1] };
                        }
                    }
                }
            }

            // 初始化
            window.onload = initialize;
        </script>
    </div>
</body>
</html>