前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)

---

本人是个新手，写下博客用于自我复习、自我总结。
如有错误之处，请各位大佬指出。
学习资料来源于：尚硅谷 和 珠峰培训

---

HTML5 相关面试题

相信大家对于HTML已经有自己的理解了，那么HTML5和HTML到底有什么区别？
这类的文章网上有很多，我也就不赘述了。
HTML5主要的新特性：

什么是标签语义化： 合理的标签干合理的事情

都有哪些标签：

• 块状标签：

  1. … 行内标签： … 行内块状标签： <select> <option></code>…</li> </ul> <p><strong>块标签和行内标签有什么区别：</strong><br> <strong>块状标签：</strong> 能独自占据一行，可以对其设置宽度、高度、对齐等属性。它可以容纳行内标签和其他块状标签。但是 p,h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。</p> <p><strong>行内状标签：</strong> 不能独自占据一行，默认在一行中排列，不能对其设置宽度、高度、对齐等属性，仅仅靠自身的字体大小和图像尺寸来支撑结构。行内元素只能容纳文本或其他行内元素。（a特殊: a标签可以放div块级标签，同时a标签里不能再放a标签）</p> <p><strong>行内块标签：</strong> 和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙。默认宽度就是它本身内容的宽度。高度，行高、外边距以及内边距都可以控制。</p> <p><strong>上述三类标签怎么转换：</strong><br> (1)display:inline;转换为行内元素<br> (2)display:block;转换为块状元素<br> (3)display:inline-block;转换为行内块状元素</p> <p><strong>display中还有哪些值：</strong><br> display:none<br> display:flex<br> display:table</p> <p><strong>让元素隐藏，你可以怎么做？display:none和visibility:hidden的区别：</strong><br> 推荐文章：https://www.cnblogs.com/Chen-XiaoJun/p/6213499.html</p> <p><strong>项目中，你什么时候用到了display:flex：</strong><br> 主要用flex来代替浮动，完成页面的布局</p> <p><strong>除了这种方式能居中，还有哪些：</strong>（在下方）</p> <p><strong>都有哪些盒子模型：</strong>（在下方）</p> <hr> <h1>CSS3 相关面试题</h1> <p>面试的时候我们应该怎么回答问题，某位大佬的讲解如下：<br> 比如面试官提问：需要盒子水平垂直居中，你有几种方案？<br> 这种情况下，虽然你心里可能知道有几种方案，但是我们不能一开口就说：一共有五种方案，方案如下：… 这样显得是背下来的。<br> 在回答这一类的问题时，可以这么说：这种需求在我之前的项目中是非常常见的，最开始的时候，我只使用了（xxx，xxx）这些方式…随着之后的不断学习和使用，发现（xxx）这种方式是有（xxx）这样的缺陷的，因此经过查阅资料 / 阅读文档 发现， 从（xxx）方面上来看，这个方式(xxx)是比较好的。之后有一段时间，当我自己去看博客、GitHub时，发现这个方式（xxx）虽然不常用，但也能实现，我觉得还是挺有意思的，所以就记下来了。</p> <p>对于其他的问题也是同样的答题思路。总结来说，就是：<br> （1）在之前的学习生涯 / 项目开发 中，遇到过这样的问题 / 曾实现过这样的功能，我当时是（xxx）这么做的。<br> （2）随着某新型语言的兴起 / 随着之后我不断的学习，发现了一个更好的（xxx）方案，虽然这方案有（xxx）这样的缺陷，但是它实现起来，从目前来看是最好的。<br> （3）同时，我平常喜欢去看博客（或者其他的xxx），在查阅时突然发现有这样的一个（xxx）方式也能实现，发现也还不错，所以我也记录了下来。</p> <hr> <p><strong>不考虑其他因素，下面哪种的渲染性能比较高</strong>：<br> <a href="http://img.e-com-net.com/image/info8/eaa67731b0b54bd3a824733c4ef11123.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/eaa67731b0b54bd3a824733c4ef11123.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第2张图片" width="196" height="232" style="border:1px solid black;"></a><br> 答案是第二种，因为css的浏览器渲染机制是选择器从右向左查询。<br> 即：第二种方式就只找所有的a，而对于第一种它会先找所有的a，再找box下所有的a，它进行了二次筛选。</p> <hr> <h2>盒子模型</h2> <p>推荐文章：https://www.cnblogs.com/yky-iris/p/7719895.html</p> <p><strong>请你谈一谈盒子模型：</strong><br> 它可以分为标准盒子模型、怪异盒模型（IE盒子模型）、flex弹性伸缩盒模型、columns多列布局盒模型。（当然最基础的还是前两种盒模型，后面两种并不是一定要在回答中提到）</p> <p><strong>标准盒模型</strong>：<code>box-sizing: content-box;</code><br> <a href="http://img.e-com-net.com/image/info8/c1bfacec85994aa290d03099abbccc61.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c1bfacec85994aa290d03099abbccc61.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第3张图片" width="650" height="405" style="border:1px solid black;"></a><br> 在标准盒模型下，width和height是内容区域即content的width和height。<br> 而盒子总宽度为 width + padding(左右) + border(左右) + margin(左右)</p> <p>可想而知，如果我们使用标准盒模型设置width和height，调整好了一切参数后，一旦需要我们修改其中的参数，比如调整border，那么盒子模型的位置也就必然出现偏移，即：每次修改border、padding后，你都需要手动修改width和height的值。</p> <p>在css3中就允许我们使用怪异盒模型，这次我们设置width和height，那么盒子大小就是这个值，不管我们怎么调border、padding，它会通过自动缩放内容，来帮我们保证这个width和height值不变。</p> <p>因此推荐在项目中使用怪异盒模型。不仅如此，其实各大UI组件、公共样式的源码中，使用的也都是怪异盒模型。</p> <p><strong>怪异盒模型</strong>：<code>box-sizing: border-box;</code><br> <a href="http://img.e-com-net.com/image/info8/f5aa53be5f7f498796983195d841b85b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f5aa53be5f7f498796983195d841b85b.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第4张图片" width="650" height="397" style="border:1px solid black;"></a><br> 而IE盒模型或怪异盒模型，width和height除了content区域外，还包含padding和border。<br> 盒子的总宽度为 width + margin(左右)（即width已经包含了padding和border值）</p> <p><strong>flex盒模型</strong>：<code>display: flex;</code><br> 推荐文章：<br> http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html<br> <a href="http://img.e-com-net.com/image/info8/f1bcc7a9297d46378ecfab92b939f229.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f1bcc7a9297d46378ecfab92b939f229.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第5张图片" width="576" height="346" style="border:1px solid black;"></a><br> 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。<br> 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；<br> 交叉轴的开始位置叫做cross start，结束位置叫做cross end。<br> 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。</p> <p><strong>多列布局：</strong>（基本上不用）<br> <a href="http://img.e-com-net.com/image/info8/3f40ac1cc6104a57bdc43c8288cc0c2f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3f40ac1cc6104a57bdc43c8288cc0c2f.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第6张图片" width="208" height="366" style="border:1px solid black;"></a></p> <hr> <h2>盒子水平垂直居中的方案</h2> <pre><code class="prism language-html"><span class="token doctype"><!DOCTYPE html></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>盒子水平垂直居中<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style language-css"> <span class="token selector">body</span> <span class="token punctuation">{ </span> <span class="token property">height</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid red<span class="token punctuation">;</span> <span class="token comment">/*position: relative;*/</span> <span class="token punctuation">}</span> <span class="token selector">.box</span> <span class="token punctuation">{ </span> <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 48px<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid lightblue<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> lightcyan<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* 定位1 方式 缺点：一定要知道具体的宽和高，才能设置margin-top和margin-left 因为在项目中宽和高有可能是后期在js中动态计算的或者是自适应的，没有办法在最开始得到具体宽和高 */</span> <span class="token comment">/* body { position: relative; } .box{ position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -50px; } */</span> <span class="token comment">/* 定位2 方式 缺点：与定位1相比，虽然定位2在计算时没涉及到宽高，但是在类box里一定得设置宽高才行 */</span> <span class="token comment">/* body { position: relative; } .box { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } */</span> <span class="token comment">/* 定位3 方式 好处：与定位2相比，虽然定位3在计算时也没涉及到宽高，但它在类box不用设置宽高也行 缺点：兼容性不是很好 */</span> <span class="token comment">/* body { position: relative; } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } */</span> <span class="token comment">/* display:flex 方式 缺点：不兼容 （但通常选用这种方案） */</span> <span class="token selector">body</span><span class="token punctuation">{ </span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* display:table-cell 方式 （很少有人用）*/</span> <span class="token comment">/* body{ display: table-cell; vertical-align: middle; text-align: center; !*设置固定宽高才能用*! width: 500px; } .box{ display: inline-block; } */</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> zzz <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token comment"><!-- JavaScript 方式 <script> let HTML = document.documentElement, winW = HTML.clientWidth, winH = HTML.clientHeight, boxW = box.offsetWidth, boxH = box.offsetHeight; box.style.position = "absolute"; box.style.left = (winW - boxW) / 2 + 'px'; box.style.top = (winH - boxH) / 2 + 'px'; </script> --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <hr> <h2>经典布局方案</h2> <p>圣杯布局 、 双飞翼布局 => 左右固定，中间自适应<br> （但实际上flex和定位更简单，因此我更偏向于使用定位方式，如果不考虑兼容就用flex）</p> <h3>圣杯布局</h3> <pre><code class="prism language-html"><span class="token doctype"><!DOCTYPE html></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>圣杯布局<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style language-css"> <span class="token selector">html, body</span><span class="token punctuation">{ </span> <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.container</span><span class="token punctuation">{ </span> <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0 200px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.left, .right</span><span class="token punctuation">{ </span> <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">min-height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> lightblue<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.center</span><span class="token punctuation">{ </span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">min-height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> lightsalmon<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.left, .center, .right</span><span class="token punctuation">{ </span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.left</span><span class="token punctuation">{ </span> <span class="token property">margin-left</span><span class="token punctuation">:</span> -100%<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> -200px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.right</span><span class="token punctuation">{ </span> <span class="token property">margin-right</span><span class="token punctuation">:</span> -200px<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container clearfix<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>left<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <h3>双飞翼布局</h3> <pre><code class="prism language-html"><span class="token doctype"><!DOCTYPE html></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>双飞翼布局<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style language-css"> <span class="token selector">html, body</span><span class="token punctuation">{ </span> <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.container, .left, .right</span><span class="token punctuation">{ </span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.container</span><span class="token punctuation">{ </span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.container .center</span><span class="token punctuation">{ </span> <span class="token property">margin</span><span class="token punctuation">:</span> 0 200px<span class="token punctuation">;</span> <span class="token property">min-height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> lightsalmon<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.left, .right</span><span class="token punctuation">{ </span> <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">min-height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> lightblue<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.left</span><span class="token punctuation">{ </span> <span class="token property">margin-left</span><span class="token punctuation">:</span> -100%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.right</span><span class="token punctuation">{ </span> <span class="token property">margin-left</span><span class="token punctuation">:</span> -200px<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>clearfix<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>left<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <h3>flex布局</h3> <pre><code class="prism language-html"><span class="token doctype"><!DOCTYPE html></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>flex布局<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style language-css"> <span class="token selector">html, body</span><span class="token punctuation">{ </span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.container</span><span class="token punctuation">{ </span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token comment">/*space-between：空白均匀分布到元素间*/</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.left, .right</span><span class="token punctuation">{ </span> <span class="token comment">/*flex：放大倍数 缩小倍数 占据大小*/</span> <span class="token property">flex</span><span class="token punctuation">:</span> 0 0 200px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> lightblue<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.center</span><span class="token punctuation">{ </span> <span class="token comment">/*flex：1 把剩余空间全都占据（自动分配占据空间）*/</span> <span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">min-height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> lightsalmon<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>left<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <h3>定位方式布局</h3> <pre><code class="prism language-html"><span class="token doctype"><!DOCTYPE html></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>定位<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style language-css"> <span class="token selector">html, body</span><span class="token punctuation">{ </span> <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.container</span><span class="token punctuation">{ </span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.left, .right</span><span class="token punctuation">{ </span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">min-height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> lightblue<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.left</span><span class="token punctuation">{ </span> <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.right</span><span class="token punctuation">{ </span> <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.center</span><span class="token punctuation">{ </span> <span class="token property">margin</span><span class="token punctuation">:</span> 0 200px<span class="token punctuation">;</span> <span class="token property">min-height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> lightsalmon<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>left<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <hr> <h2>css实现三角形</h2> <pre><code class="prism language-html"><span class="token doctype"><!DOCTYPE html></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style language-css"> <span class="token selector">*</span> <span class="token punctuation">{ </span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#box</span> <span class="token punctuation">{ </span> <span class="token property">width</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 100px solid transparent<span class="token punctuation">;</span> <span class="token property">border-top-color</span><span class="token punctuation">:</span> deeppink<span class="token punctuation">;</span> <span class="token property">border-left-color</span><span class="token punctuation">:</span> deeppink<span class="token punctuation">;</span> <span class="token comment">/*border-right-color: deeppink;*/</span> <span class="token comment">/*border-bottom-color: deeppink;*/</span> <span class="token punctuation">}</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <hr> <h1>JS 相关面试题</h1> <hr> <h2>8种数据类型及区别</h2> <p>（在我的认知中，从最开始的学习中，也一直以为只有6种数据类型，直到真的有人问到8种数据类型，才傻眼了）</p> <p>基本数据类型：Number、String、Boolean、Undefined、Null<br> 引用数据类型：Object、Function<br> ES6 中新增了一种 Symbol 。这种类型的对象永不相等，即始创建的时候传入相同的值，可以解决属性名冲突的问题，做为标记。</p> <p>（但是对于 bigInt 到底算不算数据类型，暂持观望态度）</p> <p>推荐文章：https://blog.csdn.net/u013592575/article/details/95087953</p> <hr> <h2>关于堆栈内存和闭包作用域的题</h2> <p>堆：存储引用类型值的空间<br> 栈：存储基本类型值和执行代码的环境</p> <pre><code class="prism language-js"> <span class="token comment">//example 1</span> <span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">{ </span><span class="token punctuation">}</span><span class="token punctuation">,</span> b <span class="token operator">=</span> <span class="token string">'0'</span><span class="token punctuation">,</span> c <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> a<span class="token punctuation">[</span>b<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'你'</span><span class="token punctuation">;</span> a<span class="token punctuation">[</span>c<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'好'</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">[</span>b<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/89e76ccb8b5c4b1cb5dfc009e34482ba.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/89e76ccb8b5c4b1cb5dfc009e34482ba.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第7张图片" width="650" height="245" style="border:1px solid black;"></a><br> 因此输出结果是：好</p> <p><strong>数组和对象的区别</strong>？<br> 数组：以数字作为索引，这个索引就是它的属性名。即：数组的数据没有”名称”<br> 对象：当然也可以用数字作为索引，这个索引也是它的属性名，但它还可以设置其他的属性名。</p> <p>且数组表示有序数据的集合，而对象表示无序数据的集合。如果数据的顺序很重要，就用数组，否则就用对象。</p> <hr> <pre><code class="prism language-javascript"> <span class="token comment">//example 2</span> <span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">{ </span><span class="token punctuation">}</span><span class="token punctuation">,</span> b <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'1'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> c <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> a<span class="token punctuation">[</span>b<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'你'</span><span class="token punctuation">;</span> a<span class="token punctuation">[</span>c<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'好'</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">[</span>b<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>因为Symbol是创建唯一值的，因此会出现下面的效果：<br> <a href="http://img.e-com-net.com/image/info8/863a5bab2d89433f84a8f387d425653e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/863a5bab2d89433f84a8f387d425653e.jpg" alt="在这里插入图片描述" width="195" height="87"></a></p> <p>因此输出结果是：你</p> <hr> <pre><code class="prism language-javascript"> <span class="token comment">//example 3</span> <span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">{ </span><span class="token punctuation">}</span><span class="token punctuation">,</span> b <span class="token operator">=</span> <span class="token punctuation">{ </span> n<span class="token punctuation">:</span> <span class="token string">'1'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> c <span class="token operator">=</span> <span class="token punctuation">{ </span> m<span class="token punctuation">:</span> <span class="token string">'2'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> a<span class="token punctuation">[</span>b<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'你'</span><span class="token punctuation">;</span> a<span class="token punctuation">[</span>c<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'好'</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">[</span>b<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>看下图就会发现，只要在obj中，即将要存放一个对象，无论这个对象里面存放的是什么，存放的效果都会是[object Object]: xxx。（即属性名相同，均为Object）<br> （这是因为存放的时候调用了toString()方法）<br> <a href="http://img.e-com-net.com/image/info8/61f2f10c1e564327b8797e83805fe3d9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/61f2f10c1e564327b8797e83805fe3d9.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第8张图片" width="363" height="560" style="border:1px solid black;"></a></p> <p>因此输出结果是：好</p> <p><strong>Object.prototype.toString()的用法</strong>？<br> 之前，我们总会看到直接输出一个对象，会得到[object Object]这样的输出结果，为什么会输出这样的结果，其实是因为，输出的是toString()方法的返回值。它默认输出的就会是这样的结果。现在，通过调用Object.prototype.toString，可以为其改变输出结果。<br> <a href="http://img.e-com-net.com/image/info8/0be29b5194a241919471e9da26eeb548.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0be29b5194a241919471e9da26eeb548.jpg" alt="在这里插入图片描述" width="650" height="81"></a><br> 当然也可以直接对 构造函数的实例 修改。<br> <a href="http://img.e-com-net.com/image/info8/107c19353f63470b81ffc018a96c2ccb.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/107c19353f63470b81ffc018a96c2ccb.jpg" alt="在这里插入图片描述" width="650" height="59"></a></p> <hr> <pre><code class="prism language-javascript"> <span class="token keyword">var</span> test <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span>i<span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token keyword">return</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token function">alert</span><span class="token punctuation">(</span>i<span class="token operator">*=</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>给var test = ? 赋值的步骤是：（1）创建一个变量 （2）准备值 （3）关联<br> 这题的值是执行一个函数得来的，紧接着就把函数执行了，传进来的值就是2。这个叫：立即执行的自定义函数。</p> <p>这里还涉及到了<strong>栈内存</strong>，这个过程的标准说法叫：浏览器一加载页面就形成栈内存，这个栈内存是用来执行代码的。每当这个函数被执行一次，都会形成一个全新的执行上下文（Execution Context Stack ：执行栈）。页面就会将这个函数压缩到这个栈里去执行。如下图</p> <p>需要注意，因为alert弹出的结果都会转化为字符串，<br> 因此答案是：‘4’ （字符串4）<br> <a href="http://img.e-com-net.com/image/info8/b0a4775cebde41d586e55d5c21e468cb.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b0a4775cebde41d586e55d5c21e468cb.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第9张图片" width="650" height="370" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/936d7ac008fc4a8e9afe90a29c91bead.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/936d7ac008fc4a8e9afe90a29c91bead.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第10张图片" width="650" height="192" style="border:1px solid black;"></a><br> <strong>闭包形成的条件</strong>：</p> <ol> <li>函数嵌套</li> <li>内部函数引用外部函数的局部变量</li> </ol> <p>闭包的优点：延长外部函数局部变量的生命周期<br> 闭包的缺点：容易造成内存泄漏</p> <p>需要注意的是：合理的使用闭包，用完闭包要及时清除(销毁)</p> <hr> <pre><code class="prism language-javascript"> <span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> b <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token constant">A</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token function-variable function">A</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token function">alert</span><span class="token punctuation">(</span>a <span class="token operator">+</span> b<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token function">alert</span><span class="token punctuation">(</span>a<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token constant">A</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token constant">A</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/27645f38bb6f4f1c94201f74fbd92820.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/27645f38bb6f4f1c94201f74fbd92820.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第11张图片" width="650" height="453" style="border:1px solid black;"></a><br> 因此输出结果是：‘1’ 和 ‘4’</p> <p>你会发现全局的a和b根本就没变，因此可知闭包的作用：保存和保护</p> <hr> <h2>作用域</h2> <pre><code class="prism language-html"><span class="token doctype"><!DOCTYPE html></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"> <span class="token comment">//第1题 作用域</span> <span class="token comment">//在内存中这些变量的值是存放在栈内存中的</span> <span class="token comment">//全局作用域</span> <span class="token keyword">var</span> num1 <span class="token operator">=</span> <span class="token number">55</span><span class="token punctuation">;</span> <span class="token keyword">var</span> num2 <span class="token operator">=</span> <span class="token number">66</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">f1</span><span class="token punctuation">(</span>num<span class="token punctuation">,</span> num1<span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token comment">//局部作用域</span> <span class="token comment">//传递参数后，就相当于：</span> <span class="token comment">// var num = 55;</span> <span class="token comment">// var num1 = 66;</span> <span class="token comment">//现在对它们的值进行修改：</span> <span class="token comment">//在局部作用域可以找到num和num1，这是两个形式参数</span> <span class="token comment">//所以对它们值的修改，只是修改局部变量</span> num <span class="token operator">=</span> <span class="token number">100</span><span class="token punctuation">;</span> num1 <span class="token operator">=</span> <span class="token number">100</span><span class="token punctuation">;</span> <span class="token comment">//在局部作用域找不到num2，所以会前往函数外寻找num2</span> <span class="token comment">//所以对它值的修改，会修改全局变量</span> num2 <span class="token operator">=</span> <span class="token number">100</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//100</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num1<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//100</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num2<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//100</span> <span class="token punctuation">}</span> <span class="token comment">// 55 66</span> <span class="token function">f1</span><span class="token punctuation">(</span>num1<span class="token punctuation">,</span> num2<span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// 报错</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num1<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//55</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num2<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//100</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <hr> <h2>值类型和引用类型的传递</h2> <p><a href="http://img.e-com-net.com/image/info8/7367c2a4177a4b6f8b912af8daa2f431.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7367c2a4177a4b6f8b912af8daa2f431.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第12张图片" width="650" height="175" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/9533df7f64444d12a9c049bc10429a9b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9533df7f64444d12a9c049bc10429a9b.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第13张图片" width="650" height="237" style="border:1px solid black;"></a></p> <pre><code class="prism language-html"><span class="token doctype"><!DOCTYPE html></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"> <span class="token comment">//第2题 值类型和引用类型的传递</span> <span class="token comment">//首字母大写：构造函数</span> <span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span> age<span class="token punctuation">,</span> salary<span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>salary <span class="token operator">=</span> salary<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">//构造函数所创建的对象中才有这个隐含属性，指向该构造函数的原型对象</span> <span class="token comment">//原型对象就相当于一个公共区域，所有同一个类的实例都可以访问到这个原型对象</span> <span class="token comment">//这样以后，我们就可以将对象中共有的内容，统一设置到原型对象中</span> Person<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">sayName</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Hello大家好，我是"</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">f1</span><span class="token punctuation">(</span>person<span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token comment">//相当于 var person = p;</span> <span class="token comment">//可以修改p的值，因为person和p全都指向同一个堆内存的地址</span> person<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">"ls"</span><span class="token punctuation">;</span> <span class="token comment">//但是这个new，并不意味着p也新建一个对象，而只是给person新建</span> person <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">"aa"</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">//构造函数需要new</span> <span class="token keyword">var</span> p <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">"zs"</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> p<span class="token punctuation">.</span><span class="token function">sayName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//zs</span> <span class="token comment">//普通函数直接调用</span> <span class="token function">f1</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//对person进行new，却不会让p也new</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//ls</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>过程：<br> <a href="http://img.e-com-net.com/image/info8/bc8333581fe2452f8817359d3091a7b4.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/bc8333581fe2452f8817359d3091a7b4.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第14张图片" width="650" height="340" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/813b989681554b1fb271c2befcbc4e7d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/813b989681554b1fb271c2befcbc4e7d.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第15张图片" width="650" height="323" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/6ae695d36050406a8313fb65f01041f2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6ae695d36050406a8313fb65f01041f2.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第16张图片" width="650" height="340" style="border:1px solid black;"></a></p> <hr> <h2>对象（数组）的深克隆和浅克隆</h2> <pre><code class="prism language-javascript"> <span class="token comment">// 二维及二维以上都叫做多维对象</span> <span class="token comment">// 比如obj是一维的，一维的属性名里的属性值，不一定仅仅是基本属性值，还有可能是数组，对象，正则</span> <span class="token comment">// 其中b是数组，c是对象，还要再深一个层级，变成二维。如果再深就三维，以此类推。</span> <span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{ </span> a<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span> b<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span><span class="token number">20</span><span class="token punctuation">,</span><span class="token number">30</span><span class="token punctuation">]</span><span class="token punctuation">,</span> c<span class="token punctuation">:</span> <span class="token punctuation">{ </span> x<span class="token punctuation">:</span> <span class="token number">10</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> d<span class="token punctuation">:</span> <span class="token regex">/^\d+$/</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// =>浅克隆：只把第一层克隆下来</span> <span class="token keyword">let</span> obj2 <span class="token operator">=</span> <span class="token punctuation">{ </span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> key <span class="token keyword">in</span> obj<span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token comment">//运行到if里，也就证明遍历到原型了，需要break</span> <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>obj<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">break</span><span class="token punctuation">;</span> obj2<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> obj<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> obj2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//ES6浅克隆方式：</span> <span class="token keyword">let</span> obj2 <span class="token operator">=</span> <span class="token punctuation">{ </span><span class="token operator">...</span>obj<span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/a0adbeef372e4f8d96cfc0212a0f4e82.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a0adbeef372e4f8d96cfc0212a0f4e82.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第17张图片" width="650" height="416" style="border:1px solid black;"></a><br> 因为obj===obj2，返回的是false，也就证明obj2是被克隆出来的。<br> 但是当你修改obj2.c.x的值：<br> <img src="http://img.e-com-net.com/image/info8/53eb96704cee4106a7d7e450c03750f9.jpg" alt="在这里插入图片描述" width="0" height="0"><br> 你会发现，obj.c.x的值也被修改了。按理说obj和obj2应该没有联系了？<br> <a href="http://img.e-com-net.com/image/info8/b4f68561a1524332b1d7d21764f29642.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b4f68561a1524332b1d7d21764f29642.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第18张图片" width="575" height="230" style="border:1px solid black;"></a><br> 这就是因为浅克隆只把第一级克隆了，第二级没克隆，这样一来你操作第二级就也会对第一级造成影响。<br> <a href="http://img.e-com-net.com/image/info8/576725066759440a8b24b802553a4490.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/576725066759440a8b24b802553a4490.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第19张图片" width="650" height="383" style="border:1px solid black;"></a><br> 在项目中假如用到的数据有很多层，你只是想修改一部分，而不想修改原有的数据结构，因此就肯定需要使用深克隆。</p> <hr> <pre><code class="prism language-javascript"> <span class="token comment">// =>深克隆方式1（项目中使用这种方案就可以了）</span> <span class="token keyword">let</span> obj2 <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>虽然这种方式经常使用，但是需要说明的是，经过JSON.stringify处理后会变成字符串。但你可以发现，这个过程中，如果存放的有正则、函数就会变成空字符串。对于日期而言，我们想让它变成标准日期格式对象，现在它变成了字符串。这样显然是不好的。因此这种方式是有问题的，但实际上我们很少碰到存放正则、函数、日期的情况，所以暂且只要注意这三个情况就可以了。<br> <a href="http://img.e-com-net.com/image/info8/f57a919d66864652aa4bdbf3266e255f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f57a919d66864652aa4bdbf3266e255f.jpg" alt="在这里插入图片描述" width="628" height="79"></a><br> <a href="http://img.e-com-net.com/image/info8/884750dce6da409c8fb5f9c8fab5ca50.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/884750dce6da409c8fb5f9c8fab5ca50.jpg" alt="在这里插入图片描述" width="429" height="69"></a><br> <a href="http://img.e-com-net.com/image/info8/e0478a1b34f84049b23f9b663e886031.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e0478a1b34f84049b23f9b663e886031.jpg" alt="在这里插入图片描述" width="449" height="69"></a><br> 最完善的方案：</p> <pre><code class="prism language-javascript"> <span class="token comment">// 深克隆</span> <span class="token keyword">function</span> <span class="token function">deepClone</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token comment">// 过滤特殊情况</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>obj <span class="token operator">===</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> obj <span class="token operator">!==</span> <span class="token string">"object"</span><span class="token punctuation">)</span> <span class="token keyword">return</span> obj<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>obj <span class="token keyword">instanceof</span> <span class="token class-name">RegExp</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>obj <span class="token keyword">instanceof</span> <span class="token class-name">Date</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 不直接创建空对象，目的：克隆的结果和之前保持相同的所属类</span> <span class="token keyword">let</span> cloneObj <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">obj<span class="token punctuation">.</span>constructor</span><span class="token punctuation">;</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> key <span class="token keyword">in</span> obj<span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token keyword">if</span> <span class="token punctuation">(</span>obj<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> cloneObj<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">deepClone</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> cloneObj<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">let</span> obj2 <span class="token operator">=</span> <span class="token function">deepClone</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> obj2<span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj <span class="token operator">===</span> obj2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//false</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>c <span class="token operator">===</span> obj2<span class="token punctuation">.</span>c<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//false</span> </code></pre> <hr> <h2>阿里的一道关于面向对象的面试题</h2> <pre><code class="prism language-js"> <span class="token keyword">function</span> <span class="token function">Foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token function-variable function">getName</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> Foo<span class="token punctuation">.</span><span class="token function-variable function">getName</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> Foo<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">getName</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">var</span> <span class="token function-variable function">getName</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> Foo<span class="token punctuation">.</span><span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">Foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">new</span> <span class="token class-name">Foo<span class="token punctuation">.</span>getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">new</span> <span class="token class-name">Foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">new</span> <span class="token class-name">new</span> <span class="token function">Foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>输出结果为：<br> <a href="http://img.e-com-net.com/image/info8/75ce2e8e50864bf7a212bf79875ad6af.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/75ce2e8e50864bf7a212bf79875ad6af.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第20张图片" width="271" height="235" style="border:1px solid black;"></a><br> 所谓变量提升就是：在当前作用域下，所有js代码执行之前，将所有function函数提前声明定义、将所有var变量提前声明。<br> （即：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部）</p> <p>在本题中，首先是变量提升，涉及到下面三个部分：<br> <a href="http://img.e-com-net.com/image/info8/2d94d49330464545a6b04a7eb122b914.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2d94d49330464545a6b04a7eb122b914.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第21张图片" width="321" height="194" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/66b2abfd53ff406f99f26c4c778c8ded.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/66b2abfd53ff406f99f26c4c778c8ded.jpg" alt="在这里插入图片描述" width="280" height="92"></a><br> <a href="http://img.e-com-net.com/image/info8/b4299272e9e54b009d487cbd950985e6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b4299272e9e54b009d487cbd950985e6.jpg" alt="在这里插入图片描述" width="237" height="98"></a><br> 因此Foo函数被提前声明。然后是var getName被提前声明。（此时没有赋值）<br> 最后getName函数被提前声明，但是发现getName已经被声明了，所以它会去给这个getName赋值。所以这一步的结果如下：<br> （Foo和getName各占据一段堆内存，为了便于看到输出结果，这里忽略堆内存地址号，直接用输出结果替代）<br> <a href="http://img.e-com-net.com/image/info8/7eeafff445df4569bb2e09cff8015df7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7eeafff445df4569bb2e09cff8015df7.jpg" alt="在这里插入图片描述" width="237" height="97"></a><br> 变量提升之后，代码执行：<br> 对于以下部分：<br> <a href="http://img.e-com-net.com/image/info8/40072b1d08304f69bb327b7e7105fd64.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/40072b1d08304f69bb327b7e7105fd64.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第22张图片" width="393" height="385" style="border:1px solid black;"></a><br> 运行Foo.getName，给Foo里getName声明赋值。<br> 然后Foo.prototype.getName，就是给Foo的原型中添加getName。<br> 因为原型也是对象，所以它也占据一段堆内存。</p> <p>所以在这里会形成这样的结构：<br> <a href="http://img.e-com-net.com/image/info8/30a83a0055a64b4cb9c5a236726b417c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/30a83a0055a64b4cb9c5a236726b417c.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第23张图片" width="468" height="289" style="border:1px solid black;"></a><br> 然后是以下代码部分：<br> <a href="http://img.e-com-net.com/image/info8/2943f055163249489fbbc05a11d11560.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2943f055163249489fbbc05a11d11560.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第24张图片" width="331" height="119" style="border:1px solid black;"></a><br> 因为之前只是声明而没有赋值，所以在这里就又会去找那个getName然后赋值。<br> <a href="http://img.e-com-net.com/image/info8/a7ec91ee87f547a897b0fc4220f69150.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a7ec91ee87f547a897b0fc4220f69150.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第25张图片" width="264" height="121" style="border:1px solid black;"></a><br> 因此，输出结果中肯定不会出现5了。</p> <p>最后分析输出结果：</p> <p>根据之前的分析，画出图就很好理解了：<br> <a href="http://img.e-com-net.com/image/info8/8fa491e4f69f48e0a0070571ea3ccb31.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8fa491e4f69f48e0a0070571ea3ccb31.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第26张图片" width="650" height="281" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/e7480ce99991481698f33babbbcfcfa9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e7480ce99991481698f33babbbcfcfa9.jpg" alt="在这里插入图片描述" width="203" height="73"></a><br> 对于Foo().getName()，它是两步操作，先把Foo执行，再让它的返回结果执行getName()。需要注意的是，Foo执行时，它里面的getName并不是私有的，因此会去上级作用域寻找，即到了全局中寻找。因此全局下的getName再次发生了变化：<br> <a href="http://img.e-com-net.com/image/info8/f110a154635d49a6b0fa344ebb0a4d4a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f110a154635d49a6b0fa344ebb0a4d4a.jpg" alt="在这里插入图片描述" width="248" height="74"></a><br> 对于普通函数来说，return this的时候，就相当于return了 window 。<br> 所以Foo()的返回结果是window。<br> 因此Foo().getName() => window.getName()。此时getName结果为1。所以：<br> <a href="http://img.e-com-net.com/image/info8/d8e2ed9b8541482b8d9b7b625eee4d5b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d8e2ed9b8541482b8d9b7b625eee4d5b.jpg" alt="在这里插入图片描述" width="230" height="75"></a><br> 从以上可以发现，Foo加()和不加()是两个概念。<br> 对于接下来的题，就需要涉及到JS运算符的优先执行顺序。<br> 如下图，不加 () 就叫 无参数new ，加 () 就叫 有参数new。<br> <code>.</code>的方式叫成员访问。<br> 那么这三个到底是谁先运行呢？<br> （因为它可能是先 new Foo 再 getName()，也有可能是先 Foo.getName() 再 new ）<br> <a href="http://img.e-com-net.com/image/info8/3030eb2bbfd74d779b43130d522ff809.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3030eb2bbfd74d779b43130d522ff809.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第27张图片" width="286" height="107" style="border:1px solid black;"></a><br> 查阅文档发现：<br> （优先级高的优先执行，相同优先级从左到右执行）<br> <a href="http://img.e-com-net.com/image/info8/721939d1fa8644d59b6204c2bc64f7a3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/721939d1fa8644d59b6204c2bc64f7a3.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第28张图片" width="650" height="262" style="border:1px solid black;"></a><br> 因此对于 new Foo.getName()，<br> <a href="http://img.e-com-net.com/image/info8/c1b010b01c594f57973ac9a88f843d96.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c1b010b01c594f57973ac9a88f843d96.jpg" alt="在这里插入图片描述" width="176" height="69"></a><br> 先执行Foo.getName()，再new。<br> Foo.getName()返回的结果就是输出2的那个函数，<br> 对它new还是把它当普通函数执行，输出结果为2.</p> <p>同理对于 new Foo().getName()，<br> <a href="http://img.e-com-net.com/image/info8/bf0ef1c2ff08420fa26b5b3074c20c19.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/bf0ef1c2ff08420fa26b5b3074c20c19.jpg" alt="在这里插入图片描述" width="198" height="68"></a><br> 就是 从左到右，先执行 new Foo() ，再getName()。<br> new Foo()虽然也是函数执行，但它创建了一个当前函数的实例，实例调getName显然要去原型里面找了（因为最开始构建函数时，没给实例本身添加任何属性）<br> 所以输出结果是3.</p> <p>最后对于 new new Foo().getName()，有人如果对这个过程还是不了解的话，就可能会说，这优先级不都是19吗，那从左向右执行，怎么还出现new 一个 new 的操作？<br> 实则不然。这其中 new Foo() 执行出来是个实例xxx，那么这里就相当于变成了：<br> new xxx.getName()，又回到了new Foo.getName()这个形式上。</p> <p>因此，首先创建了一个当前函数的实例，实例调getName依然去原型里面找，返回的是一个输出3的函数，对它new还是把它当普通函数执行，输出结果为3.<br> <a href="http://img.e-com-net.com/image/info8/b94c029c88f04cdbab3c3e14f6f4ee1a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b94c029c88f04cdbab3c3e14f6f4ee1a.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第29张图片" width="312" height="113" style="border:1px solid black;"></a></p> <hr> <h2>头条的一道关于EventLoop的面试题</h2> <p>推荐文章：<br> eventloop解析：http://www.ruanyifeng.com/blog/2013/10/event_loop.html<br> 理解async和await：https://segmentfault.com/a/1190000007535316<br> 理解promise中的resolve：https://www.jianshu.com/p/5b0b89bf4664</p> <pre><code class="prism language-js"> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">async1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'async1 start'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">await</span> <span class="token function">async2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'async1 end'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">async2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'async2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'script start'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'setTimeout'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">)</span> <span class="token function">async1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>resolve<span class="token punctuation">)</span><span class="token punctuation">{ </span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'promise1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'promise2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'script end'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>输出结果：<br> <a href="http://img.e-com-net.com/image/info8/861663cae3e248149ca7eca1fdd15398.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/861663cae3e248149ca7eca1fdd15398.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第30张图片" width="261" height="284" style="border:1px solid black;"></a><br> 首先需要说明的是，浏览器是多线程的，而JS是单线程的，也就导致浏览器只给一个线程让它来渲染。</p> <p>代码一行一行从上至下执行叫“同步”，反之就是“异步”。JS中大部分代码都是同步的。<br> 而本题中就涉及到异步。</p> <p>浏览器提供了一个：事件队列（EventQueue），里面存放的就是一些延后执行的任务，比如定时器。而在事件队列中，又分为微任务队列和宏任务队列。<br> <a href="http://img.e-com-net.com/image/info8/17c4bb1f7f934336958746ccd5614642.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/17c4bb1f7f934336958746ccd5614642.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第31张图片" width="269" height="287" style="border:1px solid black;"></a><br> 整体的执行顺序就是：主线程代码先执行，执行过后，到事件队列中执行。在事件队列中，先去微任务队列中执行，没有微任务再去执行宏任务。等到宏任务都执行完了，浏览器也就空闲下来了。</p> <p>那么现在回到本题中，从上到下的执行代码也就是主线程：<br> 首先创建函数async1和async2，然后输出’script start’。</p> <p>接下来碰到了一个定时器，需要说明的是，定时器属于宏任务，因此把这个定时器任务存放到事件队列的宏任务队列中。设置好之后，主线程代码继续执行，碰到了async1()，async1函数执行。因此接下来输出’async1 start’。</p> <p>输出后，碰到了await async2()。它做的操作是：执行async2，等待返回的结果。<br> 但它本身并不是同步操作，而是异步操作，属于微任务。因此async1函数的执行就停在了这个地方，等待主线程执行结束去执行微任务，返回结果后才会继续执行。<br> 此时async2已经执行，所以输出’async2’。<br> 但是到底返回了一个怎样的结果，可以参考一下上面的推荐文章。<br> 因此接下来执行new Promise部分。</p> <p>new Promise时，会立即把EC函数执行（即 new的时候 才是同步的）。<br> 因此输出’promise1’。然后碰到了resolve（resolve和reject都属于微任务）。<br> 所以Promise中的执行就停在了这个地方，等待主线程执行结束去执行微任务。<br> resolve / reject 执行的时候，把then / catch 中的方法执行。</p> <p>主线程最后输出’script end’。（主栈第一阶段完成）<br> <a href="http://img.e-com-net.com/image/info8/c9cfb6cb234f4a3b8391958fae3edea1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c9cfb6cb234f4a3b8391958fae3edea1.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第32张图片" width="650" height="350" style="border:1px solid black;"></a><br> 然后就是去事件队列中寻找了（先微任务后宏任务），找到任务后就拿回到主线程中执行。这个查找、运行、查找、运行…的操作，就叫做EventLoop。</p> <p>在这里需要说明的是，在从微任务队列中查找任务时，不同的v8引擎会导致结果不同，即不一定是先获取到先存放的任务，所以在这里输出结果有可能不同。</p> <p>那么假设先查找到了上图的B任务，那么接下来输出’async1 end’。<br> 然后查找到了上图的C任务，那么接下来输出’promise2’。<br> 最后执行到了宏任务，输出’setTimeout’，结束。</p> <p>具体哪些是宏任务？哪些是微任务？以及它们的细节，感兴趣的大家可以查阅一下官方文档。</p> <p>宏任务：定时器、事件绑定…<br> 微任务：promise、 async、 await…</p> <hr> <h2>数据劫持和拦截</h2> <p>问，a等于什么值，才会console.log(1)？</p> <pre><code class="prism language-js"> <span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token operator">?</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>a <span class="token operator">==</span> <span class="token number">1</span> <span class="token operator">&&</span> a <span class="token operator">==</span> <span class="token number">2</span> <span class="token operator">&&</span> a <span class="token operator">==</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>首先需要说明 <code>==</code> 和 <code>===</code> 的差异：<br> <a href="http://img.e-com-net.com/image/info8/3ee50f01f4f543a0bd188b0f7a81fdf7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3ee50f01f4f543a0bd188b0f7a81fdf7.jpg" alt="在这里插入图片描述" width="134" height="70"></a><a href="http://img.e-com-net.com/image/info8/bea8bfb85760438cbfabca376322b779.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/bea8bfb85760438cbfabca376322b779.jpg" alt="在这里插入图片描述" width="132" height="74"></a><br> 三个等于号不仅要比较值，也要比较数据类型。<br> 两个等于号只比较值，不比较数据类型，但是它到底是<strong>如何实现</strong>这个比较的？</p> <p>如果两个等于号左右两侧的数据类型不一样，它的转换规则为：</p> <ol> <li><code>对象 == 字符串</code> ：会使用 对象.toString() 把对象变成字符串</li> <li><code>null == undefined</code> ：相等，但是和其他值比较就不再相等了</li> <li><code>NaN == NaN</code>： 不相等，NaN和任何值都不相等</li> <li>剩下的所有情况比较时，都转换为数字<br> 比如：<code>"1"==true</code>，等号左右两侧全都会变成数字1<br> 对于对象也是一样会转成数字<br> <a href="http://img.e-com-net.com/image/info8/1db56b3d779e46498c88d64e9d3ccc36.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1db56b3d779e46498c88d64e9d3ccc36.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第33张图片" width="218" height="144" style="border:1px solid black;"></a><br> 当你知道这上面的规则时，<strong>第一种方案</strong>就出现了：因为对象和数字比较需要先调用toString()，如果我们自己没设置toString()就会去调用原型上的toString()，那我们可以自己设置一个toString()效果，让它满足题目等式要求。</li> </ol> <pre><code class="prism language-javascript"> <span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">{ </span> i<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token keyword">return</span> <span class="token operator">++</span><span class="token keyword">this</span><span class="token punctuation">.</span>i<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>a <span class="token operator">==</span> <span class="token number">1</span> <span class="token operator">&&</span> a <span class="token operator">==</span> <span class="token number">2</span> <span class="token operator">&&</span> a <span class="token operator">==</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p><strong>第二种方案</strong>：数据劫持和拦截（这也是之后Vue里要涉及到的知识点）</p> <p>推荐文章：<br> 数据劫持：https://www.jianshu.com/p/87a1ff1d7a3c</p> <p>数据劫持和拦截的简例：</p> <pre><code class="prism language-javascript"> <span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{ </span> name<span class="token punctuation">:</span> <span class="token string">'1'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token punctuation">{ </span> <span class="token keyword">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'获取'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">set</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'设置'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>通过Object.defineProperties的设置，当我们获取obj.name时就会触发get，当我们设置obj.name时就会触发set，如下图：<br> （获取时出现的undefined，是因为get没有返回值）<br> <a href="http://img.e-com-net.com/image/info8/c666715962b54db79c03b4248b990d8c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c666715962b54db79c03b4248b990d8c.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第34张图片" width="227" height="225" style="border:1px solid black;"></a><br> 那么数据劫持和拦截就是：监听某个对象里的某个属性，当它在获取和设置时做一系列操作。</p> <p>因此根据这个特点，<strong>第二种方案</strong>为：</p> <pre><code class="prism language-javascript"> <span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>window<span class="token punctuation">,</span> <span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token punctuation">{ </span> <span class="token keyword">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token keyword">return</span> <span class="token operator">++</span>i<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>a <span class="token operator">==</span> <span class="token number">1</span> <span class="token operator">&&</span> a <span class="token operator">==</span> <span class="token number">2</span> <span class="token operator">&&</span> a <span class="token operator">==</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p><strong>第一种方案toString的另一种实现方式</strong>：</p> <pre><code class="prism language-javascript"> <span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span> a<span class="token punctuation">.</span>toString <span class="token operator">=</span> a<span class="token punctuation">.</span>shift<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>a <span class="token operator">==</span> <span class="token number">1</span> <span class="token operator">&&</span> a <span class="token operator">==</span> <span class="token number">2</span> <span class="token operator">&&</span> a <span class="token operator">==</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <hr> <h2>练习题</h2> <pre><code class="prism language-js"> <span class="token keyword">function</span> <span class="token constant">A</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">Fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token function-variable function">A</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> Fn<span class="token punctuation">.</span><span class="token constant">A</span><span class="token operator">=</span><span class="token constant">A</span><span class="token punctuation">;</span> Fn<span class="token punctuation">.</span>prototype<span class="token operator">=</span><span class="token punctuation">{ </span> <span class="token constant">A</span><span class="token punctuation">:</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{ </span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token constant">A</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> Fn<span class="token punctuation">.</span><span class="token constant">A</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">Fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token constant">A</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">new</span> <span class="token class-name">Fn<span class="token punctuation">.</span>A</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">new</span> <span class="token class-name">Fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token constant">A</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">new</span> <span class="token class-name">new</span> <span class="token function">Fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token constant">A</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>看起来和之前的题很像，唯一的区别就是这其中出现了箭头函数。<br> 需要注意 原型对象上的A函数，是个箭头函数，箭头函数不能被new。<br> 因此 new new Fn().A() 会报错。</p> <p><strong>箭头函数和普通函数的区别</strong>：<br> 箭头函数没有自己的执行主体（this），它使用的this都是继承自己上下文的this。<br> 普通函数有它自己的this。<br> 箭头函数之所以不能被new，是因为它没有原型链prototype也就没有constructor构造器函数，所以它不能被new。</p> <p>推荐文章：<br> 箭头函数和普通函数：https://www.cnblogs.com/biubiuxixiya/p/8610594.html</p> <p>因此输出结果：1、1、2、1、3、报错</p> <hr> <pre><code class="prism language-js"> <span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span> <span class="token keyword">var</span> y <span class="token operator">=</span> <span class="token punctuation">{ </span> x<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> z<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token keyword">this</span><span class="token punctuation">.</span>x <span class="token operator">*=</span> x<span class="token punctuation">;</span> x <span class="token operator">+=</span> <span class="token number">2</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>n<span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token keyword">this</span><span class="token punctuation">.</span>x <span class="token operator">*=</span> n<span class="token punctuation">;</span> x <span class="token operator">+=</span> <span class="token number">3</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">var</span> m <span class="token operator">=</span> y<span class="token punctuation">.</span>z<span class="token punctuation">;</span> <span class="token function">m</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span> y<span class="token punctuation">.</span><span class="token function">z</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">.</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>输出结果为：<br> <a href="http://img.e-com-net.com/image/info8/c1a1ee1fb9504c939ee40815bf01da2d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c1a1ee1fb9504c939ee40815bf01da2d.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第35张图片" width="255" height="151" style="border:1px solid black;"></a></p> <hr> <pre><code class="prism language-js"> <span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> y <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> x <span class="token operator">+=</span> <span class="token number">2</span><span class="token punctuation">;</span> <span class="token function-variable function">fn</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>y<span class="token punctuation">)</span> <span class="token punctuation">{ </span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>y <span class="token operator">+</span> <span class="token punctuation">(</span><span class="token operator">--</span>x<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>输出结果为：<br> <a href="http://img.e-com-net.com/image/info8/9f666836805643e18dfb7a487f6c5560.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9f666836805643e18dfb7a487f6c5560.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第36张图片" width="248" height="148" style="border:1px solid black;"></a></p> <hr> <h1>算法相关面试题</h1> <hr> <h2>将字符串进行驼峰命名</h2> <pre><code class="prism language-html"><span class="token doctype"><!DOCTYPE html></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"> <span class="token comment">//已知有字符串foo='get-element-by-id',写一个function将其转化成驼峰表示法”getElementById”</span> <span class="token comment">//自定义函数</span> <span class="token keyword">function</span> <span class="token function">toString</span><span class="token punctuation">(</span>foo<span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token comment">//根据某个字符进行切割</span> <span class="token keyword">var</span> arr <span class="token operator">=</span> foo<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'-'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//获取每个元素中的第一个字符并转换成大写</span> <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator"><</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">charAt</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token comment">//根据某个字符将数组转成字符串</span> <span class="token keyword">return</span> arr<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token string">'get-element-by-id'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <hr> <h2>冒泡排序</h2> <p>如果有兴趣看其他的排序方式及思路，大家可以去我之前的文章查阅一下：<br> https://blog.csdn.net/qq_45613931/article/details/104693885<br> 虽然是后台Java语法的，但是整体思路和实现方式没有差异。</p> <pre><code class="prism language-html"><span class="token doctype"><!DOCTYPE html></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"> <span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">32</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">67</span><span class="token punctuation">,</span><span class="token number">82</span><span class="token punctuation">,</span><span class="token number">21</span><span class="token punctuation">,</span><span class="token number">11</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">///轮数</span> <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator"><</span>arr<span class="token punctuation">.</span>length<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token comment">//次数</span> <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>j<span class="token operator"><</span>arr<span class="token punctuation">.</span>length<span class="token operator">-</span><span class="token number">1</span><span class="token operator">-</span>i<span class="token punctuation">;</span>j<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token comment">//判断前一个大于后一个数时进行交换</span> <span class="token keyword">if</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token operator">></span>arr<span class="token punctuation">[</span>j<span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token comment">//借助第三方变量交换两个变量的值</span> <span class="token keyword">var</span> temp <span class="token operator">=</span> arr<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">;</span> arr<span class="token punctuation">[</span>j<span class="token punctuation">]</span> <span class="token operator">=</span> arr<span class="token punctuation">[</span>j<span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span> arr<span class="token punctuation">[</span>j<span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">=</span> temp<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <hr> <h2>反转数组</h2> <pre><code class="prism language-html"><span class="token doctype"><!DOCTYPE html></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"> <span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> arr<span class="token punctuation">.</span>length <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token comment">//arr[0] arr[arr.length-1-0];</span> <span class="token comment">//arr[1] arr[arr.length-1-1];</span> <span class="token comment">//arr[2] arr[arr.length-1-2];</span> <span class="token comment">//arr[3] arr[arr.length-1-3];</span> <span class="token comment">//借助第三方变量交换两个变量的值</span> <span class="token keyword">var</span> temp <span class="token operator">=</span> arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span> arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> arr<span class="token punctuation">[</span>arr<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span> <span class="token operator">-</span> i<span class="token punctuation">]</span><span class="token punctuation">;</span> arr<span class="token punctuation">[</span>arr<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span> <span class="token operator">-</span> i<span class="token punctuation">]</span> <span class="token operator">=</span> temp<span class="token punctuation">;</span> <span class="token punctuation">}</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <hr> <h2>去掉数组中重复性的数据</h2> <p>推荐文章：<br> https://blog.csdn.net/weixin_42412046/article/details/81459294</p> <p><strong>思路1</strong>：只用到原数组。遍历原数组，每次都拿原数组的中的一个值，和它后面的所有值比较，一旦出现重复，就把当前值从原数组中去掉，然后遍历到下一个值。</p> <pre><code class="prism language-javascript"> <span class="token keyword">let</span> ary <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> ary<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token keyword">let</span> item <span class="token operator">=</span> ary<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span> args <span class="token operator">=</span> ary<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>args<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> ary<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>i<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> i<span class="token operator">--</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ary<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>但是对于思路1会出现一些问题：使用splice删除了原数组中的当前重复数据项，后面所有项的索引都要发生改变，一旦原数组中存放的数据很多，在性能方面一定很差。同时因为原数组的改变，一定需要<code>i--</code>，否则会产生数组塌陷问题。</p> <p>为了避免对原数组进行操作，因此从思路1的思路继续出发，<strong>思路2</strong>：我们可以再建一个新数组，一旦判断出当前项不重复，就把当前项放入新数组。</p> <pre><code class="prism language-javascript"> <span class="token keyword">let</span> ary <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> ary<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token keyword">let</span> item <span class="token operator">=</span> ary<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span> args <span class="token operator">=</span> ary<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator">+</span> <span class="token number">1</span> <span class="token operator">==</span> ary<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>ary<span class="token punctuation">[</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>args<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{ </span> arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>对于思路2，需要注意的是，在思路1代码的基础上，一定要把最后一项加入到新数组</p> <p>当然也有办法，让我们只对原数组进行操作，且避免数组塌陷问题的。<br> <strong>思路3</strong>：在遍历时，将重复的元素设为null，遍历结束后，把这些null从原数组中去除。</p> <pre><code class="prism language-javascript"> <span class="token keyword">let</span> ary <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> ary<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token keyword">let</span> item <span class="token operator">=</span> ary<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span> args <span class="token operator">=</span> ary<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>args<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> ary<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> ary <span class="token operator">=</span> ary<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>item <span class="token operator">=></span> item <span class="token operator">!==</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ary<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>但是这么做其实有一个二次处理的过程，性能上也不太好。当然还有其他办法.<br> <strong>思路4</strong>：当我们发现重复项，我们不去删除它，而是把数组最后一项赋值到第一项，这样一来也就实现了删除的效果，同时没有数组塌陷问题。然后把最后一项删除。<br> 需要注意的是，我们把最后一项放到了当前项上，所以需要<code>i--</code>，继续从当前索引位置开始进行判断。</p> <pre><code class="prism language-javascript"> <span class="token keyword">let</span> ary <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> ary<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token keyword">let</span> item <span class="token operator">=</span> ary<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span> args <span class="token operator">=</span> ary<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>args<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> ary<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> ary<span class="token punctuation">[</span>ary<span class="token punctuation">.</span>length<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span> ary<span class="token punctuation">.</span>length<span class="token operator">--</span><span class="token punctuation">;</span> i<span class="token operator">--</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ary<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>在前面的代码中，都用到了indexOf，但是indexOf有兼容性问题。<br> 那么接下来就不使用indexOf来实现。<br> <strong>思路5</strong>：模拟indexOf实现</p> <pre><code class="prism language-javascript"> <span class="token keyword">let</span> ary <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{ </span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> ary<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token keyword">let</span> item <span class="token operator">=</span> ary<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> obj<span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token operator">!==</span><span class="token string">'undefined'</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> ary<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> ary<span class="token punctuation">[</span>ary<span class="token punctuation">.</span>length<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span> ary<span class="token punctuation">.</span>length<span class="token operator">--</span><span class="token punctuation">;</span> i<span class="token operator">--</span><span class="token punctuation">;</span> <span class="token keyword">continue</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> obj<span class="token punctuation">[</span>item<span class="token punctuation">]</span> <span class="token operator">=</span> item<span class="token punctuation">;</span> <span class="token punctuation">}</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ary<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p><strong>思路6</strong>：<br> 1.创建一个新数组,把原数组中的第一个元素插入到新数组中<br> 2.遍历原数组中的每一个元素分别和新数组中的每一个元素进行比较<br> 3.一旦原数组的某个元素和新数组的值都没有重复，那么就把它加入到新数组中</p> <pre><code class="prism language-js"> <span class="token comment">//原数组</span> <span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">//新数组</span> <span class="token keyword">var</span> t <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> t<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">=</span> arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">//arr中的每个元素</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token comment">//t中的每个元素</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> k <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> k <span class="token operator"><</span> t<span class="token punctuation">.</span>length<span class="token punctuation">;</span> k<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token comment">//当原数组中的值和新数组中的值相同的时候,就没有必要再继续比较了,跳出内循环</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>t<span class="token punctuation">[</span>k<span class="token punctuation">]</span> <span class="token operator">==</span> arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token keyword">break</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">//拿原数组中的某个元素比较到新数组中的最后一个元素还没有重复</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>k <span class="token operator">==</span> t<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token comment">//将数据插入新数组</span> t<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p><strong>思路7</strong>：先排序，再相邻比较</p> <pre><code class="prism language-javascript"> <span class="token keyword">let</span> ary <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">]</span><span class="token punctuation">;</span> ary<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> a <span class="token operator">-</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> ary<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token keyword">if</span><span class="token punctuation">(</span>ary<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">==</span> ary<span class="token punctuation">[</span>i<span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> ary<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> ary <span class="token operator">=</span> ary<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>item <span class="token operator">=></span> item <span class="token operator">!==</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ary<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p><strong>思路8</strong>：先排序，再相邻比较（基于正则）</p> <pre><code class="prism language-javascript"> <span class="token keyword">let</span> ary <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">]</span><span class="token punctuation">;</span> ary<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> a <span class="token operator">-</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span> ary <span class="token operator">=</span> ary<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'@'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ary<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> reg <span class="token operator">=</span> <span class="token regex">/(\d+@)\1*/g</span><span class="token punctuation">,</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> ary<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>reg<span class="token punctuation">,</span> <span class="token punctuation">(</span>n<span class="token punctuation">,</span> m<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{ </span> arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token function">Number</span><span class="token punctuation">(</span>m<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> m<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//arr.push(parseFloat(m));</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p><strong>思路9</strong>：利用Set就简单的多了，但是需要注意Set是ES6中才出现的。</p> <pre><code class="prism language-javascript"> <span class="token keyword">let</span> ary <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>ary<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <pre><code class="prism language-javascript"> <span class="token keyword">let</span> ary <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">let</span> arr <span class="token operator">=</span> Array<span class="token punctuation">.</span><span class="token keyword">from</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>ary<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>更多方法可以参考推荐文章。</p> <hr> <h2>数组扁平化的实现方案</h2> <p>数组扁平化：把多维数组变成一维数组。</p> <p>方案一：ES6 方法直接实现</p> <pre><code class="prism language-javascript"> <span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">13</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">14</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token number">10</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> arr <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token number">Infinity</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>方案二：<br> 首先arr.toString，arr就会变成一串数字，并用逗号分隔，而且它不是数组。<br> 那我们就可以用<code>split(',')</code>让它变成数组，并根据逗号区分出每个元素。<br> 之后会发现，数组中存放的每个数字变成了字符串。<br> 然后用map，把每个元素变成数字，即可。</p> <pre><code class="prism language-javascript"> <span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">13</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">14</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token number">10</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> arr <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>item <span class="token operator">=></span> <span class="token function">parseFloat</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>方案三：</p> <pre><code class="prism language-javascript"> <span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">13</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">14</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token number">10</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> arr <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/(\[|\])/g</span><span class="token punctuation">,</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>item <span class="token operator">=></span> <span class="token function">parseFloat</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>方案四：</p> <pre><code class="prism language-javascript"> <span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">13</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">14</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token number">10</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">while</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span>item <span class="token operator">=></span> Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token operator">...</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>方案五：</p> <pre><code class="prism language-javascript"> <span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">13</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">14</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token number">10</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token keyword">function</span> <span class="token function">myFlat</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> _this <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span> <span class="token comment">//循环arr中每一项，把不是数组的存储到新数组中</span> <span class="token keyword">let</span> <span class="token function-variable function">fn</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{ </span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token keyword">let</span> item <span class="token operator">=</span> arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token function">fn</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">continue</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> result<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token function">fn</span><span class="token punctuation">(</span>_this<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> result<span class="token punctuation">;</span> <span class="token punctuation">}</span> Array<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>myFlat <span class="token operator">=</span> myFlat<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> arr <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">myFlat</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <hr> <h2>斐波那契数列</h2> <p>方法一：</p> <pre><code class="prism language-javascript"> <span class="token keyword">function</span> <span class="token function">fibonacci</span><span class="token punctuation">(</span>count<span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token keyword">if</span> <span class="token punctuation">(</span>count <span class="token operator"><=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token number">1</span><span class="token punctuation">;</span> <span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">//即将要创建多少个</span> <span class="token keyword">let</span> i <span class="token operator">=</span> count <span class="token operator">+</span> <span class="token number">1</span> <span class="token operator">-</span> <span class="token number">2</span><span class="token punctuation">;</span> <span class="token keyword">while</span> <span class="token punctuation">(</span>i <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token keyword">let</span> a <span class="token operator">=</span> arr<span class="token punctuation">[</span>arr<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span> b <span class="token operator">=</span> arr<span class="token punctuation">[</span>arr<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span> arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>a<span class="token operator">+</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span> i<span class="token operator">--</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> arr<span class="token punctuation">[</span>arr<span class="token punctuation">.</span>length<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">fibonacci</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>方法二：</p> <pre><code class="prism language-javascript"> <span class="token keyword">function</span> <span class="token function">fibonacci</span><span class="token punctuation">(</span>count<span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token keyword">function</span> <span class="token function">fn</span><span class="token punctuation">(</span>count<span class="token punctuation">,</span>curr<span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">,</span>next<span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token keyword">if</span><span class="token punctuation">(</span>count<span class="token operator">==</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token keyword">return</span> curr<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{ </span> <span class="token keyword">return</span> <span class="token function">fn</span><span class="token punctuation">(</span>count<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span>next<span class="token punctuation">,</span>curr<span class="token operator">+</span>next<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token function">fn</span><span class="token punctuation">(</span>count<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">fibonacci</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <hr> <h1>React和Vue比较</h1> <p><strong>相同点</strong></p> <ol> <li>都有组件化开发和Virtual DOM</li> <li>都支持props进行父子组件间数据通信</li> <li>都支持数据驱动视图, 不直接操作真实DOM, 更新状态数据界面就自动更新</li> <li>都支持服务器端渲染</li> </ol> <p><strong>不同点</strong></p> <ol> <li>数据绑定: vue实现了数据的双向绑定,react数据流动是单向的</li> <li>组件写法不一样, React推荐的做法是 JSX , 也就是把HTML和CSS全都写进JavaScript了,即’all in js’; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,js写在同一个文件</li> <li>state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理</li> <li>virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制</li> <li>React严格上只针对MVC的view层,Vue则是MVVM模式</li> </ol> <hr> <h1>Vue 相关面试题</h1> <p>（因为我只使用Vue，因此React我也就无法提供相关内容了）</p> <p>推荐文章：<br> vue3.0相关内容：https://blog.csdn.net/DevolperFront/article/details/104352036</p> <p>首先vue3.0版本目前还有很长的路要走，还没有开始正式使用，所以在项目中肯定还是用2.0，但是我们准备面试肯定多多少少理解了一些3.0的特性。因此在回答这一类问题时，可以这么回答：</p> <p>在Vue2.0中，这个需求在我平常的项目中曾经遇到过，可以这么做: xxxx …<br> 当我Vue2.0使用的熟练了后，我就开始研究它的底层实现原理，这时候才知道原来双向数据绑定的底层实现原理是ES5中新加的Object.defineProperty来进行数据劫持和拦截的（说一些和问题相关的底层原理），它的实现思路是…<br> 虽然3.0还没有投入到实战，但我经常关注博客文章（或者去GitHub下载源码），看了大家对3.0的评价（或者对代码的分析），发现在Vue3.0中，双向数据绑定的底层实现原理是ES6的Proxy（说一些和问题相关的一些特性…），它相对于2.0有…这样的好处。</p> <hr> <h2>Vue2.0/3.0双向数据绑定的实现原理</h2> <p>推荐文章：<br> Vue3.0双向数据绑定原理：https://www.jianshu.com/p/68c3e8f2e785</p> <p>双向数据绑定就是：当数据改变的时候，让视图重新渲染。</p> <p>Vue2.0：ES5：Object.defineProperty</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> 姓名：<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>spanName<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>inpName<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript"> <span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{ </span> name<span class="token punctuation">:</span> <span class="token string">''</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">/*深克隆一份obj，避免发生死循环（深浅克隆都可以，建议深克隆）*/</span> <span class="token keyword">let</span> newObj <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/*数据劫持和拦截，监视name值是否发生变化，以便更改视图*/</span> Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token punctuation">{ </span> <span class="token keyword">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token keyword">return</span> newObj<span class="token punctuation">.</span>name<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">set</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token keyword">if</span> <span class="token punctuation">(</span>val <span class="token operator">===</span> newObj<span class="token punctuation">.</span>name<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span> newObj<span class="token punctuation">.</span>name <span class="token operator">=</span> val<span class="token punctuation">;</span> <span class="token function">observe</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/*赋值*/</span> <span class="token keyword">function</span> <span class="token function">observe</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> spanName<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> obj<span class="token punctuation">.</span>name<span class="token punctuation">;</span> inpName<span class="token punctuation">.</span>value <span class="token operator">=</span> obj<span class="token punctuation">.</span>name<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{ </span> obj<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">"你好"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/*获取输入框的值，相当于v-model*/</span> inpName<span class="token punctuation">.</span><span class="token function-variable function">oninput</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> obj<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> </code></pre> <p>可以发现，defineProperty方式会有以下问题：<br> 首先遇到defineProperty就一定要克隆原始数据，避免发生死循环，<br> 因为如果是直接对原数据劫持和拦截<code>get() {return obj.name;}</code>，<br> 当运行到<code>return obj.name</code>时，就相当于又去obj中获取name，又会去执行get…<br> 这样就不断执行get，从而陷入死循环。</p> <p>其次，get和set里，我们只能一个一个地给每个属性赋新值，<br> 即：需要分别给对象中每个属性设置监听。<br> 同时正因如此，如果在运行过程中，给对象添加了新的属性，（显然在最开始没有给它设置监听），就算是$set，将新属性添加其中，也会因为最开始没给它设置监听，从而实现不出效果。</p> <p>因为2.0的实现方式会有上述问题，所以在Vue3.0，就对它进行了改进，使用了ES6的Proxy。首先先来看看Proxy的简单用法和实现效果：</p> <pre><code class="prism language-js"> <span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{ </span><span class="token punctuation">}</span><span class="token punctuation">;</span> obj <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Proxy</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token punctuation">{ </span> <span class="token comment">/*target:监听对象，prop:监听对象属性*/</span> <span class="token keyword">get</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span> prop<span class="token punctuation">)</span><span class="token punctuation">{ </span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'A'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> target<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">/*value:监听对象属性值*/</span> <span class="token keyword">set</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span> prop<span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">{ </span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'B'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> target<span class="token punctuation">[</span>prop<span class="token punctuation">]</span> <span class="token operator">=</span> value<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/e05d40764b024a0a9ca9e6365c2456b0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e05d40764b024a0a9ca9e6365c2456b0.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第37张图片" width="266" height="333" style="border:1px solid black;"></a><br> 通过输出结果就可以看到：Proxy方式不用克隆原始数据，而且可以实时向对象中添加属性，还能为它设置监听，从而完美解决了问题。<br> 因此现在来看一看到底如何去做：<br> Vue3.0：ES6：Proxy</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> 姓名：<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>spanName<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>inpName<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript"> <span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{ </span><span class="token punctuation">}</span><span class="token punctuation">;</span> obj <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Proxy</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token punctuation">{ </span> <span class="token comment">/*target:监听对象，prop:监听对象属性*/</span> <span class="token keyword">get</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span> prop<span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token keyword">return</span> target<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">/*value:监听对象属性值*/</span> <span class="token keyword">set</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span> prop<span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">{ </span> target<span class="token punctuation">[</span>prop<span class="token punctuation">]</span> <span class="token operator">=</span> value<span class="token punctuation">;</span> <span class="token function">observe</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/*赋值*/</span> <span class="token keyword">function</span> <span class="token function">observe</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> spanName<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> obj<span class="token punctuation">.</span>name<span class="token punctuation">;</span> inpName<span class="token punctuation">.</span>value <span class="token operator">=</span> obj<span class="token punctuation">.</span>name<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{ </span> obj<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">"你好"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/*获取输入框的值，相当于v-model*/</span> inpName<span class="token punctuation">.</span><span class="token function-variable function">oninput</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{ </span> obj<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> </code></pre> <hr> <h2>MVC和MVVM的区别</h2> <p>React：MVC，Vue：MVVM。</p> <p>推荐文章：<br> MVC和MVVM区别：https://zhuanlan.zhihu.com/p/64257809</p> <p>MVVM：<br> <a href="http://img.e-com-net.com/image/info8/fbc44ceec4ef4c4d8cbad8ef8542aadc.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fbc44ceec4ef4c4d8cbad8ef8542aadc.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第38张图片" width="650" height="346" style="border:1px solid black;"></a><br> 首先有一个监听，会监听这个输入框内容，当输入框中的内容发生了改变，监听器就触发。这个监听器的回调函数就会把输入框的内容保存到data里，同时将这个数据输出到页面里去显示。而这个过程就会用到DOM监听和数据绑定。实现原理已经在上面说过了。</p> <p>MVVM：<br> model：模型，数据对象（data）<br> view：视图，模板页面<br> viewModel：视图模型（Vue的实例）</p> <p>在代码中的体现：<br> <a href="http://img.e-com-net.com/image/info8/f27d76de3265482687ca8a6656f75459.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f27d76de3265482687ca8a6656f75459.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第39张图片" width="650" height="484" style="border:1px solid black;"></a></p> <p>因为我对React不熟，所以对于MVC没有去太深的理解。<br> 简单来说，<br> MVC少了一个视图更改数据，因此它叫单向数据更改。即单向指的是：数据的更改控制视图。而MVVM不仅实现了数据的更改控制视图，也实现了视图的更改控制数据。</p> <p>在编码方面上来说，Vue中，通过原理，我们可以发现，Vue帮我们做好了oninput和onchange事件，而React没有实现它们，需要我们自己去实现，但是实现方式还是很简单的。</p> <hr> <h2>跨域问题</h2> <p>推荐文章：<br> 跨域问题：http://www.imooc.com/article/36861</p> <h3>跨域问题的产生及其价值意义</h3> <p>当我们基于ajax向服务器发送请求，在浏览器处理的时候，它有一个特点：<br> 只要协议、域名、端口有任何一个不同，都被当作是不同的域，而服务器是不允许跨域访问的。<br> 比如：<br> <a href="http://img.e-com-net.com/image/info8/aef61b43ff20487698d9389288b8a4f4.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/aef61b43ff20487698d9389288b8a4f4.jpg" alt="在这里插入图片描述" width="650" height="94"></a><br> （http默认端口号80，https默认端口号443，ftp默认端口号21）</p> <p>在前后端没分离的时候，肯定就不会遇到这样的问题，因为当时后台程序和客户端程序都会部署在同一台服务器上，同一个域下，同一个端口号上。<br> 随后在前后端分离的初期，也是部署在同一台服务器上的。<br> 但之后随着前后端的不断发展，也就发现，前后端貌似没必要一定在一个服务器上。<br> 因此区分出了 <strong>数据服务器和Web服务器</strong>。<br> <a href="http://img.e-com-net.com/image/info8/bfa2f8539ab54e209537168fe38bbc7a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/bfa2f8539ab54e209537168fe38bbc7a.jpg" alt="在这里插入图片描述" width="650" height="91"></a><br> 这么做的<strong>好处</strong>在于：<br> 数据服务器专门用于处理 业务逻辑和数据接口，而Web服务器主要用来 请求一些资源文件。这样一来做服务器集群部署的时候，就可以把Web服务器在全国各地建立站点，然后当你访问服务器的时候，就可以总是访问最近的服务器。<br> （从成本等方面上来看，肯定不能把数据服务器也部署到全国各地）<br> 这样之后，从Web服务器上拿接口，就不在一个服务器上了，所以跨域问题就出现了</p> <hr> <h3>解决方案</h3> <p>（因为我对这部分也只是简单认识，也许有的地方说的不对，详细的部分大家可以百度查找，写下这部分也是因为听闻有些公司的前端需要仔细研究跨域问题）<br> <strong>阶段一：JSONP跨域解决方案</strong>：<br> <a href="http://img.e-com-net.com/image/info8/b824b50f19ab4d79b2952308b6c8468b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b824b50f19ab4d79b2952308b6c8468b.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第40张图片" width="650" height="248" style="border:1px solid black;"></a><br> 最开始的跨域解决方案都是使用JSONP。JSONP利用了一个特点：ajax发请求会存在域的限制，但有一些东西发请求不需要限制，<br> 比如<code><script></code>标签、<code><link></code>标签、<code><img></code>标签。<br> 平常在项目中，我们就经常这么用：<br> <code><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script></code><br> script请求资源一定是get请求，它不存在域的限制。</p> <p><strong>原理</strong>：<br> 即：动态创建一个script标签，把要向服务器发送请求的地址，赋值给script里的src。然后是怎么做的呢？<br> 首先通过问号传参的方式，我们传一个函数func给服务器（这个方法是我们自己写的）（这种方式只能是Get请求）<br> <a href="http://img.e-com-net.com/image/info8/2cf902f884b94bb38ca36cc2e93171b1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2cf902f884b94bb38ca36cc2e93171b1.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第41张图片" width="555" height="217" style="border:1px solid black;"></a><br> 当服务器拿到这个请求之后，就会去准备数据，然后把数据返回到客户端。<br> 那么服务器如何把数据传回来呢？服务器会拿到函数func，并把它拼成字符串：<br> <code>"func({...})"</code>（把我们想要的数据拼接成这样的结果）<br> <a href="http://img.e-com-net.com/image/info8/7aee748a4a21472bbd17a5d1d157a2e7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7aee748a4a21472bbd17a5d1d157a2e7.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第42张图片" width="334" height="124" style="border:1px solid black;"></a><br> 然后客户端就相当于拿到了<code>"func({...})"</code>，里面有我们想要的数据。（浏览器会帮我们执行这个函数）<br> <a href="http://img.e-com-net.com/image/info8/d71ef6a43e0b4a0a995ec1b3e1a404e1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d71ef6a43e0b4a0a995ec1b3e1a404e1.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第43张图片" width="320" height="107" style="border:1px solid black;"></a><br> 但是Get会有一系列问题：不安全、有缓存、传递的信息有大小限制…<br> 同时服务器还得能帮我们把数据进行一系列拼接，来帮我们实现功能。</p> <p>因此目前JSONP已经很少用了。</p> <p><strong>阶段二：基于iframe的跨域解决方案</strong><br> （详情可见推荐文章，这也是前几年的解决方案了）<br> <a href="http://img.e-com-net.com/image/info8/95c3209af61d4d44bc0f7835aa066f78.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/95c3209af61d4d44bc0f7835aa066f78.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第44张图片" width="205" height="137" style="border:1px solid black;"></a></p> <p><strong>阶段三：CORS跨域资源共享</strong></p> <p>以前不能发请求，是因为服务器不允许，所以现在的做法就是让服务器允许这么做。</p> <p>客户端：</p> <pre><code class="prism language-js"><span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">'axios'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> qs <span class="token keyword">from</span> <span class="token string">'qs'</span><span class="token punctuation">;</span> <span class="token comment">/*向服务器发送请求的地址*/</span> axios<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>baseURL <span class="token operator">=</span> <span class="token string">"http://127.0.0.1:3000"</span><span class="token punctuation">;</span> <span class="token comment">/*设置超时时间*/</span> axios<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>timeout <span class="token operator">=</span> <span class="token number">10000</span><span class="token punctuation">;</span> <span class="token comment">/*服务器跨域发请求时，允许携带cookie资源凭证*/</span> axios<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>withCredentials <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token comment">/* * 设置请求传递数据的格式（看服务器要求什么格式） * x-www-form-urlencoded * */</span> axios<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>headers<span class="token punctuation">[</span><span class="token string">'Content-Type'</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'application/x-www-form-urlencoded'</span><span class="token punctuation">;</span> axios<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span><span class="token function-variable function">transfromRequest</span> <span class="token operator">=</span> data <span class="token operator">=></span>qs<span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/* * 设置请求拦截器 * TOKEN校验（JWT）：接收服务器返回的token，存储到vuex/本地存储中，每一次向服务器发请求，我们应该把token带上 * */</span> axios<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>config <span class="token operator">=></span> <span class="token punctuation">{ </span> <span class="token keyword">let</span> token <span class="token operator">=</span> localStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">'token'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> token <span class="token operator">&&</span> <span class="token punctuation">(</span>config<span class="token punctuation">.</span>headers<span class="token punctuation">.</span>Authorization <span class="token operator">=</span> token<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> config<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> error <span class="token operator">=></span><span class="token punctuation">{ </span> <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/* * 响应拦截器 * */</span> axios<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>response<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>response <span class="token operator">=></span><span class="token punctuation">{ </span> <span class="token keyword">return</span> response<span class="token punctuation">.</span>data<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> error <span class="token operator">=></span><span class="token punctuation">{ </span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> axios<span class="token punctuation">;</span> </code></pre> <p>服务器端：<br> <a href="http://img.e-com-net.com/image/info8/09da8ca357e646688cc05fa0863cfdc1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/09da8ca357e646688cc05fa0863cfdc1.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第45张图片" width="650" height="225" style="border:1px solid black;"></a></p> <p>除此以外还有 基于http proxy实现跨域请求、nginx反向代理…感兴趣的可以查阅百度</p> <hr> <h2>Vue组件间通信方式</h2> <p>(面试基本必问，然后回答到vuex方式时，面试官就会问vuex的工作原理)</p> <p>通信方式相关内容，可以参考我之前的文章：<br> https://blog.csdn.net/qq_45613931/article/details/105812344</p> <p><strong>通信种类</strong></p> <ol> <li>父组件向子组件通信</li> <li>子组件向父组件通信</li> <li>隔代组件间通信</li> <li>兄弟组件间通信</li> </ol> <hr> <h3>方式1: props（属性传递）</h3> <p>组件之间联系需要import，想要映射组件标签需要components。最基本的传递就可以通过这个组件标签直接传递<code><xxx :yyy="yyy"/></code><br> （xxx：组件标签名，yyy：传递的对象属性或者方法）<br> 如：<code><Add :comments="comments"/></code></p> <p>传递过去后，接收的组件用props就可以接收到传递过来的数据。<br> props一共有三种使用方式：</p> <pre><code>props:{ //指定属性名和属性值的类型 comment: Object } </code></pre> <pre><code>props:{ addComment:{ //最完整写法：指定属性名/属性值的类型/必要性 type:Function, required: true } } </code></pre> <pre><code>props: ['comments'] </code></pre> <p><strong>方式1</strong>：只能父向子通信，不能子向父通信。隔代组件和兄弟组件间通信比较麻烦。</p> <hr> <h3>方式2: vue自定义事件（$on / $emit）</h3> <p>绑定事件监听：</p> <pre><code class="prism language-js"><span class="token comment">// 方式一: 通过 v-on 绑定</span> @delete_todo<span class="token operator">=</span><span class="token string">"deleteTodo"</span> <span class="token comment">// 方式二: 通过$on()</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>xxx<span class="token punctuation">.</span><span class="token function">$on</span><span class="token punctuation">(</span><span class="token string">'delete_todo'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>todo<span class="token punctuation">)</span> <span class="token punctuation">{ </span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">deleteTodo</span><span class="token punctuation">(</span>todo<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre> <p>触发事件：</p> <pre><code class="prism language-js"><span class="token comment">// 触发事件(只能在父组件中接收)</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> data<span class="token punctuation">)</span> </code></pre> <p>比如：（方式一）</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> .... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token comment"><!--第一种方式：给Add标签对象绑定addComment事件监听 （常用）--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Add</span> <span class="token attr-name">@addComment</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>addComment<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript"> <span class="token keyword">import</span> Add <span class="token keyword">from</span> <span class="token string">'./components/Add.vue'</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{ </span> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token keyword">return</span><span class="token punctuation">{ </span> comments<span class="token punctuation">:</span><span class="token punctuation">[</span> <span class="token punctuation">{ </span> name<span class="token punctuation">:</span> <span class="token string">'BoB'</span><span class="token punctuation">,</span> content<span class="token punctuation">:</span> <span class="token string">'Vue 还不错'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{ </span> name<span class="token punctuation">:</span> <span class="token string">'Cat'</span><span class="token punctuation">,</span> content<span class="token punctuation">:</span> <span class="token string">'Vue so Easy'</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> methods<span class="token punctuation">:</span><span class="token punctuation">{ </span> <span class="token comment">//添加评论</span> <span class="token function">addComment</span><span class="token punctuation">(</span>comment<span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token keyword">this</span><span class="token punctuation">.</span>comments<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span>comment<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> components<span class="token punctuation">:</span> <span class="token punctuation">{ </span> Add <span class="token punctuation">}</span> <span class="token punctuation">}</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style language-css"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> </code></pre> <p>（方式二）</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>site-header jumbotron<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token comment"><!--第二种方式--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Add</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>add<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript"> <span class="token keyword">import</span> Add <span class="token keyword">from</span> <span class="token string">'./components/Add.vue'</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{ </span> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token keyword">return</span><span class="token punctuation">{ </span> comments<span class="token punctuation">:</span><span class="token punctuation">[</span> <span class="token punctuation">{ </span> name<span class="token punctuation">:</span> <span class="token string">'BoB'</span><span class="token punctuation">,</span> content<span class="token punctuation">:</span> <span class="token string">'Vue 还不错'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{ </span> name<span class="token punctuation">:</span> <span class="token string">'Cat'</span><span class="token punctuation">,</span> content<span class="token punctuation">:</span> <span class="token string">'Vue so Easy'</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">//第二种方式</span> <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token comment">//执行异步代码</span> <span class="token comment">//给<Add/>绑定事件监听addComment</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>add<span class="token punctuation">.</span><span class="token function">$on</span><span class="token punctuation">(</span><span class="token string">'addComment'</span><span class="token punctuation">,</span><span class="token keyword">this</span><span class="token punctuation">.</span>addComment<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> methods<span class="token punctuation">:</span><span class="token punctuation">{ </span> <span class="token comment">//添加评论</span> <span class="token function">addComment</span><span class="token punctuation">(</span>comment<span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token keyword">this</span><span class="token punctuation">.</span>comments<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span>comment<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> components<span class="token punctuation">:</span> <span class="token punctuation">{ </span> Add <span class="token punctuation">}</span> <span class="token punctuation">}</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style language-css"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> </code></pre> <p>Add.vue</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-md-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript"> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{ </span> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token keyword">return</span><span class="token punctuation">{ </span> name<span class="token punctuation">:</span><span class="token string">''</span><span class="token punctuation">,</span> content<span class="token punctuation">:</span><span class="token string">''</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> methods<span class="token punctuation">:</span><span class="token punctuation">{ </span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token comment">//1、检查输入的合法性</span> <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">const</span> content <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>content<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>name <span class="token operator">||</span> <span class="token operator">!</span>content<span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'姓名或内容不能空'</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token punctuation">}</span> <span class="token comment">//2、根据输入的数据，封装成一个comment对象</span> <span class="token keyword">const</span> comment <span class="token operator">=</span> <span class="token punctuation">{ </span> name<span class="token punctuation">,</span> content <span class="token punctuation">}</span> <span class="token comment">//3、触发自定义事件</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'addComment'</span><span class="token punctuation">,</span>comment<span class="token punctuation">)</span> <span class="token comment">//4、清除输入</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">''</span> <span class="token keyword">this</span><span class="token punctuation">.</span>content <span class="token operator">=</span> <span class="token string">''</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style language-css"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> </code></pre> <p><strong>方式2</strong>: 只适合于子向父通信。隔代组件或兄弟组件间通信此种方式不合适。</p> <hr> <h3>方式3: 消息订阅与发布</h3> <p>想使用这种方式，需要安装：<br> <code>npm i --save pubsub-js</code></p> <p><strong>订阅消息</strong><br> <code>PubSub.subscribe('msg', function(msg, data){})</code><br> <strong>发布消息</strong><br> <code>PubSub.publish('msg', data)</code></p> <p>比如：</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>site-header jumbotron<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Add</span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript"> <span class="token keyword">import</span> PubSub <span class="token keyword">from</span> <span class="token string">'pubsub-js'</span> <span class="token comment">//引入PubSub</span> <span class="token keyword">import</span> Add <span class="token keyword">from</span> <span class="token string">'./components/Add.vue'</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{ </span> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token keyword">return</span><span class="token punctuation">{ </span> comments<span class="token punctuation">:</span><span class="token punctuation">[</span> <span class="token punctuation">{ </span> name<span class="token punctuation">:</span> <span class="token string">'BoB'</span><span class="token punctuation">,</span> content<span class="token punctuation">:</span> <span class="token string">'Vue 还不错'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{ </span> name<span class="token punctuation">:</span> <span class="token string">'Cat'</span><span class="token punctuation">,</span> content<span class="token punctuation">:</span> <span class="token string">'Vue so Easy'</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token comment">// 订阅消息</span> PubSub<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token string">'addComment'</span><span class="token punctuation">,</span><span class="token punctuation">(</span>msg<span class="token punctuation">,</span>comment<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{ </span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">addComment</span><span class="token punctuation">(</span>comment<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> methods<span class="token punctuation">:</span><span class="token punctuation">{ </span> <span class="token comment">//添加评论</span> <span class="token function">addComment</span><span class="token punctuation">(</span>comment<span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token keyword">this</span><span class="token punctuation">.</span>comments<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span>comment<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> components<span class="token punctuation">:</span> <span class="token punctuation">{ </span> Add <span class="token punctuation">}</span> <span class="token punctuation">}</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style language-css"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> </code></pre> <p>Add.vue</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-md-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript"> <span class="token keyword">import</span> PubSub <span class="token keyword">from</span> <span class="token string">'pubsub-js'</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{ </span> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token keyword">return</span><span class="token punctuation">{ </span> name<span class="token punctuation">:</span><span class="token string">''</span><span class="token punctuation">,</span> content<span class="token punctuation">:</span><span class="token string">''</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> methods<span class="token punctuation">:</span><span class="token punctuation">{ </span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token comment">//1、检查输入的合法性</span> <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">const</span> content <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>content<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>name <span class="token operator">||</span> <span class="token operator">!</span>content<span class="token punctuation">)</span><span class="token punctuation">{ </span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'姓名或内容不能空'</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token punctuation">}</span> <span class="token comment">//2、根据输入的数据，封装成一个comment对象</span> <span class="token keyword">const</span> comment <span class="token operator">=</span> <span class="token punctuation">{ </span> name<span class="token punctuation">,</span> content <span class="token punctuation">}</span> <span class="token comment">//3、发布消息</span> PubSub<span class="token punctuation">.</span><span class="token function">publish</span><span class="token punctuation">(</span><span class="token string">'addComment'</span><span class="token punctuation">,</span>comment<span class="token punctuation">)</span> <span class="token comment">//4、清除输入</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">''</span> <span class="token keyword">this</span><span class="token punctuation">.</span>content <span class="token operator">=</span> <span class="token string">''</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style language-css"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> </code></pre> <p><strong>方式3</strong>: 此方式可实现任意关系组件间通信(数据)</p> <hr> <h3>方式4: vuex</h3> <p>vuex是vue官方提供的集中式管理vue多组件共享状态数据的vue插件<br> 优点: 对组件间关系没有限制, 且相比于pubsub库管理更集中, 更方便</p> <hr> <h3>方式5: slot（插槽）</h3> <p>子组件: Child.vue</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>xxx<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>不确定的标签结构 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>slot</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>组件确定的标签结构<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>yyy<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>不确定的标签结构 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>slot</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> </code></pre> <p>父组件: Parent.vue</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>child</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>xxx<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>xxx 对应的标签结构<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>yyy<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>yyyy 对应的标签结构<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>child</span><span class="token punctuation">></span></span> </code></pre> <p><strong>方式5</strong>: 专门用来实现父向子传递带数据的标签<br> （注意: 通信的标签模板是在父组件中解析好后再传递给子组件的）</p> <p>用了这种方式以后，就相当于子组件用到的所有属性或方法全都需要从子组件移动到父组件中，除了样式。平常肯定不推荐这么使用，它用在什么地方呢？这样设计之后，比如可能会多次用到这个子组件（即：很多类似的组件，就没必要建好多个了，直接用这种模板就行了，只要在父组件中设置好slot，就能使用了），这样一来就能满足重用性。</p> <hr> <h2>vuex管理状态的机制</h2> <p>详细vuex可以参考我之前的文章：<br> https://blog.csdn.net/qq_45613931/article/details/105903799</p> <p><strong>对Vuex基本理解</strong></p> <ol> <li>是什么: Vuex 是一个专为 Vue.js 应用程序开发的状态管理的vue插件</li> <li>作用: 集中式管理vue多个组件共享的状态和从后台获取的数据</li> </ol> <p><strong>工作原理</strong><br> <a href="http://img.e-com-net.com/image/info8/4cb20615005b4ea0b38009d512659ec2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4cb20615005b4ea0b38009d512659ec2.jpg" alt="前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)_第46张图片" width="553" height="268" style="border:1px solid black;"></a></p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1388121961246314496"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(前端内容,css,html,javascript,vue)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835512920797179904.htm" title="element实现动态路由+面包屑" target="_blank">element实现动态路由+面包屑</a> <span class="text-muted">软件技术NINI</span> <a class="tag" taget="_blank" href="/search/vue%E6%A1%88%E4%BE%8B/1.htm">vue案例</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi</div> </li> <li><a href="/article/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835509770287673344.htm" title="swagger访问路径" target="_blank">swagger访问路径</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a> <div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div> </li> <li><a href="/article/1835508130608410624.htm" title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a> <span class="text-muted">某公司摸鱼前端</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div> </li> <li><a href="/article/1835504723210366976.htm" title="第四天旅游线路预览——从换乘中心到喀纳斯湖" target="_blank">第四天旅游线路预览——从换乘中心到喀纳斯湖</a> <span class="text-muted">陟彼高冈yu</span> <a class="tag" taget="_blank" href="/search/%E5%9F%BA%E4%BA%8EGoogle/1.htm">基于Google</a><a class="tag" taget="_blank" href="/search/earth/1.htm">earth</a><a class="tag" taget="_blank" href="/search/studio/1.htm">studio</a><a class="tag" taget="_blank" href="/search/%E7%9A%84%E6%97%85%E6%B8%B8%E8%A7%84%E5%88%92%E5%92%8C%E9%A2%84%E8%A7%88/1.htm">的旅游规划和预览</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a> <div>第四天：从贾登峪到喀纳斯风景区入口，晚上住宿贾登峪；换乘中心有4路车，喀纳斯①号车，去喀纳斯湖，路程时长约5分钟；将上面的的行程安排进行动态展示，具体步骤见”Googleearthstudio进行动态轨迹显示制作过程“、“Googleearthstudio入门教程”和“Googleearthstudio进阶教程“相关内容，得到行程如下所示：Day4-2-480p</div> </li> <li><a href="/article/1835502578511736832.htm" title="下载github patch到本地" target="_blank">下载github patch到本地</a> <span class="text-muted">小米人er</span> <a class="tag" taget="_blank" href="/search/%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/1.htm">我的博客</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a><a class="tag" taget="_blank" href="/search/patch/1.htm">patch</a> <div>以下是几种从GitHub上下载以.patch结尾的补丁文件的方法：通过浏览器直接下载打开包含该.patch文件的GitHub仓库。在仓库的文件列表中找到对应的.patch文件。点击该文件，浏览器会显示文件的内容，在页面的右上角通常会有一个“Raw”按钮，点击它可以获取原始文件内容。然后在浏览器中使用快捷键（如Ctrl+S或者Command+S）将原始文件保存到本地，选择保存的文件名并确保后缀为.p</div> </li> <li><a href="/article/1835499681732456448.htm" title="SQL Server_查询某一数据库中的所有表的内容" target="_blank">SQL Server_查询某一数据库中的所有表的内容</a> <span class="text-muted">qq_42772833</span> <a class="tag" taget="_blank" href="/search/SQL/1.htm">SQL</a><a class="tag" taget="_blank" href="/search/Server/1.htm">Server</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/sqlserver/1.htm">sqlserver</a> <div>1.查看所有表的表名要列出CrabFarmDB数据库中的所有表（名），可以使用以下SQL语句：USECrabFarmDB;--切换到目标数据库GOSELECTTABLE_NAMEFROMINFORMATION_SCHEMA.TABLESWHERETABLE_TYPE='BASETABLE';对这段SQL脚本的解释：SELECTTABLE_NAME：这个语句的作用是从查询结果中选择TABLE_NAM</div> </li> <li><a href="/article/1835499615491813376.htm" title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a> <span class="text-muted">彩云飘过</span> <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> <span class="text-muted">STU学生网页设计</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835498346685493248.htm" title="少了生活气息" target="_blank">少了生活气息</a> <span class="text-muted">我爱大草莓</span> <div>最近啊，总觉得自己日更的内容缺了点什么。我仔细地想，大概是少了些生活气息。这两三个月减少了许多与别人相处的时间，独自生活，偶尔只是出去买菜，总觉得生活好像变空了许多。买菜的时候会跟档口的阿姨聊一两句话，让自己感觉在真实地生活着。幸好我也不是一宅到底，偶尔周末也会约着跟好朋友见面，面对面交流跟隔着屏幕交流，效果还是不一样的，至少有更为真实的生活感。写作不仅需要有阅读量，有文笔，生活阅历也是非常重要的</div> </li> <li><a href="/article/1835497792265613312.htm" title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a> <span class="text-muted">加密社</span> <a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a> <div>加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件</div> </li> <li><a href="/article/1835497538023682048.htm" title="使用Apify加载Twitter消息以进行微调的完整指南" target="_blank">使用Apify加载Twitter消息以进行微调的完整指南</a> <span class="text-muted">nseejrukjhad</span> <a class="tag" taget="_blank" href="/search/twitter/1.htm">twitter</a><a class="tag" taget="_blank" href="/search/easyui/1.htm">easyui</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>#使用Apify加载Twitter消息以进行微调的完整指南##引言在自然语言处理领域，微调模型以适应特定任务是提升模型性能的常见方法。本文将介绍如何使用Apify从Twitter导出聊天信息，以便进一步进行微调。##主要内容###使用Apify导出推文首先，我们需要从Twitter导出推文。Apify可以帮助我们做到这一点。通过Apify的强大功能，我们可以批量抓取和导出数据，适用于各类应用场景。</div> </li> <li><a href="/article/1835497284750635008.htm" title="如何部分格式化提示模板:LangChain中的高级技巧" target="_blank">如何部分格式化提示模板:LangChain中的高级技巧</a> <span class="text-muted">nseejrukjhad</span> <a class="tag" taget="_blank" href="/search/langchain/1.htm">langchain</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>标题:如何部分格式化提示模板:LangChain中的高级技巧内容:如何部分格式化提示模板:LangChain中的高级技巧引言在使用大型语言模型(LLM)时,提示工程是一个关键环节。LangChain提供了强大的提示模板功能,让我们能更灵活地构建和管理提示。本文将介绍LangChain中一个高级特性-部分格式化提示模板,这个技巧可以让你的提示管理更加高效和灵活。什么是部分格式化提示模板?部分格式化提</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835493626688401408.htm" title="Python快速入门 —— 第三节：类与对象" target="_blank">Python快速入门 —— 第三节：类与对象</a> <span class="text-muted">孤华暗香</span> <a class="tag" taget="_blank" href="/search/Python%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8/1.htm">Python快速入门</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>第三节：类与对象目标：了解面向对象编程的基础概念，并学会如何定义类和创建对象。内容：类与对象：定义类：class关键字。类的构造函数：__init__()。类的属性和方法。对象的创建与使用。示例：classStudent:def__init__(self,name,age,major):self.name&#</div> </li> <li><a href="/article/1835493267907637248.htm" title="webpack图片等资源的处理" target="_blank">webpack图片等资源的处理</a> <span class="text-muted">dmengmeng</span> <div>需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p</div> </li> <li><a href="/article/1835493247716257792.htm" title="ARM中断处理过程" target="_blank">ARM中断处理过程</a> <span class="text-muted">落汤老狗</span> <a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8Flinux/1.htm">嵌入式linux</a> <div>一、前言本文主要以ARM体系结构下的中断处理为例，讲述整个中断处理过程中的硬件行为和软件动作。具体整个处理过程分成三个步骤来描述：1、第二章描述了中断处理的准备过程2、第三章描述了当发生中的时候，ARM硬件的行为3、第四章描述了ARM的中断进入过程4、第五章描述了ARM的中断退出过程本文涉及的代码来自3.14内核。另外，本文注意描述ARM指令集的内容，有些sourcecode为了简短一些，删除了T</div> </li> <li><a href="/article/1835492740536823808.htm" title="node.js学习" target="_blank">node.js学习</a> <span class="text-muted">小猿L</span> <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div> </li> <li><a href="/article/1835492243260141568.htm" title="如何成为段子手" target="_blank">如何成为段子手</a> <span class="text-muted">欣雅阅读</span> <div>我是一个尬聊大师，与朋友聊天经常把话题聊死，留我一个人在群里，望着自己打下的最后一句话无语凝噎。看到风趣幽默的朋友与人聊天，很是艳羡，觉得自己何时才能成为这样的段子手呢？一、段子是什么？“段子”一词在百度百科上的解释：本是相声中的一个艺术术语，指的是相声作品中一节或一段艺术内容。我的理解：段子就是一些搞笑的故事或者笑话。二、为什么要会说段子？不知道大家有没有这样的朋友，本来很无趣的聚会，只要有他参</div> </li> <li><a href="/article/1835490218845761536.htm" title="Python爬虫解析工具之xpath使用详解" target="_blank">Python爬虫解析工具之xpath使用详解</a> <span class="text-muted">eqa11</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>文章目录Python爬虫解析工具之xpath使用详解一、引言二、环境准备1、插件安装2、依赖库安装三、xpath语法详解1、路径表达式2、通配符3、谓语4、常用函数四、xpath在Python代码中的使用1、文档树的创建2、使用xpath表达式3、获取元素内容和属性五、总结Python爬虫解析工具之xpath使用详解一、引言在Python爬虫开发中，数据提取是一个至关重要的环节。xpath作为一门</div> </li> <li><a href="/article/1835490218409553920.htm" title="01-Git初识" target="_blank">01-Git初识</a> <span class="text-muted">Meereen</span> <a class="tag" taget="_blank" href="/search/Git/1.htm">Git</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a> <div>01-Git初识概念：一个免费开源，分布式的代码版本控制系统，帮助开发团队维护代码作用：记录代码内容。切换代码版本，多人开发时高效合并代码内容如何学：个人本机使用：Git基础命令和概念多人共享使用：团队开发同一个项目的代码版本管理Git配置用户信息配置：用户名和邮箱，应用在每次提交代码版本时表明自己的身份命令：查看git版本号git-v配置用户名gitconfig--globaluser.name</div> </li> <li><a href="/article/1835489587498151936.htm" title="ARM驱动学习之基础小知识" target="_blank">ARM驱动学习之基础小知识</a> <span class="text-muted">JT灬新一</span> <a class="tag" taget="_blank" href="/search/ARM/1.htm">ARM</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F/1.htm">嵌入式</a><a class="tag" taget="_blank" href="/search/arm%E5%BC%80%E5%8F%91/1.htm">arm开发</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>ARM驱动学习之基础小知识•sch原理图工程师工作内容–方案–元器件选型–采购（能不能买到，价格）–原理图（涉及到稳定性）•layout画板工程师–layout（封装、布局，布线，log）（涉及到稳定性）–焊接的一部分工作（调试阶段板子的焊接）•驱动工程师–驱动，原理图，layout三部分的交集容易发生矛盾•PCB研发流程介绍–方案，原理图(网表)–layout工程师（gerber文件）–PCB板</div> </li> <li><a href="/article/1835478496810463232.htm" title="Xinference如何注册自定义模型" target="_blank">Xinference如何注册自定义模型</a> <span class="text-muted">玩人工智能的辣条哥</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">大模型</a><a class="tag" taget="_blank" href="/search/Xinference/1.htm">Xinference</a> <div>环境：Xinference问题描述：Xinference如何注册自定义模型解决方案：1.写个model_config.json，内容如下{"version":1,"context_length":2048,"model_name":"custom-llama-3","model_lang":["en","ch"],"model_ability":["generate","chat"],"model</div> </li> <li><a href="/article/1835476350190841856.htm" title="ExpRe[25] bash外的其它shell：zsh和fish" target="_blank">ExpRe[25] bash外的其它shell：zsh和fish</a> <span class="text-muted">tritone</span> <a class="tag" taget="_blank" href="/search/ExpRe/1.htm">ExpRe</a><a class="tag" taget="_blank" href="/search/bash/1.htm">bash</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a><a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a> <div>文章目录zsh基础配置实用特性插件`autojump`语法高亮自动补全fish优点缺点时效性本篇撰写时间为2021.12.15，由于计算机技术日新月异，博客中所有内容都有时效和版本限制，具体做法不一定总行得通，链接可能改动失效，各种软件的用法可能有修改。但是其中透露的思想往往是值得学习的。本篇前置：ExpRe[10]Ubuntu[2]准备神秘软件、备份恢复软件https://www.cnblogs</div> </li> <li><a href="/article/1835469859710922752.htm" title="母亲节如何做小红书营销" target="_blank">母亲节如何做小红书营销</a> <span class="text-muted">美橙传媒</span> <div>小红书的一举一动引起了外界的高度关注。通过爆款笔记和流行话题，我们可以看到“干货”类型的内容在小红书中偏向实用的生活经验共享和生活指南非常受欢迎。根据运营社的分析，这种现象是由小红书用户心智和内容社区背后机制共同决定的。首先，小红书将使用“强搜索”逻辑为用户提供特定的“搜索场景”。在“我必须这样生活”中，大量使用了满足小红书站用户喜好和需求的内容。内容社区自制的高质量内容也吸引了寻找营销新途径的品</div> </li> <li><a href="/article/1835469294436184064.htm" title="【从浅识到熟知Linux】Linux发展史" target="_blank">【从浅识到熟知Linux】Linux发展史</a> <span class="text-muted">Jammingpro</span> <a class="tag" taget="_blank" href="/search/%E4%BB%8E%E6%B5%85%E5%AD%A6%E5%88%B0%E7%86%9F%E7%9F%A5Linux/1.htm">从浅学到熟知Linux</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>归属专栏：从浅学到熟知Linux个人主页：Jammingpro每日努力一点点，技术变化看得见文章前言：本篇文章记录Linux发展的历史，因在介绍Linux过程中涉及的其他操作系统及人物，本文对相关内容也有所介绍。文章目录Unix发展史Linux发展史开源Linux官网企业应用情况发行版本在学习Linux前，我们可能都会问Linux从哪里来？它是如何发展的。但在介绍Linux之前，需要先介绍一下Un</div> </li> <li><a href="/article/1835466523163062272.htm" title="Linux sh命令" target="_blank">Linux sh命令</a> <span class="text-muted">fengyehongWorld</span> <a class="tag" taget="_blank" href="/search/Linux/1.htm">Linux</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>目录一.基本语法二.选项2.1-c字符串中读取内容，并执行2.1.1基本用法2.1.2获取当前目录下失效的超链接2.2-x每个命令执行之前，将其打印出来2.3结合Here文档使用一.基本语法⏹Linux和Unix系统中用于执行shell脚本或运行命令的命令。sh[选项][脚本文件][参数...]⏹选项-c：从字符串中读取内容，并执行。-x：在每个命令执行之前，将其打印出来。-s：从标准流中读取内容</div> </li> <li><a href="/article/1835466270955368448.htm" title="Linux vi常用命令" target="_blank">Linux vi常用命令</a> <span class="text-muted">fengyehongWorld</span> <a class="tag" taget="_blank" href="/search/Linux/1.htm">Linux</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>参考资料viコマンド（vimコマンド）リファレンス目录一.保存系命令二.删除系命令三.移动系命令四.复制粘贴系命令一.保存系命令⏹保存并退出:wq⏹强制保存并退出:wq!⏹退出(文件未编辑):q⏹强制退出(忽略已编辑内容):q!⏹另存为:w新文件名二.删除系命令⏹删除当前行dd⏹清空整个文档gg：移动到文档顶部dG：删除到最后一行ggdG三.移动系命令⏹移动到文档顶部gg⏹移动到文档底部#方式1G</div> </li> <li><a href="/article/1835463091786182656.htm" title="《吹牛大王历险记》读书随笔" target="_blank">《吹牛大王历险记》读书随笔</a> <span class="text-muted">赵炳森</span> <div>这本书的作者是埃·拉斯伯戈·毕尔格。（没查到相关内容，好像他只写过《吹牛大王历险记》。）最让人百思不得其解的是他居然能自己拉自己的辫子出泥潭？！我觉得自己拉自己的辫子只会把自己的辫子拉断，而不会飞出泥潭。（问:图片中底下的屁股为什么插了一根钢针？）屁股底下居然有根钢针？在泥潭应该是滑滑的吧，可是他怎么能夹紧马肚呢？马肚子应该是在马的下方。还有如果能从泥潭里把连人带马都给拽出来的话，他力气肯定很大，</div> </li> <li><a href="/article/54.htm" title="JAVA中的Enum" target="_blank">JAVA中的Enum</a> <span class="text-muted">周凡杨</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/enum/1.htm">enum</a><a class="tag" taget="_blank" href="/search/%E6%9E%9A%E4%B8%BE/1.htm">枚举</a> <div>Enum是计算机编程语言中的一种数据类型---枚举类型。 在实际问题中，有些变量的取值被限定在一个有限的范围内。     例如，一个星期内只有七天 我们通常这样实现上面的定义： public String monday; public String tuesday; public String wensday; public String thursday</div> </li> <li><a href="/article/181.htm" title="赶集网mysql开发36条军规" target="_blank">赶集网mysql开发36条军规</a> <span class="text-muted">Bill_chen</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E4%B8%9A%E5%8A%A1%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1/1.htm">业务架构设计</a><a class="tag" taget="_blank" href="/search/mysql%E8%B0%83%E4%BC%98/1.htm">mysql调优</a><a class="tag" taget="_blank" href="/search/mysql%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">mysql性能优化</a> <div>(一)核心军规 (1)不在数据库做运算    cpu计算务必移至业务层； (2)控制单表数据量    int型不超过1000w，含char则不超过500w；    合理分表；    限制单库表数量在300以内； (3)控制列数量    字段少而精，字段数建议在20以内</div> </li> <li><a href="/article/308.htm" title="Shell test命令" target="_blank">Shell test命令</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/%E5%AD%97%E7%AC%A6%E4%B8%B2/1.htm">字符串</a><a class="tag" taget="_blank" href="/search/test/1.htm">test</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E5%AD%97/1.htm">数字</a><a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E6%AF%94%E8%BE%83/1.htm">文件比较</a> <div>Shell test命令 Shell中的 test 命令用于检查某个条件是否成立，它可以进行数值、字符和文件三个方面的测试。 数值测试 参数 说明 -eq 等于则为真 -ne 不等于则为真 -gt 大于则为真 -ge 大于等于则为真 -lt 小于则为真 -le 小于等于则为真 实例演示： num1=100 num2=100if test $[num1]</div> </li> <li><a href="/article/435.htm" title="XFire框架实现WebService(二)" target="_blank">XFire框架实现WebService(二)</a> <span class="text-muted">周凡杨</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/webservice/1.htm">webservice</a> <div>   有了XFire框架实现WebService(一)，就可以继续开发WebService的简单应用。 Webservice的服务端(WEB工程)： 两个java bean类： Course.java    package cn.com.bean; public class Course {     private </div> </li> <li><a href="/article/562.htm" title="重绘之画图板" target="_blank">重绘之画图板</a> <span class="text-muted">朱辉辉33</span> <a class="tag" taget="_blank" href="/search/%E7%94%BB%E5%9B%BE%E6%9D%BF/1.htm">画图板</a> <div>       上次博客讲的五子棋重绘比较简单，因为只要在重写系统重绘方法paint（）时加入棋盘和棋子的绘制。这次我想说说画图板的重绘。        画图板重绘难在需要重绘的类型很多，比如说里面有矩形，园，直线之类的，所以我们要想办法将里面的图形加入一个队列中，这样在重绘时就</div> </li> <li><a href="/article/689.htm" title="Java的IO流" target="_blank">Java的IO流</a> <span class="text-muted">西蜀石兰</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>刚学Java的IO流时，被各种inputStream流弄的很迷糊，看老罗视频时说想象成插在文件上的一根管道，当初听时觉得自己很明白，可到自己用时，有不知道怎么代码了。。。 每当遇到这种问题时，我习惯性的从头开始理逻辑，会问自己一些很简单的问题，把这些简单的问题想明白了，再看代码时才不会迷糊。 IO流作用是什么？ 答：实现对文件的读写，这里的文件是广义的； Java如何实现程序到文件</div> </li> <li><a href="/article/816.htm" title="No matching PlatformTransactionManager bean found for qualifier 'add' - neither" target="_blank">No matching PlatformTransactionManager bean found for qualifier 'add' - neither</a> <span class="text-muted">林鹤霄</span> <div>java.lang.IllegalStateException: No matching PlatformTransactionManager bean found for qualifier 'add' - neither qualifier match nor bean name match!   网上找了好多的资料没能解决，后来发现：项目中使用的是xml配置的方式配置事务，但是</div> </li> <li><a href="/article/943.htm" title="Row size too large (> 8126). Changing some columns to TEXT or BLOB" target="_blank">Row size too large (> 8126). Changing some columns to TEXT or BLOB</a> <span class="text-muted">aigo</span> <a class="tag" taget="_blank" href="/search/column/1.htm">column</a> <div>原文：http://stackoverflow.com/questions/15585602/change-limit-for-mysql-row-size-too-large   异常信息： Row size too large (> 8126). Changing some columns to TEXT or BLOB or using ROW_FORMAT=DYNAM</div> </li> <li><a href="/article/1070.htm" title="JS 格式化时间" target="_blank">JS 格式化时间</a> <span class="text-muted">alxw4616</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>/** * 格式化时间 2013/6/13 by 半仙 alxw4616@msn.com * 需要 pad 函数 * 接收可用的时间值. * 返回替换时间占位符后的字符串 * * 时间占位符:年 Y 月 M 日 D 小时 h 分 m 秒 s 重复次数表示占位数 * 如 YYYY 4占4位 YY 占2位<p></p> * MM DD hh mm</div> </li> <li><a href="/article/1197.htm" title="队列中数据的移除问题" target="_blank">队列中数据的移除问题</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E9%98%9F%E5%88%97%E7%A7%BB%E9%99%A4/1.htm">队列移除</a> <div>     队列的移除一般都是使用的remov();都可以移除的,但是在昨天做线程移除的时候出现了点问题,没有将遍历出来的全部移除,  代码如下;      // package com.Thread0715.com; import java.util.ArrayList; public class Threa</div> </li> <li><a href="/article/1324.htm" title="Runnable接口使用实例" target="_blank">Runnable接口使用实例</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/Runnable/1.htm">Runnable</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a> <div>Runnable接口 a.       该接口只有一个方法：public void run(); b.       实现该接口的类必须覆盖该run方法 c.       实现了Runnable接口的类并不具有任何天</div> </li> <li><a href="/article/1451.htm" title="oracle里的extend详解" target="_blank">oracle里的extend详解</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/extend/1.htm">extend</a> <div>扩展已知的数组空间，例： DECLARE TYPE CourseList IS TABLE OF VARCHAR2(10); courses CourseList; BEGIN -- 初始化数组元素，大小为3 courses := CourseList('Biol 4412 ', 'Psyc 3112 ', 'Anth 3001 '); -- </div> </li> <li><a href="/article/1578.htm" title="【httpclient】httpclient发送表单POST请求" target="_blank">【httpclient】httpclient发送表单POST请求</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/httpclient/1.htm">httpclient</a> <div>浏览器Form Post请求 浏览器可以通过提交表单的方式向服务器发起POST请求，这种形式的POST请求不同于一般的POST请求 1. 一般的POST请求，将请求数据放置于请求体中，服务器端以二进制流的方式读取数据，HttpServletRequest.getInputStream()。这种方式的请求可以处理任意数据形式的POST请求，比如请求数据是字符串或者是二进制数据 2. Form </div> </li> <li><a href="/article/1705.htm" title="【Hive十三】Hive读写Avro格式的数据" target="_blank">【Hive十三】Hive读写Avro格式的数据</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a> <div> 1. 原始数据 hive> select * from word; OK 1 MSN 10 QQ 100 Gtalk 1000 Skype      2. 创建avro格式的数据表   hive> CREATE TABLE avro_table(age INT, name STRING)STORE</div> </li> <li><a href="/article/1832.htm" title="nginx+lua+redis自动识别封解禁频繁访问IP" target="_blank">nginx+lua+redis自动识别封解禁频繁访问IP</a> <span class="text-muted">ronin47</span> <div>在站点遇到攻击且无明显攻击特征，造成站点访问慢，nginx不断返回502等错误时，可利用nginx+lua+redis实现在指定的时间段 内，若单IP的请求量达到指定的数量后对该IP进行封禁，nginx返回403禁止访问。利用redis的expire命令设置封禁IP的过期时间达到在 指定的封禁时间后实行自动解封的目的。 一、安装环境： CentOS x64 release 6.4(Fin</div> </li> <li><a href="/article/1959.htm" title="java-二叉树的遍历-先序、中序、后序（递归和非递归）、层次遍历" target="_blank">java-二叉树的遍历-先序、中序、后序（递归和非递归）、层次遍历</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> import java.util.LinkedList; import java.util.List; import java.util.Stack; public class BinTreeTraverse { //private int[] array={ 1, 2, 3, 4, 5, 6, 7, 8, 9 }; private int[] array={ 10,6,</div> </li> <li><a href="/article/2086.htm" title="Spring源码学习-XML 配置方式的IoC容器启动过程分析" target="_blank">Spring源码学习-XML 配置方式的IoC容器启动过程分析</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/IOC/1.htm">IOC</a> <div>以FileSystemXmlApplicationContext为例，把Spring IoC容器的初始化流程走一遍： ApplicationContext context = new FileSystemXmlApplicationContext ("C:/Users/ZARA/workspace/HelloSpring/src/Beans.xml&q</div> </li> <li><a href="/article/2213.htm" title="[科研与项目]民营企业请慎重参与军事科技工程" target="_blank">[科研与项目]民营企业请慎重参与军事科技工程</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E4%BC%81%E4%B8%9A/1.htm">企业</a> <div>      军事科研工程和项目 并非要用最先进，最时髦的技术，而是要做到“万无一失”    而民营科技企业在搞科技创新工程的时候，往往考虑的是技术的先进性，而对先进技术带来的风险考虑得不够，在今天提倡军民融合发展的大环境下，这种“万无一失”和“时髦性”的矛盾会日益凸显。。。。。。所以请大家在参与任何重大的军事和政府项目之前，对</div> </li> <li><a href="/article/2340.htm" title="spring 定时器-两种方式" target="_blank">spring 定时器-两种方式</a> <span class="text-muted">cuityang</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/quartz/1.htm">quartz</a><a class="tag" taget="_blank" href="/search/%E5%AE%9A%E6%97%B6%E5%99%A8/1.htm">定时器</a> <div>方式一： 间隔一定时间 运行 <bean id="updateSessionIdTask" class="com.yang.iprms.common.UpdateSessionTask" autowire="byName" /> <bean id="updateSessionIdSchedule</div> </li> <li><a href="/article/2467.htm" title="简述一下关于BroadView站点的相关设计" target="_blank">简述一下关于BroadView站点的相关设计</a> <span class="text-muted">damoqiongqiu</span> <a class="tag" taget="_blank" href="/search/view/1.htm">view</a> <div>终于弄上线了，累趴，戳这里http://www.broadview.com.cn   简述一下相关的技术点   前端：jQuery+BootStrap3.2+HandleBars，全站Ajax（貌似对SEO的影响很大啊！怎么破？），用Grunt对全部JS做了压缩处理，对部分JS和CSS做了合并（模块间存在很多依赖，全部合并比较繁琐，待完善）。   后端：U</div> </li> <li><a href="/article/2594.htm" title="运维 PHP问题汇总" target="_blank">运维 PHP问题汇总</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/windows2003/1.htm">windows2003</a> <div>1、Dede(织梦)发表文章时,内容自动添加关键字显示空白页 解决方法： 后台>系统>系统基本参数>核心设置>关键字替换（是/否），这里选择“是”。 后台>系统>系统基本参数>其他选项>自动提取关键字，这里选择“是”。   2、解决PHP168超级管理员上传图片提示你的空间不足 网站是用PHP168做的，反映使用管理员在后台无法</div> </li> <li><a href="/article/2721.htm" title="mac 下 安装php扩展 - mcrypt" target="_blank">mac 下 安装php扩展 - mcrypt</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a> <div>MCrypt是一个功能强大的加密算法扩展库，它包括有22种算法，phpMyAdmin依赖这个PHP扩展，具体如下： 下载并解压libmcrypt-2.5.8.tar.gz。 在终端执行如下命令： tar zxvf libmcrypt-2.5.8.tar.gz cd libmcrypt-2.5.8/ ./configure --disable-posix-threads --</div> </li> <li><a href="/article/2848.htm" title="MongoDB更新文档 [四]" target="_blank">MongoDB更新文档 [四]</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/Mongodb%E6%9B%B4%E6%96%B0%E6%96%87%E6%A1%A3/1.htm">Mongodb更新文档</a> <div>MongoDB更新文档 转载请出自出处：http://eksliang.iteye.com/blog/2174104 MongoDB对文档的CURD，前面的博客简单介绍了，但是对文档更新篇幅比较大，所以这里单独拿出来。 语法结构如下： db.collection.update( criteria, objNew, upsert, multi) 参数含义 参数   </div> </li> <li><a href="/article/2975.htm" title="Linux下的解压，移除，复制，查看tomcat命令" target="_blank">Linux下的解压，移除，复制，查看tomcat命令</a> <span class="text-muted">y806839048</span> <a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a> <div>重复myeclipse生成webservice有问题删除以前的，干净 1、先切换到：cd usr/local/tomcat5/logs 2、tail -f catalina.out 3、这样运行时就可以实时查看运行日志了 Ctrl+c 是退出tail命令。 有问题不明的先注掉   cp /opt/tomcat-6.0.44/webapps/g</div> </li> <li><a href="/article/3102.htm" title="Spring之使用事务缘由(3-XML实现)" target="_blank">Spring之使用事务缘由(3-XML实现)</a> <span class="text-muted">ihuning</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>  用事务通知声明式地管理事务   事务管理是一种横切关注点。为了在 Spring 2.x 中启用声明式事务管理，可以通过 tx Schema 中定义的 <tx:advice> 元素声明事务通知，为此必须事先将这个 Schema 定义添加到 <beans> 根元素中去。声明了事务通知后，就需要将它与切入点关联起来。由于事务通知是在 <aop:</div> </li> <li><a href="/article/3229.htm" title="GCD使用经验与技巧浅谈" target="_blank">GCD使用经验与技巧浅谈</a> <span class="text-muted">啸笑天</span> <a class="tag" taget="_blank" href="/search/GC/1.htm">GC</a> <div>前言 GCD(Grand Central Dispatch)可以说是Mac、iOS开发中的一大“利器”，本文就总结一些有关使用GCD的经验与技巧。 dispatch_once_t必须是全局或static变量 这一条算是“老生常谈”了，但我认为还是有必要强调一次，毕竟非全局或非static的dispatch_once_t变量在使用时会导致非常不好排查的bug，正确的如下： 1 </div> </li> <li><a href="/article/3356.htm" title="linux（Ubuntu）下常用命令备忘录1" target="_blank">linux（Ubuntu）下常用命令备忘录1</a> <span class="text-muted">macroli</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a> <div>在使用下面的命令是可以通过--help来获取更多的信息1,查询当前目录文件列表：ls ls命令默认状态下将按首字母升序列出你当前文件夹下面的所有内容，但这样直接运行所得到的信息也是比较少的，通常它可以结合以下这些参数运行以查询更多的信息：  ls / 显示/.下的所有文件和目录  ls -l 给出文件或者文件夹的详细信息 ls -a 显示所有文件，包括隐藏文</div> </li> <li><a href="/article/3483.htm" title="nodejs同步操作mysql" target="_blank">nodejs同步操作mysql</a> <span class="text-muted">qiaolevip</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%B0%B8%E6%97%A0%E6%AD%A2%E5%A2%83/1.htm">学习永无止境</a><a class="tag" taget="_blank" href="/search/%E6%AF%8F%E5%A4%A9%E8%BF%9B%E6%AD%A5%E4%B8%80%E7%82%B9%E7%82%B9/1.htm">每天进步一点点</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</a> <div>// db-util.js var mysql = require('mysql'); var pool = mysql.createPool({ connectionLimit : 10, host: 'localhost', user: 'root', password: '', database: 'test', port: 3306 }); </div> </li> <li><a href="/article/3610.htm" title="一起学Hive系列文章" target="_blank">一起学Hive系列文章</a> <span class="text-muted">superlxw1234</span> <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/Hive%E5%85%A5%E9%97%A8/1.htm">Hive入门</a> <div>  [一起学Hive]系列文章 目录贴，入门Hive，持续更新中。   [一起学Hive]之一—Hive概述，Hive是什么 [一起学Hive]之二—Hive函数大全-完整版 [一起学Hive]之三—Hive中的数据库(Database)和表(Table) [一起学Hive]之四-Hive的安装配置 [一起学Hive]之五-Hive的视图和分区 [一起学Hive</div> </li> <li><a href="/article/3737.htm" title="Spring开发利器：Spring Tool Suite 3.7.0 发布" target="_blank">Spring开发利器：Spring Tool Suite 3.7.0 发布</a> <span class="text-muted">wiselyman</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>Spring Tool Suite(简称STS)是基于Eclipse，专门针对Spring开发者提供大量的便捷功能的优秀开发工具。   在3.7.0版本主要做了如下的更新：   将eclipse版本更新至Eclipse Mars 4.5 GA Spring Boot(JavaEE开发的颠覆者集大成者，推荐大家学习)的配置语言YAML编辑器的支持(包含自动提示，</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>