Web 前端面试总结

1.登陆注册要做成受控组件，组件定义state，和表单绑定

2.redux-saga调用数据请求，发送action修改数据，
  useEffect中dispatch发送数据请求，后端比对用户名是否重复，返回state

3.前端根据返回的信息成功跳转登陆页

4.登陆发送数据请求，数据库对比用户名密码是否正确, 根据后端返回的结果进入首页

5.setCookie将用户登录名密码token存cookie中   通过JWT(Json web token)

6.免密登陆  getCookie获取token    发给后端对比    根据返回结果是否自动登陆

7.注册通过Ant  Design ，validator中进行表单正则的验证

8.用户体验  注册的时候跳转其他页面的时候给用户提示是否需要跳转，避免因为跳转后导致注册信息没有了
  用组件内后置守卫做
  如果输入框都没有填信息,不拦截跳转如果用户输入信息,弹窗提示,点确定,跳转,点取消,不跳转

1.react中配置二级路由   地址变化  但是界面不更新
	使用dva/router中的withRouter高阶组件解决的

2.图表联动怎么实现
	我们只需要把当前被选中图表的事件，直接发给其他图表即可，然后判断被选中的图表是哪个作为区分
	onTouchEvent(event)普通事件传递

3.产品经理要求智能匹配产品
	找网上类似功能的网站  查看源码  和主管讨论
	需要一个设计一个投资习惯和风险承受能力测试,
	从后端获取这个客户测试的结果   以及客户平常投资的习惯   生成不同的关键字
	根据关键字从数据库中匹配产品   展示界面

4.后台管理系统遇到遇到什么奇葩的需求

toB和toC的项目

面向企业内部和面向用户的项目的区别

后台管理系统权限比较细   App高并发比较多  做性能优化

\d 匹配数字  \D 匹配非数字  \w 匹配数字字母下划线 \W 匹配非数字字母下划线
\n 匹配一个换行符 \s 匹配任何不可见字符包括空格、制表符、换页符等等  \S 匹配任何可见字符
^ 匹配输入字行首   $匹配输入行尾 *(0到多次)匹配前面的子表达式任意次
+(1到多) 匹配前面的子表达式一次或多次(大于等于1次）
?(0或1)匹配前面的子表达式零次或一次
{n}n是一个非负整数，匹配确定的n次
{n,}n是一个非负整数。至少匹配n次

我对 ajax 的理解是，它是一种异步通信的方法，通过直接由 js 脚本向服务器发起 http 通信，然后根据服务器返回的数据，更新网页的相应部分，而不用刷新整个页面的一种方法。
创建步骤：创建xhr对象->配置Ajax请求地址通过open方法->发送请求通过send方法->监听请求，接收响应
//1：创建Ajax对象
var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');// 兼容IE6及以下版本
//2：配置 Ajax请求地址
xhr.open('get','index.xml',true);
//3：发送请求
xhr.send(null); // 严谨写法
//4:监听请求，接受响应
xhr.onreadysatechange=function(){
     if(xhr.readySate==4&&xhr.status==200 || xhr.status==304)
          console.log(xhr.responseXML)
}

js 的加载、解析和执行会阻塞页面的渲染过程，因此我们希望 js 脚本能够尽可能的延迟加载，提高页面的渲染速度。
我了解到的几种方式是：

1、将 js 脚本放在文档的底部，来使 js 脚本尽可能的在最后来加载执行。
2、给 js 脚本添加 defer 属性，这个属性会让脚本的加载与文档的解析同步解析，然后在文档解析完成后再执行这个脚本文件，这样的话就能使页面的渲染不被阻塞。多个设置了 defer 属性的脚本按规范来说最后是顺序执行的，但是在一些浏览器中可能不是这样。
3、给 js 脚本添加 async属性，这个属性会使脚本异步加载，不会阻塞页面的解析过程，但是当脚本加载完成后立即执行 js脚本，这个时候如果文档没有解析完成的话同样会阻塞。多个 async 属性的脚本的执行顺序是不可预测的，一般不会按照代码的顺序依次执行。
4、动态创建 DOM 标签的方式，我们可以对文档的加载事件进行监听，当文档加载完成后再动态的创建 script 标签来引入 js 脚本。

我对模块的理解是，一个模块是实现一个特定功能的一组方法。在最开始的时候，js 只实现一些简单的功能，
所以并没有模块的概念，但随着程序越来越复杂，代码的模块化开发变得越来越重要。

由于函数具有独立作用域的特点，最原始的写法是使用函数来作为模块，几个函数作为一个模块，
但是这种方式容易造成全局变量的污染，并且模块间没有联系。

后面提出了对象写法，通过将函数作为一个对象的方法来实现，这样解决了直接使用函数作为模块的一些缺点，
但是这种办法会暴露所有的所有的模块成员，外部代码可以修改内部属性的值。

现在最常用的是立即执行函数的写法，通过利用闭包来实现模块私有作用域的建立，同时不会对全局作用域造成污染。

js 中现在比较成熟的有四种模块加载方案：

第一种是 CommonJS 方案，它通过 require 来引入模块，通过 module.exports 定义模块的输出接口。这种模块加载方案是服务器端的解决方案，它是以同步的方式来引入模块的，因为在服务端文件都存储在本地磁盘，所以读取非常快，所以以同步的方式加载没有问题。但如果是在浏览器端，由于模块的加载是使用网络请求，因此使用异步加载的方式更加合适。

第二种是 AMD 方案，这种方案采用异步加载的方式来加载模块，模块的加载不影响后面语句的执行，所有依赖这个模块的语句都定义在一个回调函数里，等到加载完成后再执行回调函数。require.js 实现了 AMD 规范。

第三种是 CMD 方案，这种方案和 AMD 方案都是为了解决异步模块加载的问题，sea.js 实现了 CMD 规范。它和require.js的区别在于模块定义时对依赖的处理不同和对依赖模块的执行时机的处理不同。

第四种方案是 ES6 提出的方案，使用 import 和 export 的形式来导入导出模块。

它们之间的主要区别有两个方面。
第一个方面是在模块定义时对依赖的处理不同。AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块。而 CMD 推崇就近依赖，只有在用到某个模块的时候再去 require。
第二个方面是对依赖模块的执行时机处理不同。首先 AMD 和 CMD 对于模块的加载方式都是异步加载，不过它们的区别在于模块的执行时机，AMD 在依赖模块加载完成后就直接执行依赖模块，依赖模块的执行顺序和我们书写的顺序不一定一致。而 CMD在依赖模块加载完成后并不执行，只是下载而已，等到所有的依赖模块都加载好后，进入回调函数逻辑，遇到 require 语句
的时候才执行对应的模块，这样模块的执行顺序就和我们书写的顺序保持一致了。

1.CommonJS 模块输出的是一个值的拷贝，
ES6 模块输出的是值的引用。
CommonJS 模块输出的是值的，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。
ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候，遇到模块加载命令 import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。
2.CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。CommonJS 模块就是对象，即在输入时是先加载整个模块，生成一个对象，然后再从这个对象上面读取方法，这种加载称为“运行时加载”。
而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

require.js 的核心原理是通过动态创建 script 脚本来异步引入模块，然后对每个脚本的 load 事件进行监听，如果每个脚本都加载完成了，再调用回调函数

首先js是单线程运行的，在代码执行的时候，通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行。
在执行同步代码的时候，如果遇到了异步事件，js引擎并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务

所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。
同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有等主线程任务执行完毕，"任务队列"开始通知主线程，请求执行任务，该任务才会进入主线程执行。

当同步事件执行完毕后，再将异步事件对应的回调加入到与当前执行栈中不同的另一个任务队列中等待执行。
任务队列可以分为宏任务对列和微任务对列，当当前执行栈中的事件执行完毕后，js 引擎首先会判断微任务对列中是否有任务可以执行，如果有就将微任务队首的事件压入栈中执行。
当微任务对列中的任务都执行完成后再去判断宏任务对列中的任务。

异步运行机制如下：
（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
（2）主线程之外，还存在一个"任务队列"（task queue）。
	只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。
	那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
（4）主线程不断重复上面的第三步。

arguments对象是函数中传递的参数值的集合。它是一个类似数组的对象，因为它有一个length属性，
我们可以使用数组索引表示法arguments[1]来访问单个值，但它没有数组中的内置方法，
如：forEach、reduce、filter和map。

我们可以使用Array.prototype.slice将arguments对象转换成一个数组。

Array.prototype.slice.call(arguments)

v8的垃圾回收机制基于分代回收机制，这个机制又基于世代假说，这个假说有两个特点，一是新生的对象容易早死，另一个是不死的对象会活得更久。基于这个假说，v8 引擎将内存分为了新生代和老生代。
新创建的对象或者只经历过一次的垃圾回收的对象被称为新生代。经历过多次垃圾回收的对象被称为老生代。
新生代被分为 From 和 To 两个空间，To 一般是闲置的。当 From 空间满了的时候会执行 Scavenge(斯盖V橘) 算法进行垃圾回收。当我们执行垃圾回收算法的时候应用逻辑将会停止，等垃圾回收结束后再继续执行。这个算法分为三步：
（1）首先检查 From 空间的存活对象，如果对象存活则判断对象是否满足晋升到老生代的条件，如果满足条件则晋升到老生代。如果不满足条件则移动 To 空间。
（2）如果对象不存活，则释放对象的空间。
（3）最后将 From 空间和 To 空间角色进行交换。
新生代对象晋升到老生代有两个条件：
（1）第一个是判断是对象否已经经过一次 Scavenge 回收。若经历过，则将对象从 From 空间复制到老生代中；若没有经历，则复制到 To 空间。
（2）第二个是 To 空间的内存使用占比是否超过限制。当对象从 From 空间复制到 To 空间时，若 To 空间使用超过 25%，则对象直接晋升到老生代中。设置 25% 的原因主要是因为算法结束后，两个空间结束后会交换位置，如果 To 空间的内存太小，会影响后续的内存分配。

老生代采用了标记清除法和标记压缩法。
标记清除法首先会对内存中存活的对象进行标记，标记结束后清除掉那些没有标记的对象。由于标记清除后会造成很多的内存碎片，不便于后面的内存分配。所以了解决内存碎片的问题引入了标记压缩法。
由于在进行垃圾回收的时候会暂停应用的逻辑，对于新生代方法由于内存小，每次停顿的时间不会太长，但对于老生代来说每次垃圾回收的时间长，停顿会造成很大的影响。 为了解决这个问题 V8 引入了增量标记的方法，将一次停顿进行的过程分为了多步，每次执行完一小步就让运行逻辑执行一会，就这样交替运行

现在各大浏览器通常用采用的垃圾回收有两种方法：标记清除、引用计数。

1、标记清除
　　这是javascript中最常用的垃圾回收方式。当变量进入执行环境是，就标记这个变量为“进入环境”。从逻辑上讲，永远不能释放进入环境的变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到他们。当变量离开环境时，则将其标记为“离开环境”。
　　垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记。然后，它会去掉环境中的变量以及被环境中的变量引用的标记。而在此之后再被加上标记的变量将被视为准备删除的变量，原因是环境中的变量已经无法访问到这些变量了。最后。垃圾收集器完成内存清除工作，销毁那些带标记的值，并回收他们所占用的内存空间。

2、引用计数
　　另一种不太常见的垃圾回收策略是引用计数。引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型赋值给该变量时，则这个值的引用次数就是1。相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数就减1。当这个引用次数变成0时，则说明没有办法再访问这个值了，因而就可以将其所占的内存空间给收回来。这样，垃圾收集器下次再运行时，它就会释放那些引用次数为0的值所占的内存。

1.意外的全局变量
2.被遗忘的计时器或回调函数
3.脱离 DOM 的引用
4.闭包

第一种情况是我们由于使用未声明的变量，而意外的创建了一个全局变量，而使这个变量一直留在内存中无法被回收。
第二种情况是我们设置了setInterval定时器，而忘记取消它，如果循环函数有对外部变量的引用的话，那么这个变量会被一直留在内存中，而无法被回收。
第三种情况是我们获取一个DOM元素的引用，而后面这个元素被删除，由于我们一直保留了对这个元素的引用，所以它也无法被回收。
第四种情况是不合理的使用闭包，从而导致某些变量一直被留在内存当中。

ECMAScript 是编写脚本语言的标准，ECMA（European Computer Manufacturers Association）规定一下他的标准，因为当时有java语言了，又想强调这个东西是让ECMA这个人定的规则，所以就这样一个神奇的东西诞生了，这个东西的名称就叫做ECMAScript。
javaScript = ECMAScript + DOM + BOM

块作用域
类
箭头函数
模板字符串
对象解构
Promise
模块
Symbol
代理（proxy）Set
函数默认参数
rest
扩展运算符
数组和对象的扩展

求幂运算符（**）
                (因颗录此)
Array.prototype.includes()方法
	数组原型的方法,查找一个数值是否在数组中，只能判断一些简单类型的数据，对于复杂类型的数据无法判断。
	该方法接受两个参数，分别是查询的数据和初始的查询索引值。

async  await

函数参数列表结尾允许逗号
	es2017允许函数对象的定义调用时参数可以加入尾逗号，以及json对象array对象都允许

Object.values()
	values: [obj]，返回obj自身可枚举属性的属性值的集合
	   (安吹斯)
Object.entries()
	entries：[obj], 与values类似，返回的一个2元素的数组

Object.getOwnPropertyDescriptors()
	getOwnpropertyDescriptors: [obj]，返回obj对象的属性描述符
	(get 哦 泼破踢 迪斯亏不踢斯)
String padding:
	padStart()和padEnd()，填充字符串达到当前长度
	在字符串首位开始添加string直到满足length为止并返回新的字符串

ShareArrayBuffer和Atomics对象，用于从共享内存位置读取和写入
(夏尔 啊锐 八法儿)	 (啊偷没此)

异步迭代
Promise.finally()
		(饭的嘞)
Rest/Spread 属性
(锐斯特)(斯破锐的)
正则表达式命名捕获组（Regular Expression Named Capture Groups）
正则表达式反向断言（lookbehind）
正则表达式dotAll模式
正则表达式 Unicode 转义
		 (右内扣的)
非转义序列的模板字符串

行分隔符（U + 2028）和段分隔符（U + 2029）符号现在允许在字符串文字中，与JSON匹配
更加友好的JSON.stringify
新增了Array的flat()方法和flatMap()方法
新增了String的trimStart()方法和trimEnd()方法
Object.fromEntries()
Symbol.prototype.description
String.prototype.matchAll
Function.prototype.toString()现在返回精确字符，包括空格和注释
简化try{} catch{},修改catch绑定
新的基本数据类型BigInt
globalThis
import()
Legacy RegEx
私有的实例方法和访问器

私有变量
	ES11在类中新增私有变量控制符#，在内部变量或者函数前添加一个hash符号#，
	可以将它们设置为私有属性，只能在类的内部可以使用。
空值合并运算符
	空值合并操作符就是 ?? :如果左侧的值为null或者undefined就返回左侧的值，如果没有就返回右侧的值
可选链操作符
	可选链操作符 (?.) :如果左侧表达式有值，就会继续访问右侧的字段
BigInt
	使用BigInt的方式有两种：
		1.在数字后面加n
		2.使用BigInt函数
动态导入

globalThis
	提供一种标准化的方式去访问全局对象，可以在任意上下文中获取全局对象自身，并且不用担心环境的问题
Promise.all缺陷与Promise.allSettled
	promise.all可以并发执行异步任务,如果其中某个任务执行出现了异常，所有任务都会over，Promise会直接进入reject状态
	使用Promise.allSettled，它会创建一个新的promise，在所有promise完成后返回一个包含每个promise结果的数组

1.var声明的变量会挂载在window上，而let和const声明的变量不会：
2.var声明变量存在变量提升，let和const不存在变量提升
3.let和const声明形成块作用域
4.同一作用域下let和const不能声明同名变量，而var可以

const
	一旦声明必须赋值,不能使用null占位。
	声明后不能再修改
	如果声明的是复合类型数据，可以修改其属性

暂存死区
var a = 100;
if(1){
    a = 10;
    //在当前块作用域中存在a使用let/const声明的情况下，给a赋值10时，只会在当前作用域找变量a，
    // 而这时，还未到声明时候，所以控制台Error:a is not defined
    let a = 1;
}

在var中执行的时候：
	因为var是没有块级作用域的，所以在for循环中声明的i会存在于test()函数作用域中。
	每一次for循环就会声明一次i，但后面声明的变量会覆盖前面声明的变量。
在let中执行的时候：
	因为块级作用域的原因，let声明的i都会存在于for块级作用域中，每一次for循环都会生成一个块级作用域。

箭头函数表达式的语法比函数表达式更简洁

箭头函数没有自己的this值。箭头函数里的this指向的是父级的this.

箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

在箭头函数版本中，当只有一个表达式或值需要返回，我们只需要()括号，
不需要 return 语句，箭头函数就会有一个隐式的返回。

如果我们在一个箭头函数中有一个参数，则可以省略括号。

箭头函数不能访问arguments对象。所以调用第一个getArgs函数会抛出一个错误。
相反，我们可以使用rest参数来获得在箭头函数中传递的所有参数。

模板字符串是在 JS 中创建字符串的一种新方法。我们可以通过使用反引号使模板字符串化。

在ES5版本中，我们需要添加\n以在字符串中添加新行。在模板字符串中，我们不需要这样做。

在 ES5 版本中，如果需要在字符串中添加表达式或值，则需要使用`+`运算符。
在模板字符串s中，我们可以使用${expr}嵌入一个表达式，这使其比 ES5 版本更整洁。

对象解构是从对象或数组中获取或提取值的一种新的、更简洁的方法
我们还可以为属性取别名
let { firstName: fName, position } = employee;
当然如果属性值为 undefined 时，我们还可以指定默认值
let { firstName = "Mark" } = employee;

一、创建Set对象实例
Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用
1.构造函数	 	   (伊特波)
	语法：new Set([iterable])
	参数：iterable 如果传递一个可迭代对象，它的所有元素将被添加到新的Set中；
		 如果不指定此参数或其值为null，则新的 Set为空

二、Set实例属性
	size属性将会返回Set对象中元素的个数

三、Set实例方法
1.add() 方法用来向一个 Set 对象的末尾添加一个指定的值
	语法：mySet.add(value)
	参数：value 必需，需要添加到 Set 对象的元素的值
2.delete() 方法可以从一个 Set 对象中删除指定的元素
	语法：mySet.delete(value)
	参数：value 将要删除的元素
	返回值：成功删除返回 true，否则返回 false
3.clear() 方法用来清空一个 Set 对象中的所有元素
	语法：mySet.clear()
4.has() 方法返回一个布尔值来指示对应的值value是否存在Set对象中
	语法：mySet.has(value)
	参数：value 必须，是否存在于Set的值
	返回值：如果指定的值（value）存在于Set对象当中，返回true; 否则返回 false
5.entries() (安吹斯)
	语法：mySet.entries()
	返回值：一个新的包含 [value, value] 形式的数组迭代器对象，value 是给定集合中的每个元素，
		  迭代器 对象元素的顺序即集合对象中元素插入的顺序
6.values()
	语法：mySet.values() 或者 mySet.keys()
	返回值：返回一个 Iterator(因特瑞特) 对象，这个对象以插入Set对象的顺序包含了原 Set 对象里的每个元素
7.forEach()
	语法：mySet.forEach(callback[, thisArg]) (this傲歌)
	参数：callback 每个元素都会执行的函数
     	 thisArg 当执行callback函数时候，可以当作this来使用
5、什么是WeakSet()？
和Set结构类似，也是不重复的值的集合，但WeakSet的成员只能是对象(null 除外)。
而且 WeakMap 的键名所指向的对象，不计入垃圾回收机制。

应用场景:
1、简单数组去重
2、JSON数组去重
	JSON数组是比较常见的一种数据结构，形如[{…},…{…}]
	假如你需要统计某个属性中不同的值。
	step1:先使用.map将JSON数组变成简单数组，然后用set执行去重
	step2: 由于生成的Set属于可迭代对象，所以可以使用数组解构符进行解构
3、二维数组去重
	我们可以将Set用作存储每项的唯一值，结合reduce进行对比，得出无重复的项目。
	当然，上面的代码缺点还是不少的。因为只是简单地将其转变成字符串作为对比的键，
	所以不能区分[1,2]、[‘1’ ,‘2’]、[‘1,2’]等子数组。
4、数组之间的对比
	Set的特性不单单可以可以用于单数组，对于数组之间的比较也是十分在行。

什么是WeakSet()？
	和Set结构类似，也是不重复的值的集合，但WeakSet的成员只能是对象。

WeakSet的API：
	add() 	 //增
	delete() //删
	has() 	 //是否存在

为什么WeakSet不可遍历？
	因为WeakSet的成员都是弱引用，随时可能消失，成员是不稳定的。

WeakSet的用处：
	使用ws储存DOM节点，就不用担心节点从文档移除时，会引发内存泄漏(即在被移除的节点上绑定的click等事件)。

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”

函数式编程（通常缩写为FP）是通过编写纯函数，避免共享状态、可变数据、副作用 来构建软件的过程。数式编程是声明式 的而不是命令式 的，应用程序的状态是通过纯函数流动的。与面向对象编程形成对比，面向对象中应用程序的状态通常与对象中的方法共享和共处。
函数式编程是一种编程范式 ，这意味着它是一种基于一些基本的定义原则（如上所列）思考软件构建的方式。当然，编程范式的其他示例也包括面向对象编程和过程编程。
函数式的代码往往比命令式或面向对象的代码更简洁，更可预测，更容易测试

首先高阶函数肯定是函数，不同的是输入的参数和返回的值这两项中的一项必须是函数才能叫高阶函数。
这个问题在回答的时候可以稍微拓展一下，介绍一下常用的的高阶函数，
比如：map、flatMap、filter、reduce、fold。

在JavaScript中，函数不仅拥有一切传统函数的使用方式（声明和调用），而且可以做到像简单值一样:

赋值（var func = function(){}）、
传参(function func(x,callback){callback();})、
返回(function(){return function(){}})，

这样的函数也称之为第一级函数（First-class Function）。不仅如此，JavaScript中的函数还充当了类的构造函数的作用，同时又是一个Function类的实例(instance)(因斯疼斯)。这样的多重身份让JavaScript的函数变得非常重要。

1、创建一个空对象 {}
2、将构造函数中的this指向新创建的对象 (原型链)
	obj.__proto__ = Dog.prototype // 设置原型链
3、链接该对象到另一个对象 __proto__
4、如果该函数没有返回对象，则返回this

回调函数是一个匿名函数，它作为一个参数传递给其他的代码，其作用是在需要的时候方便调用这段（回调函数）代码。可以让异步代码同步执行。
回调函数有一个致命的弱点，就是容易写出回调地狱（Callback hell）

instanceof 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype。
实现 instanceof：

首先获取类型的原型
然后获得对象的原型
然后一直循环判断对象的原型是否等于类型的原型，直到对象原型为 null，因为原型链最终为 null

function myInstanceof(left, right) {
  let prototype = right.prototype
  left = left.__proto__
  while (true) {
    if (left === null || left === undefined)
      return false
    if (prototype === left)
      return true
    left = left.__proto__
  }
}

设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。
1、单例模式
2、工厂模式
3、观察者模式
4、代理模式
5、策略模式
6、迭代器模式

单例模式（Singleton Pattern）
	单例模式中Class的实例个数最多为1。当需要一个对象去贯穿整个系统执行某些任务时，单例模式就派上了用场。而除此之外的场景尽量避免单例模式的使用，因为单例模式会引入全局状态，而一个健康的系统应该避免引入过多的全局状态。

工厂模式
	工厂模式定义一个用于创建对象的接口，这个接口由子类决定实例化哪一个类。该模式使一个类的实例化延迟到了子类。而子类可以重写接口方法以便创建的时候指定自己的对象类型。
使用场景：如果你不想让某个子系统与较大的那个对象之间形成强耦合，而是想运行时从许多子系统中进行挑选的话，那么工厂模式是一个理想的选择
class Product {
    constructor(name) {
        this.name = name
    }
    init() {
        console.log('init')
    }}
class Factory {
    create(name) {
        return new Product(name)
    }
}
// use
let factory = new Factory()
let p = factory.create('p1')
p.init()
https://juejin.im/post/6844904200917221389#heading-81

JavaScript一共有8种数据类型
7种基本数据类型：
Undefined、Null、Boolean、Number、String、Symbol(es6新增，表示独一无二的值)和BigInt(es10新增)

1种引用数据类型
Object（Object本质上是由一组无序的名值对组成的）。
里面包含 function、Array、Date等。

JavaScript不支持任何创建自定义类型的机制，而所有值最终都将是上述 8 种数据类型之一。
原始数据类型：直接存储在栈（stack）中，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储。
引用数据类型：同时存储在栈（stack）和堆（heap）中，占据空间大、大小不固定。引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

&& 叫逻辑与，在其操作数中找到第一个虚值表达式并返回它，如果没有找到任何虚值表达式，则返回最后一个真值表达式。它采用短路来防止不必要的工作。
|| 叫逻辑或，在其操作数中找到第一个真值表达式并返回它。这也使用了短路来防止不必要的工作。在支持 ES6 默认函数参数之前，它用于初始化函数中的默认参数值。
!! 运算符可以将右侧的值强制转换为布尔值，这也是将值转换为布尔值的一种简单方法

在 JS 中类型转换只有三种情况，分别是：

转换为布尔值（调用Boolean()方法）
转换为数字（调用Number()、parseInt()和parseFloat()方法）
转换为字符串（调用.toString()或者String()方法）

js 中的内置对象主要指的是
在程序执行前存在全局作用域里的由 js定义的一些全局值属性、函数和用来实例化其他对象的构造函数对象。
一般我们经常用到的如全局变量值 NaN、undefined，
全局函数如 parseInt()、parseFloat() 用来实例化对象的构造函数如 Date、Object 等，
还有提供数学计算的单体内置对象如 Math 对象。

首先 Undefined 和 Null 都是基本数据类型，这两个基本数据类型分别都只有一个值，就是 undefined 和 null。
undefined 代表的含义是未定义，
null 代表的含义是空对象（其实不是真的对象，请看下面的注意！）。一般变量声明了但还没有定义的时候会返回 undefined，null
主要用于赋值给一些可能会返回对象的变量，作为初始化。
当我们对两种类型使用 typeof 进行判断的时候，Null 类型化会返回 “object”，这是一个历史遗留的问题。当我们使用双等 号对两种类型的值进行比较时会返回 true，使用三个等号时会返回 false。

{} 的 valueOf 结果为 {} ，toString 的结果为 "[object Object]"
[] 的 valueOf 结果为 [] ，toString 的结果为 ""

作用域：
	作用域是定义变量的区域，它有一套访问变量的规则，这套规则来管理浏览器引擎如何在当前作用域以及嵌套的作用域中根据变量（标识符）进行变量查找。

作用域链：
	作用域链的作用是保证对执行环境有权访问的所有变量和函数的有序访问，通过作用域链，我们可以访问到外层环境的变量和函数。作用域链的本质上是一个指向变量对象的指针列表。变量对象是一个包含了执行环境中所有变量和函数的对象。
	作用域链的前端始终都是当前执行上下文的变量对象。全局执行上下文的变量对象（也就是全局对象）始终是作用域链的最后一个对象。
当我们查找一个变量时，如果当前执行环境中没有找到，我们可以沿着作用域链向后查找。

	我们一般使用字面量的形式直接创建对象，但是这种创建方式对于创建大量相似对象的时候，会产生大量的重复代码。但 js和一般的面向对象的语言不同，在 ES6 之前它没有类的概念。但是我们可以使用函数来进行模拟，从而产生出可复用的对象创建方式，我了解到的方式有这么几种：

（1）第一种是工厂模式，工厂模式的主要工作原理是用函数来封装创建对象的细节，从而通过调用函数来达到复用的目的。但是它有一个很大的问题就是创建出来的对象无法和某个类型联系起来，它只是简单的封装了复用代码，而没有建立起对象和类型间的关系。

（2）第二种是构造函数模式。js 中每一个函数都可以作为构造函数，只要一个函数是通过 new 来调用的，那么我们就可以把它称为构造函数。执行构造函数首先会创建一个对象，然后将对象的原型指向构造函数的 prototype 属性，然后将执行上下文中的 this 指向这个对象，最后再执行整个函数，如果返回值不是对象，则返回新建的对象。因为 this 的值指向了新建的对象，因此我们可以使用 this 给对象赋值。构造函数模式相对于工厂模式的优点是，所创建的对象和构造函数建立起了联系，因此我们可以通过原型来识别对象的类型。但是构造函数存在一个缺点就是，造成了不必要的函数对象的创建，因为在 js 中函数也是一个对象，因此如果对象属性中如果包含函数的话，那么每次我们都会新建一个函数对象，浪费了不必要的内存空间，因为函数是所有的实例都可以通用的。

（3）第三种模式是原型模式，因为每一个函数都有一个 prototype 属性，这个属性是一个对象，它包含了通过构造函数创建的所有实例都能共享的属性和方法。因此我们可以使用原型对象来添加公用属性和方法，从而实现代码的复用。这种方式相对于构造函数模式来说，解决了函数对象的复用问题。但是这种模式也存在一些问题，一个是没有办法通过传入参数来初始化值，另一个是如果存在一个引用类型如 Array 这样的值，那么所有的实例将共享一个对象，一个实例对引用类型值的改变会影响所有的实例。

（4）第四种模式是组合使用构造函数模式和原型模式，这是创建自定义类型的最常见方式。因为构造函数模式和原型模式分开使用都存在一些问题，因此我们可以组合使用这两种模式，通过构造函数来初始化对象的属性，通过原型对象来实现函数方法的复用。这种方法很好的解决了两种模式单独使用时的缺点，但是有一点不足的就是，因为使用了两种不同的模式，所以对于代码的封装性不够好。

（5）第五种模式是动态原型模式，这一种模式将原型方法赋值的创建过程移动到了构造函数的内部，通过对属性是否存在的判断，可以实现仅在第一次调用函数时对原型对象赋值一次的效果。这一种方式很好地对上面的混合模式进行了封装。

（6）第六种模式是寄生构造函数模式，这一种模式和工厂模式的实现基本相同，我对这个模式的理解是，它主要是基于一个已有的类型，在实例化时对实例化的对象进行扩展。这样既不用修改原来的构造函数，也达到了扩展对象的目的。它的一个缺点和工厂模式一样，无法实现对象的识别。

1、在浏览器里，在全局范围内this 指向window对象；
2、在函数中，this永远指向最后调用他的那个对象；
3、构造函数中，this指向new出来的那个新的对象；
4、call、apply、bind中的this被强绑定在指定的那个对象上；
5、箭头函数中this比较特殊,箭头函数this为父作用域的this，不是调用时的this.要知道前四种方式,都是调用时确定,也就是动态的,而箭头函数的this指向是静态的,声明的时候就确定了下来；
6、apply、call、bind都是js给函数内置的一些API，调用他们可以为函数指定this的执行,同时也可以传参。

DOM指的是文档对象模型，它指的是把文档当做一个对象来对待，这个对象主要定义了处理网页内容的方法和接口。
BOM指的是浏览器对象模型，它指的是把浏览器当做一个对象来对待，这个对象主要定义了与浏览器进行交互的法和接口。

BOM的核心是 window，而 window 对象具有双重角色，它既是通过 js 访问浏览器窗口的一个接口，
又是一个 Global（全局）(歌楼波)对象。
这意味着在网页中定义的任何对象，变量和函数，都作为全局对象的一个属性或者方法存在。
window 对象含有 location 对象、navigator(那V给特)对象、screen(斯歌锐)对象等子对象，
并且 DOM 的最根本的对象 document 对象也是 BOM 的 window 对象的子对象。

事件 是用户操作网页时发生的交互动作或者网页本身的一些操作，现代浏览器一共有三种事件模型。
DOM0级模型：
	这种模型不会传播，所以没有事件流的概念，同元素 绑定多个事件，只会绑定最后一次的事件，前面的会被覆盖。

IE 事件模型：
	在该事件模型中，一次事件共有两个过程，事件处理阶段，和事件冒泡阶段。
	事件处理阶段会首先执行目标元素绑定的监听事件。
	然后是事件冒泡阶段，冒泡指的是事件从目标元素冒泡到 document，
	依次检查经过的节点是否绑定了事件监听函数，如果有则执行。
	这种模型通过 attachEvent 来添加监听函数，可以添加多个监听函数，
	会按顺序依次执行。detachEvent删除事件

DOM2 级事件模型：
	在该事件模型中，一次事件共有三个过程，
	第一个过程是事件捕获阶段事件处理阶段，和事件冒泡阶段。
	捕获指的是事件从 document 一直向下传播到目标元素，依次检查经过的节点是否绑定了事件监听函数，
	如果有则执行。。
	这种事件模型，事件绑定的函数是 addEventListener，其中第三个参数可以指定事件是否在捕获阶段执行。
	取消事件removeEventListener

本质上是利用了事件冒泡的机制。
并且父节点可以通过事件对象获取到目标节点，因此可以把子节点的监听函数定义在父节点上，
由父节点的监听函数统一处理多个子元素的事件，这种方式称为事件委托
支持为同一个DOM元素注册多个同类型事件，可将事件分成事件捕获和事件冒泡机制

事件传播有三个阶段：
捕获阶段–事件从 window 开始，然后向下到每个元素，直到到达目标元素事件或event.target。
目标阶段–事件已达到目标元素。
冒泡阶段–事件从目标元素冒泡，然后上升到每个元素，直到到达 window。

什么是事件捕获
当事件发生在 DOM 元素上时，该事件并不完全发生在那个元素上。在捕获阶段，事件从window开始，一直到触发事件的元素。
什么是事件冒泡？
事件冒泡刚好与事件捕获相反，当前元素---->body ----> html---->document ---->window。当事件发生在DOM元素上时，该事件并不完全发生在那个元素上。在冒泡阶段，事件冒泡，或者事件发生在它的父代，祖父母，祖父母的父代，直到到达window为止。

（1）创建新节点
 	createDocumentFragment()    //创建一个DOM片段 (科瑞A特)(法歌们特)
 	createElement()             //创建一个具体的元素
 	createTextNode()   		    //创建一个文本节点

（2）添加、移除、替换、插入
	appendChild(node)
	removeChild(node)
	replaceChild(new,old) (锐普利斯)
	insertBefore(new,old) (因色特比佛)

（3）获取、查找
	getElementById();
	getElementsByName();
	getElementsByTagName();
	getElementsByClassName();
	querySelector(); (斯来科特)
	querySelectorAll();

（4）属性操作
	getAttribute(key); (去比又特)
	setAttribute(key, value);
	hasAttribute(key);
	removeAttribute(key);

检测方法4种

 1、Object.prototype.toString.call()
    作用: 可以检测所有数据类型
    所有数据类型都可以检测,而且非常正确
    语法: Object.prototype.toString.call( 'xxx'/11/[ ] )
    返回值: [object Xxx], Xxx 就是对象的类型
 2、constructor
    作用: 可以检测基本数据类型和引用数据类型
    弊端: 把类的原型进行重写, 很有可能把之前的constructor覆盖 检测出来的结果就会不准确
    语法: ("xx")/([])/(function(){}).constructor === String/Array/Function
    返回值: true/false
3、instanceOf
    原理: 判断对象类型，基于原型链去判断(obj instanceof Object)
    左边对象的原型链proto上是否有右边构造函数的proptotype属性
    作用: 判断左边的对象是否是右边构造函数的实例
    弊端: 用于引用类型的检测, 对于基本数据类型不生效
    语法: " "/[ ]/true instanceOf String/Array/Boolean
    返回值: true/false
4、typeOf
    作用: 用于检测基本数据类型和函数
    弊端: 引用数据类型(Arrary/function/object)只会返回Object, 不起作用
    语法: typeOf " "/[ ]/xx
    返回值: "string"/"boolean"/"object" (无法区分)

原型：
Javascript规定，每一个函数都有一个prototype对象属性，指向另一个对象
prototype就是调用构造函数所创建的那个实例对象的原型

原型链：
实例对象与原型之间的连接，叫做原型链。
JS在创建对象的时候，都有一个叫做__proto__的内置属性，用于指向创建它的函数对象的原型对象prototype。

获取原型的方法
p.proto
p.constructor.prototype
Object.getPrototypeOf(p)

1、prototype:
每一个函数都有一个prototype这个属性，而这个属性指向一个对象，这个对象我们叫做原型对象
作用：节约内存扩展属性和方法可以实现类之间的继承
2、__proto__:
每一个对象都有一个__proto__属性,__proto__指向创建自己的那个构造函数的原型对象对象可以直接访问__proto__里面的属性和方法
3、constructor：
指向创建自己的那个构造函数 ，是原型上的方法

总结：
当我们创建一个构造函数的时候这个构造函数自带了一个prototype属性，而这个属性指向一个对象，也就是原型对象。 这个原型对象里面有一个constructor构造器，它的作用是指向创建自己的构造函数。
除此之外 prototype还可以存放公共的属性和方法。
当我们实例化一个对象的时候(被new调用的时候)，这个对象自带了一个 proto 属性，
这个proto 指向创建自己的构造函数的原型对象。可以使用这个原型对象里面的属性和方法

传统的javascript中只有对象，没有类的概念。它是基于原型的面向对象语言。
原型对象特点就是将自身的属性共享给新对象。

ES6引入了Class（类）这个概念，通过class关键字可以定义类。
该关键字的出现使得其在对象写法上更加清晰，更像是一种面向对象的语言

constructor：
constructor()方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。
一个类必须有constructor()方法，如果没有显式定义，一个空的 constructor()方法会被默认添加。

1. 返回值类型的区别：
	构造函数是没有返回值类型的，
	普通函数是有返回值类型的，即使函数没有返回值，返回值类型也要写上void。
2. 函数名的区别：
	构造函数的函数名必须要与类名一致，
	普通函数的函数名只要符合标识符的命名规则即可。
3. 调用方式的区别：
	构造函数是在创建对象的时候由jvm调用的。
	普通函数是由我们使用对象调用的，一个对象可以对象多次普通的函数，
4. 作用上的区别：
	构造函数的作用用于初始化一个对象。
	普通函数是用于描述一类事物的公共行为的。

原因：由于浏览器的同源策略，即属于不同域的⻚面之间不能相互访问各自的⻚面内容。

哪些情况下产生跨域
1、域名不同
2、端口号不同
3、协议不同(http/https)
4、域名和域名对应ip
5、主域名相同(127.0.01 和 localhost) 多域名匹配一个ip地址
6、子域名不同（一级和二级域名）

解决方法

1、后端代理
后端不存在跨域（后端代码脱离浏览器，后端是服务器端）
利用后端(自己公司的后端)去获取接口数据，将数据传给前端
2、jsonp
原理:
	利用浏览器的"漏洞" src不受同源策略的影响，可以请求任何链接 。动态创建script标签，将事先写好的函数名传给服务器，供服务器使用
（1）script标签src属性不存在跨域
（2）get方式--传递函数名 --弊端
（3）callback回调函数(传递函数名)
3、反向代理
proxy  webpack配置
"proxy": {
    "/index.php": {
      "target": "http://qinqin.net",
      "changeOrigin": true
    }
 }
4、CORS解决跨域(xhr2)(后端)
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源(协议 + 域名 + 端口)服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
需要服务器(提供接口的源码里面)添加下面两句话。
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Method:POST,GET');

jsonp是一种非正式传输协议，用于解决跨域问题流程：
1、创建一个全局函数
2、创建一个script标签
3、给script添加src
4、给src添加回调函数test(callback=test) callback是传给后端的一个参数
5、将script放到⻚面上
6、script请求完成，将自己从⻚面上删除

闭包原理：定义在一个函数内部的函数(函数嵌套函数)，闭包就是将函数内部和函数外部连接起来的一座桥梁。
打破了作用域链的规则 闭包就是能够读取其他函数内部变量的函数

用途:
第一个用途是使我们在函数外部能够访问到函数内部的变量。通过使用闭包，我们可以通过在外部调用闭包函数，从而在外部访问到函数内部的变量，可以使用这种方法来创建私有变量。
另一个用途是使已经运行结束的函数上下文中的变量对象继续留在内存中，因为闭包函数保留了这个变量对象的引用，所以这个变量对象不会被回收。

优点:
1、使用闭包是不会污染全局环境，
2、方便进行模块化开发，
3、减少形参个数，延长了形参的生命周期，

坏处:
1、就是不恰当使用会造成内存泄漏

闭包的不适用于返回闭包的函数是个特别大的函数,很多高级应用都要依靠闭包实现.

使用场景
1、通过循环给页面上多个dom节点绑定事件
2、封装私有变量(计数器)
3、延续局部变量的寿命
4、高阶组件
5、函数防抖

模块化的就是以闭包为基础构建的;

1、意外的全局变量
2、被遗忘的定时器
3、没有清除的dom应用 ，故要及时清除，
4、滥用闭包

清除内存泄漏方法有两种，一是标记清除，二便是引用计数清除。

Promise是es6新增的，异步编程的一种解决方案，用来取代回调函数和事件，比传统的解决方案——回调函数和事件——更合理和更强大。

Promise 对象用于延迟(deferred) 计算和异步(asynchronous)计算。一个Promise对象代表着一个还未完成，但预期将来会完成的操作。Promise 对象是一个返回值的代理，这个返回值在promise对象创建时未必已知。它允许你为异步操作的成功或失败指定处理方法。这使得异步方法可以像同步方法那样返回值:异步方法会返回一个包含了原返回值的 promise 对象来替代原返回值。

有三种状态：pending（进行中）、fulfilled（resolve已成功）和rejected(锐杰克腾德)（已失败）

promise的特点：
（1）对象的状态不受外界影响。Promise对象代表一个异步操作。
（2）一旦状态设定，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为resolve和从pending变为rejected。只要这两种情况发生，状态就凝固了

promise的方法：
promise实例方法：
	Promise.prototype.then
	Promise.prototype.catch

    一：resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
    二：reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
    三：Promise.prototype.finally
    finally方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2018 引入标准的。

promise的静态方法
    Promise.all():用于将多个 Promise 实例，包装成一个新的 Promise 实例，接受一个数组作为参数，只有数组里面的每个状态都变成resolve，则新的 Promise 实例状态才会变成resolve.
    Promise.race():将Promise对象数组中最先执行完成的内容通过后面then传出

promise的基本使用：
通过new promise创建一个promise对象，里面有一个参数，参数是一个回调函数，
回调函数中有2个参数：resolve、reject
	resolve()当异步执行成功的时候调用的方法，reject()当异步失败的时候调用的方法。
除此之外promise有一个then方法，当成功的时候执行第一个回调函数，当失败的时候执行第二个回调函数。
第二个回调函数也可以通过promise对象.catch调用

Promise.all():当所有的异步代码都执行完毕以后才会执行.then中的操作
Promise.race():只要有一个promise执行完毕后就会执行.then操作

promise的三种状态：
1.pending - 进行中
2.fulfilled - 成功
3.rejected - 失败

链式调用:
promise俗称链式调用，它是es6中最重要的特性之一
简单的说可以不停的then调用嵌套在调用（异步之后，链式调用方式执行回调），这种操作方式称为promise

async异步能干什么？
就是用来修饰函数，使该函数异步执行，不阻碍后续函数的执行
同时我们注意到，async修饰的函数也带有then catch方法，
因此，经async修饰的函数也 是一个promise await只能放在async中，且只能修饰promise对象
	1. promise的诞生是为了简化函数嵌套调用流程，也便于后续维护
	2. async/await定义了异步函数，并在其内部可通过await等待promise对象，阻塞后 续的执行

await关键字必须在async函数里面
await会阻塞当前直到完成 async返回reject的方法,当抛出异常等同于reject

async / await与 Promise的主要区别是：
Promise代码完全都是Promise的API（then、catch等等），操作本身的语义反而不容易看出来,
async / await函数的实现最简洁，最符合语义，几乎没有语义不相关的代码
async / await 函数就是 Generator 函数的语法糖

async/await函数的优势
1. 使用async函数可以让代码简洁很多，不需要像Promise一样需要些then，不需要写匿名函数处理Promise的resolve值，也不需要定义多余的data变量，还避免了嵌套代码
2. 使用aync/await的话，catch能处理JSON.parse错误 promise中不能处理
3. 条件语句也和错误捕获是一样的，在 Async 中也可以像平时一般使用条件语句

promise的状态处理的原理:

Pomise.all的使用
	Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。
	Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，在前端开发请求数据的过程中，偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景，使用Promise.all毫无疑问可以解决这个问题。

Promise.race的使用
	Promise.race就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

Generator 的中文名称是生成器，它是ECMAScript6中提供的新特性。
在过去，封装一段运算逻辑的单元是函数。函数只存在“没有被调用”或者“被调用”的情况，
不存在一个函数被执行之后还能暂停的情况，而Generator的出现让这种情况成为可能。

通过 function* 来定义的函数称之为“生成器函数”（generator function），它的特点是可以中断函数的执行，
每次执行yield语句之后，函数即暂停执行，直到调用返回的生成器对象的next()函数它才会继续执行。

也就是说 Generator 函数是一个状态机，封装了多个内部状态。
执行 Generator 函数返回一个遍历器对象（一个指向内部状态的指针对象），
调用遍历器对象的next方法，使得指针移向下一个状态。每次调用next方法，
内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止。

yield关键字
真正让Generator具有价值的是yield关键字，这个yield关键字让 Generator内部的逻辑能够切割成多个部分。
发现函数执行到第一个yield关键字的时候就停止了。要让业务逻辑继续执行完，需要反复调用.next()
可以简单地理解为yield关键字将程序逻辑划分成几部分，每次.next()执行时执行一部分。
这使得程序的执行单元再也不是函数，复杂的逻辑可以通过yield来暂停。

.next()调用时，返回一个对象，这个对象具备两个属性。
其中一个属性是布尔型的done。它表示这个Generator对象的逻辑块是否执行完成。
另一个属性是value，它来自于yield语句后的表达式的结果。

通过.next()传递参数，可以赋值给yield关键字前面的变量声明。

1、堆——引用类型地址传递
	堆：动态分配的内存，大小不定，不会自动释放。存放引用类型的值 先进后出FILO
	引用类型: Object(Arrary, Date, Math,Function, Object)
	访问方法: JS不能直接访问内存中的值, 只能操作对象的地址, 所以产生深/浅拷贝问题
	栈--基本类型值传递
2、栈——自动分配内存空间，系统自动释放，存放基本类型的值和引用类型的地址先进先出FIFO
    基本类型: Undefined、Null、Boolean、Number 和 String, Symbol(ES6新增)
    访问方法: 按值访问, 直接操作内存中的值

深/浅拷贝针对的是引用类型

浅拷贝
浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。
新旧互相影响,改变的是地址
新值===原值,只能拷贝一层

数组方法: slice截取, concat拼接, filter过滤, map
对象方法: Object.assign({},obj), Object.create(obj)

展开运算符: {...obj},[...arr]

深拷贝
深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象
新旧互不影响,改变的是值
新值=/=原值,可以拷贝多层

1、JSON序列化
    JSON.parse(JSON.stringify(obj))对象-->字符串-->对象
    这个方式的弊端：
    1、如果obj里面有时间对象，则JSON.stringify后再JSON.parse的结果，时间将只是字符串的形式，而不是对		象的形式
    2、如果obj里有RegExp(正则表达式的缩写)、Error对象，则序列化的结果将只得到空对象；
    3、如果obj里有函数，undefined，则序列化的结果会把函数或 undefined丢失；
    4、如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null
    5、JSON.stringify()只能序列化对象的可枚举的自有属性，不可枚举的不能被复制

    可枚举:可枚举性（enumerable）用来控制所描述的属性，是否将被包括在for...in循环之中。具体来说，如果一个属性的enumerable为false，下面三个操作不会取到该属性。
    for..in循环、Object.keys方法、JSON.stringify方法
2、原生实现
	递归+浅拷贝

3、工具实现【第三方封装库】
loadsh _.cloneDeep(obj)
	.DeepClone()
	用于 Model / Entity / ... ... 等引用类型对象的深度克隆
		特性说明
		1.不需要对对象做任何特殊处理，直接 .DeepClone() 即可得到该对象的深度克隆
		2.不受对象层次深度限制，均可实现深度克隆（下面会给出几个简单示例 ... ...）
Immutable
Object.create()

Set:它类似于数组，但是成员的值都是唯一的，没有重复的值。
Set本身是一个构造函数，用来生成 Set 数据结构，数组作为参数。

不说set  数据结构Set   new set()存储数据   set.size得到存储的数据长度

has()判断某个值是否存在set中   foreach遍历set

不说map : new  map      map.set   map.get   map.delete

都是用来存储数据用的，但是存储的数据格式不同
set 直接存储 任意类型数据
map 存储数据的时候，必须以key，value的形式，
set 使用forEach 遍历的时候，key和value值是一样的
而map 遍历的时候，key就是存进去的对象的key，value就是存在的值

for循环这种写法比较麻烦，因此数组提供内置的forEach方法。

forEach没有返回值，无法中途跳出forEach循环，break命令或return命令都不能奏效。

for...in循环主要是为遍历对象而设计的，不适用于遍历数组**

for...of循环相比上面几种做法，有一些显著的优点。
有着同for...in一样的简洁语法，但是没有for...in那些缺点。
不同于forEach方法，它可以与break、continue和return配合使用。
提供了遍历所有数据结构的统一操作接口。

js 是单线程执行的，js中的任务按顺序一个一个的执行，但是一个任务耗时太长，那么后面的任务就需要等待，为了解决这种情况，将任务分为了同步任务和异步任务，而异步任务又可以分为微任务和宏任务

概念
1.宏任务：当前调用栈中执行的代码成为宏任务。（主代码快，定时器等等）。
2.微任务：当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。（promise.then，proness.nextTick等等）。
3.宏任务中的事件放在callback queue中，由事件触发线程维护；微任务的事件放在微任务队列中，由js引擎线程维护。

运行机制
1. 在执行栈中执行一个宏任务。
2. 执行过程中遇到微任务，将微任务添加到微任务队列中。
3. 当前宏任务执行完毕，立即执行微任务队列中的任务。
4. 当前微任务队列中的任务执行完毕，检查渲染，GUI线程接管渲染。
5. 渲染完毕后，js线程接管，开启下一次事件循环，执行下一次宏任务（事件队列中取）。

微任务：process.nextTick、MutationObserver、Promise.then catch finally
宏任务：I/O、setTimeout、setInterval、setImmediate、requestAnimationFrame

js执行顺序，（先执行宏任务列，微任务队列）
先同步再异步，在此基础上先宏任务再微任务

流程：
	同步和异步任务分别进入不同的执行“场所”，同步进入主线程，异步进入Event Table并注册函数。当指定的事情完成时，Event Table会将这个函数移入Event Queue。主线程内的任务执行完毕为空，回去了Event Queue读取对应的函数，进入主线程。
	上述过程会不断重复，也就是常说的Event Loop（事件循环）。
	但是，JS异步还有一个机制，就是遇到宏任务，先执行宏任务，将宏任务放入event queue，然后再执行微任务，将微任务放入eventqueue，但是，这两个queue不是一个queue。当你往外拿的时候先从微任务里拿这个回调函数，然后再从宏任务的queue拿宏任务的回调函数，

1、定时器都是异步操作
2、事件绑定都是异步操作
3、AJAX中一般我们都采取异步操作（也可以同步）
4、回调函数可以理解为异步（不是严谨的异步操作）
5、promise
6、generator（ES6）
   通过yield关键字可以让任务在需要的地方暂停,每一步的值可以通过next获取
7、async/await(ES7)
   await得到的就是async异步返回值,底层原理还是promise中的resolve方法
8、设计模式-发布订阅模式
9、事件监听

正则   type number

Proxy用于修改某些操作的默认行为，即对编程语言层面进行修改，属于“元编程”，Proxy意思为“代理”，即在访问对象之前建立一道“拦截”，任何访问该对象的操作之前都会通过这道“拦截”，即执行Proxy里面定义的方法

let pro = new Proxy(target,handler)

其中 new Proxy相当于创建了一个Proxy实例，target为所要拦截的目标对象，handler也是一个对象，里面定义的是对拦截对象所要进行的拦截方法

Proxy也可以作为其他对象的原型对象使用

上述实例将pro作为obj的原型对象使用，虽然obj本身没有name这个属性，但是根据原型链，会在pro上读取到name属性，之后会执行相对应的拦截操作。

let pro = new Proxy(target,handler);
let obj = Object.create(pro);

get(target,name,property)方法
用于拦截某个读取属性的操作,第一个参数为目标对象，第二个参数为属性名称，第三个属性为操作所针对的对象（可选参数）

set(target,name,value,property)
用于拦截某个属性的赋值操作，第一个参数为目标对象，第二个参数为属性名，第三个参数为属性值，第四个参数为操作行为所针对的对象（可选参数）

has(target,key)
用来拦截对象是否具有某个属性值的操作，第一个参数为目标对象，第二个参数为属性名

Reflect(锐付莱克特)对象:
Reflect设计的目的是为了优化Object的一些操作方法以及合理的返回Object操作返回的结果，对于一些命令式的Object行为，Reflect对象可以将其变为函数式的行为

Reflect(target,name,property)  Reflect.has(obj,"name")  Reflect.get(target,name,property)

减少请求数量

图片处理
	雪碧图
	gulp
	Base64
	使用字体图标来代替图片 - 自定义字体 @font-face{}
	在安卓下可以使用webp格式的图片

减小资源大小 -  webpack优化
	HTML压缩
	CSS压缩
	JS压缩与混乱
	图片压缩

优化网络连接
	cdnCDN即内容分发网络，它能够实时地根据网络流量和各节点的连接、负载状
	用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度

优化资源加载
	资源加载位置
		1、CSS文件放在head中，先外链，后本页
		2、JS文件放在body底部，先外链，后本页
		3、body中间尽量不写style标签和script标签
	资源加载时机
		1、异步script标签
		2、模块按需加载需要根据路由来加载当前页面需要的业务模块
		3、资源懒加载与资源预加载

减少重绘回流
	当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流
	当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如		background-color。则就叫称为重绘。
	回流必将引起重绘，而重绘不一定会引起回流。
	css3硬件加速（GPU加速）

六.【DOM优化】
1、缓存DOM
2、减少DOM深度及DOM数量
3、批量操作DOM
4、批量操作CSS样式
5、在内存中操作DOM
6、DOM元素离线更新
7、DOM读写分离
8、事件代理
9、防抖和节流
10、及时清理环境

Accept(艾可塞克特)
告诉WEB服务器自己接受什么介质类型，*/* 表示任何类型，type/* 表示该类型下的所有子类型，type/sub-type。
　　
Accept-Charset(恰斯特)
浏览器告诉服务器自己能接收的字符集。

Accept-Encoding(因扣定)
浏览器申明自己接收的编码方法，通常指定压缩方法，是否支持压缩，支持什么压缩方法（gzip，deflate）

Accept-Language
浏览器申明自己接收的语言。语言跟字符集的区别：中文是语言，中文有多种字符集，比如big5，gb2312，gbk等等。
　　
Authorization(哦瑟惹C逊)
当客户端接收到来自WEB服务器的 WWW-Authenticate 响应时，用该头部来回应自己的身份验证信息给WEB服务器。
　　
If-Match
如果对象的 ETag 没有改变，其实也就意味著对象没有改变，才执行请求的动作，获取文档。

If-None-Match
如果对象的 ETag 改变了，其实也就意味著对象也改变了，才执行请求的动作，获取文档。
   (莫得反得)
If-Modified-Since(森恩斯)
如果请求的对象在该头部指定的时间之后修改了，才执行请求的动作（比如返回对象），否则返回代码304，告诉浏览器该对象没有修改。例如：If-Modified-Since：Thu, 10 Apr 2008 09:14:42 GMT

If-Unmodified-Since
如果请求的对象在该头部指定的时间之后没修改过，才执行请求的动作（比如返回对象）。

If-Range /reinge/
浏览器告诉 WEB 服务器，如果我请求的对象没有改变，就把我缺少的部分给我，如果对象改变了，就把整个对象给我。浏览器通过发送请求对象的ETag 或者自己所知道的最后修改时间给 WEB 服务器，让其判断对象是否改变了。总是跟 Range 头部一起使用。

Range
浏览器（比如 Flashget 多线程下载时）告诉 WEB 服务器自己想取对象的哪部分。例如：Range: bytes=1173546

Proxy-Authenticate(噢三特K特)
代理服务器响应浏览器，要求其提供代理身份验证信息。

Proxy-Authorization
浏览器响应代理服务器的身份验证请求，提供自己的身份信息。

Host
客户端指定自己想访问的WEB服务器的域名/IP 地址和端口号。如Host：rss.sina.com.cn

Referer(锐佛尔)
浏览器向WEB 服务器表明自己是从哪个网页URL获得点击当前请求中的网址/URL，
例如：Referer：http://www.ecdoer.com/

User-Agent(A就特)
浏览器表明自己的身份（是哪种浏览器）。
例如：User-Agent：Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN;rv:1.8.1.14) Gecko/20080404 Firefox/2.0.0.14

new出来一个实例对象是否带有static属性   static用ES5怎么写

没有创建对象，也能使用属性和调用方法

用来形成静态代码块以优化程序性能。因为只会在类加载的时候执行一次。因此，很多时候会将一些只需要进行一次的初始化操作都放在static代码块中进行。

static块可以置于类中的任何地方，类中可以有多个static块。在类初次被加载的时候，会按照static块的顺序来执行每个static块，并且只会执行一次

被static修饰的变量或者方法是独立于该类的任何对象，也就是说，这些变量和方法不属于任何一个实例对象，而是被类的实例对象所共享。

类第一次加载初始化的时候就去加载static部分,后面可以重新赋值

static用ES5怎么写: 静态是通过类名直接调用 class A staticB

直接用A.B    将B绑定在A上

同步还是异步
	await同步
	async异步

async和await有两个关键字,一个写在函数外面,一个写在函数里面,函数外面是异步的，函数里面是同步的，调用函数的那一行其实是异步的,下一行
函数里面转成阻塞的

async  await => promise 改写

async函数中
let  a=await promise  的a函数
let  b=await promise  的b函数

promise.all改写
Promise.allSettled   Promise.any

promise实现promise.all的方法

async使用的时候报错,如何捕获try...catch

var test3 = async function () {
    try {
      await p1();
      await p2();
      p3();
    } catch (e) {
      console.log('p1失败了', e)
    }
  }

await后面有个接口
接口要2S才能完成    接口2S才会执行

没区别

设置请求头   请求头中携带cookie

为什么在react中要使用浅拷贝

redux中要求:状态是只读的,唯一且不可修改的,reducer必须是一个纯函数

因为redux中数据不可更改,所以redux中的数据应该要拷贝  返回一个新值

1.jQuery ajax
	$.ajax({
		type: 'POST',
		url: url,
		data: data,
		dataType: dataType,
		success: function () {},
		error: function () {}
	});
优缺点：
	是对原生XHR的封装，除此以外还增添了对JSONP的支持。
	本身是针对MVC的编程,不符合现在前端MVVM的浪潮
	基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
	JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理
	（采取个性化打包的方案又不能享受CDN服务）

2.axios
	axios({
		method: 'post',
		url: '/user/12345',
		data: {
			firstName: 'Fred',
			lastName: 'Flintstone'
		}
	})
	.then(function (response) {
		console.log(response);
	})
	.catch(function (error) {
		console.log(error);
	});
优缺点：
	Axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，
	从它的官网上可以看到它有以下几条特性：
		从 node.js 创建 http 请求
		支持 Promise API
		客户端支持防止CSRF
		提供了一些并发请求的接口（重要，方便了很多的操作）

3.fetch
	try {
		let response = await fetch(url);
		let data = response.json();
		console.log(data);
	} catch(e) {
		console.log("Oops, error", e);
	}
优缺点：
	符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
	更好更方便的写法
	更加底层，提供的API丰富（request, response）
	脱离了XHR，是ES规范里新的实现方式

fetch是一个低层次的API，你可以把它考虑成原生的XHR，所以使用起来并不是那么舒服，
需要进行封装，例如：
1）fetch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
2）fetch默认不会带cookie，需要添加配置项
3）fetch不支持abort，不支持超时控制，
   使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了量的浪费
4）fetch没有办法原生监测请求的进度，而XHR可以

为什么要用axios?
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：
	从浏览器中创建 XMLHttpRequest
	从 node.js 发出 http 请求
	支持 Promise API
	拦截请求和响应
	转换请求和响应数据
	取消请求
	自动转换JSON数据
	客户端支持防止CSRF/XSRF

回流:
当渲染树中的一部分或者全部因为元素的尺寸、布局、隐藏等改变而需要重新构建的时候，这时 候就会发生回流。 每个⻚面都至少发生一次回流，也就是⻚面第一次加载的时候。 在回流的时候，浏览器会使渲染树中受到影响的元素部分失效，并重新绘制这个部分的渲染树， 完成回流以后，

重绘:
当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

防抖：
短时间内多次触发同一事件，只执行最后一次，或者只执行最开始的一次，中间的不执行。
在事件触发时，开始计时，在规定的时间（delay）内，若再次触发事件，将上一次计时（timer）清空，然后重新开始计时。保证只有在规定时间内没有再次触发事件之后，再去执行这个事件。

节流：
指定时间间隔内，若事件被多次触发，只会执行一次
在事件触发之后，开始计时，在规定的时间（delay）内，若再次触发事件，不对此事件做任何处理。保证在规定时间内只执行一次事件.

CSS
	使用transform替代top
	使用visibility替换display:none
	避免使用table布局
	尽可能在DOM树的最末端改变class
	避免设置多层内联样式
	将动画效果应用到position属性为absoulte或fixed的元素上
	避免使用css表达式
	将频繁重绘或者回流的节点设置为图层
	css硬件加速

JavaScript
	避免频繁操作样式
	避免频繁操作DOM
	避免频繁读取会引发重绘/回流的属性
	对具有复杂动画的元素使用绝对定位

Event Loop 即事件循环
是指浏览器或者Node的一种解决JavaScript单线程运行时不阻塞的一种机制，单线程的是所有任务都在主线程上完成,任务太多的时候,页面卡死,eventLoop可以解决单线程阻塞问题,程序中会有两个线程,一个主线程,一个eventLoop线程,负责主线程和其他进程之间的通信,遇到I/O的时候,主线程会让eventLoop线程通知对应的程序,主线程的任务会继续往后执行,等I/O程序执行完了,eventLoop线程会把结果返回给主线程,主线程利用回调函数调用结果,完成任务
（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
（4）主线程不断重复上面的第三步。

宏任务和微任务的执行顺序
	一次事件循环中，先执行宏任务队列里的一个任务，再把微任务队列里的所有任务执行完毕，再去宏任务队列取下一个宏任务执行。

在js中，所有任务都分为同步任务和异步任务两大类。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
（4）主线程不断重复上面的第三步。

有时候 setTimeout明明写的延时3秒，实际却5，6秒才执行函数，这又是因为什么？

答：setTimeout 并不能保证执行的时间，是否及时执行取决于 JavaScript 线程是拥挤还是空闲。
浏览器的JS引擎遇到setTimeout，拿走之后不会立即放入异步队列，同步任务执行之后，timer模块会到设置时间之后放到异步队列中。js引擎发现同步队列中没有要执行的东西了，即运行栈空了就从异步队列中读取，然后放到运行栈中执行。所以setTimeout可能会多了等待线程的时间。
这时setTimeout函数体就变成了运行栈中的执行任务，运行栈空了，再监听异步队列中有没有要执行的任务，如果有就继续执行，如此循环，就叫Event Loop。

1.浏览器默认的 application/x-www-form-urlencoded(url因扣得的)
这应该是最常见的 POST 提交数据的方式了。浏览器的原生 form 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。

2.multipart(莫踢怕特)/form-data
这也是一个常见的 POST 数据提交的方式。我们使用表单上传文件时，就要让 form 的 enctype 等于这个值

3.application/json
除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify

4.text/xml
相比于JSON，不能更好的适用于数据交换，它包含了太多的包装, 而且它跟大多数编程语言的数据模型不匹配，让大多数程序员感到诧异，XML是面向数据的，JSON是面向对象和结构的，JSON会给程序员一种更加亲切的感觉。

1. reduce

遍历数组每一项，若值为数组则递归遍历，否则concat。

function flatten(arr) {
    return arr.reduce((result, item)=> {
        return result.concat(Array.isArray(item) ? flatten(item) : item);
    }, []);
}

reduce是数组的一种方法，它接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
reduce包含两个参数：回调函数，传给total的初始值

// 求数组的各项值相加的和：
arr.reduce((total, item)=> {  // total为之前的计算结果，item为数组的各项值
    return total + item;
}, 0);


2. toString & split
调用数组的toString方法，将数组变为字符串然后再用split分割还原为数组

function flatten(arr) {
    return arr.toString().split(',').map(function(item) {
        return Number(item);
    })
}

因为split分割后形成的数组的每一项值为字符串，所以需要用一个map方法遍历数组将其每一项转换为数值型

3. join & split
和上面的toString一样，join也可以将数组转换为字符串

function flatten(arr) {
    return arr.join(',').split(',').map(function(item) {
        return parseInt(item);
    })
}

4. 递归

递归的遍历每一项，若为数组则继续遍历，否则concat

function flatten(arr) {
    var res = [];
    arr.map(item => {
        if(Array.isArray(item)) {
            res = res.concat(flatten(item));
        } else {
            res.push(item);
        }
    });
    return res;
}


5. 扩展运算符
es6的扩展运算符能将二维数组变为一维

[].concat(...[1, 2, 3, [4, 5]]);  // [1, 2, 3, 4, 5]

根据这个结果我们可以做一个遍历，若arr中含有数组则使用一次扩展运算符，直至没有为止。

function flatten(arr) {
    while(arr.some(item=>Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return arr;
}

Array.prototype.push.apply(a,b)

es5 的继承是先创建子类的this，然后将父类的方法添加到子类的this上去；
es6 的继承是创建父类的this对象，然后再对this对象添加方法/属性。
而super方法就是用来创建父类this对象的。

实际上执行的是 super.sport.call(this);

1、CSRF（Cross-site request forgery）：跨站请求伪造。
（1）登录受信任网站A，并在本地生成Cookie。
	（如果用户没有登录网站A，那么网站B在诱导的时候，请求网站A的api	接口时，会提示你登录）
（2）在不登出A的情况下，访问危险网站B（其实是利用了网站A的漏洞）

CSRF如何防御
方法一: Token 验证：（用的最多）
	（1）服务器发送给客户端一个token；
	（2）客户端提交的表单中带着这个token。
	（3）如果这个 token 不合法，那么服务器拒绝这个请求。
方法二: 隐藏令牌：
	把 token 隐藏在 http 的 head头中。
	方法二和方法一有点像，本质上没有太大区别，只是使用方式上有区别。
方法三: Referer(锐服尔) 验证：
	Referer 指的是页面请求来源。意思是，只接受本站的请求，服务器才做响应；如果不是，就拦截。

2、XSS（Cross Site Scripting）：跨域脚本攻击。
XSS攻击的核心原理是：
	不需要你做任何的登录认证，它会通过合法的操作（比如在url中输入、在评论框中输入），
	向你的页面注入脚本（可能是js、hmtl代码块等）。
最后导致的结果可能是：
	盗用Cookie破坏页面的正常结构，插入广告等恶意内容D-doss攻击
XSS的攻击方式
1、反射型
	发出请求时，XSS代码出现在url中，作为输入提交到服务器端，服务器端解析后响应，
	XSS代码随响应内容一起传回给浏览器，最后浏览器解析执行XSS代码。这个过程像一次反射，所以叫反射型XSS。
2、存储型存
	储型XSS和反射型XSS的差别在于，提交的代码会存储在服务器端（数据库、内存、文件系统等），
	下次请求时目标页面时不用再提交XSS代码。

XSS的防范措施（encode + 过滤）主要有三个：
1、编码：
	对用户输入的数据进行HTML Entity(安特踢) 编码。
2、过滤：
	移除用户输入的和事件相关的属性。如onerror可以自动触发攻击，还有onclick等。
	（总而言是，过滤掉一些不安全的内容）移除用户输入的Style节点、Script节点、Iframe节点。
	（尤其是Script节点，它可是支持跨域的呀，一定要移除）。
3、校正
	避免直接对HTML Entity进行解码。
	使用DOM Parse转换，校正不配对的DOM标签。
		这个概念，它的作用是把文本解析成DOM结构。
		比较常用的做法是，通过第一步的编码转成文本，然后第三步转成DOM对象，然后经过第二步的过滤。
	还有一种简洁的答案：
	首先是encode，如果是富文本，就白名单。

3、CSRF 和 XSS 的区别:
区别一：
	CSRF：需要用户先登录网站A，获取 cookie。
	XSS：不需要登录。
区别二：（原理的区别）
	CSRF：是利用网站A本身的漏洞，去请求网站A的api。
	XSS：是向网站 A 注入 JS代码，然后执行 JS 里的代码，篡改网站A的内容。

首先，微信小程序已经提供了一套 view, data, model, router 层的开发工具，
对于开发简单应用，小程序是可以比 webapp 更加快速的。

但是实际上微信小程序提供的这一套开发框架，要开发一些复杂应用，是很困难的，
因为：小程序不支持 npm 等 package manager(麦呢橘)无法复用社区中已经很成熟的 web 框架和工具组件只能封装 view 和 style，无法封装行为（handler），行为只能定义在 page 上小程序有 1mb 的限制，所以我们只能将图片之类的静态资源事先放在服务器上

其次，微信小程序是由微信自己来 host，开发者只需要上传就好，
而微信 webapp 需要开发者自己 host，还需要注册域名甚至备案才可以调用微信接口以及跟公众号集成。
所以微信小程序降低了开发者的门槛。

综上，对于简单的工具型应用，微信小程序可以让开发者加快开发速度，降低发布门槛，
这种类型的应用比较适合微信小程序。对于复杂的应用，webapp 是更适合的形式。

优点：
1、采用虚拟 DOM，它并不直接对DOM进行操作，安插在javascript逻辑和实际的DOM之间，性能好
2、跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
3、一切都是组件：代码更加 模块化 ，重用代码更容易，可维护性高。
4、单向数据流：redux 实现是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
5、同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
6、兼容性好：比如使用RequireJS来加载和打包，而Browserify(不弱瑟)和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。
7、JSX语法：为了更加便利的模拟DOM结构，我们使用了JSX语法，可以让我们在JS中编译DOM结构                 8、函数式编程：JS的最大特点就是函数式编程，在React中，函数式编程可谓式无处不见

缺点：
不适合单独做一个完整的框架：react是视图层框架，大型项目想要一套完整的框架的话，也许还需要引入Flux和route相关的东西。

16版本：
初始阶段:
constructor
	定义state
componentWillMount(这个钩子函数在将来会被弃用)
	为挂载做准备工作
render
	解析 this.state 和 this.props
	将jsx型的虚拟dom渲染为对象类型的虚拟dom
	render 中不允许使用 this.setState() 如何你使用了，就会栈溢出
componentDidMount
	表示组件挂载结束
	虚拟dom -> Real dom
	可以获取真实dom
	数据请求 -> 赋值给state
	第三方库实例化/DOM操作

更新阶段:
componentWillReceiveProps(在17版本中被弃用)
	这个钩子实际作用是判断组件身上的props是否发生改变
shouldComponentUpdate
	可以决组件是否要更新渲染 return true/false
	接收新旧状态，用于作对比（浅对比）
	一般需要我们手动作深对比
	这个钩子函数是React组件性能优化的一种方式
componentWillUpdate
	表示组件更新前的准备
	这个钩子函数在未来版本被弃用
render
	和初始化阶段的作用一致
componentDidUpdate
	对Real dom 作操作
	注意：父组件数据更新，子组件会重新运行render，反之不行
	每次都要运行子组件render，会造成react性能浪费
	粗略解决方案：
		在shouldComponentUpdate中，可判断哪些数据改变从而来控制return true/false
		继而决定是否需要更新render渲染
	更好的解决方案：
    1.引用PureComponent，让类组件继承（extends）PureComponent
      如：class App extends  PureComponent{}
    2.引用memo，让函数组件写在memo（）里 如：const memoApp =memo（function App() {}）
    3.除了memo之外，更细致的是函数组件中还可以用useCallback（方法）和useMemo（对象和数组）两个钩子阻止组件render

销毁阶段:
componentWillUnmount
	销毁组件
	清除无用实例和事件
错误捕获:
	componentDidCatch
	用户捕获子组件throw的错误，然后显示回退UI

15版本：
相对于16版本，初始化阶段（constructor钩子变成下列两个）：

定义于初始化props的 getDefalutProps 钩子函数

定义于初始化state的 getInitialState 钩子函数
没有错误捕获阶段

17版本：
相对于16版本 少3多2

少了componentWillMount，componentWillReceiveProps，componentWillUpdate 3个钩子函数
   (斯塔得可)  (迪外的)
多了static getDerivedStateFromProps钩子函数                           (破外服)
	一个静态方法，所以不能在这个函数里面使用this，这个函数有两个参数nextProps和prevState，这个函数会返回一个对象用来更新当前的state对象，如果不需要更新可以返回null。
	简单说就是，可以增加一次state状态
	  (斯那坡秀的)
多了getSnapshotBeforeUpdate钩子函数
	快照
	这个函数有一个返回值，会作为第三个参数传递给componentDidUpdate钩子

view用actionCreator(酷睿A特)创建一个action，里面可能包含一些数据
使用store的dispatch方法将action传入store
store将action与旧的state转发给reducer
reducer深拷贝state,并返回一个新的state给store
store接收并更新state
使用store.subscribe(萨布斯快不)订阅更新,重新render组件

redux组成
	state  :用来存储数据和数据管理的、更新视图
	reducer:是一个纯函数，接收旧 state 和 action，根据不同的 Action 做出不同的操作并返回新的 state
	actions:发送动作给reducer,reducer接收动作，判断动作类型修改数据，修改事件后，组件重新做redux事件的订阅

Redux三大原则
单一数据源:
	整个应用的 state 被存储在一个 Object tree 中，且只存在于唯一的Store中

state 是只读的:
	唯一改变 state 的方法就是触发 action，action 是一个用于描述发生事件的普通对象，视图部分只需要表达想要修改的意图，所有修改都会被集中化处理。

状态的改变通过纯函数来完成:
	Redux使用纯函数方式来执行状态的修改，Action表明了修改状态值的意图，而真正执行状态修改的则是Reducer。且Reducer必须是一个纯函数，当Reducer接收到Action时，Action并不能直接修改State的值，而是通过创建一个新的状态对象来返回修改的状态。

在action 和 store 之间执行中间件

Redux中间件机制
	Redux本身就提供了非常强大的数据流管理功能，但这并不是它唯一的强大之处，它还提供了利用中间件来扩展自身功能，以满足用户的开发需求

     (米的为尔)
applyMiddlewares():它是 Redux 的原生方法，作用是将所有中间件组成一个数组，依次执行。
applyMiddleware顾名思义，用于调用各种中间件；
applyMiddleware执行后，将所有入参中间件存入一个数组，并且返回一个闭包（闭包的概念不做累述）
闭包接受一个createStore作为入参并且执行后返回下一个闭包。

首先检查参数 action 的类型，如果是函数的话，就执行这个 action 函数，
并把 dispatch, getState, extraArgument(哎克斯拽埃歌门特) 作为参数传递进去，
否则就调用 next 让下一个中间件继续处理 action

好处
	可以进行前后端数据交互
缺点
    将带有数据请求的action和没有带有数据请求的action混在一起了
    缺点解决： 弃用redux-thunk,使用redux-saga
    redux-saga可以将异步action和普通action区别开来

redux-saga可以将异步action和普通action区别开来，控制器与更优雅的异步处理
redux-saga就是用Generator(杰呢瑞特)来处理异步。

redux-saga文档并没有说自己是处理异步的工具，而是说用来处理边际效应（side effects），这里的边际效应你可以理解为程序对外部的操作，比如请求后端，比如操作文件。

redux-saga相当于在Redux原有数据流中多了一层，通过对Action进行监听，从而捕获到监听的Action，然后可以派生一个新的任务对state进行维护（这个看项目本身的需求），通过更改的state驱动View的变更。

redux-saga同样是一个redux中间件，它的定位就是通过集中控制action，起到一个类似于MVC中控制器的效果。
同时它的语法使得复杂异步操作不会像promise那样出现很多then的情况，更容易进行各类测试。

redux是独立的应用状态管理工具。它是可以独立于react之外的。如果我们需要在react当中运用它，那么我们需要手动订阅store的状态变化，来对我们的react组件进行更新。react-reudx这个工具，就帮我们实现了这个功能，我们只需对store进行处理，react组件就会有相应的变化。

Redux的核心由三部分组成：Store, Action, Reducer。
Store: 是个对象，贯穿你整个应用的数据都应该存储在这里。
Action: 是个对象，必须包含type这个属性，reducer将根据这个属性值来对store进行相应的处理。除此之外的属性，就是进行这个操作需要的数据。
Reducer: 是个函数。接受两个参数：要修改的数据(state) 和 action对象。根据action.type来决定采用的操作，对state进行修改，最后返回新的state。

总结
Redux: store, action, reducer
store: getState, dispatch, subscribe
combineReducers (克木拜恩)
createStore
store ️ dispatch ️ action ️ reducer

react-redux:
connect : 将store作为props注入
provider(破外的): 使store在子孙组件的connect中能够获取到

1. UI组件|显示页面??		 				 (破森特逊弄)
   React-Redux 将所有组件分成两大类：UI 组件（presentational component）和容器组件
2. 容器组件|负责管理数据/复杂逻辑?
   UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。
3. Provider组件|容器组件获取state??
   所有的 UI 组件都由用户提供，容器组件则是由 React-Redux 自动生成。也就是说，用户负责视觉层，状态管理则是全部交给它。
4. connect()|UI组件+容器组件
   React-Redux 提供connect方法，用于从 UI 组件生成容器组件。connect的意思，就是将这两种组件连起来。

dva:
	dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。--- 来自官方。
	相比于cra只是多了内置的redux和redux-saga，帮我们处理了数据流这方面的需求而已。如果只是想要达到这个效果的话，直接在cra中增加dva-core的依赖也是可以做到的。

umi:
	是一个可插拔的企业级 react 应用框架。umi和cra都是应用框架，可能相比cra来说umi的功能点更多一些，只能说是功能性的话umi要相对来说更胜一筹

flux 是 react 中的类似于 vuex 的公共状态管理方案，它是 Facebook 官方给出的应用架构，利用数据的单向流动的形式对公共状态进行管理。现已不推荐使用。

flux的组成
	View：视图层
	Action：视图发出的消息
	Dispatcher：派发者，用来接收Action，执行回调函数
	Store：数据层，存放状态，一旦发生改动

flux 在进行数据更新时，会经历以下几步：
	用户与 View 层交互，触发 Action
	Action 使用 dispatcher.dispatch 将Action自己的状态发送给dispatcher
	dispatcher 通过register注册事件，再通过Action传入的类型来触发对应的 Store 回调进行更新
	Store 里进行相应的数据更新，并触发 View 层事件使试图也同步更新
	View层 收到信号进行更新

redux和flux的区别
　　1）redux是flux中的一个实现
　　2）在redux中我们只能定义一个store，在flux中我们可以定义多个
　　3）在redux中，store和dispatch都放到了store，结构更加清晰
　　4）在redux中本身就内置State对象，对仓库的管理更加明确

key是react用于追踪哪些列表被修改、被添加或者被移出的辅助标识。

在开发过程中，我们需要保证某些元素在同级的元素中key是具有唯一性的特性，在react Diff算法中React会借助元素的key值来判断该元素是新创建的还是移动而来的元素，从而减少元素的不必要的重复渲染。此外，我们还需要借助key值来判断元素与本地状态的关联关系，因此我们绝不可忽视转换函数中 Key 的重要性。

react根据key来决定是销毁重新创建组件还是更新组件，原则是：

key相同，组件有所变化，react会只更新组件对应变化的属性。
key不同，组件会销毁之前的组件，将整个组件重新渲染。

render
支持返回这五类:
React elements, 数组, Fragments, Portal, String/numbers, boolean/null, 基础数据类型

Fiber
React Fiber的方法其实很简单——分片。把一个耗时长的任务分成很多小片，每一个小片的运行时间很短，虽然总时间依然很长，但是在每个小片执行完之后，都给其他任务一个执行的机会，这样唯一的线程就不会被独占，其他任务依然有运行的机会。

新的生命周期函数
由于异步渲染的改动，componentWillMount, componentWillReceiveProps,componentWillUpdate 三个函数将被废弃。
由于这是一个很大的改变会影响很多现有的组件，所以需要慢慢的去改。
目前react 16 只是会报warning，在react 17就只能在前面加UNSAFE_的前缀来使用

diff算法
作用: 计算出Virtual DOM中真 正变化的部分，并只针对该部分进行原生DOM操作，而非重新渲染整个页面

getDerivedStateFromProps
static getDerivedStateFromProps(props, state)在调用render方法之前调用，
无论是在初始安装还是后续更新。它应返回一个对象来更新状态，或者返回null以不更新任何内容。

根据props更新state
这个生命周期可用于替代componentWillReceiveProps

getSnapshotBeforeUpdate()
getSnapshotBeforeUpdate(prevProps, prevState)在最近呈现的输出被提交到例如DOM之前调用。它使组件可以在可能更改之前从DOM捕获一些信息（例如滚动位置）。此生命周期返回的任何值都将作为参数传递给componentDidUpdate()。

hooks

lazy、suspense
lazy需要跟Suspence配合使用。
lazy实际上是帮助我们实现代码分割的功能。

由于有些内容，并不一定要在首屏展示，所以这些资源没有必要一开始就要去获取，那么这些资源就可以动态获取。
这样的话，相当于把不需要首屏展示的代码分割出来，减少首屏代码的体积，提升性能。

Suspence 很像Error Boundary，不同的是Error Boundary是用来捕获错误，显示相应的callback组件。而Suspence是用来捕获还没有加载好的组件，并暂停渲染，显示相应的callback。

1. 两个参数及用法
	第一个参数可以是对象或者函数，是更新state
	第二个参数获取最新的state,副作用操作，dom操作事件触发声明，数据获取，第三方库实例化


2. 同步/异步原理
	setState在合成事件和钩子函数中是异步的
	在原生事件和setTimeout中是同步的

setState的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形式了所谓的“异步”，当然可以通过第二个参数 setState(partialState, callback) 中的callback拿到更新后的结果。

setState 的批量更新优化也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和setTimeout 中不会批量更新，在“异步”中如果对同一个值进行多次 setState ， setState 的批量更新策略会对其进行覆盖，取最后一次的执行，如果是同时 setState 多个不同的值，在更新时会对其进行合并批量更新。

1. 合成事件原理
   如果DOM上绑定了过多的事件处理函数，整个页面响应以及内存占用可能都会受到影响。React为了避免这类DOM事件滥用，同时屏蔽底层不同浏览器之间的事件系统差异，实现了一个中间层——SyntheticEvent。

当用户在为onClick添加函数时，React并没有将Click时间绑定在DOM上面。
而是在document处监听所有支持的事件，当事件发生并冒泡至document处时，React将事件内容封装交给中间层SyntheticEvent（负责所有事件合成）
所以当事件触发的时候，对使用统一的分发函数dispatchEvent将指定函数执行。

2. 与原生事件的区别
   React合成事件一套机制：React并不是将click事件直接绑定在dom上面，而是采用事件冒泡的形式冒泡到document上面，然后React将事件封装给正式的函数处理运行和处理。

1.params
<Route path='/path/:name' component={Path}/>
<link to="/path/2">xxx</Link>
this.props.history.push({pathname:"/path/" + name});
读取参数用:this.props.match.params.name
优势:刷新地址栏，参数依然存在
缺点:只能传字符串，并且，如果传的值太多的话，url会变得长而丑陋。

2.query
<Route path='/query' component={Query}/>
<Link to={{ path : ' /query' , query : { name : 'sunny' }}}>
this.props.history.push({pathname:"/query",query: { name : 'sunny' }});
读取参数用: this.props.location.query.name
优势: 传参优雅，传递参数可传对象；
缺点: 刷新地址栏，参数丢失

3.state
<Route path='/sort ' component={Sort}/>
<Link to={{ path : ' /sort ' , state : { name : 'sunny' }}}>
this.props.history.push({pathname:"/sort ",state : { name : 'sunny' }});
读取参数用: this.props.location.query.state
优缺点同query

4.search
<Route path='/web/departManange ' component={DepartManange}/>
<link to="web/departManange?tenantId=12121212">xxx</Link>
this.props.history.push({pathname:"/web/departManange?tenantId" + row.tenantId});
读取参数用: this.props.location.search
优缺点同params

1. 组成部分
   actions->state->computed values->Reactions
2. 工作流
   在mobx中， 数据是通过加 @observable 作为可监测的被观察者， 在view层中， 你可以通过添加@observer 将view作为观察者，对数据进行监测， 如果要触发改变数据，则使用@action, 事实上，你可以直接在view层改变数据， 但这种方式不便监控数据，因此不推荐直接改变数据。 而@computed可以用来计算数据， 也可以是计算多个数据之后返回新的数据， 如果其中数据改变， @computed也会触发改变
3. 优点
   不同于redux的单一数据流， mobx中，你可以同时在各个地方使用同一份state, 也可以在一个页面中使用多个store文件

1.父组件向子组件通信
React数据流动是单向的,父组件向子组件通信也是最常见的;父组件通过props向子组件传递需要的信息

2.子组件向父组件通信
利用回调函数，可以实现子组件向父组件通信：父组件将一个函数作为 props 传递给子组件，子组件调用该回调函数，便可以向父组件通信。

3.非嵌套组件间通信
非嵌套组件，就是没有任何包含关系的组件，包括兄弟组件以及不在同一个父级中的非兄弟组件。对于非嵌套组件，可以采用下面两种方式：
	利用二者共同父组件的 context 对象进行通信
	使用自定义事件的方式
如果采用组件间共同的父级来进行中转，会增加子组件和父组件之间的耦合度，如果组件层次较深的话，找到二者公共的父组件不是一件容易的事，当然还是那句话，也不是不可以。

4.跨组件通信
所谓跨级组件通信，就是父组件向子组件的子组件通信，向更深层的子组件通信。跨级组件通信可以采用下面两种方式：
	中间组件层层传递 props
	使用 context 对象
中间组件层层传递 props:
    如果父组件结构较深，那么中间的每一层组件都要去传递 props，增加了复杂度，并且这些 props 并不是这些中间组件自己所需要的。不过这种方式也是可行的，当组件层次在三层以内可以采用这种方式，当组件嵌套过深时，采用这种方式就需要斟酌了。

使用 context 对象:
	context 相当于一个全局变量，是一个大容器，我们可以把要通信的内容放在这个容器中，这样一来，不管嵌套有多深，都可以随意取用。
使用 context 也很简单，需要满足两个条件：
	上级组件要声明自己支持 context，并提供一个函数来返回相应的 context 对象
	子组件要声明自己需要使用 context

5.redux
首先由view dispatch拦截action，然后执行对应reducer并更新到store中，最终views会根据store数据的改变执行界面的刷新渲染操作。
	1)首先先把redux相关工具安装好
	2)通过创建一个store实例createStore,接收一个rootReducer和中间件执行函数
	3)创建分块的数据rootReducer,通过combineReducers打造rootReducer,里面放分块的数据
	4)在组件中通过高阶组件connect函数,接收store里的数据,把ActionCreators里的方法绑定到组件身上,
	  并且可以发送动作action给reducer
	5)在reductor中根据action中的type动作类型,判断动作修改数据

（实现方式，需要的依赖）懒加载

1、vue异步组件技术
	vue-router配置路由，使用vue的异步组件技术，可以实现按需加载。
	但是，这种情况下一个组件生成一个js文件。

2.import()

3.webpack提供的require.ensure()

4.第三方库比如react-loadable

5.lazyload-loader

componentWillUnmount

定义state  flag:false   作为开关   定义方法if判断是否为1,改变state    flag:true

将方法绑定组件上  可以用三目或者短路原则&&控制组件的显示隐藏

onChange输入框内容改变时候回调    value输入的内容   defaultValue输入框默认值

input默认值在input中绑定value    定义一个state   和input双向数据绑定    做成受控组件    定义一个事件   改变的时候获取e.target.value

为什么使用hook
	不必写class组件就可以用state和其他的React特性；
	自定义hook  实现组件的复用    用useEffects代替生命周期方法   代码更加简洁

出现原因3点
    为了让函数组件拥有类组件的功能。
    	原因
    	比如useState、useReducer  状态定义
    	比如useEffect、useLayoutEffect 生命周期功能
    	比如useRef useImperativeHandle 替代了类组件的 Ref
    为了优化函数组件，比如useMemo、useCallback
	函数组件添加新的方法,如
    	useDebugValue显示自定义hook，自己添加hook类名
    	自定义hooks来复用状态

优点4点
1.让函数组件可以定义状态
	让函数组件可以使用生命周期、监听数据
	让函数组件可以有Ref的功能（父组件获取子组件）
	优化函数组件 useMemo、useCallback
	自定义hooks来复用状态,
	代码量比类组件更少，更清爽。
2.使用规则2点
	不要在循环，条件或嵌套函数中调用 Hook
	只在函数组件中使用 Hooks
3.常用Hook
	useState:
		定义状态 修改状态
		返回一个数组，其中第一项是状态值，第二项是一个更新状态的函数。
		状态一旦改变，React 就会重新渲染组件，变量获取新的状态值。
	useEffect:
		相当于componentDidMount,componentDidUpdate,componentWillUnmount三个钩子的组合
		参数一：执行的回调函数；
		参数二：该useEffect在哪些state发生变化时，才重新执行；
		第二个参数是空数组的时候执行一次,相当于componentDidMount,不加的时候执行多次
		第二个参数的作用就是 仅在更改时更新，实现性能的优化
		DOM操作 第三方实例化可以做 清除无用实例和事件
		useEffect传入的回调函数本身可以有一个返回值，
		这个返回值是另外一个回调函数，来模拟componentWillUnmount
	useLayoutEffect:
		布局副作用
			useEffect 在浏览器渲染完成后执行
			useLayoutEffect 在浏览器渲染前执行
		useLayoutEffect 里的任务最好影响了 Layout
		为了用户体验，优先使用 useEffect (优先渲染)
	useContext:
		跨组件通信 createContext创建一个组件 <numContext.Provider value={num}>
	useDebugValue:
		自定义 hook 的标签 方便调试台查看
	useMemo:
		记忆组件 动态缓存 新值和旧值一样,不重新渲染页面,优化作用,类似于shouldComponentUpdate     	useCallBack:
		作用和 useMemo 一样
		useMemo和useCallback都会在组件第一次渲染的时候执行，之后会在其依赖的变量发生改变时再次执行
		并且这两个hooks都返回缓存的值，useMemo返回缓存的变量，useCallback返回缓存的函数。
		useCallback(x => console.log(x), [m]) 等价于
		useMemo( () => x => console.log(x), [m])
	useRef:
		返回一个可变的ref对象
	useImperativeHandle:
		将组件中的方法放到外面使用
		搭配React.forwardRef

5.自定义hook
   类似于高阶组件
   高阶组件返回的一个类组件，而自定义Hook可以返回任何东西
   高阶组件必须传递一个组件作为参数，而自定义Hook不需要
   function useFriendStatus(friendID) {
      const [isOnline, setIsOnline] = useState(null);
      // 在开发者工具中的这个 Hook 旁边显示标签
      // e.g. "FriendStatus: Online"
      useDebugValue(isOnline ? 'Online' : 'Offline');
      return isOnline;
   }
可以理解为数据的操作都在hook里进行，而外部只关心自己想要的。我只要数据列表，获取产品钩子（可能并不需要，可通过参数变更从而触发重新获取数据）、删除产品钩子
为了封装方法：节流；