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 相关文章推荐
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
JS实现跟随鼠标闪烁转动色块的方法
Feb 26 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
详解JS中的attribute属性
Apr 25 Javascript
vue 自定义指令自动获取文本框焦点的方法
Aug 25 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
js实现简单五子棋游戏
May 28 Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 Javascript
Vue实现穿梭框效果
Sep 30 Javascript
在实例中重学JavaScript事件循环
Dec 03 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
刚才在简化php的库,结果发现很多东西
2006/12/31 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
Python实现图片拼接的代码
2018/07/02 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
python的re模块使用方法详解
2019/07/26 Python
详解python 中in 的 用法
2019/12/12 Python
Pandas读取csv时如何设置列名
2020/06/02 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
新员工培训个人的自我评价
2013/10/09 职场文书
化工专业个人的求职信范文
2013/11/28 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
小学工作总结2015
2015/05/04 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
基于Redis延迟队列的实现代码
2021/05/13 Redis
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏