js数组获取index_想自学JS吗?想提升JS底层原理吗?76张脑图带你彻底搞懂原生JS...

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

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

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

一、前端发展史

b1ca6109c12318445a042091b49b34e0.png

二、JS基础入门

1、认识浏览器

6ace2171a2a675d436afa745a1114d85.png

2、JS基础知识

初识JS-基础中的基础

5ed3c64d0b8c2fe0fe0797919cd92271.png

3、三大输出方式

JS中的三大类输出方式

9c365caec2ed29f9e9a2de115088965b.png

4、数据类型基础知识

number 数据类型基础知识

1498f9bc789d6b4f575bd2d239693384.png

string 数据类型基础知识

952b44813c2f90c0eba1a3e87aa241b5.png

boolean 数据类型基础知识

592494eaeefe53694e505187cb68043a.png

Object 数据类型基础知识

JS中的数据类型object基础

20aec173b116a6004c87cd448073559c.png

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

5cb149669831cbb6f0e355bfa5825d6e.png

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

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

a95377a460de73028605388485832b80.png

6、JS中三种常见的判断

JS中三种常见的判断

bbe801e0cafe91a1328b0fd53848532b.png

7、JS中的for循环

JS循环——for循环

4513df1a9eecac524b03ee7d48592022.png

8、function的基础知识

JS中function的基础知识

4642311763ed812151d898843b7830f8.png

9、数组的基础知识

0487f02d145642811edba60ac7eb8419.png

10、数组中常用的方法

数组中的16种常用方法

e773737ddc9584239d23f4809bfd7ef9.png

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

fd47dfebaef79cd4cefa68c3960f05da.png

11、Math 中的常用方法

Math中常用的9种方法

1d1ed474752013a6846e08e059d9941f.png

12、字符串中常用方法

字符串中的12种常用方法

7fa1d30d17a9d9b1ce7270e6ebadbb55.png

三、常用方法

13、数组去重的三种方法

JS中数组去重的三种方法

71a421c6f07a5a7b5c63b26b7c4afea8.png

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

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

40fca011a9174f24350a52430a2346af.png

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

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

30646e6cb1ae15a287b1afe775c7e9b9.png

16、获取随机验证码

89af8bc6e9a6178e8cab8a45c7c64176.png

17、DOM操作汇总

获取DOM标签的方式

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

8e5a6e130fde13c6614a480e207e47eb.png

获取DOM节点的方式

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

234a576eb921f0374446cbc6a80855c7.png

DOM元素的增删改

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

ded0ac340aea6d0524b60ed0d6020b00.png

操作DOM元素样式

8dec38c97e0642aa3477fc81e086f2be.png

四、JS进阶提升

18、变量提升

JS中的变量提升机制

fd16875291a1ddab1b6668a1b1a1cf49.png

19、带 var 和 不带 var 的区别

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

f2489aaa54c62f1653b37fa51f2d6652.png

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

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

6008bf9363cabb3df7dbe8756fb1614c.png

21、堆栈内存的释放

JS中堆栈内存的释放问题

9ab7a6ceaf471c6efc08b73ce7e4fb20.png

22、闭包的机制

JS中的闭包机制

97d3d993ad92c55e52c0061dcc485da4.png

23、let 和 var 的区别

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

6a852039a72fd0fe4b25a9d4fb0b5ff5.png

24、单例/工厂设计模式

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

47f4ef5b651602d7a89795f50d33b9a8.png

25、面向对象理论基础

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

d14fe0b884bd6f8736d030beac7c8c6e.png

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

构造函数创建自定义类

1b3e1dffbd630cb205f6bb7b532bc803.png

27、原型和原型链

JS中的原型和原型链

95c03befa459e96925dfa5eb54c0185d.png

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

262e75392bb24ce953ddd75b7867a507.png

29、THIS 问题

JS中THIS相关问题梳理

847132999e4adf7778b1e3ff3c91d5e7.png

30、call/apply/bind

d72ccffff885df495bcea557fb603214.png

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

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

14d625f78f3e8410bd6493e617118181.png

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

35bd7dd1e470ba8333bec6ef63c6358f.png

33、ES6语法

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

511b3d9a75ee6d1af9afaddfd7825670.png

ES6 解构赋值

abf7b5dd7577fb3ff634c98328e91209.png

ES6 class创建类

7a5b8dbd289cae3376b1e34a9a69ccdc.png

34、多种继承方式

JS中的多种继承方式

2497f6cf5bc01526dcd41d067ebfa1e9.png

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

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

8447596f564704f3950bcae4c802b54b.png
1b2bb000619ae716bdd30808beb4e4b9.png

36、正则表达式

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

正则表达式基础

120748ca880e00218cc39f3d0b2b102f.png

正则的匹配和捕获

55db15ca299813016177dd40160da6c6.png

正则相关知识

3913a5e0476e7c95a4999bc5b16ae00c.png

37、JS中的盒子模型

JS中的盒子模型

1a51f7e3101a3a52ed9e1c2111e3ba72.png

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

4f2d67c56eeb9c2247c41248e054d846.png

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

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

295b8f04468f3058eaf129db0f13d9ef.png

40、动画处理——CSS3动画

74ad160f306cfcdf062db8a6fe32f928.png

41、动画处理——JS动画

d1cec341e6451156b4c892c7c32846cc.png

42、插件封装思想

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

ac7e5771cdda3907f1fa77fbb0458f9e.png

43、回调函数相关知识点

506f49ab67fceac3c52c7db7a1cb9318.png

44、深浅克隆和深浅比较

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

d2e047e865f7a3af41b1a01ebd623dc2.png

45、事件

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

常用的事件行为

01cfe3511f237349bb078bda6a58eb69.png

事件对象

8e1b07d3a0d42a25f979b6313bc5e2f6.png

事件传播机制

293981604844a2beb7190ae9645fcb2d.png

DOM0和DOM2

57e9883effdad8eda8ddfc0ca56af42a.png

mouseover 和 mouseenter

5b2cfcee5483aead9ab48a28d434048e.png

事件委托

ce3205bebd6412c6f7d0040836939770.png

46、柯里化函数编程思想

3b254903280539917af58c32eb55b889.png

47、promise基础

a50c05fdfffbf96210554f62514997f4.png

48、promise基础之then

38fe71d753aa06321005797c1755d775.png

五、HTTP基础篇

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

3585ad5c4fbefdbf257c5233c2271e87.png

50、URL解析

de242da3932f33b52d355c893f7f81c0.png

51、HTTP请求

69608ec0a0608312ea16b704905a6329.png

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

4d679ae66bc38fa489d302a4e82e2de3.png

53、回流和重绘

2eeba45e2650866886a7f7f81b42a330.png

54、同步异步

64ca75eeeab9a24ebd9105f3fc9f8212.png

55、AJAX的串行和并行

7e6218742e838485c91efe859894cea2.png

56、AJAX基础知识

1736428928c501fb9cd8705f1ec2720f.png

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

1a7cc552254426ab54381785456d1cac.png

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

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

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

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

db39003dc7ae6a9133aaf8a75275fbb8.png
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值