前端开发面试小结
场景：
6月1号到6月5号这一周，面试了差不多10家公司，职位都是"前端开发"。
下面简单介绍面试中遇到的一些题。
题目：
HTML & CSS 相关：
-
- 如何在 body 中水平垂直居中一个 div (宽100px，高100px)？
- inline-block 造成的水平间隙该如何解决？列出你能想到的所有办法。
- 如何用 css 创建一个三角形？写出 css 代码并说明它的实现原理。
- position 有哪几种？它们的定位原点分别是什么？是否脱离文档流？
- css 中有哪几种选择器？它们的优先级是什么？
- css3 中添加了哪些新的属性？它们分别是用来做什么的？它们的兼容性如何？
- box-sizing 的作用是什么？列出它可能的几个值。
JavaScript 相关：
- 函数声明的两种方式 function func(){} 和 var func = function(){} 有什么区别？
- constructor、prototype、__proto__ 有什么区别？
- null、undefined、undeclared 的区别，如何检测它们？
- 如何 copy 一个 Array？如何检测一个 Array？
- 如何用原生 JS 创建一个 div 并添加到 body 中？
- 如何扩展 JavaScript 的内置对象，这样做有什么问题？
- 列出 addEventListener 的几个参数，第三个参数的作用是什么？
- 写一个通用的正则表达式，并从变量 text 中匹配出所有的数字。
- 实现 parseInteger(x) 函数，parseInteger(x) = parseInt(x, 10)。
- JS 如何实现面向对象和继承？请写一个简单的实例代码。
- 用原生 JS 实现函数 insertBefore(element, sourceNode)，把一个元素（节点）插入一个节点之前。
- 一个数组 var array = [1, [2, [3, 4], [5, 6]], 7, 8]，请写一个方法 flatArray()，得到数组 [1, 2, 3, 4, 5, 6, 7, 8]。（答案见前一篇随笔）
- 说出以下代码的执行结果并说明原因，如何修改代码可以得到预想的结果？
-
<div id="test"> <div>Item1</div> <div>Item2</div> <div>Item3</div> <div>Item4</div> </div> <script> function test() { var els = document.getElementById('test').getElementsByTagName('div'); for(var i = 0, len = els.length; i < len; i++) { var item = els[i]; item.onclick = function() { alert(item.innerHTML); return false; } } } test(); </script> - 以下代码执行后，console 中会打印出什么？
-
var scope = 'global'; function log() { var args = Array.prototype.join.call(arguments, ', '); console.log(this.scope + ':' + args); } var dog = { scope: 'dog', yelp: function() { var scope = 'dog.yelp'; log('wow'); } } dog.yelp(); dog.yelp.call(dog); log.call(dog, 'created');
Ajax相关：
-
- 介绍 ajax 请求跨域的解决方法
- 简单说明 ajax 的实现原理
- get 请求可能因为数据缓存而导致新数据无法加载，如何解决？ post 请求是否有这样的问题？
- 请用 promise 改写以下代码
-
$(function(){ $.get('/get/user/info', function(result){ $.get('/get/city?city=' + result.user.city, function(city){ // show city info }) }) })
其他：
-
- Angularjs 是什么？有什么优缺点？它的双向数据绑定的实现原理是什么？
- Angularjs 和 jQuery 有什么区别？和 React.js、Backbone.js 有什么区别？
- grunt 和 gulp 是用来做什么的？它们有什么异同？
- CommonJS、CMD、AMD 是什么？为何要用它们？
- 请说出 3-4 个你遇到的浏览器兼容性问题并说明是如何解决的。
- Java中，abstract 类和接口有什么异同？final 关键字的作用是什么？
- 数据库，left join 和 join 有什么区别？
