前端面试题（持续更新中）

偏执的太偏执、 2023-05-29 13:29 10阅读 0赞

> 全家桶项目源码：Vue全家桶+SSR+Koa2全栈开发美团网\[完整版\] 链接：https://pan.baidu.com/s/1cwPDVkj\_I5z568mYIHni4A 提取码：24g2

> 2020字节跳动扎心面试题链接（从公众号获取的）：  
> https://mp.weixin.qq.com/s/B8xRPxwjJfURyYzTQgIxUw

CSS面试题：  
1、谈谈你对CSS盒模型的认识？

> 1、基本概念：标准模型+IE模型  
> CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：内边距（padding），边框（border），margin（外边距），和内容（content）。  
> 标准盒模型：一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)  
> 怪异(IE)盒模型：一个块的总宽度=width+margin（左右）（既width已经包含了padding和border值）  
> 设置盒模型：box-sizing:border-box

2、CSS是如何设置这两种模型，那么二者怎么转化呢？

> content-box: 指的是W3C标准盒模型，也是默认的设置属性。  
> border-box：指的是IE盒模型，width和height包含了padding和border。

3、JS如何获取盒模型对应的宽和高？

> `dom.style.width/height`：对节点样式可读可写，但只能读或写内嵌的CSS样式对于在(style)或外联样式不能读写。  
> `dom.currentStyle.width/height`：拿到的是渲染之后的宽和高，比较真实，但支持IE浏览器  
> `window.getComputedStyle(dom).width/height`：方法是只读的，只能获取样式，不能设置。  
> `dom.getBoundingClientRect().width/height：getBoundingClientRect()`方法得到8个值，除了 width 和 height 外的属性x、y、left、top、right和bottom都是相对于视口(viewport)的左上角位置而言的。

4、什么是BFC？BFC的原理?

> 块级格式化上下文。是一种边距重叠解决方案。  
> 应用场景： 1. 解决margin叠加的问题  
> 2. 用于布局（overflow: hidden）  
> 3.BFC不会与浮动盒子叠加。  
> 4. 用于清除浮动，计算BFC高度。

5、行内元素和块级元素有什么区别？

> 块级元素：显示在一块内，会自动换行，元素会从上到下垂直排列，各自占一行，块级元素可以设置宽高，如p,ul,form,div,(h1-h6)等标签元素  
> 行内元素：元素在一行内水平排列，高度由元素的内容决定，行内元素不可以设置宽高，如a,br,span,input等元素。

6、行内元素和块级元素如何转换？

> **行变块**：`display:block`  
> **块变行**：`display：inline`  
> `display：inline-block`(可以在同一行内显示)。

7、什么是伪类选择器和伪元素？列举3个CSS3中引入的伪类选择器和伪元素！

> 伪类用一个冒号来表示，而伪元素则用两个冒号来表示。  
> 伪元素选择器：dom中不存在的元素，仅仅是css中用来渲染，添加一些特殊效果的，比如`p::before`，选择p标签（真元素）前面的假元素（伪元素，p标签前面没有元素，只是假设有）  
> `::first-line`选择元素的第一行，比如说改变每个段落的第一行文本的样式  
> `::before`和`::after`这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动  
> `::selection`用来改变浏览网页选中文的默认效果

> 伪类选择器：一个概念上的类，不是我们定义的，是抽象的。如`a:hover`，选择a标签（元素选择器）中具有鼠标悬停类的所有元素，这个类是抽象的，不是我们自己定义的，再如`first-child`，选择第一个，选择具有这个类性质的所有元素，“第一个”，这个类就抽象了，我们没必要定义一个第一个这样的类  
> 列举：`:root()`选择器，根选择器，匹配元素E所在文档的根元素。在HTML文档中，根元素始终是（html）。:root选择器等同于（html）元素。  
> `:not()`选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。  
> `:empty()`选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

8、px和em，rem的区别？

> px 实际上就是像素，用PX设置字体大小时，比较稳定和精确。px是固定长度单位，不随其它元素的变化而变化  
> em 就是根据基准来缩放字体的大小。em 是相对长度单位。em是相对于父级元素的单位，会随父级元素的属性（font-size或其它属性）变化而变化  
> rem是CSS3新增的一个相对单位,rem是相对于根目录（HTML元素）的，所有它会随HTML元素的属性（font-size）变化而变化  
> 例如： ==屏幕宽度/设计宽度 = 1rem的值/预设定rem的值。  
> 1920/1920=100/100 ;  
> 所以 1rem=1920/1920\*100 ;  
> `document.documentElement` 是html节点  
> `document.documentElement.style.fontSize` = `((windowWidth / designWidth) * rem2px) + 'px';`  
> 假如，用户将屏幕拖小了，变为960。1rem将自动变为50px;960/1920乘以100=50  
> 这里需要判断下，当屏幕的宽度大于设计稿定义的宽度，用设计稿的宽度，如果小于，用屏幕宽度作为变量屏幕宽度。

10、关于绝对定位，相对定位和固定定位

> 1、相对定位不脱离标准流，在页面中占位置 。  
> 相对于自己原来的位置来进行定位 。  
> 2、绝对定位脱离标准流，在页面中不占位置。  
> 如果没有父元素，则相对于body定位；如果有父元素，但父元素没有定位，那么还是相对于body定位；如果父元素有定位，那么相对于父元素来定位。  
> 3、固定定位：相对于浏览器窗口进行定位  
> 相对定位：position: relative;  
> 绝对定位：position: absolute;

11、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

> CSS 选择符：  
> 1.id选择器（ \# myid）  
> 2.类选择器（.myclassname）  
> 3.标签选择器（div, h1, p）  
> 4.相邻选择器（h1 + p）  
> 5.子选择器（ul > li）  
> 6.后代选择器（li a）  
> 7.通配符选择器（ \* ）  
> 8.属性选择器（a\[rel = “external”\]）  
> 9.伪类选择器（a: hover, li:nth-child）

> 1.2 可以继承的属性：  
> 可继承的样式： font-size font-family color, UL LI DL DD DT;  
> 不可继承的样式：border padding margin width height ;

> 优先级： !important > id > class > tag  
> important 比 内联优先级高,但内联比 id 要高

> CSS3新增伪类举例： 
> `p:first-of-type` 选择属于其父元素的首个 `` 元素的每个 `` 元素。 
> `p:last-of-type` 选择属于其父元素的最后 `` 元素的每个`` 元素。 
> `p:only-of-type` 选择属于其父元素唯一的`` 元素的每个`` 元素。 
> `p:only-child` 选择属于其父元素的唯一子元素的每个`` 元素。 
> `p:nth-child(2)` 选择属于其父元素的第二个子元素的每个`` 元素。 
> `:enabled :disabled` 控制表单控件的禁用状态。 
> `:checked` 单选框或复选框被选中。

12、以下是CSS3的几种常用前缀

> \-webkit  
> \-moz  
> \-ms  
> \-o

13、CSS3新增的伪类有哪些

> `p:last-of-type` 选择属于其父元素的最后 `` 元素的每个 `` 元素。 
> `p:only-of-type` 选择属于其父元素唯一的`` 元素的每个 `` 元素。 
> `p:only-child` 选择属于其父元素的唯一子元素的每个 `` 元素。 
> `p:nth-child(2)` 选择属于其父元素的第二个子元素的每个 `` 元素。 
> `:enabled、:disabled` 控制表单控件的禁用状态。 
> `p:first-of-type` 选择属于其父元素的首个 `` 元素的每个 `` 元素。 
> `:checked`，单选框或复选框被选中。

14、CSS3有哪些新特性？

> 1.  CSS3实现圆角`（border-radius）`，阴影`（box-shadow）`，
> 2.  对文字加特效`（text-shadow）`，线性渐变`（gradient）`，旋转`（transform）`
> 3.  transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
> 4.  增加了更多的CSS选择器 多背景 rgba
> 5.  在CSS3中唯一引入的伪类是 `::selection.`
> 6.  媒体查询，多栏布局
> 7.  `border-image`

15、为什么要初始化CSS样式。

> 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响,但求影响最小的情况下初始化。

16、解释下浮动和它的工作原理？清除浮动的技巧

> 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，**清除浮动的本质:主要为了解决父级元素因为子级浮动引起内部高度为0的问题。**
> 
> 1.  使用空标签清除浮动。  
>     这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
> 2.  使用overflow。  
>     给包含浮动元素的父标签添加css属性 `overflow:auto;` `zoom:1; zoom:1`用于兼容IE6。
> 3.  使用after伪对象清除浮动。  
>     该方法只适用于非IE浏览器。  
>     一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；  
>     可以给父元素设置overflow：auto或者hidden

\#**JS的面试问题：**  
0、如何判断一个变量是对象还是数组？

> 1、我们能够使用typeof判断变量的身份，判断字符串得到string，数字和NaN得到number，函数会得到function等，但是判断数组，对象和null时都会得到object，这就是typeof的局限性，  
> 2、使用`instanceof`（比较运算符）可以用来判断一个变量是数组还是对象  
> 3、`constructor`（构造函数）  
> 4、`Object.prototype.toString.call()`  
> 总结：判断简单数据类型可以用`typeof`，判断数组，对象使用`instanceof`，`constructor`和 `Object.prototype.toString.call()`，最好使用`Object.prototype.toString.call()`，更加精准

1.闭包

> 闭包就是能够读取其他函数内部变量的函数。  
> 外部函数调用之后其变量对象本应该被销毁，但闭包的存在使我们仍然可以访问外部函数的变量对象  
> 创建闭包最常见方式，就是在一个函数内部创建另一个函数。  
> 闭包的缺点：滥用闭包函数会造成内存泄露，因为闭包中引用到的包裹函数中定义的变量都永远不会被释放  
> 在退出函数之前，将不使用的局部变量全部删除。可以使变量赋值为null;

2.数据类型

> 基本数据类型：`String`（ 字符串）,`Boolean`（布尔）,`number`（数值）,`Null`（空值）,`undefined`（未定义）  
> 引用数据类型：Object(Array,Date,RegExp,Function)

3.javascript 中 == 和 === 的区别是什么？举例说明。

> ===会自动进行类型转换，==不会

4.请尽可能详尽的解释 ajax 的工作原理

> 思路：先解释异步，再解释 ajax 如何使用  
> Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后用JS来操作DOM而更新页面。XMLHttpRequest 是 ajax 的核心机制，它是在 IE5 中首先引入的，是一种支持异步请求的技术。简单的说，也就是 javascript 可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。  
> 特点：Ajax 可以实现异步通信效果，实现页面局部刷新，带来更好的用户体验；按需获取数据，节约带宽资源

> ajax是什么？
> 
> 1.  通过异步模式，提升了用户体验
> 2.  优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
> 3.  Ajax 在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。

> Ajax 的缺点：
> 
> 1.  Ajax 不支持浏览器 back 按钮
> 2.  安全问题 Ajax 暴露了与服务器交互的细节
> 3.  对搜索引擎的支持比较弱
> 4.  破坏了程序的异常机制
> 5.  不容易调试

**HTTP协议类型题目：**  
5. HTTP 状态消息

> 200：请求已成功，请求所希望的响应头或数据体将随此响应返回。  
> 302：请求的资源临时从不同的 URI 响应请求。由于这样的重定向是临时的，客户端应当  
> 继续向原有地址发送以后的请求。只有在Cache-Control或 Expires中进行了指定的情况下，  
> 这个响应才是可缓存的  
> 304：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上  
> 次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304 响应禁  
> 止包含消息体，因此始终以消息头后的第一个空行结尾。  
> 403：服务器已经理解请求，但是拒绝执行它。  
> 404：请求失败，请求所希望得到的资源未被在服务器上发现。  
> 500：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器端的源代码出现错误时出现。

6.说一下什么是Http协议

> 对客户端和服务器端之间数据传输的格式规范，格式简称为“超文本传输协议”

7.什么是Http协议无状态协议?怎么解决Http协议无状态协议?

> (1)、无状态协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息  
> (2)、无状态协议解决办法： 通过1、Cookie 2、通过Session会话保存。

8.Http协议中有哪些请求方式?

> GET:用于请求访问已经被URI(统一资源标识符)识别的资源,可以通过URL传参给服务器，从指定的资源请求数据  
> POST:用于传输信息给服务器, 向指定的资源提交要处理的数据  
> PUT:传输文件,报文主体中包含文件内容,保存到对应URI位置  
> HEAD:获得报文首部,与GET方法类似,只是不返回报文主体,一般用于验证URI是否有效  
> DELETE:删除文件,与PUT方法相反,删除对应URI位置的文件  
> OPTIONS:查询响应URI支持的HTTP方法

区别:

> Get 是通过地址栏来传值，而 Post 是通过提交表单来传值。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70]

9.Http协议由什么组成?

> **请求报文包括三部分**:  
> (1).请求行:包含请求方法,URI,HTTP版本协议 (2).请求首部字段 (3).请求内容实体  
> **响应报文包含三部分:**  
> (1).状态行:包含HTTP版本,状态码,状态码原因短语 (2).响应首部字段 (3).响应内容实体

10.HTTP协议的工作原理?

> HTTPS在传输数据之前需要客户端（浏览器）与服务端（网站）之间进行一次握手，在握手过程中将确立双方加密传输数据的密码信息，通常情况下会配合数字证书实现。

13.ajax的同步和异步区别：

> 1.  同步：提交请求 -> 等待服务器处理 -> 处理完毕返回，这个期间客户端浏览器不能干任何事
> 2.  异步：请求通过事件触发 -> 服务器处理（这是浏览器仍然可以作其他事情）-> 处理完毕  
>     ajax.open方法中，第3个参数是设同步或者异步。

14.跨域? ?

> 理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域

14-1、什么情况下会碰到跨域问题？有哪些解决方法？

> 跨域是指a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，或是a页面为ip地址，b页面为域名地址，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。  
> 解决方法：1. JSONP方法:JSONP是服务器与客户端跨源通信的常用方法，Jsonp 需要目标服务器配合一个callback函数网页通过添加一个(script)元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。  
> 首先，网页动态插入(script)元素，由它向跨源网址发出请求。  
> 2.通过修改document.domain来跨子域  
> 3.使用window.name来进行跨域  
> 4.通过CORS解决AJAX跨域

15.简述 ajax 的过程。

> 1.  创建 XMLHttpRequest 对象,也就是创建一个异步调用对象
> 2.  创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息
> 3.  设置响应 HTTP 请求状态变化的函数
> 4.  发送 HTTP 请求
> 5.  获取异步调用返回的数据
> 6.  使用 JavaScript 和 DOM 实现局部刷新

16.axios和ajax的区别

> axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。  
> 简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。
> 
> ②axios特征：  
> 1.自动转换JSON数据  
> 2.从 node.js 创建 http 请求  
> 3.支持 Promise API  
> 4.客户端支持防止CSRF  
> 5.提供了一些并发请求的接口  
> PS：防止CSRF：就是让你的每个请求都带一个从cookie中拿到的key，根据浏览器同源策略，假冒的网站是拿不到你cookie中得到key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略

17.JavaScript 链 原型，原型链 ? 有什么特点？

> 1.原型对象也是普通的对象，是对象一个自带隐式的 \_ proto\_ 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null 的话，我们就称之为原型链  
> 2. 原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。
> 
> 3.每一次获取对象中的属性都是一次查询过程，如果在自有属性中找不到就会去原型对象中查找，如果原型对象中还查不到，就回去原型对象的原型中查找，也就是按照原型链查找，直到查找到原型链的顶端，也就是Object的原型。

> 作用域链：  
> 　　一般情况下，变量取值到 创建 这个变量 的函数的作用域中取值。  
> 　　但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。

> 一、作用域  
> 　　在 Javascript 中，作用域分为 全局作用域 和 函数作用域  
> 　　全局作用域：  
> 　　　　代码在程序的任何地方都能被访问，window 对象的内置属性都拥有全局作用域。  
> 　　函数作用域：  
> 　　　　在固定的代码片段才能被访问

18、JS创建对象有几种方法？

> 1.new Ｏbject()  
> 2.使用字面量  
> 3.工厂模式  
> 4.构造函数模式（constructor）  
> 5.原型模式（prototype）  
> 6.构造函数+原型模式  
> 还是点击下面链接讲解的比较详细吧 ↓  
> https://www.jianshu.com/p/1fb0447db852  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 1]

19、虚拟dom和实体dom的区别？

> DOM的本质：  
> 浏览器概念，浏览器从服务器端读取html页面，浏览器将html解析成一棵元素嵌套关系的dom树，用对象来表示页面上的元素，并提供操作dom对象的api。  
> 虚拟DOM：  
> 框架概念，程序员用js对象来模拟页面上dom元素的嵌套关系( 本质 )，为了实现页面元素的高效更新( 目的 )  
> 区别：1、虚拟DOM不会进行重排与重绘操作；  
> 2、虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要修改的部分，最后进行重排和重绘，减少过多DOM节点重排和重绘损耗。  
> 3、虚拟DOM有效降低大面积（真实DOM节点）的重排和重绘，因为最终与真实DOM比较差异，可以局部渲染

20、描述一下事件冒泡机制

> 当你使用事件冒泡时，子级元素先触发，父级元素后触发，即p先触发，div后触发。

21、请描述一下cookies，sessionStorage和localStorage的区别

> cookie（储存在用户本地终端上的数据）是网站为了标识用户身份而储存在用户本地终端上的数据，cookie数据始终在同源的http请求中携带，只会在浏览器和服务器间来回传递。另外两个不会自动把数据发给服务器，仅在本地保存。  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 2]

22、js阻止事件冒泡的两种方法

> event.stopPropagation( )  
> event.target

23、JS的内置对象  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 3]  
24、函数调用的四种方式

> 函数调用模式  
> 方法调用模式  
> 构造器调用模式  
> 间接调用模式，通过call()和apply()进行

25、JS中常见的几种继承方法

> 1.**原型链继承**  
> 原型链实现继承的思想：利用原型让一个引用类型继承另一个引用类型的属性和方法。  
> 原型链的基本概念： 当一个原型对象等于另一个类型的实例，此时的原型对象将包含一个指向另一个指向另一个原型的指针。同时，另一个原型中也包含着一个指向另一个构造函数的指针。如果另一个原型是另一个类型的实例，此时实例和原型就构成了原型链  
> **原型链存在的问题**：  
> 1）包含引用类型值的原型属性会被所有实例共享，这会导致对一个实例的修改会影响另一个实例。在通过原型来实现继承时，原型实际上会变成另一个类型的实例。原先的实例属性就变成了现在的原型属性  
> 2）在创建子类型的实例时，不能向超类型的构造函数中传递参数

> 2.构造函数继承（经典继承）  
> 借用构造函数的基本思想，即在子类型构造函数的内部调用超类型构造函数。函数只不过是在特定环境中执行代码的对象，因此通过使用apply()和call()方法可以在新创建的对象上执行构造函数  
> **借用构造函数的优势**：可以在子类型构造函数中向超类型构造函数传递参数  
> **借用构造函数的问题：**  
> 1）无法避免构造函数模式存在的问题，方法都在构造函数中定义，因此无法复用函数。  
> 2）在超类型的原型中定义的方法，对子类型而言是不可见的。因此这种技术很少单独使用。

> 3.组合方式继承（构造函数 + 原型链）  
> **组合继承**：指的是将原型链和借用构造函数的技术组合到一起。思路是使用原型链实现对原型方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数的复用，又能够保证每个实例都有它自己的属性。  
> **组合继承的优势**：  
> 避免了原型链和借用构造函数的缺点，融合了他们的优点，是JavaScript中最常用的继承模式。instanceof和isprototypeOf()也能够用于识别基于组合继承创建的对象

> 4.es6方法继承

27、JS运行机制

> JS为什么是单线程?
> 
>  *  JS的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。

> JS的运行机制：
> 
>  *  因为JavaScript是单线程，意味着任务要一个接着一个完成，但是，如果前一个任务执行时间很长，那么后面的任务就得一直阻塞着，这样用户体验十分差。  
>     JavaScript的设计者考虑到了这一点，所以他将JavaScript的任务分为两种，在主线程上执行的任务"同步任务"，被主线程挂载起来的任务"异步任务",后者一般是放在一个叫任务队列的数据结构中。  
>     只有当所有同步任务都执行完了才会，开始观察任务队列中被挂载起来的任务，并且按照队列的特性，先进先出的依次执行。

28、DOM是什么？

> DOM是Document Object Model，即文档对象模型，它允许脚本控制Web页面、窗口和文档。

29、DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

> 事件捕获（event capturing）：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。  
> 事件冒泡（dubbed bubbling）：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。  
> 无论是事件捕获还是事件冒泡，它们都有一个共同的行为，就是事件传播，  
> dom标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。

30、数组去重的方法

> 1.ES6 Set去重

var arr = [1,2,3,3,2,1,5,1];
    var arr2 = Array.from(new Set(arr))
    console.log(arr2)

var arr = [1,2,3,3,2,1,5,1];
    let a = [...new Set(arr)]
    console.log(a)

> 2.利用for嵌套for，然后splice去重  
> 3.利用indexOf去重

> 4.利用filter  
> `filter(x,index,self)`可以为数组提供过滤功能，其中`x`代表元素，`index`是与`X`一同传入元素的索引，而`self`代表数组本身。

var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7];
    var arr2 = arr.filter(function(x, index,self) { 
    return self.indexOf(x)===index;
    }); 
    console.log(arr2); //[1, 2, 3, 4, 5, 6 ,7]

32、事件委托

> 简介：事件委托指的是，不在事件的发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素DOM的类型，来做出不同的响应。  
> 举例：最经典的就是ul和li标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加。  
> 好处：比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制。

34、DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 4]

35、null和undefined的区别？

> null是一个表示"无"的对象，转为数值时为0  
> undefined是一个表示"无"的原始值，转为数值时为NaN  
> 当声明的变量还未被初始化时，变量的默认值为undefined  
> null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象  
> undefined表示 “缺少值”，就是此处应该有一个值，但是还没有定义。典型用法是：

>  *  1.变量被声明了，但没有赋值时，就等于 undefined  
>     2. 调用函数时，应该提供的参数没有提供，该参数等于 undefined  
>     3. 对象没有赋值的属性，该属性的值为 undefined  
>     4. 函数没有返回值时，默认返回 undefined

>  *  null表示“没有对象”，即该处不应该有值。典型用法是：  
>     1. 作为函数的参数，表示该函数的参数不是对象  
>     2. 作为对象原型链的终点

36、哪些操作会造成内存泄漏？

> 内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。  
> 垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
> 
>  *  setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
> 
> 1.  闭包
> 2.  控制台日志
> 3.  循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

37、typeof null返回什么？为什么？

> 不同的对象在底层都表示为二进制，在javascript中二进制前三位都为0的话会被判断为object类型，  
> null的二进制表示全0，自然前三位也是0，所以执行typeof时会返回“object”

39、ES6中…运算符能做什么

> 1.复制数组 2.合并数组 3. 扩展运算符可以与解构赋值结合起来，用于生成数组。 4.扩展运算符还可以将字符串转为真正的数组

42、如何实现浏览器内多个标签页之间的通信?

> 第一种——调用localStorage  
> 在一个标签页里面使用 localStorage.setItem(key,value)添加（修改、删除）内容；  
> 在另一个标签页里面监听 storage 事件。  
> 即可得到 localstorge 存储的值，实现不同标签页之间的通信。

> 第二种——调用cookie+setInterval()  
> 将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。

43、数据类型的自动转换和隐式转换你知道哪些？

> **隐式类型转换：**  
> 1 == ‘1’  
> ‘1’ + 1  
> ‘1’ - 1  
> **显示类型转换**：  
> `parseInt(str,radix)/parseFloat(str,radix)/Number()`转变成数字。  
> `Boolean(param)`转变成布尔值  
> `subString()`转变成字符串

**VUE方面的问题：**  
1.谈谈你对MVVM开发模式的理解

> **Vue是一个 MVVM框架，其各层的对应关系如下:  
> View层：在Vue中是绑定dom对象的HTML(代表UI视图，负责数据的展示；)  
> ViewModel层：在Vue中是实例的vm对象 (负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；)  
> Model层：在Vue中是data、computed、methods等中的数据(代表数据模型，数据和业务逻辑都在Model层中定义；)  
> 在 Model 层的数据变化时，View层会在ViewModel的作用下，实现自动更新**

2、Vue的响应式原理？

> Vue响应式底层实现方法是 Object.defineProperty() 方法，该方法中存在一个getter和setter的可选项，可以对属性值的获取和设置造成影响  
> Vue中编写了一个wather来处理数据，在使用getter方法时，总会通知wather实例对view层渲染页面，同样的，在使用setter方法时，总会在变更值的同时，通知wather实例对view层进行更新

3、Vue的生命周期

> 1.`beforeCreate` \--创建前  
> 触发的行为：vue实例的挂载元素`$el`和数据对象`data`都为`undefined`，还未初始化。  
> 在此阶段可以做的事情：加loading事件  
> 2.`created` \--创建后  
> 触发的行为：vue实例的数据对象data有了，`$el`还没有  
> 在此阶段可以做的事情：解决`loading`，请求`ajax`数据为`mounted`渲染做准备  
> 3.`beforeMount` \--渲染前  
> 触发的行为：vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换  
> 在此阶段可以做的事情：。。。  
> 4.`mounted` \--渲染后  
> 触发的行为：vue实例挂载完成，data.filter成功渲染  
> 在此阶段可以做的事情：配合路由钩子使用  
> 5.`beforeUpdate` \--更新前  
> 触发的行为：data更新时触发  
> 在此阶段可以做的事情：。。。  
> 6.`updated` —更新后  
> 触发的行为：data更新时触发  
> 在此阶段可以做的事情：数据更新时，做一些处理（此处也可以用watch进行观测）  
> 7.`beforeDestroy` —销毁前  
> 触发的行为：组件销毁时触发  
> 在此阶段可以做的事情：可向用户询问是否销毁  
> 8.`destroyed` —销毁后  
> 触发的行为：组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在  
> 在此阶段可以做的事情：组件销毁时进行提示

4、请详细说下你对vue生命周期的理解？

> 答：总共分为8个阶段：创建前 / 后，载入前 / 后，更新前 / 后，销毁前 / 后。  
> 创建前/后： 在`beforeCreated`阶段，vue实例的挂载元素`$el`和数据对象`data`都为`undefined`，还未初始化。  
> 载入前/后：在`beforeMount`阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。  
> 更新前/后：当data变化时，会触发`beforeUpdate`和`updated`方法。  
> 销毁前/后：在执行`destroy`方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

5、vue生命周期在真实场景下的业务应用

> created： 进行ajax请求异步数据的获取、初始化数据  
> mounted： 挂载元素内dom节点的获取  
> nextTick： 针对单一事件更新数据后立即操作dom  
> updated： 任何数据的更新，如果要做统一的业务逻辑处理  
> watch： 监听具体数据变化，并做相应的处理

7、Vue中双向数据绑定是如何实现的？

> Vue在组件和实例初始化的时候，会将data里的数据进行数据劫持(`object.definepropty`对数据做处理)。被解除过后的数据会有两个属性：一个叫`getter`，一个叫`setter`。  
> `getter`是使用数据的时候触发，`setter`是在修改数据的时候触发，修改数据的时候触发`setter`，同时也触发了底层的`watcher`(可以收到属性的变化通知并执行相应的函数，从而更新视图。)监听，通知`dom`修改刷新。

8、父组件与子组件传值

> 父向子传值：属性传值，父组件通过给子组件标签上定义属性，子组件通过props方法接收数据；  
> 子向父传值：事件传值，子组件通过`$emit`(‘自定义事件名’，值)，父组件通过子组件上的@自定义事件名=“函数”接收 (`$emit`方法传递参数)

10、 如何让css只在当前组件中起作用

> 将当前组件的 (style)修改为(styple scoped)

11、第一次加载页面会触发哪几个钩子

> 第一次加载会触发 `beforeCreate`、`created`、`beforeMount`、`mounted`四个钩子

12、Vuex是什么？

> Vuex是专门为Vue服务，用于管理页面的数据状态、提供统一数据操作的生态系统  
> vuex:是vue提供的状态管理工具，简单解释就是vue各个组件直接的变量是不能直接共享的，组件直接的参数传递才多层的时候变得异常复杂，所以就诞生了vuex的状态管理工具，保证了状态的统一和可追踪  
> ①：这个状态自管理应用包含以下几个部分：  
> state，驱动应用的数据源；  
> view，以声明方式将 state 映射到视图；  
> actions，响应在 view 上的用户输入导致的状态变化。  
> ②：使用vuex管理数据的好处：  
> 能够在vuex中集中管理共享的数据，便于开发和后期进行维护  
> 能够高效的实现组件之间的数据共享，提高开发效率  
> 存储在vuex中的数据是响应式的，当数据放生改变时，页面中的数据会同步更新  
> ③：vuex中的数据和data中的数据与什么区别？  
> vuex中的数据是全局的，共享的，data中的数据是私有的  
> vuex中的数据是响应式的，只要vuex中的数据发生改变，引用vuex中的数据的文件会同步更新  
> vuex中的数据是单向的，想要修改vuex中的数据必须在mutation中修改

13、router是什么？

> 1.`router`：`this.$router` 是路由【导航对象】，用它 可以方便的 使用 JS 代码，实现路由的 前进、后退、 跳转到新的 URL 地址  
> 2.`routes`：指创建vue-router路由实例的配置项。用来配置多个route路由对象  
> 3.`route`：`this.$route` 是路由【参数对象】，所有路由中的参数， params, query 都属于它

14、vue单页面应用及优缺点

> vue核心是一个响应的数据绑定系统，mvvm，数据驱动，组件化，轻量，简洁，高效，快速，模块友好。  
> 缺点：不支持低版本浏览器，最低到IE9，不利于SEO的优化，首页加载时间较长，不可以使用浏览器的导航按钮需要自行实现前进后退。

15、vue生命周期的作用是什么？

> 它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

16、vue.nextTick()的用处？

> nextTick可以使我们在下次DOM更新循环结束之后执行延迟回调，用于获得更新后的DOM。

18、兄弟组件之间如何传值？

> 可以用过一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，之后通过分别调用Bus事件触发 e m i t 和 监 听 emit和监听 emit和监听on来实现组件之间的通信和参数传递，类似window的全局自定义事件。类似与子传父，只不过是利用一个新的vue示例作为媒介，而不是当前vue示例(this)

19、jquery和vue的控制DOM元素的主要区别是什么？

> jquery操作的是直接dom元素。vue操作的是dom元素对象。  
> vue.js优势是（视图-模型）双向绑定，简化了dom的操作（不用重写大量的html标签），提高dom的复用率（以最少代码实现更多的功能），倾向于数据读写，虽然看上去使用比较繁琐，但是利于后期的维护。  
> jquery优势是jquery语义化，容易理解，比较简单，可拓展的插件多。  
> 总结:如果dom操作频繁，不需要动画效果，就使用vue.js。如果dom操作不频繁，但又需要复杂的动画效果，就使用jquery. vue.js比较适合于后台管理页面，jquery比较适合于前台用户交互页面。

20、vue2模版template的四种写法？

> 1.写在构造器里的：  
> 2.写在(template)标签里  
> 3.写在(script type=“x-template”)标签里  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 5]

21、var let const声明的变量的区别

> let不允许在相同作用域内，重复声明同一个变量。let声明的变量只在其所在代码块内有效  
> const是定义常量的,而且定义一次以后不能再进行更改， 否者会报错；  
> 使用const定义的常量， 拥有let一样的特性（无声明提前， 有块状作用域， 重复声明）
> 
>  *  let：\* 声明的变量只在它所在的代码块有效； \* 需要先声明然后再使用，否则报错
>  *  var：\* 声明的变量在全局范围内都有效；
> 
>  *  var定义的变量可以修改，如果不初始化会输出undefined，不会报错
> 
>  *  const： \* 声明一个只读的常量，一旦声明，常量的值就不允许改变；
> 
>  *  一旦声明了变量，就必须初始化，不能留到以后赋值；
>  *  只在声明所在的块级作用域内有效；  
>     ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 6]

22、如何理解JSON？

> JSON是一种轻量级的数据交换格式,作用：通常用于服务端向页面传输数据。  
> JSON 是 一个 JS 对象，有 2 个 API  
> JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。  
> JSON.parse() 方法用于将一个 JSON 字符串转换为对象。

23、函数声明和函数表达式的区别（作用域）

> 1.以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的.  
> 2.以函数声明的方法定义的函数,函数可以在函数声明之前调用,而函数表达式的函数只能在声明之后调用.  
> 3.以函数声明的方法定义的函数并不是真正的声明,它们仅仅可以出现在全局中,或者嵌套在其他的函数中,但是它们不能出现在循环,条件或者try/catch/finally中,而函数表达式可以在任何地方声明.

24、关于动态路由

> 不能传递参数的是静态路由，可以传递参数，但是其对应的路由数量是不确定的，叫动态路由  
> 在参数名前面加上：,然后将参数写在路由的path内  
> 这是无参数跳转![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 7]
> 
> > query和params两者都可以传递参数，区别是什么？  
> > 1.query 传参配置的是path，而params传参配置的是name，在params中配置path无效  
> > 2.query在路由配置不需要设置参数，而params必须设置  
> > 3.query传递的参数会显示在地址栏中  
> > 4.params传参刷新会无效，但是query会保存传递过来的值，刷新不变

25、vue是什么？跟JS有什么区别？

> vue就是一个js库，并且无依赖别的js库，跟jquery差不多。vue的核心库只关注视图层，非常容易与其它库或已有项目整合。Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。  
> 区别：在传统web开发中，我们搭建项目都以html结构为基础，然后通过jquery或者js来添加各种特效功能，需要去选中每一个元素进行命令，这样太繁琐了  
> vue的好处：1.数据绑定：vue会根据对应的元素，进行设置元素数据，通过输入框，以及get获取数据等多种方式进行数据的实时绑定，进行网页及应用的数据渲染 。  
> 2.组件式开发：通过vue的模块封装，它可以将一个web开发中设计的各种模块进行拆分，变成单独的组件，然后通过数据绑定，调用对应模版组件，同时传入参数，即可完成对整个项目的开发。  
> 一句话概括：用数据绑定的思想，vue可以简单写单个页面，也可以写一个大的前端系统，也可以做手机app的界面。

26、Vue-CLi是啥？

> 它是一个vue.js的脚手架工具。说白了就是一个自动帮你生成好项目目录，配置好Webpack，以及各种依赖包的工具

27、vue是怎么渲染的？

> 1.原有模板语法，挂载渲染：就是对使用Vue标签语法的hmtl进行渲染。  
> 2.使用render属性，`createElement`函数直接渲染：原本无html，通过JavaScript 的完全编程的能力生成页面。  
> 3.使用render属性，配合组件的`template`属性，`createElement`函数渲染  
> 4.使用render属性，配合单文件组件，`createElement`函数渲染

28、vue常用的5个事件修饰符  
`.stop`: 阻止事件冒泡；  
`.prevent`: 阻止默认事件；  
`.capture`: 实现捕获触发事件的机制 ;  
`.self`: 实现只有点击当前元素时候，才会触发事件处理函数 ;  
`.once`: 事件只触发一次；

26、vue-router 有哪几种导航钩子？

> 第一种：全局导航钩子  
> 第二种：单独路由独享钩子  
> 第三种：组件内的钩子

29、vue-router 路由模式有几种？

> Hash: 使用URL的hash值来作为路由。支持所有浏览器。  
> History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式  
> Abstract： 支持所有javascript运行模式。如果发现没有浏览器的API，路由会自动强制进入这个模式。

30、Vue组件通信的六种方法

>  *  1.父组件向子组件传值： `props/$emit`
>  *  2.子组件向父组件传值（通过事件形式） `$ emit/$on`
>  *  3.vuex
>  *  4.`$ attrs`/`$ listeners`  
>     `$ attrs`：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 `v-bind="$ attrs"` 传入内部组件。通常配合 interitAttrs 选项一起使用。  
>     `$ listeners`：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 `v-on="$listeners"` 传入内部组件
>  *  5.`provide/inject`
>  *  6.`$parent` / `$children`与 `ref`  
>     ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例  
>     $parent / $children：访问父 / 子实例

31、veu中的三要素

> 响应式：vue如何监听到 data 每个属性变化?  
> vue的响应式原理：Vue在组件和实例初始化的时候，会将data里的数据进行数据劫持(object.definepropty对数据做处理)。被解除过后的数据会有两个属性：一个叫`getter`，一个叫`setter`。  
> `getter`是使用数据的时候触发，`setter`是在修改数据的时候触发，修改数据的时候触发setter，同时也触发了底层的watcher(可以收到属性的变化通知并执行相应的函数，从而更新视图。)监听，通知dom修改刷新。

> 模板引擎：vue的模板如何被解析，指令如何处理？  
> . 本质就是个字符串。模板最终必须转换成JS代码。因为：  
> . 有逻辑，如（v-if v-for）,必须用JS才能实现  
> . 转换为html渲染页面，必须用JS才能实现  
> . 因此，模板最重要转化成JS函数(render函数）

> 渲染：vue 的模板如何被渲染成 html?  
> 模板解析成render函数---->返回JS模拟的虚拟DOM结构：模板是一段字符串，模板解析生成render函数，执行render函数返回为vnode，vnode表明了各个节点的层级关系、特性、样式、绑定的事件。  
> 2、 vnode---->html：通过 updateComponent函数调用vm.\_update（）传入vnode，利用基于snabbdom的patch（)方法改造的生成真实DOM节点并渲染页面。

32、v-if跟v-show的区别

> v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；  
> v-if判断是否加载，可以减轻服务器的压力，在需要时加载,但有更高的切换开销;  
> v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。  
> 如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

33、在ES6中，Promise对象只有三种状态

> 异步操作“未完成”（pending）  
> 异步操作“已完成”（resolved，又称fulfilled）  
> 异步操作“失败”（rejected）

34、箭头函数和普通函数的区别

> ,不需要通过`function`关键字创建函数,并且可以省略`return`关键字.但函数体内的this对象指的是定义时所在的对象,而不是使用时所在的对象;  
> ①不绑定this,箭头函数的this永远指向其父作用域，任何方法都改变不了，包括call，apply，bind。  
> 普通函数的this指向调用它的那个对象。  
> ②箭头函数不能作为构造函数，不能使用`new`  
> ③箭头函数不绑定`arguments`  
> ④箭头函数通过`call`和`apply`调用，不会改变this指向，只会传入参数  
> ⑤箭头函数没有原型属性

35、ES6有哪些新特性

> 1.模板字符串:模板字符串是为了解决使用+号拼接字符串的不便利而出现的  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 8]  
> 2.**解析结构**  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 9]

1.  **函数默认参数**

> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 10]  
> 4.**展开运算符**  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 11]  
> 5.class类

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191121123351495.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191113162055161.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191121124703451.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200715103759921.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200723175058371.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191113130031930.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200722151725604.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191121105419697.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200724165923651.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200724170149479.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200724170325199.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20200724170535220.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA==,size_16,color_FFFFFF,t_70