From 9420257779f0a6fb8c773f81515b9006376cf3f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=B5=A9=E6=95=8F?= <3127104562@qq.com>
Date: Tue, 1 Nov 2022 22:52:43 +0800
Subject: [PATCH] 10.31

---
 ...JS\351\242\204\347\274\226\350\257\221.md" | 117 +++++
 .../10.30\351\227\255\345\214\205.md"         | 401 ++++++++++++++++++
 2 files changed, 518 insertions(+)
 create mode 100644 "27 \350\265\265\346\265\251\346\225\217/\347\254\224\350\256\260/10.28JS\351\242\204\347\274\226\350\257\221.md"
 create mode 100644 "27 \350\265\265\346\265\251\346\225\217/\347\254\224\350\256\260/10.30\351\227\255\345\214\205.md"

diff --git "a/27 \350\265\265\346\265\251\346\225\217/\347\254\224\350\256\260/10.28JS\351\242\204\347\274\226\350\257\221.md" "b/27 \350\265\265\346\265\251\346\225\217/\347\254\224\350\256\260/10.28JS\351\242\204\347\274\226\350\257\221.md"
new file mode 100644
index 0000000..eaf4bf7
--- /dev/null
+++ "b/27 \350\265\265\346\265\251\346\225\217/\347\254\224\350\256\260/10.28JS\351\242\204\347\274\226\350\257\221.md"	
@@ -0,0 +1,117 @@
+# 					     JS预编译
+
+## 1.1概念：
+
+JS是一门解释性语言，执行时是翻译一句执行一句，不是先通篇翻译。
+执行前要经历三个过程，依次是：语法分析/语义分析，预编译，解释执行。
+语法分析是通篇扫描一遍看看有没有语法错误之类的，但不执行。
+
+## 1.2作用：
+
+```js
+		test();
+			function test(){}
+			或
+			function() test(){}
+			test();
+			在执行的时候都是
+			function() test(){}
+			test();
+```
+
+这样的顺序，这就是预编译的函数声明提升，所以不管函数体在调用前还是调用后在真正运行时都是在函数体后调用的，所以在函数体前调用这个函数也是可以找到的，不会报错。
+
+## 1.3预编译会让函数声明提升，但只是把声明提升，并不提升赋值：
+
+如：var a；
+document.write(a);
+a=1;
+输出结果是undefined；
+document.write(a);
+var a=1;
+输出结果也是undefined；
+因为它在执行时将变量的声明给提升到前面去了，也就是第一种执行的顺序，但赋值不会提升。
+如果只有：document.write(a);则控制台会报错，因为变量a并没有声明，所以不能调用。
+函数是整体都提升到前面去，而变量只是将声明提升。
+
+## 1.4GO(全局对象)：
+
+任何未经声明直接赋值的对象则归全局对象GO（Global Object）所有，全局对象是window。
+如： a=1； 这个a就是归全局对象window所有，即window.a=1；
+一切声明的全局变量也归window所有，window就是全局的域。
+隐式全局变量：
+function test(){
+var a=b=1;
+}
+在这个函数里面，a是局部变量，因为它在函数体中被声明了，然而b是全局变量，因为b没有被声明，执行顺序一定是，先把1赋值给全局变量b，然后声明变量a，最后才把b的值赋给a。
+
+## 1.5预编译四部曲：
+
+1.创建AO对象（Activation Object–>也就是：执行期上下文 ）
+2.找到形参和变量声明，将变量和形参名作为AO属性名，值为undefined
+3.将实参值和形参统一
+4.在函数体里面找函数声明，值赋予函数体。
+
+例子：
+
+```js
+function fn(a){
+	console.log(a);        
+	var a=123;
+	console.log(a);   
+	function a(){}
+	console.log(a);
+	var b=function (){}
+	console.log(b);
+	function d(){}
+}
+fn(1);
+//预编译发生在函数执行的前一刻
+
+
+
+```
+
+1.创建AO对象
+AO{
+}
+2.找到形参和变量声明，将变量和形参名作为AO属性名，值为undefined
+AO{
+a:undefined, //fn的形参和下面声明的都是变量a，所以写一个就行。
+b:undefined,
+}
+3.将实参值和形参统一
+AO{
+a:1, //1是fn(1)中的1
+b:undefined,
+}
+4.在函数体里面找函数声明，值赋予函数体。
+AO{
+a:function a(){}, //这里函数a把1覆盖了，因为第四步的优先级是最大的。
+b:undefined, //这里b的值还是undefined，因为在function fn(a)中没有b的函数声明，var b=function (){}是函数表达式，如function d(){}这样的才叫函数声明，所以这里要把d挂起来。
+d：function d(){}
+}
+AO{
+a:123, //赋值。
+b:function (){}, //给b赋值。
+d:function d(){}
+}
+
+程序运行结果：
+
+
+```js
+function fn(a){
+	console.log(a);        //在这里还没有给a赋值，所以函数声明是最高级，打印结果是function a(){}
+	var a=123;
+	console.log(a);         //a被赋值为123，打印结果123
+	function a(){}
+	console.log(a);       //a被赋值为123，打印结果123
+	var b=function (){}
+	console.log(b);       //打印结果是function (){}
+	function d(){}
+}
+fn(1);
+
+```
+
diff --git "a/27 \350\265\265\346\265\251\346\225\217/\347\254\224\350\256\260/10.30\351\227\255\345\214\205.md" "b/27 \350\265\265\346\265\251\346\225\217/\347\254\224\350\256\260/10.30\351\227\255\345\214\205.md"
new file mode 100644
index 0000000..e6a3f5f
--- /dev/null
+++ "b/27 \350\265\265\346\265\251\346\225\217/\347\254\224\350\256\260/10.30\351\227\255\345\214\205.md"	
@@ -0,0 +1,401 @@
+## 回顾：
+
+## 1.map,set分别有什么作用
+
+### 先了解一下 Map
+
+Map 是一组键值对的结构，和 JSON 对象类似。
+
+**(1) Map数据结构如下**
+
+这里我们可以看到的是Map的数据结构是一个键值对的结构
+
+![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1d9cd0b4c2504300829aa34d1cc70eac~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?)
+
+
+
+**(2) key 不仅可以是字符串还可以是对象**
+
+```csharp
+var obj ={name:"小如",age:9}
+let map = new Map()
+map.set(obj,"111")
+复制代码
+```
+
+打印结果如下
+
+![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fef5ef67750f4f2087c6d12185affdd1~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?)
+
+**(3) Map常用语法如下**
+
+```c
+//初始化`Map`需要一个二维数组(请看 Map 数据结构)，或者直接初始化一个空`Map` 
+let map = new Map();
+
+//添加key和value值
+map.set('Amy','女')
+map.set('liuQi','男')
+
+//是否存在key，存在返回true,反之为false
+map.has('Amy') //true
+map.has('amy') //false
+
+//根据key获取value
+map.get('Amy') //女
+
+//删除 key为Amy的value
+map.delete('Amy')
+map.get('Amy') //undefined  删除成功
+复制代码
+```
+
+**(4) 一个key只能对应一个value，多次对一个key放入value，后面的值会把前面的值覆盖掉**
+
+```c
+var map =new Map
+map.set('Amy',"女")
+map.set('Amy',"男")
+console.log(map) 
+复制代码
+```
+
+打印结果如下
+
+![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ce93b0be447544238b45ab8fcb4aa102~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?)
+
+### 再来了解一下 Set
+
+Set 对象类似于数组，且成员的值都是唯一的
+
+**(1) 打印出的数据结构如下**
+
+这里打印出来是一个对象
+
+![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/08746590e3fb41e5a62af8cc808de6bf~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?)
+
+**(2) 最常用来去重使用，去重方法有很多但是都没有它运行的快。**
+
+```javascript
+var arr=[1,3,4,2,5,1,4]
+// 这里原本是一个对象用了es6的语法 转化成了数组，就是转化数组之前已经过滤掉了重复的元素了
+var arr2=[...new Set(arr)] //[1,3,4,2,5]
+复制代码
+```
+
+**(3) Set常用语法如下**
+
+```csharp
+//初始化一个Set ，需要一个Array数组，要么空Set
+var set = new Set([1,2,3,5,6]) 
+console.log(set)  // {1, 2, 3, 5, 6}
+
+//添加元素到Set中
+set.add(7) //{1, 2, 3, 5, 6, 7}
+
+//删除Set中的元素
+set.delete(3) // {1, 2, 5, 6, 7}
+
+//检测是否含有此元素，有为true，没有则为false
+set.has(2) //true
+复制代码
+```
+
+### 总结Map和Set的区别
+
+**(1) 这两种方法具有极快的查找速度;那么下面我们来对比一下Map，Set，Array 的执行时间**
+
+```scss
+//首先初始化数据
+var lng=100
+var arr =new Array(lng).fill(2)
+var set =new Set(arr)
+let map =new Map()
+for(var i=0;i<lng;i++){
+arr[i]=i
+map.set(i,arr[i])
+}
+
+// Array
+console.time()
+for(var j=0;j<lng;j++){
+arr.includes(j)
+}
+console.timeEnd()  //default: 0.01220703125 ms
+
+
+// Set
+console.time()
+for(var j=0;j<lng;j++){
+set.has(j)
+}
+console.timeEnd()  // default: 0.005859375 ms
+
+// Map
+console.time()
+for(var j=0;j<lng;j++){
+map.has(j)
+}
+console.timeEnd()
+// default: 0.007080078125 ms
+复制代码
+```
+
+通过以上几种方法我们可以看到，Set执行时间最短，那么查找速度最快，当然了Set 和 Map的查找速度都很快想差不大，所以说这两种方法具有极快的查找速度。
+
+
+
+
+
+## 2.如何实现数组去重
+
+### 1.利用Set()+Array.from()
+
+- `Set`对象：是**值的集合**，你可以按照插入的顺序**迭代**它的元素。 Set中的元素只会**出现一次**，即Set中的**元素是唯一的**。
+- `Array.from()` 方法：对一个**类似数组**或**可迭代对象**创建一个新的，浅拷贝的数组实例。
+
+```js
+const result = Array.from(new Set(arr))
+console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]
+```
+
+
+
+
+
+3.WeakMap与Map，WeakSet与Set有什么区别
+
+
+
+4.测试:
+
+```js
+function fn(x,y,a){
+    arguments[2] = 10;
+    alert(a)
+}
+fn(1,2,3);
+
+
+
+
+function fn1(x,y,a){
+    a = 10;
+    alert(arguments[2])
+}
+
+fn1(1,2,3);
+```
+
+
+
+
+
+
+
+
+
+
+
+## 作用域
+
+#### 作用域
+
+outer.[[scope]]: 每个函数都有作用域(码农看不到,供js内部调用)， 其中存储了**执行期的上下文集合**
+
+执行期上下文：当函数执行前，会创建一个称为执行期上下文的内部对象(AO)。一个执行期上下文定义了一个函数执行时的环境，函数每次执行时对应的执行上下文都是独一无二的，所以多次调用一个函数会导致创建多个执行上下文，当函数执行元毕，它所产生的执行上下文被销毁。
+
+查找变量：从作用域链的顶端依次向下查找。
+
+**作用域链**：[[]]
+
+```js
+function outer(){
+    function inner(){
+        var b = 23;
+    }
+    var a = 12;
+    b();
+}
+var global = 100;
+a();
+```
+
+**1.函数被定义时**
+
+**2.函数被执行时**
+
+**作用域详细图解**:https://blog.csdn.net/qq_53225741/article/details/125082166
+
+
+
+## 	闭包
+
+```js
+function a(){
+    var aa = '这是外层函数';
+    function b(){
+        var bb = '这是中层函数';
+        function c(){
+            var cc = '这是里层函数，我最先释放';
+        }
+        return c;  //
+    }
+    b();
+}
+//a();
+
+var fun = a();
+
+
+```
+
+闭包作用：
+
+- 实现公有变量 
+- 可以做**缓存（存储结构**） 练习4
+
+- 可以实现封装（继承）
+- 模块化开发，防止污染全局变量，
+
+
+
+
+
+闭包缺点：当函数保存在外部时，将会生成闭包，闭包会导致原有作用域链不释放，从而造成**内存泄漏**。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+练习：
+
+1.要求输入一串低于10位的数字，输出对应的中文大写:
+
+例： input: 10001  --> 一万零一     ；   input:  10000000  -->  一百万
+
+
+
+
+
+
+
+```js
+function a(){
+    var num = 100;
+    function b(){
+        num ++;
+        console.log(num)
+    }
+    return b;
+}
+var demo = a();
+demo();
+demo();
+```
+
+```js
+function a(){
+    function b() {
+        var num = 234;
+        console.log(aaa)
+    }
+    var aaa = 123;
+    return b;
+}
+
+var glob = 100
+var demo = a();
+demo();
+```
+
+```js
+//1、
+var nAdd;
+function out(){
+	var n = 999;
+	nAdd = function(){ 
+		n ++;  
+		console.log(n)
+	}
+	return function(){
+		console.log(n); 
+	}
+}
+var getN = out();
+getN();   //999
+nAdd();  //1000
+getN();  //1000
+
+//2、
+function test(){
+	var arr = [];
+	for(var i=0;i<3;i++){
+		(function(j){
+			arr[j] = function(){
+				console.log(j)
+			}
+		}(i))
+	}
+	return arr;
+}
+var myArr = test();
+myArr[0]();//0
+myArr[1]();//1
+myArr[2]();//2
+
+//3、
+function fun(){
+	var i=1;
+	return function(){console.log(i++)}
+}
+var getFun = fun();
+getFun();//1
+getFun();//2
+var i=2;
+getFun();//3
+getFun();//4
+
+//4、
+function fn(){
+	var a = 1;
+	function b(){
+		a++;
+		console.log(a)
+	}
+	function c(){
+		a--;
+		console.log(a)
+	}
+	a  += 10;
+	return [b,c];
+}
+var arr = fn();
+arr[0]();//12
+arr[1]();//11
+
+```
+
+
+
+![image-20221025101326106](C:\Users\Administrator\Desktop\image-20221025101326106.png)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
-- 
Gitee