![fb3a6c087f4fe671706e669ed00fc56c.png](https://i-blog.csdnimg.cn/blog_migrate/314621336937a795084285b7846af97b.jpeg)
本篇内容适用于:初学前端;及工作时间不久想回顾基础的各位伙伴;
文章主要由图片组成,看起来可能会不太方便,适合保存下来单张查看;
既然来了,就看看在走吧,总会有些收获的;
一、前端发展史
![a0ab75e8ad035b8bd2bb921c0391446a.png](https://i-blog.csdnimg.cn/blog_migrate/d5ca3328f941e2d84395b5d41980c183.jpeg)
二、JS基础入门
1、认识浏览器
![6d44c3319c89cbbadfa9e0c926ab6e9d.png](https://i-blog.csdnimg.cn/blog_migrate/150bda1e05c921d5926f04efb1d466a2.jpeg)
2、JS基础知识
初识JS-基础中的基础
![14ee0d256b9d2cdb763200177315b856.png](https://i-blog.csdnimg.cn/blog_migrate/83560cc3c856e81fc98fa3803fa94ff8.jpeg)
3、三大输出方式
JS中的三大类输出方式
![a1f8b1defc6703d8948acd6e8ea0959c.png](https://i-blog.csdnimg.cn/blog_migrate/5a1257b0059de15bf6e9a75b185f0ab5.jpeg)
4、数据类型基础知识
number 数据类型基础知识
![38418fe8e53980582f67f13859077a24.png](https://i-blog.csdnimg.cn/blog_migrate/ac2b712e9e03b1df6715d7a0726288f8.jpeg)
string 数据类型基础知识
![8919744a63455d8991e503612a331c7e.png](https://i-blog.csdnimg.cn/blog_migrate/26d87e89001fc97134e15983f3c5f669.jpeg)
boolean 数据类型基础知识
![2307863a93ab38b1bd03e8354faedc6d.png](https://i-blog.csdnimg.cn/blog_migrate/ec7d5da677432eaef8fcb0f754e135da.jpeg)
Object 数据类型基础知识
JS中的数据类型object基础
![0012f92c644c79b89ab89bebb57609d0.png](https://i-blog.csdnimg.cn/blog_migrate/a80718f1dfe0f81bcff543edbebc1d05.jpeg)
条件判断里的相互转换规则
![b9b101aebdb6901f1689101d2c5c1137.png](https://i-blog.csdnimg.cn/blog_migrate/ec86e63d3ad08c98ea9db84fd286059c.jpeg)
5、数据类型之间的区别(堆栈内存)
数据类型之间的区别(堆内存Heap VS 栈内存Stack)
![26bc56cf9110b3279876b7b450cdb9e4.png](https://i-blog.csdnimg.cn/blog_migrate/7823597fa6f8d9c77f929b06d212e9ed.jpeg)
6、JS中三种常见的判断
JS中三种常见的判断
![c3d990f3a8fdd6e50fdc64f2c4c01c25.png](https://i-blog.csdnimg.cn/blog_migrate/bb0e2752d3eaf9f101378d7b8a654a9f.jpeg)
7、JS中的for循环
JS循环——for循环
![a7464ab37e59d90a321d3f9aa66444fd.png](https://i-blog.csdnimg.cn/blog_migrate/e1dbfae74ea5bd2499863df05eefb1b1.jpeg)
8、function的基础知识
JS中function的基础知识
![87cdd4c235d2e2a56c28e83cf5a465ad.png](https://i-blog.csdnimg.cn/blog_migrate/7f99c1bfb2119a48615ec54ed76e6ccd.jpeg)
9、数组的基础知识
![a857f80a979be72670c5c6f98b16439c.png](https://i-blog.csdnimg.cn/blog_migrate/b59385f97f054c267b909d768e9490e7.jpeg)
10、数组中常用的方法
数组中的16种常用方法
![acba473430baaed87f168ee3c2d6ed5c.png](https://i-blog.csdnimg.cn/blog_migrate/28e05f17d6a53d775658e0756f261a17.jpeg)
数组中常用的方法【补充reduce、filter、flat...】|内附思维导图
![f0fb6f35c1ee333e1a1dd8c8723f885f.png](https://i-blog.csdnimg.cn/blog_migrate/41d88eae6a025569427a8b564960c468.jpeg)
11、Math 中的常用方法
Math中常用的9种方法
![1d95fb0716a47f577bc0fb7e00531af8.png](https://i-blog.csdnimg.cn/blog_migrate/93729c0871d5b9aacd8ad6bc878b848e.jpeg)
12、字符串中常用方法
字符串中的12种常用方法
![fdf9d52dfb8576ca8e82e28cbc776200.png](https://i-blog.csdnimg.cn/blog_migrate/2011000676813dea8ec94dec7b3c36b3.jpeg)
三、常用方法
13、数组去重的三种方法
JS中数组去重的三种方法
![522b8919e6e22618ae22ae8b7f59ea1e.png](https://i-blog.csdnimg.cn/blog_migrate/a879c2947e769a65349ae7d974945659.jpeg)
14、时间格式化的三种方法
JS中时间格式化的三种方法
![801ccf6f0b5097faa69efdacf93edc17.png](https://i-blog.csdnimg.cn/blog_migrate/dc3bc4f723d7961a2229eb8afbe6c362.jpeg)
15、URL参数处理的三种方法
JS中URL参数处理的三种方法
![f46945e00df6721af7d0f3147d5b8d47.png](https://i-blog.csdnimg.cn/blog_migrate/7e2cd3f11582be742c60e881d8a98c94.jpeg)
16、获取随机验证码
![11c057099016c29d31fdab11e98e1fa1.png](https://i-blog.csdnimg.cn/blog_migrate/6e9d68effd7245ab931b14cfbc7f22bc.jpeg)
17、DOM操作汇总
获取DOM标签的方式
DOM操作之——获取DOM标签的9种方式
![c9a2d842eccf2a661d3e2d8e756740f3.png](https://i-blog.csdnimg.cn/blog_migrate/ff08f991c19de2a04e4bddc121625041.jpeg)
获取DOM节点的方式
DOM操作之——DOM节点类型及属性
![91efb3bfd797657bfbdbac6c1f2c3068.png](https://i-blog.csdnimg.cn/blog_migrate/44e89eca2a2a39f1af56e4fe7177d48a.jpeg)
DOM元素的增删改
DOM操作之——元素的增删改、样式修改、插入内容
![1476ad2d4b2e389571dbe76d7e2bed03.png](https://i-blog.csdnimg.cn/blog_migrate/8b241822deee2a6c81c6973bafaf7438.jpeg)
操作DOM元素样式
![3a058432715fcd9e88872f40a74be93d.png](https://i-blog.csdnimg.cn/blog_migrate/fbc37135f73b5e0025202e199bba7b06.png)
四、JS进阶提升
18、变量提升
JS中的变量提升机制
![f5229d652edec8665ba09b323d9aec6e.png](https://i-blog.csdnimg.cn/blog_migrate/8b93ba4be60eca822bbf8a407aba0625.jpeg)
19、带 var 和 不带 var 的区别
在全局/私有上下文中:带VAR和不带VAR的区别
![9c7d3b161d6c25829fe94789e0fb1c4b.png](https://i-blog.csdnimg.cn/blog_migrate/9e4c6a8035dd36a89b51860d70f84f2b.jpeg)
20、作用域和作用域链查找机制
作用域和作用域链查找机制|内附思维导图
![edfe2a24128f1c9693c346e08d3a7c42.png](https://i-blog.csdnimg.cn/blog_migrate/80b44e6d9992568c497c5a2ace7cfe20.jpeg)
21、堆栈内存的释放
JS中堆栈内存的释放问题
![3c119675b98a6f9fcb593d4de905903f.png](https://i-blog.csdnimg.cn/blog_migrate/7e809317b9b172a8fac57f60474b9aeb.jpeg)
22、闭包的机制
JS中的闭包机制
![2df44f97d01859b42d2f229e2935ee6b.png](https://i-blog.csdnimg.cn/blog_migrate/9ac06325ea4caee5d89a931b6325ae96.jpeg)
23、let 和 var 的区别
ES3 定义变量 和 ES6 定义变量的区别
![9514459a48426130397009ae3edb0ed1.png](https://i-blog.csdnimg.cn/blog_migrate/30dddfd2c5f9a3d6f99e0d465773c52e.jpeg)
24、单例/工厂设计模式
JS中的单例/工厂设计模式
![25318e4322ec4dcc12ad6e3926763d10.png](https://i-blog.csdnimg.cn/blog_migrate/35d78353bcbbe2cd4243748b503701fc.jpeg)
25、面向对象理论基础
JS中的面向对象OOP理论基础
![cc68ea85eb6511dea3e2ab332f3ee1f7.png](https://i-blog.csdnimg.cn/blog_migrate/9a8d4874f0e347cb7510c038f32b75eb.jpeg)
26、构造函数创建自定义类
构造函数创建自定义类
![cfe8dab712661a91361833b0fa5a66bc.png](https://i-blog.csdnimg.cn/blog_migrate/8383382fe42a7bbfd5fc947971dc13b7.jpeg)
27、原型和原型链
JS中的原型和原型链
![a8e25d13f4a25d48e231e0c8b8ba2942.png](https://i-blog.csdnimg.cn/blog_migrate/a61448cfc6d567ac4a13dc877943afbc.jpeg)
28、给原型扩展属性和方法
![9c336b103df0207d00dbaa8d192bb6a0.png](https://i-blog.csdnimg.cn/blog_migrate/084372df243529e2bd0988302727005d.jpeg)
29、THIS 问题
JS中THIS相关问题梳理
![baca37aa51fde45a60d40f5e078544e0.png](https://i-blog.csdnimg.cn/blog_migrate/e419cce708a6c82136caec4a9a422c44.jpeg)
30、call/apply/bind
![4775a75df799d94f5b176efc5311968e.png](https://i-blog.csdnimg.cn/blog_migrate/6e368d5c4cc693d687fb9236967f81f7.jpeg)
31、获取数组最大/小值的三种方法
获取数组中最大值/最小值的三种基础方法
![6c9a4cc138eb3830783219dc97f67880.png](https://i-blog.csdnimg.cn/blog_migrate/fad96a9d1d2be8748d35ecd907d7212b.jpeg)
32、类数组转数组的五种方法
![5cbee620dedf62dc8d3abf7f9ff90834.png](https://i-blog.csdnimg.cn/blog_migrate/b3c6642c27edf5f6d5e06dac3e2d00ab.jpeg)
33、ES6语法
ES6箭头函数和剩余拓展运算符
![c508146d734a22f69f5e2bf4d73253d9.png](https://i-blog.csdnimg.cn/blog_migrate/4aa60c7035a72b7d4b7025b26f76c6ff.jpeg)
ES6 解构赋值
![5ae3abdea340b4368b9cb5da8e227a42.png](https://i-blog.csdnimg.cn/blog_migrate/8fedcbc65d7938aa2c2faa1e5426fa29.jpeg)
ES6 class创建类
![50fb23f09c418a0cfaab30d9dbdd3285.png](https://i-blog.csdnimg.cn/blog_migrate/d520d5083f0610a46ce2ed1045ea7a6f.jpeg)
34、多种继承方式
JS中的多种继承方式
![01d8606578b04a587da0aa05d0b4fef0.png](https://i-blog.csdnimg.cn/blog_migrate/bdebd7b83b8539ef41d9e3a48ab4e2c9.jpeg)
35、检测数据类型的四种方法
JS中数据类型检测四种方式的优缺点
![5b4cff532a342736c0e9a34e5c9c3798.png](https://i-blog.csdnimg.cn/blog_migrate/347b1abc9c9c269ea36212649de34e0a.jpeg)
![692640ca517dbb556ee326fb26a3dbc7.png](https://i-blog.csdnimg.cn/blog_migrate/eb8017143bcfd9f67363461d9bbb105a.jpeg)
36、正则表达式
JS中的正则表达式&&全面梳理|内附思维导图
正则表达式基础
![f1b4c95a16d02d87ac6df62f3e0d8e40.png](https://i-blog.csdnimg.cn/blog_migrate/d0cd6b79c921859d4b0608901bc467c5.jpeg)
正则的匹配和捕获
![a5bd7267287d4c2692c0c36b82ee94ec.png](https://i-blog.csdnimg.cn/blog_migrate/a86a5440f91d63ca0676ae27c0e8eefe.jpeg)
正则相关知识
![fe20d7474261b02134418f252322fdaf.png](https://i-blog.csdnimg.cn/blog_migrate/2de8a53c79a3d04200d707ad76ae7a84.jpeg)
37、JS中的盒子模型
JS中的盒子模型
![0ff71584b9b2dcde220eccf68a361151.png](https://i-blog.csdnimg.cn/blog_migrate/d013476177c0c7994b758bbdec4acee4.jpeg)
38、JS中CSS样式的获取方式
![6d66a334bb374f47a41cf91fa73f3b7c.png](https://i-blog.csdnimg.cn/blog_migrate/4f217b39529c3456024736dce847e238.jpeg)
39、严格模式和非严格模式的区别
非严格模式 严格模式的区别|附思维导图
![7e1e92c282e641032bbadcb90087f553.png](https://i-blog.csdnimg.cn/blog_migrate/c828add5eca3ed6f8e90540c320220c2.jpeg)
40、动画处理——CSS3动画
![8d3021d8ef96c5b8165cabf4a4f83b67.png](https://i-blog.csdnimg.cn/blog_migrate/bc1fd8f64d90da64e72c1d6ae680d67c.jpeg)
41、动画处理——JS动画
![06a92c21a5fd27cc01f1e12001efe835.png](https://i-blog.csdnimg.cn/blog_migrate/b592202ef9d959bc3cd490553ebc4ec2.jpeg)
42、插件封装思想
插件封装|封装一个属于自己的轮播图插件——左右切换版
![791b72ca7ff5275cf1f950456d35b1a1.png](https://i-blog.csdnimg.cn/blog_migrate/a7de3ed326589a43a4fe5909f7befd52.jpeg)
43、回调函数相关知识点
![7faee9d25012b668c5798a8e2d63ca2e.png](https://i-blog.csdnimg.cn/blog_migrate/8d3643d168ba244c7a05607ee29a1415.jpeg)
44、深浅克隆和深浅比较
深克隆 VS 浅克隆|深比较 VS 浅比较|回调函数
![2e675e1154ce10d0c71e190e26313e98.png](https://i-blog.csdnimg.cn/blog_migrate/74059912f46d1795048904533e49f177.jpeg)
45、事件
事件及事件绑定 && 事件对象及事件传播——基础知识(脑图梳理)
常用的事件行为
![2146768385c25b0c8a3bba797f0c6e79.png](https://i-blog.csdnimg.cn/blog_migrate/097e6bfecd41cc9098e9816e2b18e0ce.jpeg)
事件对象
![a7f0d2de1216f7e164eed2063f216ed6.png](https://i-blog.csdnimg.cn/blog_migrate/01ec8a5344d6f8c30c952f6cc07675a5.jpeg)
事件传播机制
![d85820c36d3991445f9369638fa3c6ee.png](https://i-blog.csdnimg.cn/blog_migrate/f8a5a452b982b44d0f4ea0b354e2a0f6.jpeg)
DOM0和DOM2
![fa25ee66d22fb001443fb6f55fa68fd6.png](https://i-blog.csdnimg.cn/blog_migrate/13c18cf86dc077842daa7cd46efc897d.jpeg)
mouseover 和 mouseenter
![af8ab306a4fc30df05276e3e151df941.png](https://i-blog.csdnimg.cn/blog_migrate/e5d7bb16a900dd9fbe0c15ec3ae64de7.jpeg)
事件委托
![23c03a8e9d8b62f77519e0bd8fa0b120.png](https://i-blog.csdnimg.cn/blog_migrate/e00c67bfc4fb76efe742843550ae2413.jpeg)
46、柯里化函数编程思想
![294359b4048ae9f77a2421462a237d17.png](https://i-blog.csdnimg.cn/blog_migrate/35f6d0614bdc538d7fa03df7b19101ab.jpeg)
47、promise基础
![8ea09576084285836733317c03f4201d.png](https://i-blog.csdnimg.cn/blog_migrate/50b4003ea662047b1d315ce736acb4bb.jpeg)
48、promise基础之then
![d93a7a19d4978a96e6d4377711d33441.png](https://i-blog.csdnimg.cn/blog_migrate/113e14acfe3381dcd43c698c3ef67919.jpeg)
五、HTTP基础篇
49、客户端和服务器交互基础
![1f114d1a31687c89b5f97d0513b3dae8.png](https://i-blog.csdnimg.cn/blog_migrate/3aba9c666720dedd8b2fd7ac4b67941c.jpeg)
50、URL解析
![fada9379c2dc8ddfbcbc5b3f63f12637.png](https://i-blog.csdnimg.cn/blog_migrate/b4996b6f775241932ef725765d98c5e8.jpeg)
51、HTTP请求
![aa7f5cc08744d5e7b8daece997cd8912.png](https://i-blog.csdnimg.cn/blog_migrate/156841111847b8851c071940605c6990.jpeg)
52、浏览器渲染页面的主体流程
![6de6a0e233042f4edd0baff543d57387.png](https://i-blog.csdnimg.cn/blog_migrate/c4d82e98fb0dbfddb8b0e3b2fef2edde.jpeg)
53、回流和重绘
![83c9b1073e7608f24abf577b6babbe00.png](https://i-blog.csdnimg.cn/blog_migrate/d248d0dc0264b3126de8cbe765dd1eb8.jpeg)
54、同步异步
![5c5202c6fbfd6b093393c9832dccce63.png](https://i-blog.csdnimg.cn/blog_migrate/6026d9c12ef35870afb2a837f138f5b4.jpeg)
55、AJAX的串行和并行
![1475ab167371556ed523f47258ec7aff.png](https://i-blog.csdnimg.cn/blog_migrate/e244f963344dc31b045082d704af6b75.jpeg)
56、AJAX基础知识
![66584159577e2917f65196d9edc06225.png](https://i-blog.csdnimg.cn/blog_migrate/17ac561ad2f7aa89a9e595650fa8a67d.jpeg)
57、AJAX中的全局刷新和局部刷新
![43f8a152850a7ff7acbfa564f79b28b2.png](https://i-blog.csdnimg.cn/blog_migrate/a0b828f0e5f7b411492e85b0ec05256b.jpeg)
好了,基础知识就在这里告一段落了,上文算是笔者对目前所文章的一个大总结,也是每一个前端应该掌握的最基础的知识,当然这只是基础知识,码农码农必不可少的必然是多练习,多敲代码,希望这条路上的我们都能轻轻松松的得到自己想要的,加油哦各位!!!
文章还有很多不足,内容也不是很全面,希望能够得到各位大佬的指点原图链接地址:https://gitee.com/yahui2020/javascritp