韓順平_輕鬆搞定網頁設計(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萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章