韩顺平_轻松搞定网页设计(html+css+javascript)_第27讲_js一维数组_一维数组细节_学习笔记_源代码图解_PPT文档整理

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

javascript——数组

内容介绍
1.一维数组(详细讲解)
2.排序,查找(排序和查找在javascript中不是重点)
3.多维数组(略讲,多维数组在javascript用的少)
编程语言中,数组是一个非常重要的知识点,不管是什么编程语言,数组都很重要。

学习目标
1.掌握js中的数组的使用
2.掌握js中常用的排序,查找方法(排序起码知道冒泡,查找要知道顺序查找和二分查找)

提出问题,为什么需要数组?
数组
①为什么需要数组
看一个需求:
王大爷有6只乌龟,它们的体重分别为3kg,5kg,1kg,3.4kg,2kg,50kg。请问这六只乌龟的总体重是多少?平均体重是多少?请用现在掌握的技术编一个程序解决。
当你没有学习数组之前,你用传统的方法进行解决。

demo1.html

<html>
	<head>
		<script language="javascript">
			var weight1=3;
			var weight2=5;
			var weight3=1;
			var weight4=3.4;
			var weight5=2;
			var weight6=50;

			//总体重
			var all_weight=weight1+weight2+weight3+weight4+weight5+weight6;
		</script>
	</head>
	<body></body>
</html>

如果要是养了600只乌龟,你再计算总体重的时候,你要写600个变量,当然数目也不是很大,也可以写,要是600万只乌龟呢,你就会很痛苦了!
怎么解决呢???--》数组

解决方法——数组
数组可以存放多个数据,可以用数组来解决上面的问题。
javascript的数组特点非常明显:什么数据都可以往里面放。弱数据类型语言。

②解决方法
使用数组,这种数据类型(引用类型/复杂类型/复合类型),数组的基本概念:用于存放一组数据。
特别强调:js中的数组,可以存放各种数据类型(数值/字串...)

快速入门 

demo2.html

<html>
	<head>
		<script language="javascript">
			var weights=[3,5,1,3.4,2,50];
			var all_weight=0;
			var avg_weight=0;
			//数组的遍历打印
			for(i=0;i<weights.length;i++){
				document.writeln(weights[i]+"<br/>");
			}
			document.writeln("=====");
			for(i=0;i<weights.length;i++){
				all_weight+=weights[i];
			}
			avg_weight=all_weight/weights.length;
			document.writeln("<br/>");
			document.writeln("总体重是"+all_weight+" 平均体重是"+avg_weight);
			document.writeln("<br/>");
			//保留到小数点2位
			document.writeln("总体重是"+all_weight+" 平均体重是"+avg_weight.toFixed(2));
			document.writeln("<br/>");
			//如果你想知道,数据类型是什么
			window.alert(avg_weight.constructor);
		</script>
	</head>
	<body></body>
</html>


如果你想知道,数据类型是什么,可以例如:
window.alert(avg_weight.constructor);



js基本语法——一维数组
一维数组
js中的数组是用于表示一组数据的集合,它由一个方括号[]包围,数组中的每个元素逗号分隔,数组元素可以是任意类型的数据。
①创建数组
例子:
var a=["shunping".123,"1.1",4.5,true]


数组的细节
基本用法:
var 数组名=[元素值,元数值,...]
元素的值可以是任意类型

var arr=[4,56,"hello world",true];
数组在内存中的存在形式:

通过一个案例,加深理解

demo3.html

<html>
	<head>
		<script language="javascript">
			var myval=900;

			function abc(val){
				val=90;
			}

			abc(myval);
			window.alert(myval);
		</script>
	</head>
	<body></body>
</html>


普通数据类型在函数调用的时候传值,相当于拷贝了一份,而不是传的地址

从栈的角度来看,看的更清楚

再进一步


demo4.html

<html>
	<head>
		<script language="javascript">
			var myarr=[456,90,900];
			document.writeln("函数调用前<br/>");
			for(var i=0;i<myarr.length;i++){
				document.writeln(myarr[i]);
			}
			document.writeln("<br/>=========<br/>");

			function abc(arr){
				arr[0]=35;
			}
			//调用函数
			abc(myarr);
			document.writeln("函数调用后<br/>");
			for(var i=0;i<myarr.length;i++){
				document.writeln(myarr[i]);
			}
		</script>
	</head>
	<body></body>
</html>

关于传值和传地址的问题
具体是什么,一定要分清楚了
js中的数组是引用传递
内存分析示意图:

javascript也有垃圾回收机制
javascript的水很深,不要把javascript想的很简单

②数组的引用(使用)
数组名[下标]
比如:你要使用a数组的第三个元素 a[2]

思考:a数组总共有三个元素
但是 a[6]会怎样啊

比如:var a=[23,"hello",4.5]
我们访问  a[2] 则输出4.5
如果我们访问 a[3] 则输出 undefined
为什么会出现undefined:
不存在这个数(a[3]),你就直接访问了。相当于你访问一个没有定义的变量,如下:
window.alert(b);b都没定义赋值,当然要报错
结论:不能访问不存在的元素
数组的下标是从0开始编号的
比如:var a=[23,"hello",4.5];
a[0]=23
a[1]="hello"
a[2]=4.5

思考2:
var a=[2,3];
a[2]=56;
alert(a[2]);

动态增长,其他编译型语言是不能动态增长的
js的数组可以动态增长,java和c#要动态增长,要用类似集合的东西才能完成
java,c和c++都是编译语言,事先就把空间大小分配好了,而javascript是动态语言,执行的时候才会变化

var a=[2,3];
window.alert("size="+a.length); //输出2
//动态的增长
a[2]=56;
window.alert("size="+a.length); //输出3,动态增长
alert(a[2]);

③js数组的特点
js数组是可以动态的增长的,这个和java的数组不一样,有点类似于java中ArrayList

④js数组的几个重要应用
(1)使用数组名.length可以得到数组大小
(2)拆分字符串 字符串.split(拆分数组)可以得到一个数组
(3)其他...
字符串拆分数组
var str="hello world abc 顺平";
var arr=str.split(" ");//以空格为间隔
var arr1=str.split("");//一个字符一个字符的打散了
var arr2=str.aplit(" ",2);//取其中的前两个,取hello world
for(var i=0;i<arr.length;i++){
document.write(arr[i]+" ");
}

想不起来的时候首先看文档


⑤遍历一维数组
把那里数组有很多种方法,可以使用for循环,while循环遍历数组,其中for寻找遍历除了常用方法外,还可以如下使用(一般很少用)
for(var key in arr){
window.alert(key+"= "+arr[key]);

}


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

发布了55 篇原创文章 · 获赞 8 · 访问量 27万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章