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 相关文章推荐
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
javascript操作JSON的要领总结
Dec 09 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
JavaScript函数定义方法实例详解
Mar 05 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
Vue中的transition封装组件的实现方法
Aug 13 Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 Javascript
原生js实现购物车
Sep 23 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
Sep 24 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
PHP输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
CI框架常用函数封装实例
2016/11/21 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
GRID拖拽行的实例代码
2013/07/18 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
python获得图片base64编码示例
2014/01/16 Python
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
python 中字典嵌套列表的方法
2018/07/03 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
python pandas时序处理相关功能详解
2019/07/03 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
Blancsom美国/加拿大:服装和生活用品供应商
2018/07/27 全球购物
Java和Javasciprt的区别
2012/09/02 面试题
出纳员岗位职责风险
2014/03/06 职场文书
劲霸男装广告词
2014/03/21 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
瘦西湖导游词
2015/02/03 职场文书
结婚十年感言
2015/07/31 职场文书
退伍军人感言
2015/08/01 职场文书