JavaScript冒泡算法原理与实现方法深入理解


Posted in Javascript onJune 04, 2020

本文实例讲述了JavaScript冒泡算法。分享给大家供大家参考,具体如下:

在面试中经常会遇到面试官问到冒泡算法。今天总结一下。

###概念

有一组数,依次比较两个相邻的数,如果他们的顺序(如从大到小或从小到大等)错误就把他们交换过来。

我们先假设这一组数是有顺序的,那么我们找出它的规则。

JavaScript冒泡算法原理与实现方法深入理解

我们按照从小到大的顺序依次交换长方形,得到以下的结果。

第一轮交换结果:CBAD     交换次数:3次
第二轮交换结果:BACD     交换次数:3次
第三轮交换结果:ABCD     交换次数:3次

结果:

1.比较轮数 n-1
2.每次比较次数 n-1

###简单的冒泡算法

<script>
var arr = [1,2,3,4];
var temp = null;
var m = null;
var n = null;
// 双重for循环
for(var i=0;i<arr.length-1;i++){
//指定交换论数和交换次数(内循环控制交换次数)
    for(var a=0;a<arr.length-1;a++){
        if(arr[a]<arr[a+1]){
        //判断是否符合标准
            temp = arr[a+1];
            arr[a+1] = arr[a];
            arr[a] = temp;
        }
        m++;
    }
    n++;
}
console.log(arr);
console.log(m);
console.log(n);
</script>

得到结果

[4,3,2,1]     排序后
9                      交换次数
3                          轮数

在上述的例子中,有重复交换的数据,我们再来分析下。

第一轮交换:
第一次: 2 1 3 4
第二次: 2 3 1 4
第三次: 2 3 4 1
第二轮交换:
第一次: 3 2 4 1
第二次: 3 4 2 1
第三次: 3 4 2 1
第三轮交换:
第一次: 4 3 2 1
第二次: 4 3 2 1
第三次: 4 3 2 1

总结:

每一轮都会比较出一个最大值或最小值,然后后一轮没有必要再比较了
所以每比较一轮,就少比较一次。在第二轮的时候,有一个数不参与交换。
在第三轮的时候,有两个数不参与交换。依次类推。

所以,对上述代码优化。

var arr = [1,2,3,4];
var temp = null;
var m = null;
var n = null;

// 双重for循环
for(var i=0;i<arr.length-1;i++){
    //指定交换论数和交换次数(内循环控制交换次数)
    for(var a=0;a<arr.length-1-i;a++){

        if(arr[a]<arr[a+1]){

    //判断是否符合标准
    temp = arr[a+1];
    arr[a+1] = arr[a];
    arr[a] = temp;
    }
    m++;
    }
    n++;
}
console.log(arr);
console.log(m);
console.log(n);

得到结果。

[4,3,2,1] 排序后
6 交换次数
3 轮数

再来个稍微复杂点的例子。

<script>
var arr = [66,22,23,39,77,25,88];
var temp = null;
var m = null;
var n = null;

// 双重for循环
for(var i=0;i<arr.length-1;i++){
//指定交换论数和交换次数(内循环控制交换次数)

    for(var a=0;a<arr.length-1;a++){

        if(arr[a]<arr[a+1]){

    //判断是否符合标准
    temp = arr[a+1];
    arr[a+1] = arr[a];
    arr[a] = temp;
    }
    m++;
    }

    n++;

}
console.log(arr);
console.log(m);
console.log(n);
</script>

结果:

[88, 77, 66, 39, 25, 23, 22]
21 少交换了15次
6

结果其实已经提前完成,有重复交换次数。这次,我们加个判断,就是比较本次没有移动任何元素,那么说明已经完成结果。

<script>
var arr = [66,22,23,39,77,25,88,11,33,23];
var temp = null;
var m = null;
var n = null;
var flag = true;

// 双重for循环
for(var i=0;i<arr.length-1;i++){
//指定交换论数和交换次数(内循环控制交换次数)

    flag = true;

    for(var a=0;a<arr.length-1-i;a++){

        if(arr[a]<arr[a+1]){

    //判断是否符合标准
    temp = arr[a+1];
    arr[a+1] = arr[a];
    arr[a] = temp;
    flag = false;
    }
    m++;
    }

    n++;
    if(flag){
        break;
        }
    }

console.log(arr);
console.log(m);
console.log(n);
</script>

结果:

[88, 77, 66, 39, 33, 25, 23, 23, 22, 11]
42 少交换了 39次
7 少交换了2 轮

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
用javascript操作xml
Nov 04 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
node.js中使用socket.io的方法
Dec 15 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
loading动画特效小结
Jan 22 Javascript
@ResponseBody 和 @RequestBody 注解的区别
Mar 08 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
JS实现贪吃蛇游戏
Nov 15 Javascript
vue递归实现树形组件
Jul 15 Vue.js
js实现无刷新监听URL的变化示例代码详解
Jun 03 #Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 #jQuery
JavaScript字符和ASCII实现互相转换
Jun 03 #Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 #Javascript
JavaScript监听键盘事件代码实现
Jun 03 #Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 #Javascript
深入分析jQuery.one() 函数
Jun 03 #jQuery
You might like
一个图形显示IP的PHP程序代码
2007/10/19 PHP
PHP 简单日历实现代码
2009/10/28 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
extjs 为某个事件设置拦截器
2010/01/15 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
2018/01/23 jQuery
react redux入门示例
2018/04/19 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
详解Python中DOM方法的动态性
2015/04/11 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
一道python走迷宫算法题
2018/01/22 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
人事助理自荐信
2014/02/02 职场文书
餐饮总经理岗位职责
2014/03/07 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
绿里奇迹观后感
2015/06/15 职场文书
团结友爱主题班会
2015/08/13 职场文书
初中体育教学随笔
2015/08/15 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL
Java死锁的排查
2022/05/11 Java/Android
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis