使用 JavaScript 的 Comb Sort Visualizer(1)

📌 相关文章

📜 使用 JavaScript 的 Comb Sort Visualizer(1)

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

使用 JavaScript 的 Comb Sort Visualizer

Comb Sort Visualizer 是一款基于 JavaScript 的排序可视化工具，可以帮助程序员更好地理解并测试 Comb Sort（梳排序）算法。

什么是 Comb Sort?

Comb Sort（梳排序）是一种基于冒泡排序算法的高效排序算法，由Włodzimierz Dobosiewicz于1980年发明。和冒泡排序类似，Comb Sort也将相邻的元素进行比较和交换，但不同的是，Comb Sort跳跃式比较和移动元素，可以更快地消除逆序对。

如何使用 Comb Sort Visualizer?

首先，你需要复制 Comb Sort Visualizer 的代码片段并在自己的网站或代码编辑器中运行。代码片段如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Comb Sort Visualizer</title>
    <style>
      /* 样式表 */
    </style>
  </head>
  <body>
    <h1>Comb Sort Visualizer</h1>
    <div id="array-container">
      <!-- 数组元素显示区域 -->
    </div>
    <button id="new-array-button">Generate New Array</button>
    <button id="start-sorting-button">Start Sorting</button>
    <div id="status-message">Click 'Start Sorting' to begin</div>
    <script>
      /* JavaScript 代码 */
    </script>
  </body>
</html>

接着，在 JavaScript 代码片段中，你需要编写 Comb Sort 的实现函数，并将其与可视化工具结合使用。下面是一个简单的 Comb Sort 实现函数：

function combSort(arr) {
  let gap = arr.length;
  let shrink = 1.3;
  let sorted = false;

  while (!sorted) {
    gap = Math.floor(gap / shrink);
    if (gap <= 1) {
      gap = 1;
      sorted = true;
    }

    for (let i = 0; i + gap < arr.length; i++) {
      if (arr[i] > arr[i + gap]) {
        [arr[i], arr[i + gap]] = [arr[i + gap], arr[i]];
        sorted = false;
      }
    }
  }

  return arr;
}

最后，在 JavaScript 代码片段中，你需要编写可视化工具的实现函数和事件监听器。下面是一个简单的可视化工具实现函数：

function visualizeCombSort(arr) {
  let delay = 100;
  let j = arr.length - 1;
  let i = 0;
  let gap = arr.length;

  // 初始化数组元素显示区域
  const arrayContainer = document.getElementById("array-container");
  arrayContainer.innerHTML = "";
  for (let num of arr) {
    const elem = document.createElement("div");
    elem.style.height = `${num * 3}px`;
    elem.classList.add("array-item");
    arrayContainer.appendChild(elem);
  }

  // 排序
  const intervalId = setInterval(() => {
    if (gap > 1 || i < j) {
      if (gap > 1) {
        gap = Math.floor(gap / 1.3);
      }
      i = 0;
      while (i + gap <= j) {
        if (arr[i] > arr[i + gap]) {
          [arr[i], arr[i + gap]] = [arr[i + gap], arr[i]];
          updateArrayContainer(i, arr[i], delay);
          updateArrayContainer(i + gap, arr[i + gap], delay);
        }
        i++;
      }
      j--;
    } else {
      clearInterval(intervalId);
    }
  }, delay);

  // 更新数组元素显示区域
  function updateArrayContainer(index, value, delay) {
    setTimeout(() => {
      const elem = arrayContainer.children[index];
      elem.style.height = `${value * 3}px`;
    }, delay);
  }
}

你可以在事件监听器中调用可视化工具的实现函数，从而实现 Comb Sort 的可视化。下面是一个简单的事件监听器：

document.getElementById("new-array-button").addEventListener("click", () => {
  const arr = generateNewArray();
  visualizeCombSort(arr);
});

document
  .getElementById("start-sorting-button")
  .addEventListener("click", () => {
    const arr = getCurrentArray();
    visualizeCombSort(arr);
  });

// 生成一个包含随机整数的数组
function generateNewArray() {
  const arr = [];
  for (let i = 0; i < 50; i++) {
    arr.push(Math.floor(Math.random() * 50) + 1);
  }
  return arr;
}

// 获取当前数组
function getCurrentArray() {
  const arr = [];
  const arrayContainer = document.getElementById("array-container");
  for (let elem of arrayContainer.children) {
    arr.push(parseInt(elem.style.height) / 3);
  }
  return arr;
}

至此，你已经可以使用 Comb Sort Visualizer 来测试和理解 Comb Sort 算法了。祝你学习愉快！