使用 JavaScript 的砖排序可视化(1)

📌 相关文章

📜 使用 JavaScript 的砖排序可视化(1)

📅 最后修改于: 2023-12-03 15:22:12.882000 🧑 作者: Mango

使用 JavaScript 的砖排序可视化

砖排序（Brick Sort）是冒泡排序（Bubble Sort）的一种变体。相比于冒泡排序每次只能交换相邻两个元素，砖排序则能同时交换当前序列中的两个元素，因此效率更高。砖排序在实现上比较简单，可以用 JavaScript 实现并加上可视化效果，方便理解和学习。

原理

砖排序的原理基本与冒泡排序相同，只不过每次交换变成了同时交换两个元素。整个排序过程如下：

先从左到右遍历一遍序列，同时比较当前元素和它的下一个元素。如果当前元素大于下一个元素，则交换它们的位置。
接着从右到左遍历一遍序列，同时比较当前元素和它的上一个元素。如果当前元素小于上一个元素，则交换它们的位置。
依此类推，重复进行以上两个步骤，直到序列完全有序为止。

JavaScript 实现

下面是使用 JavaScript 实现砖排序的代码片段：

function brickSort(list) {
    var i, j, tmp, left = 0, right = list.length - 1, flag = 1;
    while (flag > 0) {
        flag = 0;
        for (i = left; i < right; i++) {
            if (list[i] > list[i + 1]) {
                tmp = list[i];
                list[i] = list[i + 1];
                list[i + 1] = tmp;
                flag = 1;
            }
        }
        right--;
        for (j = right; j > left; j--) {
            if (list[j - 1] > list[j]) {
                tmp = list[j];
                list[j] = list[j - 1];
                list[j - 1] = tmp;
                flag = 1;
            }
        }
        left++;
    }
    return list;
}

该函数接受一个数组作为参数，返回排序后的数组。其中，变量 flag 用于判断序列是否已经有序，如果有序则退出循环；left 和 right 分别表示当前序列的左右边界，每次循环更新。

可以在浏览器中使用该函数进行排序，并加上可视化效果。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Brick Sort Visualization</title>
    <style>
        .bar {
            display: inline-block;
            width: 10px;
            height: 20px;
            margin-right: 2px;
            background-color: #3d3d3d;
        }
    </style>
</head>
<body>
    <div id="visual"></div>
    <button onclick="init()">Sort</button>
    <script>
        function init() {
            var list = Array.from({length: 50}, () => Math.floor(Math.random() * 100));
            var node = document.getElementById("visual");
            while (node.firstChild) node.removeChild(node.firstChild);
            for (var i = 0; i < list.length; i++) {
                var bar = document.createElement("div");
                bar.className = "bar";
                bar.style.height = list[i] + "px";
                node.appendChild(bar);
            }
            setTimeout(() => {
                brickSort(list);
                for (var i = 0; i < node.childNodes.length; i++) {
                    node.childNodes[i].style.height = list[i] + "px";
                }
            }, 0);
        }
    </script>
</body>
</html>

该代码实现了以下功能：

点击 Sort 按钮后生成一个包含 50 个元素的随机序列，并在页面中以可视化的形式展示出来。
将随机序列传入 brickSort 函数中进行排序。
将排序后的结果反映到页面中的可视化效果中。

完整的代码片段可以在 CodePen 中查看。