使用JavaScript进行三元搜索可视化(1)

📌 相关文章

📜 使用JavaScript进行三元搜索可视化(1)

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

使用JavaScript进行三元搜索可视化

简介

本文介绍了如何使用JavaScript编写一个三元搜索算法的可视化程序。三元搜索是一种高效的搜索算法，用于在有序数组中查找特定元素的索引。

算法原理

三元搜索算法是一种分治法的应用，它将数组分割成三个部分来进行搜索。具体算法步骤如下：

检查数组是否为空，如果为空则返回-1表示未找到；
计算数组的分隔点，将数组分割成三个部分；
检查分割点的元素是否与目标元素相等，如果是，则返回分割点的索引；
检查目标元素是否小于分割点的元素，如果是，则在前半部分递归调用三元搜索算法；
检查目标元素是否大于分割点的元素，如果是，则在后半部分递归调用三元搜索算法；
如果目标元素既不等于分割点的元素，也不小于或大于分割点的元素，则直接返回-1表示未找到。

JavaScript代码实现

// 三元搜索算法
function ternarySearch(arr, target) {
    if (arr.length === 0) {
        return -1;
    }

    let left = 0;
    let right = arr.length - 1;

    while (left <= right) {
        // 计算分割点
        const partitionSize = Math.floor((right - left + 1) / 3);
        const mid1 = left + partitionSize;
        const mid2 = right - partitionSize;

        // 检查分割点的元素
        if (arr[mid1] === target) {
            return mid1;
        } else if (arr[mid2] === target) {
            return mid2;
        }

        // 调整左右边界
        if (target < arr[mid1]) {
            right = mid1 - 1;
        } else if (target > arr[mid2]) {
            left = mid2 + 1;
        } else {
            left = mid1 + 1;
            right = mid2 - 1;
        }
    }

    return -1;
}

// 示例用法
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const target = 6;

const result = ternarySearch(arr, target);
console.log(result); // 输出: 5

可视化实现

你可以使用HTML、CSS和JavaScript来实现一个简单的可视化界面，以展示三元搜索算法的执行过程。以下是一个使用Canvas画布的示例代码片段：

<!DOCTYPE html>
<html>
<head>
    <title>三元搜索可视化</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="400" height="200"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        const target = 6;

        // 绘制搜索过程
        function drawSearch() {
            let left = 0;
            let right = arr.length - 1;

            while (left <= right) {
                const partitionSize = Math.floor((right - left + 1) / 3);
                const mid1 = left + partitionSize;
                const mid2 = right - partitionSize;

                ctx.clearRect(0, 0, canvas.width, canvas.height);

                // 绘制数组
                ctx.font = '16px Arial';
                for (let i = 0; i < arr.length; i++) {
                    ctx.fillText(arr[i], i * 40 + 10, 100);
                }

                // 绘制搜索范围
                ctx.fillStyle = 'red';
                ctx.fillRect(left * 40, 80, ((right - left + 1) * 40), 20);

                // 绘制分割点
                ctx.fillStyle = 'blue';
                ctx.fillRect(mid1 * 40, 60, 10, 40);
                ctx.fillRect(mid2 * 40, 60, 10, 40);

                // 检查分割点的元素
                if (arr[mid1] === target) {
                    ctx.fillStyle = 'green';
                    ctx.fillText('找到目标元素', mid1 * 40, 150);
                    break;
                } else if (arr[mid2] === target) {
                    ctx.fillStyle = 'green';
                    ctx.fillText('找到目标元素', mid2 * 40, 150);
                    break;
                }

                // 调整左右边界
                if (target < arr[mid1]) {
                    right = mid1 - 1;
                } else if (target > arr[mid2]) {
                    left = mid2 + 1;
                } else {
                    left = mid1 + 1;
                    right = mid2 - 1;
                }
            }
        }

        drawSearch();
    </script>
</body>
</html>

以上代码使用Canvas绘制了一个长度为10的数组，通过矩形表示搜索范围和分割点，通过文本显示找到目标元素的结果。

总结

通过本文的介绍，你学习了如何使用JavaScript编写一个三元搜索算法的可视化程序。三元搜索是一种高效的搜索算法，可以在有序数组中快速定位目标元素的索引。你还学习了如何使用Canvas绘制一个简单的可视化界面来展示搜索的过程。希望本文对你有所帮助！