前端开发面试小结

场景：

　　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 有什么区别？