使用JavaScript进行二进制搜索可视化

二分搜索也称为折半搜索，是一种在有序数组中查找给定元素的搜索算法。该算法每次都将待查找区间缩小一半，直到找到目标元素或者确定目标元素不存在为止。JavaScript是一种非常强大的编程语言，可以使用它进行二分搜索可视化示例的实现。

实现过程

1. 创建一个数组，并将其按升序排列。
2. 声明两个变量：一个用于检索开始的索引start(初始为0)，另一个用于检索结束的索引end(初始为数组长度-1)。
3. 计算中间索引mid的值：mid = Math.floor((start + end) / 2)。
4. 如果目标值等于数组的中间索引的值，则返回中间索引。
5. 如果目标值小于数组的中间索引的值，则继续在数组的左半部分进行搜索，即将end的值更改为mid-1。
6. 如果目标值大于数组的中间索引的值，则继续在数组的右半部分进行搜索，即将start的值更改为mid+1。
7. 如果无法找到目标值，则返回-1。

以下是JavaScript代码实现：

function binarySearch(arr, target) {
  let start = 0;
  let end = arr.length - 1;

  while (start <= end) {
    let mid = Math.floor((start + end) / 2);
    if (arr[mid] === target) return mid;
    else if (arr[mid] < target) start = mid + 1;
    else end = mid - 1;
  }

  return -1;
}

二分搜索可视化

我们可以使用HTML、CSS和JavaScript来创建一个二分搜索的可视化示例。

HTML

在HTML中创建一个包含输入框、搜索按钮和结果区域的表单。

<form id="search-form">
  <label for="target">Target Value:</label>
  <input type="number" id="target" required>

  <button type="submit">Search</button>
</form>

<div id="result">
  <p>Result:</p>
  <div id="visual"></div>
</div>

CSS

使用CSS为表单和结果区域添加样式。

form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#target {
  margin-bottom: 10px;
}

#result {
  margin-top: 20px;
}

#visual {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

JavaScript

在JavaScript中创建一个函数，该函数将通过二分搜索来查找给定目标值，并使用DOM操作将数组和搜索结果表示为网格化布局。

function binarySearchVisualizer(arr, target) {
  let start = 0;
  let end = arr.length - 1;
  let steps = [];

  while (start <= end) {
    let mid = Math.floor((start + end) / 2);
    steps.push(mid);

    if (arr[mid] === target) break;
    else if (arr[mid] < target) start = mid + 1;
    else end = mid - 1;
  }

  return steps;
}

const form = document.getElementById("search-form");
form.addEventListener("submit", handleSearch);

function handleSearch(event) {
  event.preventDefault();
  const target = Number(document.getElementById("target").value);
  const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  const steps = binarySearchVisualizer(arr, target);
  renderVisual(steps, target);
}

function renderVisual(steps, target) {
  const visual = document.getElementById("visual");
  visual.innerHTML = "";
  const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

  for (let i = 0; i < arr.length; i++) {
    const el = document.createElement("div");
    el.classList.add("element");

    if (i === steps[steps.length - 1]) {
      el.classList.add("target");
    } else if (steps.includes(i)) {
      el.classList.add("visited");
    }

    el.innerText = arr[i];
    visual.appendChild(el);
  }

  const result = document.getElementById("result");
  result.querySelector("p").innerText =
    steps[steps.length - 1] !== undefined
      ? `Result: Found ${target} at index ${steps[steps.length - 1]}`
      : `Result: ${target} is not found in the array`;
}

CSS

使用以下CSS来为网格布局添加样式。

.element {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background-color: lightgrey;
  margin: 2px;
  font-size: 20px;
  text-align: center;
  border-radius: 5px;
}

.visited {
  background-color: cornflowerblue;
}

.target {
  background-color: tomato;
}

运行效果

通过访问以下链接，您可以查看用JavaScript实现的二分搜索可视化。

JavaScript Binary Search Visualizer

结论

在本文中，我们了解了JavaScript中二分搜索算法的实现，并使用HTML、CSS和JavaScript创建了一个二分搜索可视化示例。这种可视化解析方式可以显著简化搜索和排序过程，并使其更加容易理解。