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

📌 相关文章

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

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

使用JavaScript的插入排序可视化

插入排序是一种简单且常用的排序算法，该算法的基本思想是将一个未排序的元素插入已经排好序的元素中。在这篇文章中，我们将介绍如何在JavaScript中实现一个基本的插入排序，并用可视化的方式展示排序过程。

算法原理

插入排序的核心思想是将未排序的元素一个一个插入已经排好序的序列中，直到所有元素都被插入到已排序序列中为止。具体来说，它会从未排序的序列中选取一个元素，然后将其挨个与已排序的序列中的元素比较大小，直到找到其应该插入的位置，然后将其插入。重复这个过程，直到所有待排序元素都被插入到已排序序列中。

JavaScript代码实现

下面是使用JavaScript实现插入排序的代码：

function insertionSort(arr) {
  for (let i = 1; i < arr.length; i++) {
    let temp = arr[i];
    let j = i - 1;
    while (j >= 0 && temp < arr[j]) {
      arr[j + 1] = arr[j];
      j--;
    }
    arr[j + 1] = temp;
  }
  return arr;
}

这段代码中的insertionSort函数接收一个待排序的数组作为输入，并返回一个已排好序的新数组。

可视化演示

为了更好地理解插入排序，我们可以使用可视化的方式展示排序过程。下面是使用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>Insertion Sort Visualization</title>
    <style>
      body {
        background-color: #e3e3e3;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

      .sort-container {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        width: 70vw;
        height: 50vh;
        background-color: #fff;
        border-radius: 5px;
        padding: 20px;
      }

      .sort-element {
        width: 10px;
        height: 40px;
        margin: 0 2px;
        background-color: #000;
      }
    </style>
  </head>
  <body>
    <div class="sort-container"></div>
    <script>
      function randomizeArray(len) {
        const arr = [];
        for (let i = 0; i < len; i++) {
          arr.push(Math.floor(Math.random() * len) + 1);
        }
        return arr;
      }

      function insertionSortVisualization(arr) {
        const container = document.querySelector(".sort-container");
        for (let i = 1; i < arr.length; i++) {
          let temp = arr[i];
          let j = i - 1;
          while (j >= 0 && temp < arr[j]) {
            arr[j + 1] = arr[j];
            j--;
          }
          arr[j + 1] = temp;

          // update visualization
          container.innerHTML = "";
          for (let k = 0; k < arr.length; k++) {
            const el = document.createElement("div");
            el.className = "sort-element";
            el.style.height = `${arr[k] * 5}px`;
            container.appendChild(el);
          }

          // add delay to see sorting
          await new Promise((resolve) => setTimeout(resolve, 50));
        }
        return arr;
      }

      const len = 50;
      const array = randomizeArray(len);
      insertionSortVisualization(array);
    </script>
  </body>
</html>

这段代码会在页面中生成长度为50的随机数组，并在可视化区域动态展示数组排序的过程。你可以通过键入以下代码运行这个示例：

$ open insertion_sort.html

在查看这个可视化演示时，你会发现在排序的过程中每个黑色方块会逐渐变高，这个高度表示该元素在数组中的大小。通过这种方式，你可以更加直观地理解插入排序的过程。

总结

在这篇文章中，我们介绍了如何使用JavaScript实现插入排序，并使用可视化的方式展示了排序的过程。希望这篇文章对于那些正在学习算法或者对JavaScript感兴趣的开发者有所启发！