韩顺平_轻松搞定网页设计(html+css+javascript)_第28讲_js二维数组_js冒泡排序_二分查找_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/

一维数组——小结
①数组可存放任意类型的数据
②数组大小不必事先指定,可以动态增长
③数组名可以理解为指向数组首地址的引用
arr=[45,90,0];
document.writeln(arr); //则输出 45 90 0
④数组元素从0开始编号的

多维数组——二维数组
多维数组我们只介绍二维数组,一维数组的元素还可以是一个数组,就构成了二维数组。
①实例
var arr=[["shunping",123,4.5],["a","b","c"]]
demo1.html

<html>
	<head>
		<script language="javascript">
			var arr=[["shunping",123,4.5],["a","b","c"]];

			//遍历
			for(var i=0;i<arr.length;i++){
				//输出一行(二维数组一个元素[数组])
				for(var j=0;j<arr[i].length;j++){
					document.writeln(arr[i][j]+" ");
				}
				document.writeln("<br/>");
			}
			//如果需要直接访问"c"
			window.alert(arr[1][2]);
		</script>
	</head>
	<body></body>
</html>


②分析
思考:如何访问"b",arr[0][2]又是多少?如何遍历二维数组?
③案例,请用二维数组输出如下图形
0 0 0 0 0 0
0 0 1 0 0 0
0 2 0 3 0 0
0 0 0 0 0 0

如何遍历二维数组

demo2.html
<html>
	<head>
		<script>
			var arr=[[0,0,0,0,0,0],[0,0,1,0,0,0],[0,2,0,3,0,0],[0,0,0,0,0,0]];
			for(var i=0;i<arr.length;i++){
				//遍历每一个具体的值
				for(var j=0;j<arr[i].length;j++){
					document.writeln(arr[i][j]+" ");
				}
				document.writeln("<br/>");
			}
		</script>
	</head>
	<body></body>
</html>


思考题:请将下面的矩形转置,并打印在页面

1 2 3 4 5 
6 7 8 9 10
1 6 9 6 9
2 5 3 2 6
0 1 3 5 8

2 4 6 8
8 9 0 -1
9 6 2 1 

加强对二维数组的认识,转置矩阵
矩阵转置:行和列交换

demo3.html

<html>
	<head>
		<script language="javascript">
			var arr=[[2,4,6,8],[8,9,0,-1],[9,6,2,1]];
			//对上面的数组转置(转置就是行列互换)
			var arr_new=[]; //javascript的数组可以动态增长

			for(var i-0;i<arr.length;i++){
				//遍历每个具体的值
				for(var j=0;k<arr[i].length;j++){
				}
			}
		</script>
	</head>
	<body></body>
</html>
先放下


js基本语法——排序
排序的介绍
排序是将一组数据,依指定的顺序进行排列的过程。
排序的分类:
(交换式排序,选择式排序和插入式排序)
排序(Sorting)是数据处里中一种很重要的运算,同时也是很常用的运算,一般数据处里工作25%的事件都在进行排序。简单的说,排序就是把一组记录(元素)按照某个域的值的递增(即由小到大)或递减(即由大到小)的次序重新排列的过程。

交换式排序法
交换式排序属于内部排序法,是运用数据值比较后,依判断规则对数据位置进行交换,以达到排序的目的。
交换式排序法又可分为两种:
1.冒泡排序法(Bubble sort)
2.快速排序法(Quick sort)

交换式排序法——冒泡排序法
冒泡排序(Bubble Sorting)的基本思想是:
通过对待排序序列从后向前(从下标较大的元素开始),依次比较相邻元素的排序码,若发现逆序则交换,使排序码较小的元素逐渐从后部移向前部(从下标较大的单元移向下标较小的单元),就像水底下的气泡一样逐渐向上冒。
因为排序的过程中,各元素不断接近自己的位置,如果一趟比较下来没有进行过交换,就说明序列有序,因此要在排序过程中设置一个标志flag判断元素是否进行过比较,从而减少不必要的比较。

下图演示了一个冒泡过程的例子:

按道理,9个数据应该排8次,上面的例子是优化过的。
第一轮定一个数

demo4.html

<html>
	<head>
		<script language="javascript">
			var arr=[79,56,90,4,32,27,16,88,35];
			//大的排序次数(arr.length-1)
			//为什么要arr.length-1。假如是9个数,第一趟就把最大的数固定了,第二趟就把第二大的数固定了,每排一趟就固定了一个大数,第八趟就固定了第八大的数,9个数8个位置都已经定下来了,那么剩下的数就是最小的数(第九大的数),所以就不用再排了,9个数,只需要排8趟,n个数,只需n-1趟

			//for(var i=1;i<=arr.length-1;i++)从1开始计数,更容易理解些
			for(var i=0;i<arr.length-1;i++){
				//小的排序,不停两两交换,为什么要减i,因为每定义一个大数,后面的两两交换循环就减少一次。假设为9个数,如第一趟,i=0,两两循环的次数为arr.length-1,8次;第二趟,i=1,两两交换循环的次数就为arr.length-1-1,7次,因为已经把最大的数固定了,就相当于剩下的8个数参与排序,7次两两交换。
				for(var j=0;j<arr.length-1-i;j++){
					if(arr[j]>arr[j+1]){
						//交换,小数排在前面,大数向后排
						var temp=arr[j];
						arr[j]=arr[j+1];
						arr[j+1]=temp;
					}
				}
			}
			for(var i=0;i<arr.length;i++){
				document.writeln(arr[i]+" ");
			}
		</script>
	</head>
	<body></body>
</html>

排序后的结果:

改进:当if一句一次都没有进来,则说明已经是有序的了,则无需再去执行排序

最外层循环6次,如果不加标志位,9个数应该外层循环8次,当数据量很大的时候,节省的时间就明显了,优化过的冒泡排序。

demo5.html

<html>
	<head>
		<script language="javascript">
			var arr=[79,56,90,4,32,27,16,88,35];

			//默认为false,没有进去
			var flag=false;
			for(var i=0;i<arr.length-1;i++){
				//输出打印,看在加了标志位后,大循环了几次
				document.writeln("大循环...<br/>");
				for(var j=0;j<arr.length-1-i;j++){
					//当if一句一次都没有进来,则说明已经是有序的了,则无需再去执行排序
					if(arr[j]>arr[j+1]){
						//交换,小数排在前面,大数向后排
						var temp=arr[j];
						arr[j]=arr[j+1];
						arr[j+1]=temp;
						//进来一次就设为true,表明交换过一次了
						flag=true;
					}
				}
				if(flag){ //如果为真,就说明交换过,再重新置为false
					flag=false;
				}else{
					break; //如果为假,则说明一次交换过都没有,if语句没有进入过,说明是有序的了,无需再排序了,直接break
				}
			}
			for(var i=0;i<arr.length;i++){
				document.writeln(arr[i]+" ");
			}
		</script>
	</head>
	<body></body>
</html>

js基本语法——查找
我们常用的查找有两种
(1)顺序查找(一个一个的比对)
(2)二分查找
二分查找是经常在笔试和面试中会遇到的题
★二分查找的前提:
该数组是有序的,如果不是有序的数组,则不能使用二分查找
demo6.html

<html>
	<head>
		<script language="javascript">
			var arr=[1,4,6,8,9,90,800];

			//思路:找到数组的中间数(midVal),和你要查找的数(findval)进行比较,如果mindVal>findVal,则说明findVal在数组的左边,就把该数组二分(就只在左边查找)
			function binarySearch(arr,findVal,leftIndex,rightIndex){
				//前提,防止递归是无穷递归
				if(leftIndex>rightIndex){
					//提示找不到,错位了
					document.writeln("找不到");
					return;
				}

				//首先要找到中间这个值
				//在javascript中,两个整数相除,如果有余数,不会自动截断,所以要处里。Math.floor()方法:对一个数进行下取舍
				var midIndex=Math.floor((leftIndex+rightIndex)/2);				
				var midVal=arr[midIndex];
				//比较
				if(midVal>findVal){
					//再左边找,要用到递归了,
					//数组是引用传递,还是原来的数组
					//为什么midIndex-1,因为midVal=arr[midIndex],已经比较过了,减1,就指向紧邻的左边的一个数,把它当做新的midVal
					binarySearch(arr,findVal,leftIndex,midIndex-1);
				}else if(midVal<findVal){
					//在右边找
					//midIndex+1,midIndex已经比较过了,把midIndex+1作为新的左边
					binarySearch(arr,findVal,midIndex+1,rightIndex);
				}else{
					document.writeln("找到 下标为"+midIndex);
					return;
				}
			}

			//测试
			//数组的最左边0,最右边arr.length-1
			binarySearch(arr,1,0,arr.length-1);
		</script>
	</head>
	<body></body>
</html>

看注释,比较详细


韩顺平_php从入门到精通_视频教程_学习笔记_源代码图解_PPT文档整理_目录


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值