📅 最后修改于: 2023-12-03 15:36:35.698000 🧑 作者: Mango
线性搜索是一种基础的搜索算法，也是初学者入门的重要知识点。在进行线性搜索时，我们需要从一组数据中逐个查找目标数据。
本文将介绍如何使用JavaScript实现线性搜索，并通过可视化展示算法执行过程。
我们先来看一下使用JavaScript进行线性搜索的基本思路。
function linearSearch(arr, target) {
for (let i = 0; i < arr.length; i++) {
if (arr[i] === target) {
return i;
}
}
return -1;
}
上述代码中的linearSearch函数接收两个参数：一个数组arr和一个目标值target，返回目标值所在的索引。如果目标值不在数组中，则返回-1。
在实现线性搜索时，我们遍历整个数组，逐个查找目标值。如果找到了目标值，立即返回其索引。如果遍历完整个数组都没有找到目标值，则返回-1。
为了让大家更直观地理解线性搜索算法的执行过程，我们可以使用可视化的方式展示线性搜索的每一步操作。
function linearSearch(arr, target) {
for (let i = 0; i < arr.length; i++) {
// 可视化代码开始
const log = document.createElement('p');
log.innerText = `第 ${i + 1} 次查找：${arr[i] === target ? '找到目标值' : '未找到目标值'}`;
document.body.appendChild(log);
// 可视化代码结束
if (arr[i] === target) {
return i;
}
}
return -1;
}
上述代码中我们在循环体内添加了可视化代码，将每一步的查找结果输出到页面上。
我们可以使用以下HTML代码和CSS样式，创建一个用于展示搜索结果的容器。
<body>
<div id="result"></div>
</body>
#result {
margin-left: 20px;
}
最后，我们调用linearSearch函数，传入一个数组和一个目标值，就可以在页面上看到搜索结果了。
const arr = [1, 3, 5, 7, 9];
const target = 5;
const index = linearSearch(arr, target);
const result = document.getElementById('result');
if (index === -1) {
result.innerText = `数组中未找到目标值：${target}`;
} else {
result.innerText = `目标值：${target}，索引为：${index}`;
}
在本文中，我们介绍了使用JavaScript进行线性搜索，并通过可视化展示了线性搜索的执行过程。
线性搜索算法虽然简单，但是是很多算法和数据结构的基础。掌握了线性搜索之后，我们才能更好地理解更复杂的搜索和排序算法，为自己的编程发展打下坚实的基础。