前端开发面试小结

坚强是说给别人听的谎言 提交于 2020-03-20 18:23:06

场景:

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

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!