前端中容易遗忘的小知识点(2)

最新推荐文章于 2022-06-16 10:02:20 发布

Whuiry

最新推荐文章于 2022-06-16 10:02:20 发布

阅读量218

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Whuiry/article/details/107739749

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

05 深拷贝和 06浅拷贝

浅拷贝：把对象的属性一一赋值，不考虑属性的值的类型

获取属性值：对象.属性或者对象[‘属性’]（属性是常量）/ （属性是变量）对象[属性]

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T1fbwz00-1596303463386)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20200731015452192.png)]$

深拷贝：考虑对象的值，如果值是对象需要解析赋值

a instanceof b：判断a是否是b的实例

<!DOCTYPE html>
<html>
<head>
	<title>06深拷贝</title>
</head>
<body>
	<script type="text/javascript">
		var stu={
			name:'zs',
			age:12,
			hobby:['唱歌','change'],
			score:{
				math:100,
				chinese:90
			},
			add:function(){
				console.log('add')
			}
		}
		// var stu2=stu; 和浅拷贝不一样

		// var stu2={}
		// 浅拷贝：把对象的属性一一赋值，不考虑属性的值的类型
		// stu2.hobby=stu.hobby;

		// 深拷贝:考虑了对象的值
        // stu2.hobby=[];
		// stu2.hobby[0]=stu.hobby[0];
		// stu2.hobby[1]=stu.hobby[1];

		function deepCopy(stu){
		// 写法一
			// var stu1={}
			// for(var i in stu){
			// 	// a instanceof b 判断a是否是b的实例
			// 	if(stu[i] instanceof Array){
			// 		stu1[i]=[];
			// 		stu1[i]=deepCopy(stu[i])
			// 	}else if(stu[i] instanceof Object){
			// 		stu1[i]={}
			// 		stu1[i]=deepCopy(stu[i])
			// 	}else{
			// 		stu1[i]=stu[i]
			// 	}
			// }
			// return stu1;

		// 写法二（更优）
			if(stu instanceof Array){
				var stu1=[];
			}else{
				var stu1={};
			}
			for(var i in stu){
				// a instanceof b 判断a是否是b的实例
				if(stu[i] instanceof Array){
					stu1[i]=deepCopy(stu[i])
				}else if(stu[i] instanceof Object){
					stu1[i]=deepCopy(stu[i])
				}else{
					stu1[i]=stu[i]
				}
			}
			return stu1;
		}

		// console.log(deepCopy(stu));
		var stu1=deepCopy(stu);
		stu.hobby[0]='跳舞';  //这里修改stu.hobby[0]的值，stu1打印的值仍为唱歌，没有改变
		console.log(stu1);
	</script>

</body>
</html>

07 闭包

①什么是闭包？

由于在javascript中，只有函数内部的子函数才能读取局部变量，所以，闭包可以简单理解成“定义在一个函数内部的函数“。

通俗地讲，闭包就是能够读取其他函数内部变量的函数。
在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

②为什么要使用闭包？

1.可以读取函数内部的变量；
2.可以做缓存，让这些变量的值始终保持在内存中，不会在函数调用后被自动清除

③如何使用闭包？

1.扩大变量作用范围

<!DOCTYPE html>
<html>
<head>
	<title>07闭包</title>
</head>
<body>
<script type="text/javascript">
	// a定义一次，后面执行的函数从最后一次赋值以后的值开始加
	// var a=0;
	// setInterval(()=>{++a},100)

	// 扩大变量作用范围
	// function add(){
	// 	return function mul(){
	// 		console.log('add')
	// 	}
	// }
	// var a=add();
	// a();

	function add(){
		var count=0;
		return ()=>{return ++count}
	}
	// 1.每次执行add函数都会重新赋值count
	console.log(add()());  //1
	console.log(add()());  //1

	// 2.count赋值只在执行add函数的时候执行
	var a=add();
	// count不会重新赋值，只会寻找最后一次赋值以后count的值
	console.log(a());   //1
	console.log(a());   //2
	console.log(a());   //3
	console.log(a());   //4
	console.log(a());   //5
	console.log(a());   //6	

	// 闭包：可以做缓存
</script>
</body>
</html>

2.缩小函数的变量范围

函数自调用 ;(function(){函数体})();

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PjpCspq1-1596303463406)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20200731162551288.png)]$

如何使用闭包缓存ajax请求数据？

博文链接：https://blog.csdn.net/weixin_43820866/article/details/87107035

08 Promise

Promise作用：解决异步请求的

高阶函数：函数作为实参

1.如果要实现红绿灯先后亮起的效果，要一直回调函数：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D6ifhRmf-1596303463415)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20200731165741524.png)]$

什么是回调地狱？不停地回调函数，在异步操作下应用

2.先了解promise方法的使用：

var p = new Promise((res,rej)=>{
			setTimeout(()=>{
				var m=10;
				res(m);
			},1000)
		})
		p.then(function(a){
			console.log(a) //10
		})

3.将promise封装成函数，实现红绿灯效果（在控制台查看）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GrmUhnH4-1596303463431)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20200731172004754.png)]$

09 Canvas

moveTo(x,y):将笔触移动到指定的坐标(x,y)
lineTo(x,y):绘制一条从当前位置到指定坐标(x,y)的直线
fillRect(x,y,width,height):绘制被填充的矩形
stroke() 绘制已定义的路径

渐变
// createLinearGradient(x,y,x1,y1) - 创建线条渐变
// createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

绘制圆形：arc(x,y,r,start,stop)

1.绘制矩形

在这里插入图片描述

2.填充渐变

// 渐变
		// createLinearGradient(x,y,x1,y1) - 创建线条渐变
		// createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
		// 创建渐变
		var grd=ctx.createLinearGradient(0,0,200,0);
		grd.addColorStop(0,"red");
		grd.addColorStop(1,"white");
		// 填充样式
		// fillStyle:设置或返回用于填充绘画的颜色、渐变或模式
		ctx.fillStyle=grd;
		ctx.fillRect(0,0,100,100);

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KgPTvzkH-1596303463531)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20200802010358426.png)]$

3.绘制圆形

// 绘制圆形：arc(x,y,r,start,stop)
		ctx.beginPath();
		ctx.arc(95,50,40,0,2*Math.PI);
		ctx.stroke();

4.制作圆形图

var color=['red','yellow','blue','pink','orange','purple'];
		for(var i=0;i<color.length;i++){
			ctx.beginPath();
			ctx.moveTo(300,300);
			// 一个圆分为六份，本来有2PI
			// 0 2
			// 0 2/6=1/3
			// 1/3 2/3
			// 2/3 3/3
			ctx.arc(300,300,40,i*1/3,(i+1)*1/3*Math.PI);

			ctx.closePath();
			ctx.strokeStyle='red';
			ctx.stroke();

			ctx.fillStyle=color[i];
			ctx.fill();
		}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pH44gO6M-1596303463536)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20200802012148276.png)]$

10存储 (localStorage和sessionStorage)

<!DOCTYPE html>
<html>
<head>
	<title>localStorage和sessionStorage</title>
</head>
<body>
<script type="text/javascript">
	// localStorage网页关闭之后还在
	localStorage.setItem('name':'zs');

	// sessionStorage网页关闭之后不在了
	sessionStorage.setItem('name':'zs');
</script>
</body>
</html>