使用Javascript进行存储桶排序可视化

引言

存储桶排序（Bucket Sort）是一种线性排序算法，它的时间复杂度为 O(N+C)，其中 C 是桶的个数。如果桶的个数足够大，那么存储桶排序可以达到线性排序的极限，时间复杂度可以达到 O(N)。

本文将介绍如何使用 JavaScript 进行存储桶排序的可视化。

程序设计

要求

本程序需要实现以下功能：

1. 输入一个随机数组。
2. 执行存储桶排序，并将过程可视化。
3. 输出排序后的数组。

设计

排序算法使用存储桶排序，数据结构使用数组，可视化使用 HTML 和 CSS。

1. 输入随机数组

使用 input 元素，用户可以通过 value 属性输入随机数组。

<input type="text" id="arr" value="5, 2, 8, 3, 1, 7, 9, 6, 4">

2. 执行存储桶排序并将过程可视化

使用 JavaScript 的 DOM 操作，将可视化的结果显示在 HTML 中。

<canvas id="output"></canvas>

使用以下函数来生成桶：

function buildBucket() {
  // 桶的数量
  let bucketCount = 10;
  let bucketWidth = Math.floor(canvas.width / bucketCount);

  let buckets = [];
  for (let i = 0; i < bucketCount; i++) {
    buckets[i] = [];
  }

  return {
    width: bucketWidth,
    items: buckets,
  };
}

使用以下函数将数字插入桶中：

function pushIntoBucket(bucket, num) {
  bucket.push(num);
  // 如果桶过满，就把桶分割成两个子桶，分别再依次插入
  if (bucket.length > bucket.width) {
    let b1 = [];
    let b2 = [];
    bucket.forEach((item) => {
      if (item < bucket.width) {
        b1.push(item);
      } else {
        b2.push(item);
      }
    });
    bucket.items[0] = b1;
    bucket.items[1] = b2;
  }
}

排序过程：

// 获取输入的随机数组
let input = document.getElementById("arr").value.split(", ");
input = input.map((value) => parseInt(value));

let canvas = document.getElementById("output");
let ctx = canvas.getContext("2d");
let width = canvas.width,
  height = canvas.height;

// 构建桶
let bucket = buildBucket();

// 把数组中的数字插入桶中
for (let i = 0; i < input.length; i++) {
  let num = input[i];
  pushIntoBucket(bucket, num);
}

// 把桶中的数字拿出来放到一个新数组中
let output = [];
bucket.items.forEach((bucket) => {
  output = output.concat(bucket);
});

// 把遍历到的数字高亮显示在画布上
function highlightDigit(num, color = "#f00") {
  let index = bucket.items.findIndex((b) => b.includes(num));
  let x = index * bucket.width;
  let y = height * ((num % bucket.width) / bucket.width);
  ctx.fillStyle = color;
  ctx.fillRect(x, height - y - 20, bucket.width, 20);
}

// 按顺序遍历输出数组，把数字高亮显示在画布上
for (let i = 0; i < output.length; i++) {
  let num = output[i];
  highlightDigit(num);
}

3. 输出排序后的数组

使用以下代码将排序后的数组输出到页面中：

let resultElement = document.getElementById("result");
resultElement.innerHTML = `排序后的数组为：[${output.join(", ")}]`;

总结

通过本文的介绍，我们学习了如何使用 JavaScript 进行存储桶排序的可视化。我们使用了 HTML、CSS 和 JavaScript，并实现了输入随机数组、执行存储桶排序并将过程可视化、输出排序后的数组等功能。同时，我们深入了解了存储桶排序算法和数组数据结构的应用。