超过20家的前端面试题
<h2>1. 前言</h2> <p>这里有超过20家的前端面试题，你确定不点进来看看？</p> <p>好吧，如果你看到这句话，你明显是点进来了。</p> <p>那么恭喜你，接下来我就和你们分享一下，近期我收集到的各个公司的面试题。</p> <p>本文为作者原创，转载请告知作者并取得同意方可转载。</p> <p>违者作者保留法律追究权利。</p> <h2>2. 正文</h2> <p>闲话就不扯了，直接开始分享。</p> <h3>2.1 第一套面试题</h3> <p style="text-align:center"><img src="https://simg.open-open.com/show/9ba8d5d00ba6b810a4460f4c50ceea41.png"></p> <ul> <li>当前一段代码输出结果是什么？</li> </ul> <pre> <code class="language-javascript"><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>MR_LP --> QQ ：3206064928</title> </head> <body> </body> <script type="text/javascript" charset="utf-8"> var z = 10; function foo(){ console.log(z); } (function(funArg){ var z = 20; funArg(); })(foo); </script> </html></code></pre> <ul> <li>当前一段代码输出结果是什么？</li> </ul> <pre> <code class="language-javascript"><!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>MR_LP --> QQ ：3206064928</title> </head> <body> </body> <script type="text/javascript" charset="utf-8"> var data = []; for(var k = 0; k < 3; k++){ data[k] = function(){ console.log(k); }; } data[0](); data[1](); data[2](); </script> </html></code></pre> <ul> <li> <p>假设现有一篇文章， var content = "...大量文字" ，</p> <p>文章中触及到一些敏感词汇,如 ["习近平","周永康","中共","6.4"] 等内容。</p> <p>如何在文章中发现这些敏感词，并将背景设置为 <strong>红色</strong> 或者 <strong>改变字体颜色</strong> 并标示出来。</p> </li> <li> <p>JQuery 中 $fn.extend 函数的实现（实现核心代码即可）</p> </li> <li> <p>设计基于观察者模式的事件绑定机制</p> </li> </ul> <h3>2.2 第二套面试题</h3> <p style="text-align:center"><img src="https://simg.open-open.com/show/2743261bde841067aa259dc703326a24.png"></p> <ul> <li> <p>列出 display 的值，并说明他们的作用</p> </li> <li> <p>position 中，relative 和 absolute 的区别，包括使用时的注意事项和定位原点</p> </li> <li> <p>CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS 3 新增的伪类有哪些？</p> </li> <li> <p>CSS 3 有哪些新特性？</p> </li> <li> <p>new 操作符具体做了什么？</p> </li> <li> <p>请问三行 a，b，c 输出分别是什么？</p> </li> </ul> <pre> <code class="language-javascript"><!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>MR_LP --> QQ ：3206064928</title> </head> <body> </body> <script type="text/javascript" charset="utf-8"> function fun(n,o){ console.log(o) return{ fun:function(m){ return fun(m,n); } }; } var a = fun(0); a.fun(1); a.fun(2); a.fun(3); var b = fun(0).fun(1).fun(2).fun(3); var c = fun(0).fun(1); c.fun(2); c.fun(3); </script> </html></code></pre> <ul> <li>问，输出分别为什么？</li> </ul> <pre> <code class="language-javascript"><!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>MR_LP --> QQ ：3206064928</title> </head> <body> </body> <script type="text/javascript" charset="utf-8"> var a = 100; function testResult(){ var b = 2 * a; var a = 200; var c = a / 2; alert(b); alert(c); } testResult(); </script> </html></code></pre> <ul> <li>问输出结果为什么？</li> </ul> <pre> <code class="language-javascript"><!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>MR_LP --> QQ ：3206064928</title> </head> <body> </body> <script type="text/javascript" charset="utf-8"> var tt = "MR_LP --> QQ ：3206064928"; function test(){ alert(tt); var tt = "李鹏"; alert(tt); } test(); </script> </html></code></pre> <h3>2.3 第三套面试题</h3> <p style="text-align:center"><img src="https://simg.open-open.com/show/b2c48c6457e5a921a6a0b57bbc062abd.png"></p> <ul> <li> <p>用尽可能多的方法找出数组中重复出现过的元素</p> <ul> <li>例如：[1，2，4，4，3，3，1，5，3]</li> <li>输出：[1，3，4]</li> <li>作者补充：若给出多种方式，请分别给出他们的复杂度</li> </ul> </li> <li> <p>给定一些文档（docs）、词（words），找出词在文档中全部存在的所有文档</p> </li> </ul> <pre> <code class="language-javascript"><!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>李鹏 --> QQ : 3206064928</title> </head> <body> 给定一些文档（docs）、词（words）， 找出词在文档中全部存在的所有文档 </body> <script type="text/javascript" charset="utf-8"> var docs = [ { id: 1, words: ['hello',"world"] }, { id: 2, words: ['hello',"kids"] }, { id: 3, words: ['zzzz',"hello"] }, { id: 4, words: ['world',"kids"] } ]; findDocList(docs,['hello']) //文档1，文档2，文档3 findDocList(docs,['hello','world']) //文档1 </script> </html></code></pre> <h3>2.4 第四套面试题</h3> <p><img src="https://simg.open-open.com/show/6e553cb100fcfc7161181a9e473e2152.png"></p> <ul> <li> <p>本地服务器为 172.16.2.30：8080/test/index.html</p> <p>服务器地址为 172.16.3.30：8088/get/data，</p> <p>请求方式为 ‘get’，data 为 '',</p> <p>请求成功时获取数据为</p> <pre> <code class="language-javascript">{ "success" : true, "message" : "请求成功", "data" : "李鹏QQ：3206064928", "code" : 200 };</code></pre> <p>请写一段 JS 程序获取服务器地址上的数据</p> <p>PS:</p> <pre> <code class="language-javascript">如果解题需要用到 JS 库或者插件， 请用 reqiure.js 在 题前引入</code></pre> </li> </ul> <h3>2.5 第五套面试题</h3> <p><img src="https://simg.open-open.com/show/bf822c1a308247f8c8d406ca3c5ffb53.jpg"></p> <ul> <li> <p>请用算法实现，从给定的无序、不重复的数组 A 中，取出 N 个数，使其相加和 为 M。</p> <p>并给出算法的 时间/空间复杂度。</p> </li> </ul> <h3>2.6 第六套面试题</h3> <p style="text-align:center"><img src="https://simg.open-open.com/show/7759007ea59c54a33d05260fe3164118.jpg"></p> <ul> <li>请写出超链接的顺序或者你在初始样式中的链接方法。 <ul> <li>要求默认无下划线，鼠标经过有下划线</li> </ul> </li> </ul> <ul> <li> <p>当 float 和 margin 同时使用，IE 6 的双倍边距 BUG 如何解决？</p> </li> <li> <p>为什么无法定义 1px 左右高度的容器？</p> </li> <li> <p>FireFox 中标签的居中问题的解决方法？</p> </li> <li> <p>请写出 XHTML 和 CSS 如何注释？</p> </li> <li> <p>请以缩写方法写出 1px 直线灰色，上面无边框的矩形边框样式。</p> </li> </ul> <h3>2.7 第七套面试题</h3> <p style="text-align:center"><img src="https://simg.open-open.com/show/d18f6858f067d7d953b3ad62bd6c3cea.jpg"></p> <ul> <li>下面代码会输出什么？</li> </ul> <pre> <code class="language-javascript"><!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>李鹏 --> QQ : 3206064928</title> </head> <body> </body> <script type="text/javascript" charset="utf-8"> var test = (function(a){ this.a = a; return function(b){ return this.a + b; } }(function(a,b){ return a; }(1,2))); console.log(test(1)); </script> </html></code></pre> <ul> <li> <p>定义一个 log 方法，让它可以代理 console.log 的方法。</p> </li> <li> <p>简述一下 Sass 和 Less，并说明区别。</p> </li> <li> <p>不用循环，创建一个长度为 100 的数组，并且每个元素的值等于它的下标。</p> </li> <li> <p>当项目的某个模块发生问题了，你是怎么定位错误的？你常用的测试工具是什么？</p> </li> <li> <p>HTML5 中如何嵌入音频？</p> </li> <li> <p>HTML5 储存类型都有哪些，有什么区别？</p> </li> <li> <p>CSS 3 新增伪类有哪些？</p> </li> <li> <p>iOS 自动识别数字为手机号码，导致部分设置好的样式无法访问，如何解决这个问题？</p> </li> </ul> <h3>2.8 第八套面试题</h3> <p style="text-align:center"><img src="https://simg.open-open.com/show/5a702f3064b9b81f2c404f1a5151185b.jpg"></p> <ul> <li> <p>HTML 和 XHTML 的区别？</p> </li> <li> <p>行内元素有哪些？块级元素有哪些？</p> </li> <li> <p>CSS 的 盒模型</p> </li> <li> <p>写出 CSS 3 中的几个属性</p> </li> <li> <p>HTML 5 中新加了哪些标签，移除了哪些标签？</p> </li> <li> <p>定位有哪几种？</p> </li> <li> <p>写出一段代码，实现 tab 切换。</p> <ul> <li>作者补充: 请用不少于三种方式实现</li> </ul> </li> <li> <p>当点击一个页面内的元素时，alert 出这个元素的标签名</p> <ul> <li>注意兼容性问题</li> </ul> </li> <li> <p>一个整数，它的各位数字如果是左右对称的，则这个数字是对称数。那么请找出 1 至 10000 中所有的对称数。</p> </li> </ul> <h3>2.9 第九套面试题</h3> <p><img src="https://simg.open-open.com/show/7e965e202c41a584af3d1a3f5d589354.jpg"></p> <ul> <li> <p>编译语言与解释执行语言（脚本语言）有什么区别？</p> <ul> <li>请各举例两种程序语言</li> </ul> </li> <li> <p>请列举出至少五个应用层网络协议。</p> </li> <li> <p>解释 UNIX 时间戳的含义及作用，并写出获取当前 UNIX 时间戳的代码。</p> </li> <li> <p>版本控制工具的作用是什么？请列举你熟知的版本控制工具。</p> </li> <li> <p>HTTP 协议的 GET/POST 方法的区别以及适用场景分别是什么？</p> <ul> <li>作者补充：如果为 HTTPS 呢？知道 SSL 么？它们之间分别有哪些联系？</li> </ul> </li> </ul> <h3>2.10 第 10 套面试题</h3> <p style="text-align:center"><img src="https://simg.open-open.com/show/d8cbebb946fb5cb2f40d5a5a0fad6577.jpg"></p> <ul> <li> <p>写出两个开发中遇到的兼容性问题。</p> <ul> <li>作者补充：你是如何解决的？</li> </ul> </li> <li> <p>写出五个 Array 对象的方法</p> </li> <li> <p>简单介绍前端工程化</p> </li> </ul> <h3>2.11 第十一套面试题</h3> <p style="text-align:center"><img src="https://simg.open-open.com/show/49af6f936ac22133b807ad13cfd850b3.jpg"></p> <ul> <li> <p>typeof bar === "object" 判断是否为 object 类型？有什么问题？怎么避免？</p> </li> <li> <p>以下代码输出结果是什么？</p> </li> </ul> <pre> <code class="language-javascript"><!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>李鹏 --> QQ : 3206064928</title> </head> <body> </body> <script type="text/javascript" charset="utf-8"> (function(){ var a = b = 3; })(); console.log("a defined?" + (typeof a != 'undefined')); console.log("a defined?" + (typeof b != 'undefined')); </script> </html></code></pre> <ul> <li>以下代码输出结果是什么？</li> </ul> <pre> <code class="language-javascript"><!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>李鹏 --> QQ : 3206064928</title> </head> <body> </body> <script type="text/javascript" charset="utf-8"> var myObject = { foo: "bar", func: function(){ var self = this; console.log('outer func : this.foo' + this.foo); console.log('outer func : self.foo' + self.foo); (function(){ console.log('inner func : this.foo' + this.foo); console.log('inner func : self.foo' + self.foo); })(); } }; myObject.func(); </script> </html></code></pre> <ul> <li>以下代码输出结果是什么？</li> </ul> <pre> <code class="language-javascript"><!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>李鹏 --> QQ : 3206064928</title> </head> <body> </body> <script type="text/javascript" charset="utf-8"> (function(){ console.log(1); setTimeout(function(){console.log(2)},1000); setTimeout(function(){console.log(3)},0); console.log(4); })(); </script> </html></code></pre> <h3>2.12 第十二套面试题</h3> <p style="text-align:center"><img src="https://simg.open-open.com/show/3411df9c85bd1bc128e22ac55f01636a.jpg"></p> <ul> <li> <p>JS 中有几种数据类型？</p> </li> <li> <p>JS 中，哪些为 真，哪些为假？</p> </li> <li> <p>计算以下运算结果</p> </li> </ul> <pre> <code class="language-javascript"><!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>李鹏 --> QQ : 3206064928</title> </head> <body> </body> <script type="text/javascript" charset="utf-8"> // 1 alert(0/0); // 2 alert(1/0); // 3 var arr = [1,'abc',function(){alert(3333);}]; alert(arr[2]()); arr[2](); // 4 var len = 4; while(len--){ setTimeout(function(){console.log(len)},3000); console.log(len); } // 5 window.name = "Window"; var cat = { name:'Cat' }; var dog = { name:'Dog', sound:function(word){ alert(this.name + word); } }; dog.sound("is pooping"); dog.sound.call(window,"is banking"); dog.sound.call(dog,"is banking"); dog.sound.apply(cat,['李鹏']); //本文为作者 李鹏 原创，请勿私自转载，违者保留法律追究权利 //作者 QQ : 3206064928 </script> </html></code></pre> <ul> <li> <p>请写出以下正则表达式的详细规则说明</p> <ul> <li>/^(0[1-9]\d\d?)?[1-9]\d{6}\d?$/</li> <li>/^(1[89]|[2-9]\d|100)$/i</li> <li>/^[\w-]+@[a-z0-9-]+({[a-z]{2,6}}){1,2}$/i</li> </ul> </li> <li> <p>请写出打乱数组方法</p> </li> <li> <p>写出 李鹏 --> QQ : 3206064928.getElementsByClassName 的实现方法</p> </li> </ul> <h3>2.13 第十三套面试题</h3> <p style="text-align:center"><img src="https://simg.open-open.com/show/1e34ed8d92eada03927ffc16019e580a.jpg"></p> <ul> <li> <p>请描述 JSON 和 JSONP 的区别？</p> </li> <li> <p>源与目标资源位于同域之下，JQuery 中 JSONP 是异步进行的么？跨域时是异步么？</p> </li> <li> <p>目前熟练使用的前端框架有哪些？</p> <ul> <li>作者补充：不少于 5 项</li> </ul> </li> <li> <p>列举 IE 与 FF 脚本兼容性问题</p> <ul> <li>作者补充：不少于 7 种</li> </ul> </li> <li> <p>请至少写出 5 个 HTML 5 新增的标签，并说明他们的语义和应用场景。</p> </li> <li> <p>HTML5 中有哪些新的表单元素类型？</p> <ul> <li>作者补充：不少于5项，并说明使用场景</li> </ul> </li> <li> <p>CSS 3 中新增了哪些文本效果？</p> <ul> <li>作者补充：并说明内部常用属性</li> </ul> </li> <li> <p>FF 下如何实现 outerHTML?</p> </li> <li> <p>border-left-color、margin-left、-moz-viewport 改写成 JS 格式</p> <ul> <li>李鹏之吐槽：我的天，你见过 marin-left？border-color-left?</li> </ul> </li> </ul> <h3>2.14 第十四套面试题</h3> <p style="text-align:center"><img src="https://simg.open-open.com/show/02a51cb163e728f44ed0a1f87effba60.jpg"></p> <ul> <li>请写出代码输出结果。</li> </ul> <pre> <code class="language-javascript"><!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>李鹏 --> QQ : 3206064928</title> </head> <body> </body> <script type="text/javascript" charset="utf-8"> for(var i = 0,j = 0; i < 10, j < 6; i++, j++){ value = i + j; } alert(value); </script> </html></code></pre> <ul> <li>请写出代码输出结果。</li> </ul> <pre> <code class="language-javascript"><!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>李鹏 --> QQ : 3206064928</title> </head> <body> </body> <script type="text/javascript" charset="utf-8"> if(!("a" in window)){ var a = 1; } alert(a); </script> </html></code></pre> <ul> <li>请写出代码输出结果。</li> </ul> <pre> <code class="language-javascript"><!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>李鹏 --> QQ : 3206064928</title> </head> <body> </body> <script type="text/javascript" charset="utf-8"> var handle = function(a){ var b = 3; var tmp = function(a){ b = a + b; return tmp; } tmp.toString() = function(){ return b; } return tmp; } alert(handle(4)(5)(6)); </script> </html></code></pre> <h3>2.15 其他一些面试题的集合</h3> <p>电脑马上要没电了，赶紧把剩下的一起发了，省的大家看的不爽。</p> <p>如果觉得有用，请给作者点个赞，并分享一下，毕竟现在在找工作的小伙伴还是很多的。</p> <p>作者姓名：李鹏</p> <p>作者QQ : 3206064928</p> <p>作者微信：lipeng_0524</p> <p>此文感言：码字真辛苦，且看且珍惜</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/afec00b5053c893681d1a0b98ecca0e8.jpg"></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/c0dbcde5340848eab9f5595d0b5a6b86.jpg"></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/227192aaf220b859fecea51480611a1d.jpg"></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/5ffdd46d755f270e3e984a200872ce3f.jpg"></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/4af2bdff4dbe69588579e85d4e959ab8.jpg"></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/7ac7f854b95da9c5d011e073c2078ac1.jpg"></p> <p><img src="https://simg.open-open.com/show/6cba045e1b7580aea3a81307a24008bb.jpg"></p> <h2>3. 后记</h2> <p>我的天，终于写完了，前前后后得用了三天时间才出来这一篇文章。</p> <p>真是累死喵了。</p> <p>但是写完，还是很有成就感的。</p> <p>其实很多人对写博客的人表示很不理解，为什么要去写博客？自己的时间都不够用，何必浪费心血？你自己写一篇文章可能用两三天，别人过来偷一篇文章，前后算上也就十几分钟。</p> <p>其实自己也想过这些问题，就像之前写的文章，阅读量近7W，别人过来问问，能转载么？我说可以，回头文章就变成别人的，而且经常冠以什么，《知名 XXX 告诉你，应该XXXX》什么的，结果就没有自己什么事情了。</p> <p>那时候，突然觉得自己的努力真的是没什么作用。</p> <p>经过那么多年的“拿来主义”，很多时候你会发现，你写的甚至没有人家抄的快。</p> <p>哎，吐槽一波负能量。</p> <p>但是吐槽归吐槽，文章还是要写的，不为别的，只希望认识我的，喜欢看我文章的小伙伴们，在未来某个时间，遇到某个问题，能想起来，唉？这个问题之前鹏哥写过。我赶紧去看看。</p> <p>总归一句话，我写文章不为别的，只是做个分享，这是爱好，没有任何利益纠葛。</p> <p>今天的后记应该是有史以来最长的后记了，最后再送大家一句话。</p> <p>往事不足够，余生不强求。</p> <p>希望大家在这个金三银四的跳槽季，能够找到一份更适合自己的工作。</p> <p> </p> <p> </p> <p>来自：http://www.jianshu.com/p/8b68f4df749e</p> <p> </p> 本文由用户 wencheng 自行上传分享，仅供网友学习交流。所有权归原作者，若您的权利被侵害，请联系管理员。
转载本站原创文章，请注明出处，并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台，欢迎各类分享！