思维导图 js插件_想自学JS吗?想提升JS底层原理吗?76张脑图带你彻底搞懂原生JS...

fb3a6c087f4fe671706e669ed00fc56c.png

本篇内容适用于:初学前端;及工作时间不久想回顾基础的各位伙伴;
文章主要由图片组成,看起来可能会不太方便,适合保存下来单张查看;
既然来了,就看看在走吧,总会有些收获的;
一、前端发展史

a0ab75e8ad035b8bd2bb921c0391446a.png


二、JS基础入门
1、认识浏览器

6d44c3319c89cbbadfa9e0c926ab6e9d.png


2、JS基础知识
初识JS-基础中的基础

14ee0d256b9d2cdb763200177315b856.png


3、三大输出方式
JS中的三大类输出方式

a1f8b1defc6703d8948acd6e8ea0959c.png


4、数据类型基础知识
number 数据类型基础知识

38418fe8e53980582f67f13859077a24.png


string 数据类型基础知识

8919744a63455d8991e503612a331c7e.png


boolean 数据类型基础知识

2307863a93ab38b1bd03e8354faedc6d.png


Object 数据类型基础知识
JS中的数据类型object基础

0012f92c644c79b89ab89bebb57609d0.png


条件判断里的相互转换规则

b9b101aebdb6901f1689101d2c5c1137.png


5、数据类型之间的区别(堆栈内存)
数据类型之间的区别(堆内存Heap VS 栈内存Stack)

26bc56cf9110b3279876b7b450cdb9e4.png


6、JS中三种常见的判断
JS中三种常见的判断

c3d990f3a8fdd6e50fdc64f2c4c01c25.png


7、JS中的for循环
JS循环——for循环

a7464ab37e59d90a321d3f9aa66444fd.png


8、function的基础知识
JS中function的基础知识

87cdd4c235d2e2a56c28e83cf5a465ad.png


9、数组的基础知识

a857f80a979be72670c5c6f98b16439c.png


10、数组中常用的方法
数组中的16种常用方法

acba473430baaed87f168ee3c2d6ed5c.png


数组中常用的方法【补充reduce、filter、flat...】|内附思维导图

f0fb6f35c1ee333e1a1dd8c8723f885f.png


11、Math 中的常用方法
Math中常用的9种方法

1d95fb0716a47f577bc0fb7e00531af8.png


12、字符串中常用方法
字符串中的12种常用方法

fdf9d52dfb8576ca8e82e28cbc776200.png


三、常用方法
13、数组去重的三种方法
JS中数组去重的三种方法

522b8919e6e22618ae22ae8b7f59ea1e.png


14、时间格式化的三种方法
JS中时间格式化的三种方法

801ccf6f0b5097faa69efdacf93edc17.png


15、URL参数处理的三种方法
JS中URL参数处理的三种方法

f46945e00df6721af7d0f3147d5b8d47.png


16、获取随机验证码

11c057099016c29d31fdab11e98e1fa1.png


17、DOM操作汇总
获取DOM标签的方式
DOM操作之——获取DOM标签的9种方式

c9a2d842eccf2a661d3e2d8e756740f3.png


获取DOM节点的方式
DOM操作之——DOM节点类型及属性

91efb3bfd797657bfbdbac6c1f2c3068.png


DOM元素的增删改
DOM操作之——元素的增删改、样式修改、插入内容

1476ad2d4b2e389571dbe76d7e2bed03.png


操作DOM元素样式

3a058432715fcd9e88872f40a74be93d.png


四、JS进阶提升
18、变量提升
JS中的变量提升机制

f5229d652edec8665ba09b323d9aec6e.png


19、带 var 和 不带 var 的区别
在全局/私有上下文中:带VAR和不带VAR的区别

9c7d3b161d6c25829fe94789e0fb1c4b.png


20、作用域和作用域链查找机制
作用域和作用域链查找机制|内附思维导图

edfe2a24128f1c9693c346e08d3a7c42.png


21、堆栈内存的释放
JS中堆栈内存的释放问题

3c119675b98a6f9fcb593d4de905903f.png


22、闭包的机制
JS中的闭包机制

2df44f97d01859b42d2f229e2935ee6b.png


23、let 和 var 的区别
ES3 定义变量 和 ES6 定义变量的区别

9514459a48426130397009ae3edb0ed1.png


24、单例/工厂设计模式
JS中的单例/工厂设计模式

25318e4322ec4dcc12ad6e3926763d10.png


25、面向对象理论基础
JS中的面向对象OOP理论基础

cc68ea85eb6511dea3e2ab332f3ee1f7.png


26、构造函数创建自定义类
构造函数创建自定义类

cfe8dab712661a91361833b0fa5a66bc.png


27、原型和原型链
JS中的原型和原型链

a8e25d13f4a25d48e231e0c8b8ba2942.png


28、给原型扩展属性和方法

9c336b103df0207d00dbaa8d192bb6a0.png


29、THIS 问题
JS中THIS相关问题梳理

baca37aa51fde45a60d40f5e078544e0.png


30、call/apply/bind

4775a75df799d94f5b176efc5311968e.png


31、获取数组最大/小值的三种方法
获取数组中最大值/最小值的三种基础方法

6c9a4cc138eb3830783219dc97f67880.png


32、类数组转数组的五种方法

5cbee620dedf62dc8d3abf7f9ff90834.png


33、ES6语法
ES6箭头函数和剩余拓展运算符

c508146d734a22f69f5e2bf4d73253d9.png


ES6 解构赋值

5ae3abdea340b4368b9cb5da8e227a42.png


ES6 class创建类

50fb23f09c418a0cfaab30d9dbdd3285.png


34、多种继承方式
JS中的多种继承方式

01d8606578b04a587da0aa05d0b4fef0.png


35、检测数据类型的四种方法
JS中数据类型检测四种方式的优缺点

5b4cff532a342736c0e9a34e5c9c3798.png

692640ca517dbb556ee326fb26a3dbc7.png


36、正则表达式
JS中的正则表达式&&全面梳理|内附思维导图
正则表达式基础

f1b4c95a16d02d87ac6df62f3e0d8e40.png


正则的匹配和捕获

a5bd7267287d4c2692c0c36b82ee94ec.png


正则相关知识

fe20d7474261b02134418f252322fdaf.png


37、JS中的盒子模型
JS中的盒子模型

0ff71584b9b2dcde220eccf68a361151.png


38、JS中CSS样式的获取方式

6d66a334bb374f47a41cf91fa73f3b7c.png


39、严格模式和非严格模式的区别
非严格模式 严格模式的区别|附思维导图

7e1e92c282e641032bbadcb90087f553.png


40、动画处理——CSS3动画

8d3021d8ef96c5b8165cabf4a4f83b67.png


41、动画处理——JS动画

06a92c21a5fd27cc01f1e12001efe835.png


42、插件封装思想
插件封装|封装一个属于自己的轮播图插件——左右切换版

791b72ca7ff5275cf1f950456d35b1a1.png


43、回调函数相关知识点

7faee9d25012b668c5798a8e2d63ca2e.png


44、深浅克隆和深浅比较
深克隆 VS 浅克隆|深比较 VS 浅比较|回调函数

2e675e1154ce10d0c71e190e26313e98.png


45、事件
事件及事件绑定 && 事件对象及事件传播——基础知识(脑图梳理)
常用的事件行为

2146768385c25b0c8a3bba797f0c6e79.png


事件对象

a7f0d2de1216f7e164eed2063f216ed6.png


事件传播机制

d85820c36d3991445f9369638fa3c6ee.png


DOM0和DOM2

fa25ee66d22fb001443fb6f55fa68fd6.png


mouseover 和 mouseenter

af8ab306a4fc30df05276e3e151df941.png


事件委托

23c03a8e9d8b62f77519e0bd8fa0b120.png


46、柯里化函数编程思想

294359b4048ae9f77a2421462a237d17.png


47、promise基础

8ea09576084285836733317c03f4201d.png


48、promise基础之then

d93a7a19d4978a96e6d4377711d33441.png


五、HTTP基础篇
49、客户端和服务器交互基础

1f114d1a31687c89b5f97d0513b3dae8.png


50、URL解析

fada9379c2dc8ddfbcbc5b3f63f12637.png


51、HTTP请求

aa7f5cc08744d5e7b8daece997cd8912.png


52、浏览器渲染页面的主体流程

6de6a0e233042f4edd0baff543d57387.png


53、回流和重绘

83c9b1073e7608f24abf577b6babbe00.png


54、同步异步

5c5202c6fbfd6b093393c9832dccce63.png


55、AJAX的串行和并行

1475ab167371556ed523f47258ec7aff.png


56、AJAX基础知识

66584159577e2917f65196d9edc06225.png


57、AJAX中的全局刷新和局部刷新

43f8a152850a7ff7acbfa564f79b28b2.png


好了,基础知识就在这里告一段落了,上文算是笔者对目前所文章的一个大总结,也是每一个前端应该掌握的最基础的知识,当然这只是基础知识,码农码农必不可少的必然是多练习,多敲代码,希望这条路上的我们都能轻轻松松的得到自己想要的,加油哦各位!!!
文章还有很多不足,内容也不是很全面,希望能够得到各位大佬的指点原图链接地址:https://gitee.com/yahui2020/javascritp

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值