javascript实现基本排序操作

最新推荐文章于 2023-05-08 17:03:37 发布
最新推荐文章于 2023-05-08 17:03:37 发布
阅读量266 收藏
点赞数
分类专栏： javascript 文章标签： javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oneFT/article/details/78626083
版权
当时在加入学校实验室时，我们导师（老杨）让我们一个星期时间使用javascript完成最基本，最常见的排序查找。

现在想来，那是一次快乐的过程。偷笑

我们常见的排序查找算法归类一共有一下几种，我会全部贴出他们的javascript源码！基本原理我相信学过数据结构的童鞋都知道。

（1）冒泡排序

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>冒泡排序</title>



</head>

<body>
	<input type="text" id="2" style="font-size:20px; width:100%">
	<input type='button' value='排序' οnclick='sort()'/>
 	<div id="277" style="font-size:20px;border:1px solid;height:50px;"></div>
</body>
	<script type="text/javascript">
    	function sort(){
			var scr=document.getElementById("2").value;
			var cee=scr.split(" ");
			var cee1=[],
				len=cee.length;
			for(var i=0;i<len;i++){
			cee1.push(parseInt(cee[i]));
			}
			var i;
			var j;
			var temp;
			for(i=0;i<len-1;i++){
				for(j=len-1;j>i;j--){//比较，找出本趟关键字最小的元素
					if(cee1[j]<cee1[j-1])
					{
						temp=cee1[j];//交换。前移；
						cee1[j]=cee1[j-1];
						cee1[j-1]=temp;
						}
					}
				}
				var rets = cee1.join(',');
				document.getElementById('277').innerHTML = rets;
			}
    </script>
</html>

（2）选择排序 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选择排序</title>
</head>

<body>
	<input type="text" id="2" style="font-size:20px; width:100%">
    <input type="button" value="排序" οnclick="sort()"/>
    <div id="27" style="font-size:20px;border:1px solid;height:50px;"></div>

</body>
	<script type="text/javascript">
    	function sort(){
			var lq=document.getElementById("2").value;
			var cee=lq.split(" ");
			var cee1=[],
				len=cee.length;
			for(var i=0;i<len;i++){
			cee1.push(parseInt(cee[i]));
			}	
			var i,j,k;
			var temp;
			for(i=0;i<len-1;i++)
			{
				k=i;
				for(j=i+1;j<len;j++)
					if(cee1[j]<cee1[k])
						k=j;
				if(k!=i)
				{
					temp=cee1[i];
					cee1[i]=cee1[k];
					cee1[k]=temp;
				}
			}
			var rets = cee1.join(',');
			document.getElementById('27').innerHTML = rets;
			
			}
    </script>


</html>

（3）折半插入排序 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>折半插入排序</title>
</head>

<body>
	<input type="text" style="width:150px;height:30px;" οnblur="InsertSort(this)"/>

</body>
	<script type="text/javascript">
    	function InsertSort(obj){
			var look = obj.value;
			var ceer = look.split(" ");
			var crte1 = [];
				len = ceer.length;
			for(var i=0;i<len;i++)
			{
				crte1.push(parseInt(ceer[i]));
				}
				//alert(crte1);
			var i,j,low,high,mid;
			var temp;
			for(i=1;i<len;i++)
			{
				temp=crte1[i];
				low=0;
				high=i-1;
				while(low<=high)
				{
					if((low+high)%2!=0)
						mid=(low+high-1)/2;
						else
						mid=(low+high)/2;
						if(temp<crte1[mid]){
						high = mid - 1;
						}
						else{
						low = mid + 1;
						}
				}
				
				for(j = i-1;j>=high+1;j--){
					crte1[j+1]=crte1[j];
				}//元素后移
				crte1[high+1] = temp;//插入
				}
				alert(crte1);
				
			
			/*var i,j,low,high,mid;
			//var temp;
			for(i=2;i<=len;++i)
			{
				crte1[0]=crte1[i];
				low=1;
				high=i-1;
				while(low<=high)
				{
					mid=(low+high)/2;
					if(crte1[0]<crte1[mid])
						high=mid-1;
					else
						low=mid+1;
				}
				
				for(j=i-1;j>=high+1;--j)
				{
				  crte1[j+1]=crte1[j];
				  //i--;
				  }
				  crte1[high+1]=crte1[0];
				 
			}*/
				 
			  
			}
   </script>
</html>

（4）折半查找 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
	
	
</body>
	<script type="text/javascript">
		function search(arr,findval,left,right){
			var midlndex=Math.floor((left+right)/2);
			var midval=arr[midlndex];
			if(left>right){
				document.writeln("找不到");
				return;
				
				}
				
			if(midval>findval){
				search(arr,findval,left,midlndex-1);
				
				
				}else if(midval<findval){
					search(arr,findval,midlndex+1,right);
					
					}else{
						
						alert(midlndex);
						//document.writeln(midlndex);
						}
			}
			var arr=[1,3,12,24,44,54,67];
			search(arr,67,0,arr.length-1);
			
		
    </script>
</html>

（5）二叉树的前序 中序 后序 遍历 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二叉树的遍历</title>
	<style type="text/css"> 
    	P{
			font-size:20px;
			font-family:Verdana, Geneva, sans-serif;
			}
    </style>
</head>

<body>


</body>
	<script type="text/javascript">
    	function BTNode(tree){
			this.tree=tree;
			this.left=null;
			this.rigth=null;
			}
			function show(tree){
				document.write(tree+" ");
				}
			function BuildTree(){
				var farther=new BTNode(1);
				farther.left=new BTNode(2);
				farther.right=new BTNode(3);
				farther.left.left=new BTNode(4);
				farther.left.right=new BTNode(5);
				farther.right.right=new BTNode(6);
				farther.left.left.right=new BTNode(7);
				farther.left.right.left=new BTNode(8);
				farther.right.right.left=new BTNode(9);
				farther.right.right.right=new BTNode(10);
				return farther;
				}
			function qianorder(farther){
				if(farther==null)
				return;
				show(farther.tree);
				qianorder(farther.left);
				qianorder(farther.right);
				}
			function zhongorder(farther){
				if(farther==null)
				return;
				
				zhongorder(farther.left);
				show(farther.tree);
				zhongorder(farther.right);
				}
			function houorder(farther){
				if(farther==null)
				return;
				
				houorder(farther.left);
				houorder(farther.right);
				show(farther.tree);
				}
			function DisLeaf(farther){
				if(farther==null)
				return;
					{
					if(farther.left==null&&farther.right==null)
					show(farther.tree);
					DisLeaf(farther.left);
					DisLeaf(farther.right);
					}
				}
			function HighTree(farther){
				var Lh,Rh;
				if(farther==null)
				return 0;
				else{
					Lh=HighTree(farther.left);
					Rh=HighTree(farther.right);
					return (Lh>Rh)?(Lh+1):(Rh+1);
					}
				
				}
				var count=1;
			function Treekudu(farther){
				
				if(farther!=null)
				{
					if(farther.left!=null&&farther.right!=null)
					{
						count++;
						}
						Treekudu(farther.left);
						Treekudu(farther.right);
					}
				}
			function KSTree(farther){
				if(farther!=null)
				{
					if(farther.right==null)
					{
						count++
						}
						if(farther.left==null)
						{
							count++
							}
							KSTree(farther.left);
							KSTree(farther.reght);
					}
				}
			function DisBTNode(farther){
				if(farther!=null){
					show(farther.tree);
						if(farther.left!=null||farther.right!=null){
							document.write("(");
							DisBTNode(farther.right);
							if(farther.right!=null)
							document.write(",");
							DisBTNode(farther.right);
							document.write(")");
							}
					}
				}
			function countSearch(farther){
				if(farther!=null)
				{
					if(farther.right!=null)
					{
						count++;
						}
						countSearch(farther.left);
						countSearch(farther.right);
					}
				}
			var farther=BuildTree();
			document.write("<p>前序遍历：")
			qianorder(farther);
			document.write("</p><p>中序遍历：")
			zhongorder(farther);
			document.write("</p><p>后序遍历：")
			houorder(farther);
			document.write("</p><p>所有叶子节点：")
			DisLeaf(farther);
			document.write("</p><p>二叉树的深度：")
			show(HighTree(farther));
			document.write("</p><p>二叉树的输出：")//有问题，，不知道咋改
			DisBTNode(farther);
			document.write("</p><p>二叉树宽度：")
			Treekudu(farther);
			document.write(count);
			
			document.write("</p><p>二叉树中空链域个数：")
			KSTree(farther);
			document.write(count-1);
			document.write("</p><p>输出利用二叉树存储的普通树的度:");
			//function T(farther){
				//if(farther.right!=null)
				//{
					//document.write(error);
					//}
					//else{
				countSearch(farther);
				document.write(count+"这个有问题");
					//}
				//}
			
			document.write("</p>"); 
    
    </script>

</html>
（6）链表操作 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>链表操作</title>
    <style type="text/css">
    	p{
			font-size:20px;
			font-family:Verdana, Geneva, sans-serif;
			}
    </style>
    <script type = "text/javascript">  
        var array = new Array(2,7,5,2,1,3,4);  
        var Node = function(newData){  
            this.next = null;  
            this.data = null;  
            this.Init = function(){  
                this.data = newData;  
            };  
            this.Init();  
        }  
          
        var List = function(){  
            this.head = null;  
            this.size = 0;  
            this.Init = function(){  
                this.head = null;  
                this.size = 0;  
            }  
            this.Init();  
              
            this.Insert = function(newData){  
                this.size += 1;  
                var newNode = new Node(newData);  
                if(this.head == null){  
                    this.head = newNode;  
                    return;  
                }  
                var tempNode = this.head;  
                while(tempNode.next != null)  
                    tempNode = tempNode.next;  
                tempNode.next = newNode;  
            };  
              
            this.GetData = function(pos){  
                if(pos >= this.size || pos < 0)  
                    return null;    
                else{  
                    tempNode = this.head;  
                    for(i = 0;i < pos;i++)    
                        tempNode = tempNode.next;    
                    return tempNode.data;    
                 }  
            };  
              
            //删除元素    
	        this.Remove = function(pos){  
                if(pos >= this.size || pos < 0)  
                    return null;      
                this.size -= 1;  
                tempNode = this.head;  
                if(pos == 0){  
                    this.head = this.head.next;  
                    return this.head;  
                }  
                for(i = 0;i < pos - 1;i++){  
                    tempNode = tempNode.next;  
                }  
                tempNode.next = tempNode.next.next;  
                return tempNode.next;  
                      
            }  
              
            this.Print = function(){  
                document.write("<p>链表元素如下:");  
                tempNode = this.head;  
                while(tempNode != null){  
                    document.write(tempNode.data + " ");  
                    tempNode = tempNode.next;  
                }  
                document.write("<br>");  
            };  
        };  
          
        //运行链表 
        var list = new List();  
        var array = new Array(2,7,5,2,1,3,4);  
        for(i = 0;i < array.length;i++){  
            list.Insert(array[i]);  
        }  
        list.Print();  
        list.Remove(5);  
        list.Print();  
        document.write("</p><p>删除的位置:  " + list.size);  
        document.write("</p>");
    </script>  
</head>  
  
<body>  
</body>  
</html>
（7）希尔排序 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>希尔排序</title>
</head>

<body>
	<input type="text" style="width:30%;height:30px;" οnblur="get(this)"/>
</body>
	<script type="text/javascript">
    	function get(obj){
			var ct = obj.value;
			var Text=ct.split(" ");
			var arr=[];
				len=Text.length;
			for(var i=0;i<len;i++){
				arr.push(parseInt(Text[i]));
				}
				for(var F=Math.floor(len/2);F>0;F=Math.floor(F/2)){
					for(var i=F;i<len;i++){
						for(var j=i-F;j>=0&&arr[j]>arr[F+j];j-=F){
						var temp=arr[j];
						arr[j]=arr[F+j];
						arr[F+j]=temp;
						}
						}
						}
						
						alert(arr);
			}
    
    </script>
</html>

微笑 微笑 微笑

AdoreFT
关注
专栏目录
原生js写table点击表头按钮进行排序
weixin_44986077的博客
06-11 2437
最近在对之前的项目进行功能增加又因为是老项目所以用的是js和jquery 项目的需要是点击表头的按钮进行排序 按钮是在阿里矢量图中找的点击上箭头升序排列点击下箭头降序 下面是整理的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-
JavaScript实现表格排序，点击表头切换升序降序，非常简单
08-27
使用JavaScript实现表格排序，点击表头切换升序降序，非常简单
js实现基本排序算法（一）
Reilyyy的博客
04-07 285
冒泡排序 冒泡排序就是通过一轮又一轮两两之间的比较，将大数放到数组的最后，第一轮排好最大数，第二轮次大数，以此类推，当哪一轮没有交换就可以判断为已经排好（以此为依据设置标记，减少排序的时间）。 //冒泡排序 //稳定性：稳定 空间复杂度： O(n) 时间复杂度：O(n*n) //适合基本有序的数组 基本操作：每趟找到最大的放到后面 var ...
Javascript 实现四种基本排序
weixin_41198447的博客
12-04 478
Javascript s实现四种基本排序 冒泡/插入/选择/快速
js 常用排序算法
weixin_45730243的博客
05-08 2991
选择排序是一种简单易懂的排序算法。它的基本思想是遍历整个列表，每次找出最小的元素，并且将它移到列表的最左边，重复这个过程直到整个列表都有序排列。在平均情况下，选择排序的时间复杂度为 O(n^2)，在最坏情况下与最好情况下都为 O(n^2)。选择排序在数据规模较小时非常适用，在数据规模较大时不够高效。插入排序是一种简单而直观的排序算法，它可以快速地对部分有序的数组进行排序。插入排序通过比较相邻的元素并在需要时将其交换，来实现从小到大的排列。
javascript实现对表格元素进行排序操作
10-23
JavaScript实现对表格元素进行排序...以上知识点总结了使用JavaScript实现对表格元素进行排序操作的基本方法和注意事项。在实际应用中，还需要考虑代码的性能优化和兼容性处理，以适应不同浏览器和设备上的运行效果。
javascript实现Table排序的方法
10-24
以上是根据提供的文件信息总结的JavaScript实现表格排序的关键知识点，包括了获取表格对象、存储行节点、确定排序方式、排序算法的实现、DOM操作、HTML和CSS的基本使用等。这些知识点对于掌握前端开发中的数据处理和...
使用JavaScript实现的排序二叉树.zip
最新发布
04-26
以下是JavaScript实现的插入操作： ```javascript function insert(node, value) { if (node === null) { return new Node(value); } if (value ) { node.left = insert(node.left, value); } else if ...
基于JavaScript实现的希尔排序算法分析
10-20
JavaScript实现的希尔排序算法示例代码中，首先定义了一个间隔序列数组`gaps`。在实际的排序过程中，按照间隔序列中的值作为步长，逐个对数组元素进行分组排序。初始时，步长较大，元素之间比较的间隔远，减少每一轮...
javascript排序函数实现数字排序
10-24
这一步会执行排序操作，改变数组的顺序。最后，再次使用 document.write 输出排序后的数组，可以看到数组已经按照升序排列。 整个示例中，还包含了一个 try-catch 语句块来捕获可能发生的异常，这是一种良好的编程...
js脚本练习：文本框输入数字，点击按钮后，由小到大排列，并返回给文本框...
weixin_30726161的博客
12-19 1009
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> //点击按钮，出发so方法 ...
折半插入排序算法---JS实现详解
qq_59181609的博客
06-20 229
折半插入排序是插入排序的一种，因为从被排序数组的第二个元素位置开始，每一次循环结束前部分数组都是保持有序的。而二分搜索算法的前提就是数组有序，所以可以利用二分搜索算法查找要将元素插入到前部分有序数组的哪个位置，进而提高效率。...
js上下点击排序
wwwyuanliang10000的专栏
06-12 5239
<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> "> My JSP 'index.jsp' starting page
原生js实现多选框的排序以及可选个数控制
Hey firefly
02-21 3179
展示页面： http://codepen.io/crystalYY/pen/ggNjQR主要效果： 最多可选择三项，用户尝试选择第四项时，多选框变为disabled禁用状态 按照用户点击的顺序实时给出已选择的多选框所对应的序号 左下方实时提醒用户当前已选择了几项 实现思路： 设置一个用来存放已经选定的多选框，即obj.checked=true的value的数组checkedArray 效果1实现思路
写一个输入框并将输入的结果在文本框中排序
柚的个人技术博客
09-23 3071
我的第一个javaScript小demo，也意味着开启了我的JS demo之旅  ~~ //写一个输入框并将输入的结果在文本框中排序 var i=0; var val = new Array(); function cmp(a,b){ return a<b;//将输入的数字从大到小排序。 } function paixu(){ val[i++] = d
前端：JS几种常见的排序
IT技术分享社区
04-11 2992
1、冒泡排序依次比较相邻的两个元素，如果后一个小于前一个，则交换，这样从头到尾一次，就将最大的放到了末尾。动画演示： 代码：func...
javascript实现下拉列表框显示（输入拼音头显示选项）
xzknet
04-28 1563
客户提出输入拼音头，下拉列表框打开，焦点在拼音头为对按下字母的那条子项上按回车键则选中此子项。这点如同在OICQ中搜索名字，按下一个字母键，则第一个字母为此字母的单词或汉字就为当前的选项。还有，如：在选项中有“张三”“张三火”两个人名用户按下"z""s""h"三个字后当前显示的选项就为“张三火”.     &lt;script src=qswhGB2312.js&gt;&lt;/script&g...
js 点击表头进行排序
MoLvSHan的博客
06-09 3018
示例图如下，点击技能ID时进行正反排序       html代码如下： &lt;thead&gt; &lt;tr class="text-c"&gt; &lt;th width="25"&gt;&lt;input type="checkbox" name="" value=""&gt;&lt;/th&gt;
JavaScript表格数据降序/反序排序实现
"这篇文章主要介绍了如何使用JavaScript对表格数据进行降序和反序排序，通过Array的sort和reverse方法来实现。文中还提供了一个简单的表格样式，并给出了部分HTML和CSS代码示例，但未涉及复杂的联合排序算法。" 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值