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

<!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>