脚本宝典收集整理的这篇文章主要介绍了

自己写的面试题,自己想的答案

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <blockquote><p>大家都知道‘不忘初心,方得始终’,但多少人知道‘初心易得,始终难守’。时代在变化,技术在发展,基础没变。学习新技术的时候,不应把基础落下。</p></blockquote> <h2 id="articleHeader0">1.前言</h2> <p>因为机缘巧合,让当了无数次面试者的我,当上了面试官,也和几个面试者交流过。既然要应对面试者,我就当然要准备面试题了,好让我大概知道面试者是什么水平。这个时候,也该详解下,自己的写的那些题目。因为题目是我自己写的,并不是网上摘的,所以知识点比较基础,也不全面。如果大家对面试题有什么建议,欢迎指点。</p> <h2 id="articleHeader1">2.考点-面向对象</h2> <p>需求:定义‘<strong>我吃火锅</strong>’</p> <p>面向过程的思想是:<strong>动作(我,吃火锅)</strong></p> <p>代码实现方面:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//面向过程 let eat=function(who,someThing){ console.log(`${who}吃${someThing}`); } eat('我','火锅');//我吃火锅 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-comment">//面向过程</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a></span> eat=<span class="hljs-function"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span>(<span class="hljs-params">who,someTh<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>g</span>)</span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`<span class="hljs-subst">${who}</span>吃<span class="hljs-subst">${someThing}</span>`</span>); } eat(<span class="hljs-string">'我'</span>,<span class="hljs-string">'火锅'</span>);<span class="hljs-comment">//我吃火锅</span> </code></pre> <p>使用面向对象的方式改写一下这个实例。</p> <p>这道题,只希望有一个面向对象的意思在这里就行了,我期待的答案是这样的。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="let person={ name:'守候', eat:function(someThing){ console.log(`${this.name}吃${someThing}`); } } person.eat('火锅'); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-keyword">let</span> person={ <span class="hljs-attr"><a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a></span>:<span class="hljs-string">'守候'</span>, <span class="hljs-attr">eat</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">someThing</span>)</span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`<span class="hljs-subst">${<span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.name}</span>吃<span class="hljs-subst">${someThing}</span>`</span>); } } person.eat(<span class="hljs-string">'火锅'</span>); </code></pre> <p>更好的方式看下面这篇文章:<a href="https://segmentfault.com/a/1190000013986031">JavaScript:面试频繁出现的几个易错点</a>。这里不展开讲。</p> <h2 id="articleHeader2">3.考点-预解析</h2> <p>根据以下代码,写出结果</p> <blockquote><p>这道题我印象很深刻,因为是我在一年多以前,在Q群看到有人说直自己各种精通的时候,我就出这道题来提问,一抓一个准,至今那些各种精通的人,没一个回答出来的。即使是面试题,也有人掉坑。</p></blockquote> <blockquote><p>之前发布一篇文章的时候,有提及过这个面试题,也被人骂过,大概的意思是:现在都什么年代了,ES都不知道更新多少版本了,谁还这么写代码?看到这个我并没有回应,也没打算和谁对撕。但是我脑子里想到的第一件事就是:以前,新闻有条微博说70%网友赞成数学退出高考,有人谈定回答:数学就是用来淘汰这70%人的。在这里我想说,虽然开发上这样写代码肯定会被批斗,但是面试题,考的不只是开发上遇到的问题,也有考一些基础知识。这道题就是其中之一。而且,现在我也觉得还有必要知道这个知识,还没到全民写 ES6 的时代,抛弃 ES5 的时代。</p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="alert(a) a(); var a=3; function a(){ alert(10) } alert(a) a=6; a(); //------------分割线------------------ alert(a) a(); var a=3; var a=function(){ alert(10) } alert(a) a=6; a(); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs actionscript"><code><a href="http://www.js-code.com/tag/alert" title="浏览关于“alert”的文章" target="_blank" class="tag_link">alert</a>(a) a(); <span class="hljs-keyword"><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a></span> a=<span class="hljs-number">3</span>; <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">a</span><span class="hljs-params">()</span></span>{ alert(<span class="hljs-number">10</span>) } alert(a) a=<span class="hljs-number">6</span>; a(); <span class="hljs-comment">//------------分割线------------------</span> alert(a) a(); <span class="hljs-keyword">var</span> a=<span class="hljs-number">3</span>; <span class="hljs-keyword">var</span> a=<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ alert(<span class="hljs-number">10</span>) } alert(a) a=<span class="hljs-number">6</span>; a(); </code></pre> <p>这个之前写文章有写过,现在赋值粘贴下。 <br />考点其实就两个,第一变量声明提前,第二函数声明优先于变量声明!<br />下面我简单分析一下,<br />第一部分运行结果:<br />1.函数声明优先于变量声明,所以,刚开始,a就是<code><a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> a(){<a href="http://www.js-code.com/tag/alert" title="alert" target="_blank">alert</a>(10)}</code> ,就会看到这个函数。<br />2.<code>a()</code>,执行函数,就是出现<code><a href="http://www.js-code.com/tag/alert" title="alert" target="_blank">alert</a>(10)</code><br />3.执行了<code><a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> a=3;</code> 所以<code>alert(a)</code>就是显示<code>3</code><br />4.由于<code>a</code>不是一个函数了,所以往下在执行到<code>a()</code>的时候, 报错。<br />第二部分运行结果:<br />1.underf<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>d<br />2.报错<br />在之前说过,预解析是把带有<code><a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a></code>和<code><a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a></code>关键字的事先声明,但不会赋值。所以一开始是<code>underf<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>d</code>,然后报错是因为执行到<code>a()</code>的时候,<code>a</code>并不是一个函数。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//函数表达式,和变量声明同等 var a=function(){ alert(10) } //函数声明,优于变量声明 function a(){ alert(10) } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs actionscript"><code><span class="hljs-comment">//函数表达式,和变量声明同等</span> <span class="hljs-keyword">var</span> a=<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ alert(<span class="hljs-number">10</span>) } <span class="hljs-comment">//函数声明,优于变量声明 </span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">a</span><span class="hljs-params">()</span></span>{ alert(<span class="hljs-number">10</span>) } </code></pre> <h2 id="articleHeader3">4.考点-事件委托</h2> <p>一个简单的需求,比如想给ul下面的li加上点击事件,点击哪个li,就显示那个li的inner<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>。这个貌似很简单!代码如下!</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<!DOCTYPE html><br /> <html><br /> <head><br /> <meta charset=&quot;UTF-8&quot;><br /> <title></title><br /> </head><br /> <body></p> <ul id=&quot;ul-test&quot;> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> <p> </body><br /> <script type=&quot;text/javascript&quot;> var oUl=<a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>cument.getElementById(&quot;ul-test&quot;); var oLi=oUl.getElementsByTagName(&quot;li&quot;); <a href="http://www.js-code.com/tag/for" title="for" target="_blank">for</a>(var i=0,len=oLi.<a href="http://www.js-code.com/tag/length" title="length" target="_blank">length</a>;i<len;i++){ oLi[i].addEventListener(&quot;click&quot;,<a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a>(){ alert(<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.inner<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>) }) } </script><br /> </html><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr"><a href="http://www.js-code.com/tag/char" title="浏览关于“char”的文章" target="_blank" class="tag_link">char</a>set</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"ul-test"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>0<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>3<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>4<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>5<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>6<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>7<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>8<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>9<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>/<a href="http://www.js-code.com/tag/java" title="浏览关于“java”的文章" target="_blank" class="tag_link">java</a>script"</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">var</span> oUl=<span class="hljs-built_in"><a href="http://www.js-code.com/tag/document" title="浏览关于“document”的文章" target="_blank" class="tag_link">document</a></span>.getElementById(<span class="hljs-string">"ul-test"</span>); <span class="hljs-keyword">var</span> oLi=oUl.getElementsByTagName(<span class="hljs-string">"li"</span>); <span class="hljs-keyword"><a href="http://www.js-code.com/tag/for" title="浏览关于“for”的文章" target="_blank" class="tag_link">for</a></span>(<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span>,len=oLi.<a href="http://www.js-code.com/tag/length" title="浏览关于“length”的文章" target="_blank" class="tag_link">length</a>;i&lt;len;i++){ oLi[i].addEventListener(<span class="hljs-string">"click"</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ alert(<span class="hljs-keyword">this</span>.inner<a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a>) }) } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span> </code></pre> <p>问题在于:<br />1.<a href="http://www.js-code.com/tag/for" title="for" target="_blank">for</a>循环,循环的是li,10个li就循环10次,绑定10次事件,100个就循环了100次,绑定100次事件!<br />2.如果li不是本来就在页面上的,是未来元素,是页面加载了,再通过js动态加载进来了,上面的写法是无效的,点击li是没有反应的!</p> <p>应该怎么解决以上问题? </p> <p>在道题的考点就是事件委托,就是把事件绑在ul上面,之后的li就可以随便添加。代码如下</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var oUl=document.getElementById(&quot;ul-test&quot;); oUl.addEventListener(&quot;click&quot;,function(ev){ var ev=ev||window.event; var target=ev.target||ev.srcElement; //如果点击的最底层是li元素 if(target.tagName.toLowerCase()==='li'){ alert(target.innerHTML) } }) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-keyword">var</span> oUl=<span class="hljs-built_in"><a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>cument</span>.getElementById(<span class="hljs-string">"ul-test"</span>); oUl.addEventListener(<span class="hljs-string">"click"</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">ev</span>)</span>{ <span class="hljs-keyword">var</span> ev=ev||<span class="hljs-built_in"><a href="http://www.js-code.com/tag/window" title="浏览关于“window”的文章" target="_blank" class="tag_link">window</a></span>.<a href="http://www.js-code.com/tag/event" title="浏览关于“event”的文章" target="_blank" class="tag_link">event</a>; <span class="hljs-keyword">var</span> target=ev.target||ev.srcElement; <span class="hljs-comment">//如果点击的最底层是li元素</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a></span>(target.tagName.toLowerCase()===<span class="hljs-string">'li'</span>){ alert(target.innerHTML) } }) </code></pre> <p>但是有些面试者就是从vue的角度回答这个问题--利用v-for进行绑定。虽然我们公司的项目是使用vue,这样说也没错,但是这道题我没提及到vue,说vue的,反而就是一个扣分项了。</p> <h2 id="articleHeader4">5.考点-<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>操作</h2> <p>比如有一个需求,往ul里面添加10个li,如下代码</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<!DOCTYPE html><br /> <html><br /> <head><br /> <meta charset=&quot;UTF-8&quot;><br /> <title></title><br /> </head><br /> <body></p> <ul id=&quot;ul-test&quot;> </ul> <p> </body><br /> <script type=&quot;text/javascript&quot;> var oUl=<a href="http://www.js-code.com/tag/document" title="document" target="_blank">document</a>.getElementById(&quot;ul-test&quot;); for(var i=0;i<10;i++){ var oLi=<a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>cument.createElement('li'); oLi.innerHTML=i; oUl.appendChild(oLi); } </script><br /> </html><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"ul-test"</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">var</span> oUl=<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"ul-test"</span>); <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span>;i&lt;<span class="hljs-number">10</span>;i++){ <span class="hljs-keyword">var</span> oLi=<span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'li'</span>); oLi.innerHTML=i; oUl.appendChild(oLi); } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span> </code></pre> <p>问题:这里相当于操作了10次<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>,有什么方案,减少<a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a>的操作次数?可写代码简单说明。</p> <p>这道题,有几个人还是从vue的角度来解决问题(v-for,data),虽然这样不能说错,但是我题目没提及vue的任何东西。考点就是利用innerHTML或者文档碎片的形式。</p> <p>代码如下</p> <h4>innerHTML</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a>" class="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="浏览关于“top”的文章" target="_blank" class="tag_link">top</a>" data-clipboard-text="var oUl=<a href="http://www.js-code.com/tag/document" title="document" target="_blank">document</a>.getElementById(&quot;ul-test&quot;);<br /> //定义临时变量<br /> var _html='';<br /> for(var i=0;i<10;i++){ //保存临时变量 _html+=' <li>'+i+'</li> <p>'<br /> }<br /> //添加元素<br /> oUl.innerHTML=_html;<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">var</span> oUl=<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"ul-test"</span>); <span class="hljs-comment">//定义临时变量</span> <span class="hljs-keyword">var</span> _html=<span class="hljs-string">''</span>; <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span>;i&lt;<span class="hljs-number">10</span>;i++){ <span class="hljs-comment">//保存临时变量</span> _html+=<span class="hljs-string">'&lt;li&gt;'</span>+i+<span class="hljs-string">'&lt;/li&gt;'</span> } <span class="hljs-comment">//添加元素</span> oUl.innerHTML=_html; </code></pre> <h4>文档碎片-createDocumentFragment</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var oUl=document.getElementById(&quot;ul-test&quot;),_frag = document.createDocumentFragment(); for(var i=0;i<10;i++){ var oLi=document.createElement('li'); oLi.innerHTML=i; //把元素添加进文档碎片 _frag.appendChild(oLi); } //把文档碎片添加进元素 oUl.appendChild(_frag); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">var</span> oUl=<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"ul-test"</span>),_frag = <span class="hljs-built_in">document</span>.createDocumentFragment(); <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span>;i&lt;<span class="hljs-number">10</span>;i++){ <span class="hljs-keyword">var</span> oLi=<span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'li'</span>); oLi.innerHTML=i; <span class="hljs-comment">//把元素添加进文档碎片</span> _frag.appendChild(oLi); } <span class="hljs-comment">//把文档碎片添加进元素</span> oUl.appendChild(_frag); </code></pre> <h2 id="articleHeader5">6.考点-对象深拷贝</h2> <p>写出一个函数,实现对,对象的深拷贝</p> <p>要求实现一个函数clone。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="let obj={ name:'小明', age:24 } let obj1=clone(obj); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs bash"><code><span class="hljs-built_in">let</span> obj={ name:<span class="hljs-string">'小明'</span>, age:24 } <span class="hljs-built_in">let</span> obj1=<span class="hljs-built_in">clone</span>(obj); </code></pre> <p>修改obj1,不会影响到obj的值。 </p> <p>这道题,在obj上面,我故意只写一层,对象里面没有嵌套<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>或对象,就是想看下面试者能不能往深处想一下。结果面试者都踩坑了。但是可以理解,毕竟大家都是针对题目而论。</p> <p>基本上回答都是类似下面这样</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="function clone(object){ let _obj={} for(let key in object){ _obj[key]=object[key]; } return _obj; } let obj1=clone(obj); //-------------------或者------------- function clone(obj){ let _obj=Object.assign({},object); return _obj; } let obj1=clone(obj); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">clone</span>(<span class="hljs-params">object</span>)</span>{ <span class="hljs-keyword">let</span> _obj={} <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> key <span class="hljs-keyword">in</span> object){ _obj[key]=object[key]; } <span class="hljs-keyword"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span> _obj; } <span class="hljs-keyword">let</span> obj1=clone(obj); <span class="hljs-comment">//-------------------或者-------------</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">clone</span>(<span class="hljs-params">obj</span>)</span>{ <span class="hljs-keyword">let</span> _obj=<span class="hljs-built_in"><a href="http://www.js-code.com/tag/Object" title="浏览关于“Object”的文章" target="_blank" class="tag_link">Object</a></span>.<a href="http://www.js-code.com/tag/assign" title="浏览关于“assign”的文章" target="_blank" class="tag_link">assign</a>({},object); <span class="hljs-keyword">return</span> _obj; } <span class="hljs-keyword">let</span> obj1=clone(obj); </code></pre> <p>这个方案,目的是达到了,但是如果obj里面的属性,嵌套着对象或者<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>,这个就有问题了。所以理想的解决方案应该是这个。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="function clone(object){ let _obj=JSON.parse(JSON.stringify(obj)) } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">clone</span>(<span class="hljs-params">object</span>)</span>{ <span class="hljs-keyword">let</span> _obj=<span class="hljs-built_in">JSON</span>.parse(<span class="hljs-built_in">JSON</span>.stringify(obj)) } </code></pre> <p>这种方案,如果需要属性值是函数或者是<a href="http://www.js-code.com/tag/undefined" title="undefined" target="_blank">undefined</a>,就会被过滤掉。保险的做法是下面这样。原理也很简单,就是逐个遍历,如果检测到属性值是时引用类型就用当前属性进行遍历。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="function clone(obj){ if(!obj&amp;&amp; typeof obj!== 'object'){ return; } var newObj=obj.constructor===Object?{}:[]; for(var key in obj){ newObj[key] =(obj[key]&amp;&amp;typeof obj[key]==='object')?clone(obj[key]):obj[key]; } return newObj; } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">clone</span>(<span class="hljs-params">obj</span>)</span>{ <span class="hljs-keyword">if</span>(!obj&amp;&amp; <span class="hljs-keyword"><a href="http://www.js-code.com/tag/typeof" title="浏览关于“typeof”的文章" target="_blank" class="tag_link">typeof</a></span> obj!== <span class="hljs-string">'object'</span>){ <span class="hljs-keyword">return</span>; } <span class="hljs-keyword">var</span> <a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a>Obj=obj.<a href="http://www.js-code.com/tag/constructor" title="浏览关于“constructor”的文章" target="_blank" class="tag_link">constructor</a>===<span class="hljs-built_in">Object</span>?{}:[]; <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> key <span class="hljs-keyword">in</span> obj){ newObj[key] =(obj[key]&amp;&amp;<span class="hljs-keyword">typeof</span> obj[key]===<span class="hljs-string">'object'</span>)?clone(obj[key]):obj[key]; } <span class="hljs-keyword">return</span> newObj; } </code></pre> <h2 id="articleHeader6">7.其它考点</h2> <p>其余几道题都是比较笼统的题目,没有唯一的解决方案,这里就不统一回答了!</p> <h4>1.如果设计中使用了非标准的字体,你该如何去实现?</h4> <p>图片,字体图标代替,如果是比较小的英文字体可以使用<a href="http://www.js-code.com/tag/css3" title="css3" target="_blank">css3</a>的@font-face。</p> <h4>2.在开发项目上,知道那些优化的方式,提升性能,减少页面加载时间,代码质量,代码可读性等方面</h4> <p>性能优化-压缩代码,懒加载,预加载,合并请求,小图片转换base64编码,资源按需加载等。<br />代码质量优化-命名有意义,适当的注释,避免巨大函数,避免对象强耦合,代码逻辑清晰等。</p> <h4>3.列举Es6,常用的一些新特性。</h4> <p>参考资料如下:<br /><a href="http://es6.ruanyifeng.com/" rel="nofollow noreferrer" target="_blank">ECMAScript 6 入门</a><br /><a href="https://segmentfault.com/a/1190000004365693">30分钟掌握ES6/ES2015核心内容(上)</a><br /><a href="https://segmentfault.com/a/1190000004368132" target="_blank">30分钟掌握ES6/ES2015核心内容(下)</a><br /><a href="https://segmentfault.com/a/1190000011976770">实例感受-es6的常用语法和优越性</a><br /><a href="https://www.cnblogs.com/whybxy/p/7645578.html" rel="nofollow noreferrer" target="_blank">ES6 Promise 用法讲解</a></p> <h4>4.Div+css排版的时候,从页面渲染和代码可读性的角度,应该注意些什么?</h4> <p>标签语义化,class和id命名有意义并且命名统一规范,css避免深嵌套(3级就得注意),避免@<a href="http://www.js-code.com/tag/import" title="import" target="_blank">import</a>,!<a href="http://www.js-code.com/tag/import" title="import" target="_blank">import</a>ant,和*通配符,避免行内样式,在head引入css等。</p> <p>参考:<br /><a href="http://caibaojian.com/css-protips.html" rel="nofollow noreferrer" target="_blank">21条CSS高级技巧</a><br /><a href="https://segmentfault.com/a/1190000011390896">css写作建议和性能优化小结</a></p> <h4>5.说下自己对模块化开发的理解,以及模块化开发的好处。</h4> <p>提高开发效率,有利团队协同开发,<br />避免全局变量污染,命名冲突,<br />方便代码的复用维护等。</p> <h2 id="articleHeader7">8.小结</h2> <p>面试题就是这10道,我自己的解决方案也说完了。虽热我们公司的技术栈用的主要是vue,webpack这一些,我面试交流的时候,也会问相关的问题,但是我在面试题里面我不出关于vue,webpack这些题目,就问文章这些题目,就是想知道面试者的基础如何(因为现在的行情,很多人都是注重学习热门的框架,库,工具等,却把基础落下了)。基础好的话,框架不难上手,但是基础不牢,就熟悉两三的框架和一些构建工具,以后技术转型可能会有阻力。现在前端的发展很快,技术很杂,但是基础一直没变。建议大家在学习新技术的同时,不要忘记巩固基础。</p> <p>最后,如果大家对面试题有什么解法建议或者建议出什么题型,欢迎指点。</p> <p>-------------------------华丽的分割线--------------------<br />想了解更多,关注关注我的微信公众号:守候书阁</p> <p><span class="img-wrap"><img data-src="/img/bV1Cv6?w=258&amp;h=258" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

自己写的面试题,自己想的答案

全部内容,希望文章能够帮你解决

自己写的面试题,自己想的答案

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过