js输出ajax_想自学JS吗?想提升JS底层原理吗?76张脑图带你彻底搞懂原生JS

本篇内容适用于:初学前端;及工作时间不久想回顾基础的各位伙伴;

文章主要由图片组成,看起来可能会不太方便,适合保存下来单张查看;

既然来了,就看看在走吧,总会有些收获的;

一、前端发展史

6f7172f384df92bb72f112ae7e49acd3.png

二、JS基础入门

1、认识浏览器

4af76539b4241abfefe5724cb6564afa.png

2、JS基础知识

初识JS-基础中的基础

320d6d67d605dc5b5449b1f96c561a60.png

3、三大输出方式

JS中的三大类输出方式

e4a10b1f34c79b5d5a5db48c768070b1.png

4、数据类型基础知识

number 数据类型基础知识

69305875f5a9b3190c3ed072de6a78a5.png

string 数据类型基础知识

5a9c228f4249635edfee9b632b95248e.png

boolean 数据类型基础知识

5234184a867ad4fabe88957c93b03584.png

Object 数据类型基础知识

JS中的数据类型object基础

e17eaf92c144621520b1405d62b9304a.png

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

ebd90f37da13718d44151fc0787a02b1.png

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

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

ac42a1f9a23f7f9e561d2abd5da15d54.png

6、JS中三种常见的判断

JS中三种常见的判断

6191b33e4de2fa7419a2365f23603a17.png

7、JS中的for循环

JS循环——for循环

c195e05851f94dbebc70657217502cff.png

8、function的基础知识

JS中function的基础知识

0449368295681492cf87523547f9cfda.png

9、数组的基础知识

dfe95d6b57052c464dd4d77fb994d56a.png

10、数组中常用的方法

数组中的16种常用方法

102f63a78442b55e518b4b4d843092f1.png

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

c1fc77166ecff70ff2f9a859eecf5091.png

11、Math 中的常用方法

Math中常用的9种方法

9ce025804c6514b3216827243d613dc8.png

12、字符串中常用方法

字符串中的12种常用方法

5aa3bbad533a6683fff92648d35d3be3.png

三、常用方法

13、数组去重的三种方法

JS中数组去重的三种方法

7dc36632d4b2da3254be62ad8b0b2389.png

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

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

a76abcedc50590b7c4da0b1b4f4ad398.png

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

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

fad430892a7cd35b58a9d8c8336a497f.png

16、获取随机验证码

32fc52a42427b81a84508f1fcd4f1d93.png

17、DOM操作汇总

获取DOM标签的方式

DOM操作之——获取DOM标签的9种方式

58bdd14496a5497f47632abcb1eeb5bd.png

获取DOM节点的方式

DOM操作之——DOM节点类型及属性

dc110e7743cdd91656f96b95329712b2.png

DOM元素的增删改

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

0ddae88971500744a57131fb630593a6.png

操作DOM元素样式

572ac598653322536a846e3ce8dbba64.png

四、JS进阶提升

18、变量提升

JS中的变量提升机制

7d923a21fc5f7f803f7e20b143a8fca1.png

19、带 var 和 不带 var 的区别

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

718c01b9ff995422869bbd971bdc0dc8.png

20、作用域和作用域链查找机制

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

c6adc4b41f224b1a1525ac98b8ab79fd.png

21、堆栈内存的释放

JS中堆栈内存的释放问题

02152206d11b04f89798c0ae8121ca8e.png

22、闭包的机制

JS中的闭包机制

4f03bd153594d9d67c9c8de0ff74cbdc.png

23、let 和 var 的区别

ES3 定义变量 和 ES6 定义变量的区别

bdb2f82e09d08583c572e7480e6a0ee8.png

24、单例/工厂设计模式

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

ee3dcd05f167ed046878ca64dd0483d0.png

25、面向对象理论基础

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

fa3518beb616e691ec6187cdd5411c5e.png

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

构造函数创建自定义类

f5f808122145a8a30d15afc3066de626.png

27、原型和原型链

JS中的原型和原型链

c3f7ff6af8dbe223bf823d95c0eeca62.png

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

dcbb8390d45f708aa560322a26e8dabe.png

29、THIS 问题

JS中THIS相关问题梳理

10097e13780af2b7bb0bf462274cc99b.png

30、call/apply/bind

4408adb4a46bb2b6f8ae94ad238ead2f.png

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

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

bf096567f6b05a2f345fcd22cf04a970.png

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

96a1ae7782a25aaa208d647917f4d193.png

33、ES6语法

ES6箭头函数和剩余拓展运算符

52632f72049e3089889eaf3bce5ee926.png

ES6 解构赋值

4c91ccc705499a66d43293e0e73ac13d.png

ES6 class创建类

17b311ed6b4ddb2a45d34acfeb2058fc.png

34、多种继承方式

JS中的多种继承方式

9ceb81a84952c3d199c14c3536915405.png

35、检测数据类型的四种方法

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

d33ea2c4d0e8a7f6e1fc3e61f2c08132.png
6121ba9b18e1302bdd236c05a478c987.png

36、正则表达式

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

正则表达式基础

e1b4038c460f736e5659e03f631a8d6a.png

正则的匹配和捕获

8e0cb3dd0a5857034018bbe4d11bc4f1.png

正则相关知识

11fd4c0b67f61e0077cba0c333a886c3.png

37、JS中的盒子模型

JS中的盒子模型

90c05a113894ccd0fc3e7b6a481fec47.png

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

d308036e71063ca10ab99ac87c204328.png

39、严格模式和非严格模式的区别

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

d60b8cd7f59813e74e36d978ff1e09dc.png

40、动画处理——CSS3动画

e6d30509d101360fa168ffd2250484e6.png

41、动画处理——JS动画

fb173b9d1832c06fed02d28d3d9a2fb8.png

42、插件封装思想

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

34a9690354e53e02bdb9e8355d8c3f38.png

43、回调函数相关知识点

b06e3875600a2e768c48e6a5954bb147.png

44、深浅克隆和深浅比较

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

770310b78152cae5ade756bfd024c226.png

45、事件

事件及事件绑定 && 事件对象及事件传播——基础知识(脑图梳理)

常用的事件行为

39071be15ce5c643875028adda3b61ad.png

事件对象

6734f30ce7fbcd1b6b8de081db7cc7d4.png

事件传播机制

d61d0dde8dcb52fb70021b21b46dbd27.png

DOM0和DOM2

57d1286618f946eb908fdb8fa45ea7b9.png

mouseover 和 mouseenter

973ed5d48dfd89ba8aa94ea2eef791cf.png

事件委托

4716a08813855485fea58986542f969d.png

46、柯里化函数编程思想

124919d6f7a34fae6518dc3c71d0d876.png

47、promise基础

125bee61774974cb2d45ac236a6a18b9.png

48、promise基础之then

89de695f770055b7824da3a54e9e08ee.png

五、HTTP基础篇

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

a48921993fc3f8d9f1467f08752b745c.png

50、URL解析

a0eb1021262b402a1e09bec678f074cc.png

51、HTTP请求

c2f02e855d7d3dd90910a9eb07393604.png

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

7a29c89db82563e775d7d029de30eb10.png

53、回流和重绘

efd346d98cb2b5ffbcd5038f757d5d32.png

54、同步异步

a451b6f5e28e30701dd137ceabd9f5ff.png

55、AJAX的串行和并行

fbe4268b40710463f0d4a65c5c0fa42a.png

56、AJAX基础知识

2b669a51e5e96e48b3cd6e1d796416ce.png

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

b8360ddf22120fb2cbf53ee83031b1c8.png

好了,基础知识就在这里告一段落了,上文算是笔者对目前所文章的一个大总结,也是每一个前端应该掌握的最基础的知识,当然这只是基础知识,码农码农必不可少的必然是多练习,多敲代码,希望这条路上的我们都能轻轻松松的得到自己想要的,加油哦各位!!!

文章还有很多不足,内容也不是很全面,希望能够得到各位大佬的指点

原图链接地址:https://gitee.com/yahui2020/javascritp

最后总结整理不易,望您赏个赞再走

02fe77662208a23403652d0e9cb3f802.png
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值