JavaScript 数组经典算法实现:冒泡排序、去重与元素添加
本文详细讲解 JavaScript 中数组操作的三个经典算法实例。通过原生 JS 代码演示冒泡排序逻辑,展示基于双重循环的传统数组去重方法,以及判断元素是否存在后添加的新增策略。内容涵盖基础排序与数据处理技巧,适合前端开发者参考学习。
冒泡排序算法实现
冒泡排序是数组处理中的基础算法之一。其核心逻辑是通过相邻元素的比较与交换,将较大或较小的元素逐步“冒泡”至数组末尾。具体实现时,需定义一个用于交换数据的临时变量。代码中通过两层嵌套循环遍历数组,外层控制轮数,内层负责相邻元素的大小比较。若前一个元素大于后一个元素,则执行交换操作,确保大值向后移动。排序完成后,利用循环输出数组内容以验证结果。
<script type="text/javascript">
var arr = [3,7,6,2,1,5];
定义一个交换使用的中间变量
var temp = 0;
for(i=0;i<arr.length;i++){
for(j=0;j<arr.length;j++){
如果下一个元素小于当前元素
if(arr[j]>arr[j+1]){
互换
temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
for(var i in arr){
document.write(arr[i]);
}
</script>
传统数组去重方法
数组去重旨在从包含重复数据的数组中提取唯一值。一种传统的实现方式是创建一个新的空数组用于存储去重后的结果。通过外层循环遍历原始数组的每一个元素,内层循环检查该元素是否已存在于新数组中。为此引入一个状态标识符,初始设为 0。若在内层循环中发现元素已存在,则将状态标识为 1 并跳出内层循环。若遍历结束后状态仍为 0,说明该元素未重复,将其推入新数组。最后遍历新数组并输出结果。
<script type="text/javascript">
//老数组
var arr1 = [1,2,2,3,8,6,6,4,5,5];
//定义新数组
var arr2 = [];
for(i=0;i<arr1.length;i++){
var status = 0;
for(j=0;j<arr2.length;j++){
if(arr1[i]==arr2[j]){
status = 1;
break;
}
}
if(status == 0){
arr2.push(arr1[i]);
}
}
for(var x in arr2){
document.write(arr2[x]+"<br>");
}
</script>
元素存在性判断与添加
在数组中添加新元素前,通常需要先判断该元素是否已存在,以避免重复。实现时,定义待添加的目标值和一个布尔型标志位,初始设为 true。通过循环遍历原数组,逐一比对目标值与现有元素。一旦发现匹配项,将标志位设为 false 并终止循环。循环结束后,检查标志位:若为 true,说明目标值不存在,执行 push 方法将其添加到数组末尾,并输出更新后的数组;若为 false,则提示存在重复值,不进行添加操作。
<script type="text/javascript">
var arr = [3.14,10,4,"hello"];
新定义数组元素
var tj = "hello";
布尔型判断
var cf = true;
for(var i =0;i<arr.length;i++){
if(tj == arr[i]){
cf = false;
break;
}
}
if(cf){
arr.push(tj);
for(var i in arr){
document.write(arr[i]+"<br>");
}
}
else{
alert("有重复值");
}
</script>
总结
以上介绍了 JavaScript 数组操作中几种经典算法的具体实现方式,包括排序、去重及条件添加。这些示例展示了如何利用基础语法解决常见的数据处理问题,希望能为读者提供实用的参考,欢迎进一步探讨与交流。
JavaScript闭包与类(Class)的区别及适用场景对比
2026-11-05 15:48:57
JavaScript入门要学ES6吗?let与箭头函数等新特性解析
2026-11-05 14:49:16
JavaScript 8种数据类型详解:基本类型与引用类型的区别
2026-11-05 14:25:15
怎么在JavaScript中使用async/await优化Ajax异步流程
2026-11-05 13:56:15
JavaScript replace回调函数实现动态正则替换逻辑
2026-11-05 13:52:13
