javaScript 思维导图模板_ProcessOn思维导图、流程图

数组和字符串的方法

数组

concat

copyWithin

entries

every

some

fill

filter

find

findIndex

indexOf

lastIndexOf

includes

forEach

map

join

keys

pop

push

unshift

reduce

reduceRight

reverse

shift

slice

sort

splice

toLocaleString

flat(扁平化)

字符串

for of和for in

for of

1.遍历自己定义的类数组或者对象会报错

2.原型上必须有Symbol.iterator属性，就是一个迭代器

3.数组 Array Map Set String arguments对象 Nodelist对象, 只有这些对象上有迭代器属性

for in

1.index索引为字符串型数字，不能直接进行几何运算

2.遍历顺序有可能不是按照实际数组的内部顺序

使用for in会遍历数组所有的可枚举属性，包括原型。例如上栗的原型方法method和name属性

区别

底层原理

堆栈

浏览器渲染原理

1.css渲染

link

@import

style内嵌

2.js渲染

1.默认的script标签

2.默认的script src标签

3.defer和async

3.dom渲染

回流

重绘

回流和重绘的优化

扩展：并发

js的运算顺序

成员访问优先级是大于赋值的

连等

var a = b =1,这个是先创建1这个常量，然后b=1,然后a=1，或者说a=b，其实结果都是一样的

var a =1,b=1;这个其实就是两个var，var a =1;var b=1;

优先级mdn

基于http网络协议层的优化（输入URL到看到页面，中间经历的环节）

1.URL解析

2.缓存检测

1.强缓存

2.协商缓存

3.DNS解析

4.TCP三次握手

5.数据传输，基于传输协议

6.TCP四次挥手：断开TCP连接通道

性能优化汇总总结

1.优化总结

2.http2.0

检测数据类型的四种方式

1.typeof

2.instanceof

3.constructor

4.Object.prototype.toString.call

事件

事件绑定

DOM0

DOM2

事件对象

阻止事件默认行为

href="javascript:;"

绑定事件的时候通过事件对象阻止

返回false

preventDefault

事件的传播机制(顺序执行)

1.捕获阶段

2.目标阶段

3.冒泡传播

阻止冒泡传播，ev.stopPropagation()

DOM2的事件绑定方法，第三个参数传true，就是说明在捕获阶段执行，用到的情况几乎没有，DOM0只能在目标阶段和冒泡阶段执行

图解

事件委托(事件代理)

onmouseover和onmouseenter的区别

深浅克隆

浅克隆

对象的浅克隆

循环遍历

展开运算符

Object.assign

数组的浅克隆

1.基于slice/concat...这些办法也可以实现

2.循环 forEach/map

3.基于展开运算符或者Object.assign

深克隆

JSON

自己实现深克隆

跨域（非同源策略）

什么是跨域

产生的原因

1.前后端分离，不在一个服务器部署

2.为了保证服务器合理利用，有图片服务器，视频服务器，前端服务器，后端服务器

3.项目太大，需要子域名，比如v.qq.com lol.qq.com，lol官网调用腾讯视频的视频

解决的方法

1.最早的方案，在开发的时候，后端的代码也放到前端的电脑上，而且搭建后的环境，之后用wamp修改Host文件实现

2.其他的方案，存在很短的时间

1.window.name

2.postMessage

3.jsonp

4.CORS跨域资源共享

5.webapck的proxy

6.nginx反向代理，真实生产环境用的

函数

非严格模式函数参数是可以映射的

函数具名化

函数防抖

函数节流

jquery

1.jquery的加载方式，暴露api，看看是否有Window，然后选择是commenjs方式还是esmoudle方式

2.jquery的使用时创建实例的方法，工厂模式

1.平时都是用new 创建实例，但是jquery直接$()就可以

2.其实使用的是创造一个干爹,内部new的是一个init的函数，里面没啥东西，但是把他的原型prototype指向jquery的prototype，所以就想一个干爹

3.平时$().each啥的函数都是在jquery的prototype上得

4.平时$.ajax的东西其实用的jquery的静态属性方法

3.jquery里面常用的数据类型检测的源码

4.jquery选择器

1.$() -> 返回的都是JQ类的实例(JQ对象) 「格式：空实例对象、类数组集合...」

2.[selector] 选择器支持的格式

3.把JQ对象(一般类数组集合) 转换为原生DOM对象：可以调用浏览器提供的内置的属性和方法

4.优化点，如果不想链式调用，嫌不好看，可以这样

选择器实现的源码

5.each

Iterator迭代器和Generator生成器

Iterator

含义

拥有next方法用于依次遍历数据结构的成员

每一次遍历返回的结果是一个对象 {done:false,value:xxx}

拥有Symbol.iterator属性的数据结构(值)，也就是可以直接for of的

数组

部分类数组：arguments/NodeList/HTMLCollection...

String

Set

map

generator object

Iterator这个内置对象默认不具备Symbol.iterator，属于不可被遍历的数据结构

Symbol.iterator和Iterator内置类的实现源码

Generator

他不能被new，否则会报错，函数运行，就返回一个Generator实例

yield

每一次执行next，遇到yield会暂停函数的执行，value -> yield后面的值

return方法

执行next还可以传递值「第一次没必要，其余每次传递的值，都是给上一次yield的处理结果

yield如果返回一个Generator，想让他运行就加一个*

生成器函数虽然是个实例，但是其中的this不是其实例，而是window/undefined

数据类型

引用数据类型(值类型)

Object

对象{}

数组

正则/^$/

日期对象

Math

实例对象

function

基本数据类型

Number

NaN

String

boolean

null

undefined

symbol唯一值(es6)

数据类型转换，中间的几个步骤

其它的数据类型转换为number类型

Number(隐式转换)

Number('null') =0

Number(false) == 0

Number('12px') = NaN

parseInt（显式）

二进制的扩展

把其它进制转换为10进制

各种进制的样式

带小数点转换为10进制

0.1+0.2!=0.3

面向对象

对象的细分

自定义对象

new一个函数

自己写一个new

object.create()，创建一个对象，让其原型链指向所传的属性，但是创建的对象没有constructer，也可以说是纯粹的对象

原型和原型链

完整图解

建议看笔记几道题

简易图解

原型重构

将原型对象直接赋值一个对象会造成的影响

1.丢失了constructor

2.原始内置原型对象的属性和方法也会丢失

解决方案

object.assign()

图解

用的很少，但也有这样用的

用的很少，但是有面试题

Function类和Object类的关系

万物接对象

Function.prototype === Function.__proto__ ===Object.__proto__

私有属性和公有属性的检测方法

hasOwnProperty检测是否为私有属性

hasPubProperty检测是否为公有属性（自己定义的，一层层递归向下找）

getPrototypeOf获取原型上的属性

new fun的优先级小于 new fun(),new fun()的优先级等于对象获取属性的优先级

创建基本数据类型值和引用数据类型值的时候是不同的

es6创建类和es5创建类

es6创建的fn只能被new，直接执行fn()会报错，图片里面有

JS中THIS的五种情况梳理

1.事件行为

2.普通函数执行

拓展hasOwnProperty和in

3.构造函数执行

4.箭头函数的this

图解

5.call/apply/bind可以改变函数中this的指向（强行改变）

js继承的4种方式

1.原型继承

2.call继承

3.寄生组合继承

4.es6类继承

es6

结构赋值

...运算符

Arrray

fill

from

of

entries

flat

Object

数组去重

Set

Map

同步异步

异步场景（浏览器端）

定时器

JS中的事件绑定

Ajax/Fetch请求的发送（HTTP事务）

Promise设计模式管控异步编程的（包括：async/await...）

异步操作的运行机制

宏任务

定时器

事件绑定

ajax等http请求

微任务

promise(不是new Promise)

await

genertor

题

ajax的同步异步

AJAX的状态

异步过程

XHR.OPEN第三个参数控制的同步异步,true为异步

变量提升

如果出现if条件判断的话

如果出现事件绑定

作用域块的变量提升

作用域块变量提升详解图

形参赋值的变量提升

js打包模式

umd

主要是支持commonjs（node）后端和 amd规范（require.js定义的规范），常用工具打包是webpack，这样打包umd之后是直接在项目里面跑完之后在浏览器运行的

esm

这个打包之后是为es6准备，可以直接import啥的

分组件打包

这个就是打包成按需加载那种，具体得看项目代码

gulp

一般都是用来打包css样式，现在用的很少了

Promise

实例结构

promise.reject()返回一个错误状态的实例

promise.resolve()返回一个正确状态的实例

同步异步（then）

无定时器情况下，resolve和reject只是改变内部状态，改变是同步的

无定时器情况下，then里面的回调函数不会立即执行，而且放到eventqueue的微任务队列里面，等主进程结束再执行，所以是异步

有定时器情况下，先将定时器放到宏任务队列，then的时候，状态还是pending，定时器还没执行呢，所以不会执行then里面的回调函数，只是先存起来。等定时器结束之后，里面的resolve或者reject执行的时候，先同步状态，然后再讲then里的回调放到微任务队列，执行完定时器里面的其他主进程任务后，再执行微任务的回调函数

所以，可以说，promise是同步的（改变内部状态），只不过then的时候，或者resolve和reject执行的时候会出现异步

链式then

1.首先then这个方法会返回一个新的promise实例

2.不管执行的then里面失败的回调还是成功的回调，只要运行回调函数时不报错

1.运行回调函数时返回一个新的promise，那么这个新的promise就是下一个then运行的promise

2.运行回调返回一个值，就是说return一个新的值，那么下一个then就是运行成功的回调，参数就是return的值，如果没return值，那下一个then的成功回调的参数就是undefined

3.运行任何一个函数时报错了，下一个then就会运行失败的回调，参数是报错的原因

面试题（看不太懂），谁先知道可执行，就谁先执行

穿透性

1.如果then的时候成功回调是个null，那么下一个then的成功会掉就是上上个的成功回调返回的值

2.如果then是失败回调是个null，那么下一个then的失败回调就是上上个失败回调返回的值

3.其实原理 then(null /!*result=>result*!/ , null /!* reason=>Promise.reject(reason) *!/ )

catch

1.catch其实就是只处理状态为失败下做的事情

2.实现原理，内部其实就是运行了一个then，返回了一个新的promise，但是这个promise实例，但是这个实例then的时候，成功回调是null，直接穿透了，用上上个then的，所以新的promise实例只有一个参数，就是失败的回调，看备注代码

3.使用，一般项目使用，最后都加个catch

4.其实promise在new时候的，内部也做了一个 try catch的操作，所以只要代码报错了，catch方法就能捕获到

all

race

回调地狱指的就是那种不用promise然后包了很多次success的ajax请求

async（控制函数返回promise实例）

1.函数内部执行报错，则返回失败的promise实例，值是失败的原因

2.自己返回一个promise，以自己返回的为主

3.如果函数内部做了异常捕获，则还是成功态

4.返回一个值，就是返回的一个成功的promise实例，参数为传的值

await

1.面应该放置一个promise实例「我们书写的不是，浏览器也会把其变为promise实例」，await中断函数体中，其下面的代码执行「await表达式会暂停整个async函数的执行进程并出让其控制权」；只有等待await后面的promise实例是成功态之后，才会把之前暂停的代码继续执行，如果后面的promise实例是失败的，则下面的代码就不在执行了；

2.函数体中遇到await，后面代码该咋地咋地，但是下面的代码会暂停执行「把他们当做一个任务，放置在EventQueue的微任务队列中」

3.await是异步的微任务