Javascript基礎知識體系化學習總結(一)變量

Javascript基礎知識體系化學習總結(一)變量

一、值類型和引用類型
1.首先講一下值類型是什麼,即String、Number、Symbol、Boolean、Undefined;而引用類型包括對象和數組、函數,其中由於函數是不儲存數據的,我們在這裏不講函數。這是最簡單的描述。
2.然後是兩者的區別:
(1)值類型是存放在棧中,以鍵值對的形式即(值類型變量名:對應的值)不會涉及到堆。
(2)而引用類型是涉及到堆和棧,當我們聲明瞭一個引用類型時,會在棧中準備一個空間儲存我們引用類型的變量名,對應的值是一個內存地址,這個內存地址是指向堆中對應的地址,堆中對應的地址是真正的引用類型的值。
(3)其次,值類型的拷貝是直接複製,複製完成後的值類型變量們並沒有什麼交集,誰的改動都不會影響誰。
(4)而引用類型的拷貝分爲淺拷貝和深拷貝,淺拷貝就是直接複製,也就僅僅是把地址複製一份給拷貝的引用類型,後果就是由於兩者的地址是一樣的,指向堆中同一個對象,如果這個對象修改的話,兩者的值都會發生改變,這個很容易引起數據的混亂。所以我們提出了深拷貝,深拷貝的話是把被拷貝的引用類型上的內容完完全全的複製下來給另一個變量,好處就是複製之後兩者就再也沒有關聯了,一個引用類型的改變不會引起另一個引用類型的改變。

二、類型判斷
1.這個先講一下上面提到的深拷貝如何實現:
其實是比較簡單的,通過遍歷和遞歸找到引用類型中的值類型們就可以了!

<!DOCTYPE html>
<html>
<head>
	<title>深拷貝</title>
</head>
<body>
<script type="text/javascript">
	function deepClone(obj = {}) { // 傳入一個對象/數組爲參數,如果沒有傳則默認爲對象參數
		if(typeof obj != 'object' || obj == null) { // 如果傳入的不是引用類型或者該引用類型是沒有值就直接返回即可
			return obj
		}
		let result // 定義一個存放結果的變量
		if(obj instanceof Array) { // 判斷是數組則儲存的變量設置爲數組類型
			result = []
		}else { // 否則就是對象,這裏不考慮函數!
			result = {}
		}
		for (let key in obj) { // 遍歷對象/數組
			if(obj.hasOwnProperty(key)) { // 確保每一個屬性都是對象/數組本身的值,因爲只是拷貝其本身而已
				result[key] = deepClone(obj[key]) 
				// 然後進入遞歸,這裏遞歸傳遞的就是對象/數組裏面的每一個屬性了
				//分爲兩種情況,如果是值類型直接就返回給result保存,如果是引用類型還需要再深入直到拿到值類型!
			}
		}
		return result // 記得返回結果
	}
	const obj1 = { // 被拷貝的對象
		a: '1',
		b: {
			c: 2,
		},
		arr: [1,2,3]
	}
	const obj2 = deepClone(obj1) // 調用剛剛定義好的方法進行深拷貝
</script>
</body>
</html>

我們在控制檯看一下可以發現obj2被正確的拷貝出來了,而且如果修改其中一個對象的值(這裏是修改obj2對象中的a的值)也不會引起另一個對象的對應的屬性的改變!
在這裏插入圖片描述
在這裏插入圖片描述
2.接下來繼續啊,是typeof,我們在上面深拷貝的例子中也有用到,那麼它可以判斷什麼?
(1)所有的值類型
(2)判斷是不是函數
(3)判斷是不是引用類型,需要注意的是並不能判斷是對象還是數組,就最多是到引用類型這一步,不能再細分了。

三、邏輯運算
1.先講== 和 ===的區別,前者是只需要值相等即可,會盡力幫我們把對比雙方轉化成相同類型,後者是需要值和類型都相等,這個一般情況下都是採用後者,除非是和null做判斷。

2.然後是字符串拼接,這個遇上字符串的運算,基本上都是被轉換成字符串類型再做運算,不管是boolean還是number類型。

3.關於truly和falsely變量,這個其實沒有什麼,就是在一般的變量前面加上!!只需要記住下面這些都是falsely變量,其餘爲truly變量即可:

!!0 == flase
!!NaN == false
!!' '  == false
!! null == false
!! undefined == false
!! false == false

4.關於||和&&,||的話是要求返回true的值如果沒有則返回最後一個,&&相反,是要求返回false的值,如果沒有則返回最後一個,以下給出一些參考:
在這裏插入圖片描述
在這裏插入圖片描述
好了,javascript的第一個模塊大概就是這些內容了,我會將它分爲11個模塊然後13篇文章左右把它講完(有的模塊內容多會範圍上下期大概。。。),學完這些模塊相信大家對基礎的js會有一個比較體系化的認識,那麼大家加油,我是O5,我們下次見!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章