javascript基礎（物件，物件屬性，屬性基本和引用資料型別，字面量建立物件，垃圾回收，屬性的列舉）（十三）

厚積薄發2017發表於2017-02-08
JavaScript物件資料型別

1.物件概述：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * JS中一共有6種資料型別
			 * 基本資料型別
			 * 		String Number Boolean Null Undefined	
			 * 引用資料型別
			 * 		Object（物件）
			 * 
			 * 基本資料型別儲存的都是一個一個單一的值，值與值之間沒有任何的聯絡，不能表示一些複雜的資料
			 * 	假設需要在程式中來表示一個人的資訊（姓名、性別、年齡、住址）：
			 * 	var name = "孫悟空"
			 * 	var age = 18
			 *  var gender = "男"
			 * 	var address = "花果山"
			 * 
			 * 物件是一種複合資料型別，物件就像是一個容器，在它裡面可以裝任意資料型別的屬性
			 * 
			 * 物件的分類：
			 * 	1.內建物件
			 * 		- 內建物件指由ES標準定義的物件，任何對ES標準的實現都可以使用這些物件
			 * 		- 比如：Math String Number Boolean RegExp
			 * 
			 * 	2.宿主物件
			 * 		- 宿主物件指由JS執行環境為我們提供的物件，目前對於我們來說就是指瀏覽器為我們提供的物件
			 * 		- 比如BOM物件 和 DOM物件
			 * 		- window document console 。。。。。。
			 * 
			 * 	3.自定義物件
			 * 		- 由我們自己定義的物件
			 * 
			 */
			
			//建立物件
			//呼叫建構函式（constructor）建立一個物件
			//使用new關鍵字呼叫的函式稱為建構函式
			var obj = new Object();
			
			//使用typeof檢查一個物件時，會返回object
			//console.log(typeof obj);
			
			//在物件中可以儲存不同型別值，這些值我們稱為物件的屬性
			//向物件中新增屬性
			//語法：物件.屬性名 = 屬性值
			obj.name = "孫悟空";
			obj.age = 18;
			obj.gender = "男";
			
			//從物件中讀取屬性
			//語法：物件.屬性名
			//console.log(obj.gender);
			
			//如果讀取物件中沒有的屬性，不會報錯，而是返回undefined
			//console.log(obj.address);
			
			/*
			 * 修改物件的屬性
			 * 	物件.屬性名 = 新值
			 */
			
			obj.name = "tom";
			
			/*
			 * 刪除物件中的屬性
			 * 	語法：delete 物件.屬性名
			 */
			
			//刪除obj的name屬性
			delete obj.name;
			
			//console.log(obj.name);
			
			/*
			 * 檢查物件中是否含有某個屬性
			 * 	可以使用in運算子
			 * 	語法  "屬性名" in 物件
			 * 		檢查物件中是否含有指定的屬性，如果有則返回true，沒有則返回false
			 */
			console.log("name" in obj);
			
			
		</script>
	</head>
	<body>
	</body>
</html>


2.物件屬性： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			var obj = new Object();
			
			
			//向obj中新增屬性
			obj.name = "孫悟空";
			
			/*
			 * 物件的屬性名，沒有任何要求，也不用遵循的識別符號的規範,
			 * 	可以起任何的稀奇古怪的名字，但是如果是一些特別的名字不能使用 物件.屬性名 的形式新增
			 * 	而需要採取其他的方式。
			 * 
			 * 雖然可以起任意的名字，但是在開發中屬性名儘量還是遵循識別符號的規範
			 * 
			 * 
			 * 新增屬性的第二種方式
			 * 	 物件["屬性名"] = 屬性值
			 * 	[]這種方式比我們使用 . 更加靈活，而且[]中可以傳變數
			 */
			obj.var = "hello";
			
			//obj.123abc = "你好";
			obj["123abc"] = "你好";
			
			/*
			 * 讀取屬性：
			 * 	物件["屬性名"]
			 */
			//console.log(obj["name"]);
			
			var str = "var";
			
			//console.log(obj[str]);
			
			/*
			 * 屬性值
			 * 	- 屬性值可以是任意的資料型別（String Number Boolean Null Undefined）
			 * 	- 也可以一個物件
			 * 
			 */
			var obj2 = new Object();
			
			//向obj2中新增一個屬性
			obj2.name = "沙和尚";
			
			obj.test = obj2;
			
			console.log(obj.test.name);
			
		</script>
	</head>
	<body>
	</body>
</html>

3.基本和引用資料型別： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * 基本資料型別
			 * 	String Number Boolean Null Undefined
			 * 
			 * 引用資料型別
			 * 	Object
			 * 
			 * 程式在執行時，記憶體分為兩種結構棧記憶體、堆記憶體
			 * 	基本資料型別的值是直接儲存到棧記憶體中的
			 * 		基本資料型別的值都是互相獨立的，修改一個不會影響到其他的值
			 *  引用資料型別物件是儲存在堆記憶體中的，而在變數中儲存的是物件的引用（記憶體地址）
			 * 		我們是通過引用來操作物件的，當修改一個物件時有可能影響到其他的變數	
			 * 
			 * 	對基本資料型別相等比較時，比較的是資料的值
			 * 		而兩個引用資料型別進行比較時，比較的是物件的地址，如果兩個物件一模一樣，但是地址不同也會返回false
			 * 
			 */
			
			var a = 1;
			
			//建立一個變數b
			var b = a;
			
			//修改a的值
			b++;
			
			/*console.log("a = "+a);
			console.log("b = "+b);*/
			
			var obj = new Object();
			
			//向物件中新增屬性
			obj.name = "孫悟空";
			
			//建立一個obj2
			var obj2 = obj;
			
			//修改obj的name屬性
			obj.name = "沙和尚";
			
			/*console.log(obj.name);
			console.log(obj2.name);*/
			
			var c = 10;
			var d = 10;
			
			var obj3 = new Object();
			var obj4 = new Object();
			
			//console.log(c == d);
			//console.log(obj3 == obj4);
			
			var obj5 = new Object();
			obj5.name = "豬八戒";
			var obj6 = obj5;
			//設定obj5為null
			obj5 = null;
			
			console.log(obj6.name);
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>


4.使用字面量建立物件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			//var obj = new Object();
			
			//使用物件字面量來建立物件
			var obj = {};
			
			obj.name = "孫悟空";
			
			
			/*
			 * 建立物件的同時為其新增屬性
			 * 	物件字面量的語法：
			 * 		{屬性名:屬性值,屬性名:屬性值,屬性名:屬性值...}
			 * 		對於特殊的屬性名，可以通過雙引號引起來
			 */
			var obj2 = {
							name:"孫悟空",
							age:18,
							address:"花果山",
							"123":"hello",
							test:{
								name:"豬八戒",
								age:28,
								address:"高老莊"
							}
						};
			
			console.log(obj2.test.address);
			
			
		</script>
	</head>
	<body>
	</body>
</html>

5.垃圾回收： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * 垃圾回收（GC）
			 * 	- 當一個物件沒有任何的變數對其引用時，
			 * 		此時我們將無法在獲取到該物件，也無法在對該物件做任何的操作
			 * 		但是這種物件依然會佔用記憶體空間，這種垃圾過多以後會浪費大量的記憶體
			 * 		導致程式執行變慢。向這種物件我們必須進行回收，使其不佔用記憶體空間。
			 * 
			 *  - 在JS中有自動的垃圾回收機制，瀏覽器會自動將沒有被引用的物件清除出記憶體。
			 * 		回收的工作由瀏覽器自動完成，而我們只需要將一些不再使用的物件設定為null即可
			 * 		
			 * 
			 */
			
			var obj = new Object();
			
			//將obj設定null
			obj = null;
			
			
		</script>
	</head>
	<body>
	</body>
</html>

6.屬性的列舉： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			//建立一個物件
			var obj = {
						name:"豬八戒",
						age:28,
						address:"高老莊"
					};
					
			
			//對obj中的屬性進行列舉
			/*
			 * 使用 for...in 語句對一個物件中的屬性進行列舉
			 * 語法：
			 * 		for(變數 in 物件){
			 * 			
			 * 		}
			 * 
			 * 	物件中有幾個屬性，迴圈體就會執行幾次，
			 * 		每次執行時都會將一個物件中的屬性名賦值給變數
			 */
			
			for(var n in obj){
				console.log(n + " : " +obj[n]);
			}
					
			
		</script>
	</head>
	<body>
	</body>
</html>



相關文章