使用 JavaScript 进行计数排序可视化(1)

📌 相关文章

📜 使用 JavaScript 进行计数排序可视化(1)

📅 最后修改于: 2023-12-03 14:49:41.686000 🧑 作者: Mango

使用 JavaScript 进行计数排序可视化

计数排序是一种非比较排序算法，其基本思想是统计待排序数组中每个元素出现的次数，然后根据出现次数依次放到有序的结果数组中。计数排序只能用在数据范围不大的场景中，如果数据范围比较大，需要使用基数排序。本文将会介绍如何使用 JavaScript 实现计数排序，并结合可视化的方式帮助理解算法过程。

效果预览

以下是使用 JavaScript 进行计数排序的可视化效果预览：

计数排序可视化效果预览

算法实现

首先，我们需要实现计数排序的主要逻辑。以下是使用 JavaScript 实现计数排序的代码：

function countingSort(array) {
  if (array.length < 2) {
    return array;
  }

  // 确定最大值和最小值
  let min = array[0];
  let max = array[0];
  for (let i = 1; i < array.length; i++) {
    if (array[i] < min) {
      min = array[i];
    }
    if (array[i] > max) {
      max = array[i];
    }
  }

  // 计算元素出现的次数
  const count = Array(max - min + 1).fill(0);
  for (let i = 0; i < array.length; i++) {
    count[array[i] - min]++;
  }

  // 累加次数
  for (let i = 1; i < count.length; i++) {
    count[i] += count[i - 1];
  }

  // 排序
  const result = Array(array.length);
  for (let i = array.length - 1; i >= 0; i--) {
    result[count[array[i] - min] - 1] = array[i];
    count[array[i] - min]--;
  }

  return result;
}

以上代码中，我们先查找数组中的最小值和最大值，然后根据最小值和最大值的范围创建一个计数数组。接着，我们遍历整个数组，计算每个元素出现的次数，然后累加次数，最后将数组按照计数数组的值进行排序。

可视化实现

接下来，我们需要结合可视化的方式帮助理解计数排序算法。以下是使用 JavaScript 和 HTML/CSS 实现可视化的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>计数排序可视化</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

      .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 80%;
        height: 80%;
      }

      .element {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        border: 1px solid black;
        margin: 5px;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container"></div>
    <script>
      // 计数排序逻辑
      function countingSort(array) {
        if (array.length < 2) {
          return array;
        }

        let min = array[0];
        let max = array[0];
        for (let i = 1; i < array.length; i++) {
          if (array[i] < min) {
            min = array[i];
          }
          if (array[i] > max) {
            max = array[i];
          }
        }

        const count = Array(max - min + 1).fill(0);
        for (let i = 0; i < array.length; i++) {
          count[array[i] - min]++;
        }

        for (let i = 1; i < count.length; i++) {
          count[i] += count[i - 1];
        }

        const result = Array(array.length);
        for (let i = array.length - 1; i >= 0; i--) {
          result[count[array[i] - min] - 1] = array[i];
          count[array[i] - min]--;
        }

        return result;
      }

      // 随机生成数组
      const array = [];
      for (let i = 0; i < 30; i++) {
        array.push(Math.floor(Math.random() * 31));
      }

      // 创建可视化元素
      const container = document.querySelector(".container");
      for (let i = 0; i < array.length; i++) {
        const element = document.createElement("div");
        element.className = "element";
        element.style.height = `${array[i] * 20}px`; // 根据随机数设置高度
        element.textContent = array[i]; // 显示随机数
        container.appendChild(element);
      }

      // 计数排序可视化
      const result = countingSort(array);
      const elements = container.querySelectorAll(".element");
      for (let i = 0; i < elements.length; i++) {
        elements[i].style.height = `${result[i] * 20}px`; // 根据计数排序结果设置高度
        elements[i].textContent = result[i]; // 显示计数排序结果
      }
    </script>
  </body>
</html>

以上代码中，我们首先随机生成一个长度为 30 的数组，并根据数组中的随机数创建可视化元素。然后，我们使用计数排序算法对这个数组进行排序，并将排序结果可视化展示出来。

总结

本文介绍了如何使用 JavaScript 进行计数排序，并结合可视化的方式帮助理解算法过程。当然，这只是计数排序的一个基础实现，如果读者有兴趣深入学习非比较排序算法，可以继续研究更高级的算法实现方式。