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关键字变色实现思路及代码
Feb 21 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
VueJs组件prop验证简单介绍
Sep 12 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
layui表格设计以及数据初始化详解
Oct 26 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 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
PHPMailer 中文使用说明小结
2010/01/22 PHP
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
laravel5环境隐藏index.php后缀(apache)的方法
2019/10/12 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
深入理解JavaScript编程中的同步与异步机制
2015/06/24 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
Python中的ConfigParser模块使用详解
2015/05/04 Python
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
详解python并发获取snmp信息及性能测试
2017/03/27 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
基于Python实现用户管理系统
2019/02/26 Python
python实现维吉尼亚加密法
2019/03/20 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
Python截图并保存的具体实例
2021/01/14 Python
What is view? why do we have view?
2012/06/22 面试题
提高EJB性能都有哪些技巧
2012/03/25 面试题
网上商城创业计划书范文
2014/01/31 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
建筑节能汇报材料
2014/08/22 职场文书
科学发展观活动总结
2014/08/28 职场文书
高三语文复习计划
2015/01/19 职场文书
2015高考寄语集锦
2015/02/27 职场文书
好人好事新闻稿
2015/07/17 职场文书
退休职工欢送会致辞
2015/08/01 职场文书