一、冒泡排序的原理（从小到大）

相邻两个数进行比较，如果前一个数大于后一个数，那么就交换，否则不交换

原理剖析

比如有一组含有6个数字的数：5、3、7、2、1、6
一共6个数字，做5次循环，每次循环相邻两个数都会进行一次比较。
 第一次循环：把最大的7放在了最后

第二次循环：7已经放在了最下面，不用再比较了。上面的重新排序把最大的6最后也就是放在了7的上面

 第三次循环：6、7已经放在最下面，不用再次比较。上面的重新排序把5放在了最后，也就是6、7的上面

第四次循环：5、6、7已经放在最下面，不用再次比较。上面的重新排序把3放在了最后面，也就是5、6、7的上面

第五次循环：3、5、6、7已经放在最下面，不用再次比较。上面的重新排序把2放在了最后面，也就是3、5、6、7的上面，1是最小的，放在2的前面，循环结束。

代码实现：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>数组常用的方法</title>

 </head>

 <body>

     <input type="button" value="测试" onclick="fn()" />

 </body>

 </html>

 <script>

 function fn(){

     var arr=[5,3,7,2,1,6];

     // 需要5轮，分别拿出剩下的数中的最大的，最后一个数，就不用管了。

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

         // console.log("i",i);

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

             // console.log("j",j);

             if(arr[j]>arr[j+1]){

                 // 交换

                 var temp = arr[j];

                 arr[j] = arr[j+1];

                 arr[j+1] = temp;

             }

         }

     }

     console.log(arr);//[ 1, 2, 3, 5, 6, 7 ]

 }

 fn();

 </script>

二、选择排序的原理（从小到大）

要排序的数组 5,3,7,1,2,8
选择法排序的原理剖析：每次循环选择最小的数进行交换  
1、从第一个数到最后一个数里找出最小数，把最小数和第一个数进行交换 1,3,7,5,2,8
2、从第二个数到最后一个数里找出最小数，把最小数和第二个数进行交换 1,2,7,5,3,8
3、从第三个数到最后一个数里找出最小数，把最小数和第三个数进行交换 1,2,3,5,7,8
4、从第四个数到最后一个数里找出最小数，把最小数和第四个数进行交换 1,2,3,5,7,8
5、从第五个数到最后一个数里找出最小数，把最小数和第五个数进行交换 1,2,3,5,7,8

代码实现：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>数组常用的方法</title>

 </head>

 <body>

     <input type="button" value="测试" onclick="fn()" />

 </body>

 </html>

 <script>

 function fn(){

     var arr=[5,3,7,1,2,8];

     // 一共找出五个最小的数，最后一个不用管了，所以，六个数，循环5次。

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

         // i=0

         //1、找最小数

         var min = arr[i];

         var index = i;//index是最小数的下标

         // 循环到底

         for(var j=i+1;j<arr.length;j++){

             if(arr[j]<min){

                 min = arr[j];

                 index = j;

             }

         }

         //2、交换(数组中的最小数和arr[i])

         var t = arr[i];

         arr[i] = arr[index];

         arr[index] = t;

     }

     console.log(arr);

 }

 fn();

 </script>

JavaScript中数组的两种排序方法详解（冒泡排序和选择排序）的更多相关文章

  1. JavaScript中数组的排序方法：1.冒泡排序 2.选择排序

      //1.选择排序: //从小到大排序:通过比较首先选出最小的数放在第一个位置上,然后在其余的数中选出次小数放在第二个位置上,依此类推,直到所有的数成为有序序列. var arr2=[19, 8, ...

  2. javascript中函数的四种调用模式详解

    介绍函数四种调用模式前,我们先来了解一下函数和方法的概念,其实函数和方法本质是一样,就是称呼不一样而已.函数:如果一个函数与任何对象关系,就称该函数为函数.方法:如果一个函数作为一个对象属性存在,我们 ...

  3. javascript中的字符串编码、字符串方法详解

    js中的字符串是一种类数组,采用UTF-16编码的Unicode字符集,意味字符串的每个字符可用下标方式获取,而每个字符串在内存中都是一个16位值组成的序列.js对字符串的各项操作均是在对16位值进行 ...

  4. servlet两种配置方法详解

     1.web.xml中Servlet的注解 <servlet> <!-- servlet的内部名称,自定义 --> <servlet-name>DemoAction ...

  5. 排序方法整理Java - 冒泡排序、选择排序、插入排序、快速排序

    /** * 排序方法整理 * @author zhyea * */ public class Sort { /** * 冒泡排序,从小到大. * 冒泡排序是比较相邻的两个元素,若顺序错误,则执行交换. ...

  6. javascript中的Base64.UTF8编码与解码详解

    javascript中的Base64.UTF8编码与解码详解 本文给大家介绍的是javascript中的Base64.UTF8编码与解码的函数源码分享以及使用范例,十分实用,推荐给小伙伴们,希望大家能 ...

  7. JavaScript中数组Array.sort()排序方法详解

    JavaScript中数组的sort()方法主要用于对数组的元素进行排序.其中,sort()方法有一个可选参数.但是,此参数必须是函数. 数组在调用sort()方法时,如果没有传参将按字母顺序(字符编 ...

  8. 【转载】JAVA中线程的两种实现方法-实现Runnable接口和继承Thread类

    转自: http://blog.csdn.net/sunguangran/article/details/6069317 非常感谢原作者,整理的这么详细. 在java中可有两种方式实现多线程,一种是继 ...

  9. HTML中label的两种使用方法

    如果您在 label 元素内点击文本,就会触发此控件.就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上. 有两种使用方法: 方法1: <label for=" ...

随机推荐

  1. 数据结构之HashMap

    前言 在我们开发中,HashMap是我们非常常用的数据结构,接下来我将进一步去了解HashMap的原理.结构. 1.HashMap的实现原理 HashMap底层是基于Hash表(也称“散列”)的数据结 ...

  2. 配置ubunto 流量使用限制 python 实现简单 http server

    很多ubunto 都有流量限制,使用流量.如每天使用200M ,超过了就要提示信息 原理,在本机 开一个 http 服务, 显示错误信息,哪流量使用完以后,使用 iptables 将 流量转发到 本机 ...

  3. java.lang.reflect.UndeclaredThrowableException: null Caused by: org.apache.zookeeper.KeeperException$UnimplementedException: KeeperErrorCode = Unimplemented for

    java.lang.reflect.UndeclaredThrowableException: null    at org.springframework.util.ReflectionUtils. ...

  4. touch事件中的touches、targetTouches和changedTouches

    touches: 当前屏幕上所有触摸点的列表; targetTouches: 当前对象上所有触摸点的列表; changedTouches: 涉及当前(引发)事件的触摸点的列表; 通过一个例子来区分一下 ...

  5. python 2 和3 的区别

    python 2 和3 的区别 Python2 Python3 打印 print " " print() 输入 raw_input() input() 范围 range/xrang ...

  6. C/C++书籍分享（百度网盘版）

    作为第一篇博客,该写一些什么好呢,毕竟作为技术博客开创的,不能随便闲谈不是. 那就分享一些书籍作为见面礼吧.链接里面包含有大量的C++学习用书籍,包含了从入门到进阶的大部分高质量书籍,注意仅用作个人学 ...

  7. 推荐三款好用的JSON格式化工具——JSON-handle & HiJson & JSTool

    工具一:JSON-handle JSON-Handle是一款谷歌浏览器插件. 1.访问http://jsonhandle.sinaapp.com/下载 2.打开Chrome浏览器的扩展程序(访问chr ...

  8. 从零开始学习R语言（四）——数据结构之“数组（Array）”

    本文首发于知乎专栏:https://zhuanlan.zhihu.com/p/60141207 也同步更新于我的个人博客:https://www.cnblogs.com/nickwu/p/125677 ...

  9. Spring Boot + LayUI 批量修改数据 数据包含着对象

    页面展示 HTML 代码 <blockquote class="layui-elem-quote demoTable"> <div class="lay ...

  10. vscode不能打开浏览器（Open browser failed!! Please check if you have installed the browser correctly!）

    vscode出现上述问题,我也查了很多相关资料,什么改默认浏览器设置什么的,改配置,改系统环境变量什么的,不但麻烦而且最后都难以成功. 下面分享一个可以解决的最简单办法.那就是:舍弃open in b ...