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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
ExtJs使用IFrame的实现代码
Mar 24 Javascript
初试jQuery EasyUI 使用介绍
Apr 01 Javascript
jQuery aminate方法定位到页面具体位置
Dec 26 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
npm国内镜像 安装失败的几种解决方案
Jun 04 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
phantomjs导出html到pdf的方法总结
Oct 19 Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 Javascript
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
Mac环境下php操作mysql数据库的方法分享
2015/05/11 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
js获取当前select 元素值的代码
2010/04/19 Javascript
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
2020/02/19 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
python实现百度关键词排名查询
2014/03/30 Python
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
vue常用指令代码实例总结
2020/03/16 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
优秀公益广告词大全
2014/03/19 职场文书
2014坚持党风廉政建设思想汇报
2014/09/18 职场文书
项目合作协议书
2014/09/23 职场文书
支行行长竞聘报告
2014/11/06 职场文书
2014年残疾人工作总结
2014/12/06 职场文书
课外活动实习计划
2015/01/19 职场文书
西双版纳导游词
2015/02/03 职场文书
开学典礼观后感
2015/06/15 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers