JavaScript中的选择排序可视化工具(1)

📌 相关文章

📜 JavaScript中的选择排序可视化工具(1)

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

JavaScript中的选择排序可视化工具

选择排序是一种简单的排序算法，它的时间复杂度为O(n^2)，但它在小规模数据集上的效果非常好。在排序过程中，该算法将数组分为已排序和未排序两部分，每次从未排序部分选择最小元素，并将其移到已排序部分的末尾。这个过程重复进行，直到整个数组排序完成。

在JavaScript中实现选择排序非常简单，以下是一段代码：

function selectionSort(arr) {
  for (let i = 0; i < arr.length; i++) {
    let minIndex = i;
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[j] < arr[minIndex]) {
        minIndex = j;      
      }
    }
    if (minIndex !== i) {
      [arr[i], arr[minIndex]] = [arr[minIndex], arr[i]];
    }
  }
  return arr;
}

但是，为了更加直观地了解选择排序的运行过程，我们可以使用可视化工具来展示它的效果。

以下是一个基于JavaScript和HTML的选择排序可视化工具实现：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Selection Sort Visualization</title>
  <style>
    .array-item {
      display: inline-block;
      margin: 5px;
      color: white;
      text-align: center;
      font-size: 25px;
      width: 25px;
      height: 25px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <h1>Selection Sort Visualization</h1>
  <button onclick="start()">Start</button>
  <button onclick="reset()">Reset</button>
  <div id="array-container"></div>

  <script>
    const container = document.getElementById('array-container');
    const arr = [];

    function createArray(size) {
      for (let i = 0; i < size; i++) {
        arr[i] = Math.floor(Math.random() * 500) + 1;
        const item = document.createElement('div');
        item.classList.add('array-item');
        item.style.height = `${arr[i]}px`;
        container.appendChild(item);
      }
    }

    function swapItems(items, i, j) {
      const temp = items[i].style.height;
      items[i].style.height = items[j].style.height;
      items[j].style.height = temp;
    }

    async function selectionSort(items) {
      for (let i = 0; i < items.length; i++) {
        let minIndex = i;
        for (let j = i + 1; j < items.length; j++) {
          if (parseInt(items[j].style.height) < parseInt(items[minIndex].style.height)) {
            minIndex = j;
          }
        }
        if (minIndex !== i) {
          await new Promise(resolve => setTimeout(resolve, 100));
          swapItems(items, i, minIndex);
        }               
      }
    }

    function start() {
      selectionSort(container.children);
    }

    function reset() {
      window.location.reload();
    }

    createArray(20);
  </script>
</body>
</html>

该可视化工具使用HTML和CSS创建一个长度为20的随机数组，并使用蓝色方块作为数组元素的视觉表示。点击按钮可以开始排序，排序过程会将未排序部分的最小元素移到已排序部分的末尾，并更新相应方块的高度。在元素交换时，使用setTimeout函数将交换操作间隔100毫秒，以便用户能够更清楚地观察排序过程。

以上就是一个简单的JavaScript中的选择排序可视化工具实现。通过这种方法，程序员可以更加直观地观察排序过程，从而更好地理解算法的运行原理。