前端面试题第三套

前端面试题第三套

1.关于angularjs说法，错误的是 B

A.前端MVC，极大降低前端开发的耦合B.极大丰富了DOM操作C.实现了数据双向绑定D.实现了依赖注入

2.如何把7.25四舍五入为最接近的整数 D

A.round(7.25)B.Rnd(7.25)C.Math.rnd(7.25)D.Math.round(7.25)

3.下面关于CSS布局的描述，不正确的是 D

A.块级元素实际占用的宽度与它的width属性有关B.块级元素实际占用的宽度与它的border属性有关C.块级元素实际占用的宽度与它的padding属性有关D.块级元素实际占用的宽度与它的background属性有关

4.你想通过XMLHttpRequest更新以下元素，哪个是正确的做法 B

<div id = “statusCode”></div>A. var myDiv = document.getElementById ("statusCode");  myDiv.innerHTML = req.statusCode;B. var myDiv = document.getElementById ("statusCode");  myDiv.innerHTML = req.status;C. var myDiv = document.getElementById ("statusCode"); myDiv.setStatus (req.statusCode);D. var myDiv = document.getElementById ("statusCode"); myDiv.status = req.status;

5.在jquery中想要找到所有元素的同辈元素，下面哪一个是可以实现 C

A.eq(index)B.find(expr)C.siblings([expr])D.next()

6.如何规避JavaScript多人开发函数重名问题 D

A.可以通过命名规范，比如根据不同的开发人员实现的功能，在函数名加前缀B.每个开发人员都把自己的函数封装到类中，然后调用的时候即使函数名相同，但是因为是要类.函数名来调用，所以也减少了重复的可能性C.A、B都不正确D.A、B都正确

7.下面有关JavaScript内部对象的描述正确的有（多选） ABCD

A.History对象包含用户（在浏览器窗口中）访问过的URLB.Location对象包含有关当前URL的信息C.Window对象表示浏览器中打开的 D.Navigator对象包含有关浏览器的信息

8.使用CSS的flexbox布局，不能实现以下哪一个效果：D

A.三列布局，随容器宽度等宽弹性伸缩B.多列布局，每列的高度按内容最高的一列等高C.三列布局，左列宽度像素数确定中、右列随容器宽度等宽弹性伸缩D.多个宽高不等的元素，实现无缝瀑布流布局

9.下面有关html Doctype的描述，说法错误的是 D

A.它的责任就是告诉浏览器文档使用哪种html或者xhtml规范B.不同文档模式主要影响CSS内容的呈现，尤其是浏览器对盒模型的解析C.不同浏览器在混杂模式下的行为差异非常大，如果不使用某些hack技术，跨浏览器的行为根本就没有一致性可言。D.如果在文档开始处没有发现文档类型声明，则所有浏览器都会默认开启严格模式

10.下列哪个操作是W3C标准定义的阻止事件向父容器传递： C

A. e.preventDefault()B. e.cancelBubble=trueC. e.stopPropagation()D. e.stopImmediatePropagation()

11.以下js代码输出为？

var length = 10function fn(){alert(this.length)}var obj = {length: 5,method: function(fn) {    fn() // ?    arguments[0]() // ?}}答案: 这里的坑主要是arguments，我们知道取对象属于除了点操作符还可以用中括号，这里fn的scope是arguments，即fn内的this===arguments，调用时仅传了一个参数fn，因此length为1。（5）obj.method(fn)

12.以下js代码输出为？

~function() {alert(typeof next) // ?~function next() {    alert(typeof next) // ?}()}() 答案: 外层匿名函数自执行，打印next，接着内层具名函数自执行。会发现具名的next仅在其自身函数体内可访问，即输出为function。外面是不可见的，typeof就为undefined了。（注：此题IE6/7/8中输出为function function， 标准浏览器为undefined function）（5）~function(){} 意思是直接运行   而没有进行声明。外部不可访问，内部可访问。加上运算符，因为解析的缘故 ,function会即时触发，以下效果都一样，就是一个语言特征，了解一下就可以了。JavaScript code?12345   +function(){alert(1)}()-function(){alert(1)}()~function(){alert(1)}()^function(){alert(1)}()%function(){alert(1)}()

13.以下js代码输出为？

a = 3a.prop = 4alert(a + a.prop)// ?答案: 变量a为数字3，给其添加prop属性，值为4（奇怪吧在JS中这是允许的，且不会有语法错误）。然后alert出a+a.prop的结果。结果是NaN。a.prop为undefined，3+undefined为NAN.

14.以下js代码输出为？

var a = 1function func() {a = b = 2}func()alert(a)alert(b) // ?答案: JS中不用var声明的变量默认是全局变量，而这里的连等使的情况更加隐蔽。这里的b是全局的，因此func外可以访问。

15.以下js代码输出为？

var uname = 'jack'function change() {alert(uname) // ?var uname = 'lily'alert(uname)}change()答案: 这里容易犯迷糊的是第一个alert，如果认为函数change外已经声明赋值了，此时应该是jack，实际函数内又var了一次（虽然var在其后），预解析时仍然会将其置undefined。这也是为什么书里都建议变量声明都放在代码块的最前面。

16.如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？

回答：涉及到人手、分工、同步；先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；页面进行标注（例如 页面 模块 开始和结束）；CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）JS 分文件夹存放 命民以该JS 功能为准英文翻译；图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理

17.你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？

回答：是策划 UI设计 需要转换成程序可实施中的必须的中间环节，这个环节直接关系到页面的正确高效稳定还原 策划和UI 设计的效果，同时为程序套接做好程序表现基础载体。这个工作的前景，只能是深造技术流的，模块化管理，新的技术不断更新，对于向后兼容思维的逐步放弃，比如真的淘汰掉IE6后，向前的空间还是有的。前端开发工程师的前景是非常不错的。现在各大IT企业都在招聘这方面的人才。 WEB2.0的普及会更加促进本行业本工种的繁荣。

18.ajax技术利用了什么协议？简述ajax的工作机制。

答案: HTTP协议     XMLHttpRequest()运行原理：1. 创建请求对象  2. 设置回调函数onreadystatechange          3. 初始化open()  4. 发送请求 send()

19.用js实现随即选取10–100之间的10个数字，存入一个数组，并排序。

答案: var iArray = [];funtion getRandom(istart, iend) {var iChoice = istart - iend + 1;return Math.floor(Math.random() * iChoice + istart);}for (var i = 0; i < 10; i++) {iArray.push(getRandom(10, 100));}iArray.sort();console.log(iArray);

20.把两个数组合并，并删除第二个元素。

答案: var array1 = ['a', 'b', 'c'];var bArray = ['d', 'e', 'f'];var cArray = array1.concat(bArray);cArray.splice(1, 1);

21.请用CSS实现如下图的样式，相关尺寸如图示，其中dom结构为：

<div id = ”demo”></div>答案: #demo {width: 100px;height: 100px;background-color: #fff;position: relative;border: 2px solid #333;}#demo:after, #demo:before {border: solid transparent;content: ' ';height: 0;left: 100%;position: absolute;width: 0;}#demo:after {border-width: 10px;border-left-color: #fff;top: 20px;}#demo:before {border-width: 12px;border-left-color: #000;top: 18px;}解释：刚看到这个题目觉得无从下手，感觉一般这种不都是一个背景图片吗，怎么还能用css写的?? 后来看到网友的答案，试着运行了一下发现真的和图上的一模一样，最伤心的是看到答案竟然还看不懂。。觉得自己还是好水，仔细琢磨了一下，现将心得整理一下：实现图示的效果涉及到的知识主要有两点：一个是before、after伪元素，一个是border1、before 和 after 都是css中的伪元素，他们俩用法都差不多，通过给定一个属性content给元素添加新的内容，不同的是before用来在元素前插入新内容，after用来在元素后面插入新内容。比如有一个p元素：水<p>水</p>如果给这个p元素设置一个before：p:before{  content:"上海自来";}    这个p就变成了：上海自来水，content属性的值就添加到了p元素内容的前面。相反的，如果是用after：p:after{  content:"来自海上";}这个p就会变成：水来自海上。简单的before、after使用就是这样，一开始看的时候觉得好简单，不就是插入个内容吗，但实际上插内容不算什么，最重要的是它能设！置！样！式！一旦给它设置各种各样的样式之后这个伪元素就厉害了，比如题目中的尖角，题目只给了一个div我们，但是很明显div只能弄出一个左边的带边框正方形，右边的尖角怎么来的呢，那就可以靠这个伪元素了。思路很简单，先把正方形画出来，然后通过before或者after变出一个尖角出来，放到正方形右上角去。div如下：#demo{  width:100px;  height:100px;  background-color:#fff;  border: 2px #000 solid;}好，这个时候正方形已经出来了，但是三角形怎么画出来呢，这就要用到border了2、以前使用border都是border：1px #000 solid，顶多换换颜色和边框值，没想到画三角形也能靠它……以前没发现的原因在于使用border的时候总是1px、2px的，太细了，当把边框变成20px的时候就有意思了，下面是一个边长10px的正方形设置其边框长也为10px：我们知道可以通过设置border-left等等手动设置四个边框为不同颜色，分别设置之后：马上看出靠谱，如果把这个div的宽度减小到0之后岂不就是四个三角形了，动手实验：果然是，那把上下右的颜色变透明之后就能得到一个三角形拉，在这里要注意的是把其他三个边透明是能得到一个三角形的，但是如果只设置左边框而不设置其他三个边框是得不到的，自己动手试下便知，因为如果只设置左边框，而这个div的高度又为0，那这个左边框是不会向上下两端扩展的，只有当上或下也有边框时才会呈现出一个三    角形，所以我们可以把所有边框透明掉，然后把左边框显示即可。比如下面这样：diiv{  width:0px;  height:0px;  border: 20px transparent solid;  border-left-color: #000;}就能得到这个效果了： 那把三角形放到正方形右侧就很简单了，有一点是那个正方形是缺了一段的，我们可以让三角形颜色为白色覆盖掉正方形的边框，另外再用一个黑色的比白色三角形大一点的三角形放在白三角形下面，这样就只漏出了三角形的两条边，所以这里同时用到了before和after。        因为before和after插入的三角形是放在指定的位置的，所以它们的position都设置为绝对定位，那么div就要设置成相对定位了：#demo{  width:100px;  height:100px;  border: 2px #000 solid;  background-color:#fff;  position:relative;}首先是黑色的三角形：#demo:before{  width:0px;  height:0px;  border: 10px transparent solid;  border-left-color: #000;  position:absolute;  top:20px;  left:100%;  content:""}注意content虽然没有值，但是必须得加上。现在效果如下：然后是比黑色三角形小一点点的白色三角形：#demo:after{  width:0px;  height:0px;  border: 8px transparent solid;  border-left-color: #fff;  position:absolute;  top:22px;  left:100%;  content:""}    注意白色三角形比褐色三角形要小，所以边框长度就小2px，且top也大2px，效果如下：由此这个题目就做完拉，当然相同的样式可以整理下，最终样式如下：#demo{  width:100px;  height:100px;  border: 2px #000 solid;  background-color:#fff;  position:relative;}#demo:before, #demo:after{  width:0px;  height:0px;  border:transparent solid;  position:absolute;  left:100%;  content:""}#demo:before{border-width:10px;    border-left-color: #000;    top:20px;}#demo:after{  border-width:8px;  border-left-color: #fff;  top:22px;}

22.你如何看待加班？

答案: 用人单位在招聘员工的时候，虽然该职位不一定会经常加班，但用人单位还是希望求职者能够配合公司的需要，在必要加班的情况下，能够做出一定的牺牲。因此，“你如何看待加班”这个面试问题经常会被问起。

回答一：
如果真是非完成不可的工作，那我就会加班。我认为，休假日也不一定就该不闻不问地休息。连休假日都需要加班的话，说明所从事的工作一定是相当充实的。只要是有意义的工作，与其昏昏然地享受休假，不如高高兴兴地来加班。
点评：
不只局限于是否能在加班的问题，而且更进一步从加班谈到工作的充实感，其中独具匠心。虽然全世界都在指责日本的勤劳过度现象，在这里却应该对此加以褒扬。
启示：
从这个问题的回答中可以看出应试者的敬业精神及对公司的忠诚度如何。因此，不必多费唇舌，只要理所当然地说“可以”就行了。
回答二：
加班但以后可以得到调休，所以，我觉得不会有什么问题。个人的时间固然重要，但由于工作需要，当然也会出现不得不在休假日上班的情况。我觉得只要是自己分内的工作，就算加些班也不会有人抱怨的。
点评：
这番话在不至于变成赞成勤劳过度方面掌握着巧妙的平衡。但是，为了自然而然地暗示这个意思而采取第三者的立场的话，就会妨碍意思的表达。如果不能堂堂正正地发表自己的意见，就会被认为是无论做什么事情都缺乏自信的表现。
总之，在回答“你如何看待加班”这个面试问题时，自然是要说“可以加班”了。不过有一点要当心，不要说得过度了，否则弄巧成拙，以后真的来上班的时候却又做不到，就反为不美了。