JS插入排序简单理解与实现方法分析


Posted in Javascript onNovember 25, 2019

本文实例讲述了JS插入排序简单理解与实现方法。分享给大家供大家参考,具体如下:

在这里,我详细的讲一下我个人对于插入排序的理解。

每个人对于事物的理解都是不一样的,因为每个人对世界万物的看法和思考方式都不一样。因此,对于排序算法,我想每个人都有自己的理解方式,所以,虽然博客园里有很多关于排序的文章,但那只是其他人对这几个排序的理解方式,而笔者也有自己的理解方式,所以,笔者也就没有在意博客园写了那么多关于排序的文章而还在这里写下个人的见解了。

对于插入排序,笔者是这么理解的:

插入排序就是把一组数字分成两部分,一部分是排好顺序的,另一部分是没有排好顺序的,然后,就是从没有排好顺序的那组数字中获取数字,把它插入到已经排好的顺序的那部分数字中,当然,在插入到已经排好顺序的那部分数字时,你还必须让这个插入进来的数字与已经排好顺序的数字进行比较,为的是保证已经排好的顺序的那部分数字不被打乱,插入排序的关键也就是这里,如果能够理解这里,我想对于接下来我写的代码应该不难理解了。

我举个例子:

这是个杂乱的一组数字:8,1,2,5,9,3,4,6,7,0

看到上面的那组数字吗?你觉得能把这组数字分出一部分有序的出来吗?因为,我们插入排序首先要做的就是在一组数字中找出有序的部分,所以,首先,你得从一组数字中找到有序的才行对吧?其实,上面那组数字是可以找到有序的部分的。怎么说呢?很简单,你把第一个数字8当成一部分,其余的当成另外一部分,不就分出一部分有序的数字和一部分无序的数字了吗?你想想,第一部分就是一个数字8,一个数字构成的一部分,它都不用比较了,这还不是有序的那还得了,呵呵。

之所以在这里提一下一个数字当成一部分的情况,那是因为,我们所提供的插入排序的数字是杂乱的,无序的,我们谁也不能保证最开始的那部分一定是有序的,因此,我们就只能选择一个数字作为有序的那部分才能保证所有的排序都是在有序那部分进行的,不然,插入排序就没办法找到有序的那部分了。

插入排序开始:

第一个有序部分(就是第一个数字了):8

第一个无序部分(就是剩下的部分了):1,2,5,9,3,4,6,7,0

根据前面所讲的插入排序原理:从无序部分中获取数字,把它插入到有序的那一部分中。

1、这里怎么在无序部分中获取数字?

2、怎么把获取的数字有序的插入到有序部分中?换句话说,就是怎么让这个获取的数字插入到有序的那部分之后,有序的那部分还是有序的,并不会被这个插入的数字破坏掉队形而变得无序?

首先回答第一个问题:

这个问题其实很简单啦,我们把那组无序的数组分成两部分之后,只要从无序的那部分数字的第一个数字开始往后面获取数字就行了,是吧?

接下来回答第二个问题:

这个问题有点复杂,我就不叙述了,直接举例子吧,这样子更容易理解。

第二次插入排序:

首先我们从上面已经分好的无序部分:1,2,5,9,3,4,6,7,0(前面已经把8分成有序的部分了)获取第一个数字1,假设我们是从小排到大的排序这组数字,获取1这个数字之后,我们就要把1插入到8中啦,对吧?

我们把1和8做比较,比较规则:大于,8>1?真,既然是真,那么它们就要调换位置了,对吧?

所以经过一次排序之后,原来的那组有序数字和无序数字就变成了下面的了:

第二个有序部分:1,8

第二个无序部分:2,5,9,3,4,6,7,0

经过两轮的有序和无序分组之后,就得到上面的两个有序数字和无序数字了,接下来,我们继续插入排序

依然从后面的无序部分获取数字2,获取之后,从有序部分的后面数字开始逐一的和2做比较,8>2吗?真,那么它们两者就调换位置。接下来让1和2作比较,1>2吗?假,那么就跳过不管,所以,就得到下面的有序和无序部分了。

第三个有序部分:1,2,8

第三个无序部分:5,9,3,4,6,7,0

比较到这里,插入排序已经初步形成有序数字了,接下来的比较我就不叙述了,你们自己想想吧。接下来是代码,代码的思维和这里的描述是一样的,你可以自己调试看一下代码的执行过程就再明白不过了。

注意、每一轮比较过后,有序部分总会多一个元素,而无序部分则少一个元素,插入排序嘛,就是从无序部分截取数字插入到有序部分中啦,这和下面的代码循环是一致的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <title>js的插入排序</title>
  <meta name="keywords" content="关键字列表" />
  <meta name="description" content="网页描述" />
  <link rel="stylesheet" type="text/css" href="" />
  <style type="text/css"></style>
  <script type="text/javascript">
  //插入排序,参数是数组
  function insertSort(arr){
    //判断参数的合法性
    if(toString.call(arr) !== '[object Array]'){
      return false;
    }
    //获取数组的长度
    var len = arr.length;
    if(len <= 1){
      return arr;//小于等于1不用排序
    }
    //i=1开始,留着0作为有序部分,也就是说,外层循环获取数组后面的元素,也就是上面所讲的无序部分
    for(var i=1;i<len;i++){
    //j=i-1,就是获取有序部分最后的一个元素作为对照,也就是有序部分
      for(var j=i-1;j>=0;j--){//注意,j--,就是从有序部分的后面元素开始和无序部分的元素作比较
        if(arr[j] > arr[j+1]){//第一个j+1也就是外层循环i,
          //互换元素,对前面数组进行排序
          var temp = arr[j];
          arr[j] = arr[j+1];
          arr[j+1] = temp;
        }
      }
    }
    return arr;
  }
  //测试
  var ar = [9,3,8,5,2,7,0,6,1,4];
  alert(insertSort(ar));
  </script>
</head>
<body>
</body>
</html>

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

Javascript 相关文章推荐
JavaScript入门之事件、cookie、定时等
Oct 21 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 Javascript
jQuery中 prop() attr()使用详解
May 19 Javascript
JavaScript中获取Radio被选中的值
Nov 11 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
详解Js中的模块化是如何实现的
Oct 18 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
如何从头实现一个node.js的koa框架
Jun 17 Javascript
layUI实现前端分页和后端分页
Jul 27 Javascript
vue实现移动端input上传视频、音频
Aug 18 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
Nov 25 #Javascript
python实现迭代法求方程组的根过程解析
Nov 25 #Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 #Javascript
JavaScript交换两个变量方法实例
Nov 25 #Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
Nov 25 #Javascript
基于javascript实现贪吃蛇小游戏
Nov 25 #Javascript
JavaScript This指向问题详解
Nov 25 #Javascript
You might like
解决GD中文乱码问题
2007/02/14 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
jQuery实现简单的tab标签页效果
2016/09/12 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
python实现的防DDoS脚本
2011/02/08 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
Python for循环及基础用法详解
2019/11/08 Python
Python3 Tkinkter + SQLite实现登录和注册界面
2019/11/19 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
水果花束:Fruit Bouquets
2017/12/20 全球购物
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
培训心得体会
2013/12/29 职场文书
安全教育心得体会
2013/12/29 职场文书
可口可乐广告词
2014/03/20 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
入党个人总结范文
2015/03/02 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
Go语言安装并操作redis的go-redis库
2022/04/14 Golang