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,我们下次见!

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