前端技能思维导图模板_ProcessOn思维导图、流程图

js

类型转换

数据类型

8个基本数据类型（存放在栈中）

一个引用类型（值存放在堆中，指针存在栈中）

强制转换

隐式转换

面试题

闭包

能够读取其他函数内部的函数

作用(本质)

正常函数在执行完毕后会被垃圾回收掉， 但是闭包可以让作用域里的变量，在函数执行完毕后不被垃圾回收

节流防抖

防抖（debounce 鼠标滚轮事件）

对于频繁执行的一个事件，给它限定一个时间后再生效

节流（throttle 用户疯狂点击或滚动）

对于持续触发的函数，保证一段时间内只触发一次

防抖和节流能有效减少浏览器引擎的损耗，防止出现页面堵塞卡顿现象

如何实现一个深拷贝（解决循环引用问题）

原型，原型链，构造函数，实例对象

proto与prototype的区别

rxjs

RxJS：冷热模式的比较

安全

关于a标签target为_blank时，要加上rel="noopener noreferrer"

计算机网络

https（HTTP+SSL(TLS)）加密（握手）的过程

条件

首先服务器拥有数字证书签发机构(CA)颁发的数字证书，一般为收费。 CA颁发给我们的网站管理员，我们的管理员将这个数字证书放到我们的服务器上。

流程

1、服务器将携带的公钥向数字证书机构申请证书。 2、数字证书机构用自己的私钥对公钥签名颁发证书，并返回给服务器。 3、服务器将申请携带公钥的证书分发给客服端。 4、客户端验证证书，证书机构通过验证，或者用户接受不受信任的证书(非权威机构颁发的证书)。获取到公钥。 到这一步，在证书保证下服务器拥有私钥，客户端拥有公钥，可进行非对称性加密。 5、使用公钥加密报文发送给服务器，其中携带随机串。其中的随机串用户传输数据时进行对称加密 6、服务器使用私钥解密。获取报文信息及随机串。 7、解密后服务器发送握手消息给客户端。 8、客户端接受握手消息，握手结束，双方确定加密算法(使用随机串确定的对称性加密)，开始传输。 注意：确认加密算法的过程使用的是非对称性加密。 数据传输过程使用对称性加密

tcp与http

http2的新特性

HTTP与HTTPS的区别

HTTP

直接通过明文在浏览器和服务器之间传递信息

传统的HTTP报文是直接将报文信息传输到TCP然后TCP再通过TCP套接字发送给目的主机上

HTTPS

采用 对称加密 和 非对称加密 结合的方式来保护浏览器和服务端之间的通信安全 <ul><li>对称加密算法加密数据+非对称加密算法交换密钥+数字证书验证身份=安全</li></ul>

HTTPS是HTTP报文直接将报文信息传输给SSL套接字进行加密，SSL加密后将加密后的报文发送给TCP套接字，然后TCP套接字再将加密后的报文发送给目的主机，目的主机将通过TCP套接字获取加密后的报文给SSL套接字，SSL解密后交给对应进程

构建及打包

构建

gulp

侧重于前端开发过程的控制管理（像是流水线）

通过给gulp配置不通的task来构建整个前端开发流程。 （gulp.task()方法，比如启动server、sass/less预编译、文件的合并压缩等等）来让gulp实现不同的功能。

配置服务器，实现自动发布

模块打包

webpack

优化打包大小

Tree Shaking

提升打包速度

动态导入

提取公共模块

思想是“万物皆为模块”，通过loader（加载器）和plugins（插件）对资源进行处理

缓存

http缓存

304/200

本地缓存

cookie、session、localStorage、sessionStorage的不同

ngrx-store/redux/vuex

框架

angular

核心模块

DI依赖注入

数据绑定

ng-content,ng-template,ng-container

form源码

纯管道和非纯管道

@Pipe({name:'pipeName',pure:isPurePipe})

纯管道：只有输入值发生纯变更时才执行

非纯管道：只在每个组件的变更检测周期执行

自定义管道默认是非纯函数

变更检测

ChangeDetectionStrategy

onPush检测机制

告诉angular在执行检测时跳过当前组件内部的检测。 只有当组件的input输入值（基本类型）有变化或内部有事件event输出的时候， 或者组件再次通知angular的检测机制来更新组件(ChangeDetectorRef.markForCheck)， 但是如果input的值是引用类型也不会触发检测。

default

某些只是子组件的数据变化，angular会从父组件开始向下检测， 一旦检测到有数据变化就重新渲染页面，虽然很方便，但是如果组件很多非常耗费性能， 所以有了onpush优化

diff算法

装饰器

vue

react

生命周期里不能写if判断

useState参数第二个为[]

pipecook 

nextjs

flutter

ts

type:可以声明联合类型

class：编译之后依然存在

interface：编译之后为空

范型T：可以理解为any

css

BFC

概念：

块级格式化上下文，可以理解为一块独立的区域，是web页面中盒子模型的CSS渲染模式

布局规则：

1.BFC内部的子元素，在垂直方向，边距会发生重叠

2.BFC在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然

3.BFC区域不与旁边的float box区域重叠。（可以用来清楚浮动带来的影响）

4.计算BFC的高度时，浮动的子元素也参与计算

如何生成BFC

1.overflow:不为visible,可以是hidden,auto;

2.浮动中：float的属性值不为none。只要设置了浮动，当前元素就创建了BFC

3.定位中：只要position的值不是static或者relative即可，可以是absolute或者fixed，就生成了一个BFC

4.display为inline-block,table-cell,yable-caption,flex,inline-flex

应用

1.让margin不再折叠

常规文档流，两个兄弟盒子直接的间距是以较大的那个margin为准，如何让其margin等于两个盒子的margin和呢？？  解决：让其中一个盒子处于BFC中。

2.BFC区域不与float区域重叠

3.防止文字环绕着浮动的盒子

4.清除浮动

ES6,ES7,ES8

ES6/ES2015

变量

var,定义全局变量（ES5,ES6）

可以重复声明，没有块级作用域，不能限制

let,定义局部变量

let和const作用：1.支持块级作用域；2.禁止重复声明；3.控制修改

const,定义常量

我们要习惯用 let 声明，减少var声明带来的污染全局空间

环境（为了兼容ES5）

写es6语法的js代码，通过Babel将ES6转换为ES5

函数扩展

箭头函数

传统：funtion fn1(a,b){return a+b;}  ES6:var fn2=(a,b)=>a+b;

this指向

普通函数this指向

如果是函数调用，this指向调用者

作为对象的方法调用,this指向对象

作为构造函数调用，this指向新对象

严格模式下（设置了'use strict'），this为undefined

当使用call，apply，bind（ES5新增）绑定的，this指向绑定对象，指向为空时，默认调用全局对象

call,bind,apply的区别？？

call和apply的第一个参数都是this,call后面跟一堆参数列表，而apply只有this,和一个数组， bind和call都是跟着一堆参数列表，区别在于bind返回的是一个改变了上下文this的函数，不会立即执行 bind实现函数柯里化如图：

箭头函数this指向

默认参数值

传统： function fn(param) { let p = param || 'hello'; console.log(p); } ES6: function fn(param = 'hello') { console.log(param); }

提醒⏰：默认值的后面不能有没有默认值的变量 比如：(a,b,c)三个参数，如果给b设置了默认值，那么c必须也要有默认值

扩展运算符

扩展运算符与rest运算符的区别？？？

对象扩展运算符

rest运算符

当传入的参数不确定时，使用rest运算符

模块化

历程：commonJS、AMD规范（RequireJS）、CMD规范（SeaJS）；import & export

promise

Promise

概述：

Promise对象：代表了未来某个将要发生的事件（通常是一个异步操作） promise对象可以将异步操作以同步的流程表达出来，解决了回掉地狱的问题（避免层层嵌套的回掉函数）

promise对象的三个状态

pending

fullfilled

rejected

当面试关问你Promise的时候，他究竟想听到什么？

promise与observable的区别是什么？如何使用?

异常处理

1.使用reject

2.使用new Error()

3.reject一个new Error()

Symbol

Symbol是函数，但不是构造函数

创建一个Symbol数据类型： let s=Symbol(); typeof s;//symbol s;//Symbol()

for in,for of 遍历时不会遍历Symbol属性

将Symbol作为对象属性值时，不能用点.,应该用属性选择器的方式:obj[mySymbol]='hello';

Symbol()是函数，所以可以传参，通过参数的不同作为标识

可以用来定义常量：const MY_NAME=Sybol('my_name');

字符串，数组，对象的扩展

字符串扩展

1.includes(str); //是否以包含某个字符串 2.startsWith(str);//是否以指定字符串开头 3.endsWith(str);//是否以指定字符串结尾 4.repeat(count);//重复指定次数

数字扩展

1.Number.isFinite(i):判断是否为有限大的数; 2.Number.isNaN(i):判断是否为NaN; 3.Number.isInteger(i); 4.Number.parseInt(str)：将字符串转换为对应的数值 5.Math.trunc(i):去除小数部分；

数组扩展

1.Array.from(伪数组/可遍历的对象);将伪数组转换为真数组 2.Array.of(v1,v2,v3)；将一系列值转换为数组 3.find(function(item,index,arr){return true})；找出第一个满足条件（返回true）的元素 4.findIndex(function(item,index,arr){return true});找出第一个满足条件（返回true）的元素的index

对象扩展

Object.is(v1,v2);判断两个数组是否完全相等，底层是通过字符串来判断的

Object.assign(target,source1,source2...);将源对象的属性追加到目标对象上，如果对象里属性名相同，会被覆盖（将多个对象合并为一个新对象）；

_proto_属性：对象关联

优势

增加了很多功能上的不足：常量，作用域，对象代理，异步处理，类，继承等

使用babel语法转换器，支持低端浏览器

流行的库基本都是基于 ES6 构建。 React 默认使用 ES6 标准开发

ES7/ES2016

Array.prototype.includes()

查找数组里是否存在某值，返回true/false

includes与es6的indexof 区别

返回值不同

includes直接返回布尔，indexof返回下标或者-1

NaN的处理

都采用===比较，但是indexof,对NaN的处理是：NaN!==NaN

求幂运算符

基本用法

可与+=一起使用

Reflect

编写校验

Proxy

ES8/ES2017

async await

概念：同步流程解决异步操作，异步函数，         async可支持返回Promise和同步的值（return Promise.resolve(value)）         await用于一个异步操作之前，表示要“等待”这个异步操作的返回值, await也可以用于一个同步的值🌰

本质：Generator语法糖

语法：普通函数前面加上async就成了async函数

特点： 1.不需要像Generator去调用next方法，遇到await等待，当前的异步操作完成就往下执行； 2.async返回的总是Promise对象，可以用then方法进行下一步操作； 3.async取代Generator函数的✳️*，await取代Generator的yield; 4.语意上更为明确，使用简单，暂时无副作用；

使用方式

1.函数声明： async function foo() {} 2.函数表达式： const foo = async function() {} 3.对象的方式： let obj = { async foo() {} } 4.箭头函数： const foo = async () => {}

异常处理

new Error()

与promise链和Generate的对比

async函数中可以包含多个异步操作, 同Promise链一样，有一个promise被reject，后面的将不再执行，立马进入.catch()中；

Object.entries()

Object.values()

字符串填充

Object.getOwnPropertyDescriptors()

函数参数支持尾部逗号

修饰器Decorator