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

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

原理剖析

比如有一组含有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. 智慧港口——基于二三维一体化GIS的港口可视化监管平台

    “智慧港口”是以现代化基础设施设备为基础,以云计算.大数据.物联网.移动互联网.智能控制等新一代信息技术与港口运输业务深度融合为核心,以港口运输组织服务创新为动力,以完善的体制机制.法律法规.标准规范 ...

  2. SpringBoot——学习笔记

    关于微服务和SOA 这,仅是我学习过程中记录的笔记.确定了一个待研究的主题,对这个主题进行全方面的剖析.笔记是用来方便我回顾与学习的,欢迎大家与我进行交流沟通,共同成长.不止是技术. 官网教程学习ht ...

  3. R语言实战（三） 图形初阶

    3.1 使用图形 plot:基础绘图 abline:添加回归直线 hist:绘制直方图 boxplot:绘制箱线图 dev.new():returns the return value of the ...

  4. vue+django+webpack搭建

    一.前言 最近接手了一个项目,后端是django,前端是django自带的模板,用的是jinja2,写了一段时间发现用起来特别不顺手,于是想在保持现有的模板基础上,引入vue框架,这样同事可以继续用自 ...

  5. 探究Spring Boot中的接收参数问题与客户端发送请求传递数据

    结合此篇参考Spring框架学习笔记(9)--API接口设计相关知识及具体编码实现 在使用Spring Boot进行接收参数的时候,发现了许多问题,之前一直都很忙,最近才稍微有空研究一下此问题. 网上 ...

  6. 数据结构 - Collection接口

    简介 Collection继承自Iterable,Collection接口是Java集合两大分支中的一支,Queue.List.Set都是Collection的扩展:集合大类分为了Collection ...

  7. Python 执行 javascript PyExecJS 模块

    PyExecJS 安装 pip install PyExecJS PyExecJS 的基本使用: >>> import execjs >>> execjs.eval ...

  8. 从火箭发场景来学习Java多线程并发闭锁对象

    从火箭发场景来学习Java多线程并发闭锁对象 倒计时器场景 在我们开发过程中,有时候会使用到倒计时计数器.最简单的是:int size = 5; 执行后,size—这种方式来实现.但是在多线程并发的情 ...

  9. H5页面,输入框的光标,如果页面上下滑动光标停留在页面上,除了输入框外,松手过了一段时间才跑回输入框里面

    有点类似这种情况 其中一个博主描述得比较详细,主要还有图 我是直接在App.vue主文件那里添加一下代码,主要是添加一个监听器,如果touchmove的时候就会触发让其失焦,就会消失那个光标,需要再次 ...

  10. C# 时间戳（TimeStamp）与时间（DateTime）的互相转换

    什么是时间戳:时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数. 时间戳在线转换网址:https://tool.lu/ ...