<cite id="5fnx9"></cite>

          <cite id="5fnx9"><em id="5fnx9"></em></cite>

          <b id="5fnx9"><em id="5fnx9"><mark id="5fnx9"></mark></em></b>

          为了账号安全,请及时绑定邮箱和手机立即绑定

          自己写的面试题,自己想的答案

          2018.03.28 08:52 3081浏览

          大家都知道‘不忘初心,方得始终’,但多少人知道‘初心易得,始终难守’。时代在变化,技术在发展,基础没变。学习新技术的时候,不应把基础落下。

          1.前言

          因为机缘巧合,让当了无数次面试者的我,当上了面试官,也和几个面试者交流过。既然要应对面试者,我就当然要准备面试题了,好让我大概知道面试者是什么水平。这个时候,也该详解下,自己的写的那些题目。因为题目是我自己写的,并不是网上摘的,所以知识点比较基础,也不全面。如果大家对面试题有什么建议,欢迎指点。

          2.考点-面向对象

          需求:定义‘我吃火锅

          面向过程的思想是:动作(我,吃火锅)

          代码实现方面:

              //面向过程
              let eat=function(who,someThing){
                  console.log(`${who}吃${someThing}`);
              }
              eat('我','火锅');//我吃火锅

          使用面向对象的方式改写一下这个实例。

          这道题,只希望有一个面向对象的意思在这里就行了,我期待的答案是这样的。

              let person={
                  name:'守候',
                  eat:function(someThing){
                      console.log(`${this.name}吃${someThing}`);
                  }
              }
              person.eat('火锅');

          更好的方式看下面这篇文章:JavaScript:面试频繁出现的几个易错点。这里不展开讲。

          3.考点-预解析

          根据以下代码,写出结果

          这道题我印象很深刻,因为是我在一年多以前,在Q群看到有人说直自己各种精通的时候,我就出这道题来提问,一抓一个准,至今那些各种精通的人,没一个回答出来的。即使是面试题,也有人掉坑。

          之前发布一篇文章的时候,有提及过这个面试题,也被人骂过,大概的意思是:现在都什么年代了,ES都不知道更新多少版本了,谁还这么写代码?看到这个我并没有回应,也没打算和谁对撕。但是我脑子里想到的第一件事就是:以前,新闻有条微博说70%网友赞成数学退出高考,有人谈定回答:数学就是用来淘汰这70%人的。在这里我想说,虽然开发上这样写代码肯定会被批斗,但是面试题,考的不只是开发上遇到的问题,也有考一些基础知识。这道题就是其中之一。而且,现在我也觉得还有必要知道这个知识,还没到全民写 ES6 的时代,抛弃 ES5 的时代。

              alert(a)
              a();
              var a=3;
              function a(){
                  alert(10)
              }   
              alert(a)
              a=6;
              a();  
          
              //------------分割线------------------
          
              alert(a)
              a();
              var a=3;
              var a=function(){
                  alert(10)
              }   
              alert(a)
              a=6;
              a(); 

          这个之前写文章有写过,现在赋值粘贴下。
          考点其实就两个,第一变量声明提前,第二函数声明优先于变量声明!
          下面我简单分析一下,
          第一部分运行结果:
          1.函数声明优先于变量声明,所以,刚开始,a就是function a(){alert(10)} ,就会看到这个函数。
          2.a(),执行函数,就是出现alert(10)
          3.执行了var a=3; 所以alert(a)就是显示3
          4.由于a不是一个函数了,所以往下在执行到a()的时候, 报错。
          第二部分运行结果:
          1.underfind
          2.报错
          在之前说过,预解析是把带有varfunction关键字的事先声明,但不会赋值。所以一开始是underfind,然后报错是因为执行到a()的时候,a并不是一个函数。

              //函数表达式,和变量声明同等
              var a=function(){
                  alert(10)
              } 
              //函数声明,优于变量声明    
              function a(){
                  alert(10)
              }
          4.考点-事件委托

          一个简单的需求,比如想给ul下面的li加上点击事件,点击哪个li,就显示那个li的innerHTML。这个貌似很简单!代码如下!

              <!DOCTYPE html>
              <html>
                  <head>
                      <meta charset="UTF-8">
                      <title></title>
                  </head>
                  <body>
                      <ul id="ul-test">
                          <li>0</li>
                          <li>1</li>
                          <li>2</li>
                          <li>3</li>
                          <li>4</li>
                          <li>5</li>
                          <li>6</li>
                          <li>7</li>
                          <li>8</li>
                          <li>9</li>
                      </ul>
                  </body>
                  <script type="text/javascript">
                      var oUl=document.getElementById("ul-test");
                      var oLi=oUl.getElementsByTagName("li");
                      for(var i=0,len=oLi.length;i<len;i++){
                          oLi[i].addEventListener("click",function(){
                              alert(this.innerHTML)
                          })
                      }
                  </script>
              </html>

          问题在于:
          1.for循环,循环的是li,10个li就循环10次,绑定10次事件,100个就循环了100次,绑定100次事件!
          2.如果li不是本来就在页面上的,是未来元素,是页面加载了,再通过js动态加载进来了,上面的写法是无效的,点击li是没有反应的!

          应该怎么解决以上问题?

          在道题的考点就是事件委托,就是把事件绑在ul上面,之后的li就可以随便添加。代码如下

              var oUl=document.getElementById("ul-test");
              oUl.addEventListener("click",function(ev){
                  var ev=ev||window.event;
                  var target=ev.target||ev.srcElement;
                  //如果点击的最底层是li元素
                  if(target.tagName.toLowerCase()==='li'){
                      alert(target.innerHTML)
                  }
              }) 

          但是有些面试者就是从vue的角度回答这个问题--利用v-for进行绑定。虽然我们公司的项目是使用vue,这样说也没错,但是这道题我没提及到vue,说vue的,反而就是一个扣分项了。

          5.考点-DOM操作

          比如有一个需求,往ul里面添加10个li,如下代码

              <!DOCTYPE html>
              <html>
                  <head>
                      <meta charset="UTF-8">
                      <title></title>
                  </head>
                  <body>
                      <ul id="ul-test">
          
                      </ul>
                  </body>
                  <script type="text/javascript">
                      var oUl=document.getElementById("ul-test");
                      for(var i=0;i<10;i++){
                          var oLi=document.createElement('li');
                          oLi.innerHTML=i;
                          oUl.appendChild(oLi);
                      }       
                  </script>
              </html>

          问题:这里相当于操作了10次DOM,有什么方案,减少DOM的操作次数?可写代码简单说明。

          这道题,有几个人还是从vue的角度来解决问题(v-for,data),虽然这样不能说错,但是我题目没提及vue的任何东西。考点就是利用innerHTML或者文档碎片的形式。

          代码如下

          innerHTML

              var oUl=document.getElementById("ul-test");
              //定义临时变量
              var _html='';
              for(var i=0;i<10;i++){
                  //保存临时变量
                  _html+='<li>'+i+'</li>'
              }
              //添加元素
              oUl.innerHTML=_html;

          文档碎片-createDocumentFragment

              var oUl=document.getElementById("ul-test"),_frag = document.createDocumentFragment();
              for(var i=0;i<10;i++){
                  var oLi=document.createElement('li');
                  oLi.innerHTML=i;
                  //把元素添加进文档碎片
                  _frag.appendChild(oLi);
              }
              //把文档碎片添加进元素
              oUl.appendChild(_frag);
          6.考点-对象深拷贝

          写出一个函数,实现对,对象的深拷贝

          要求实现一个函数clone。

              let obj={
                  name:'小明',
                  age:24
              }
              let obj1=clone(obj);

          修改obj1,不会影响到obj的值。

          这道题,在obj上面,我故意只写一层,对象里面没有嵌套数组或对象,就是想看下面试者能不能往深处想一下。结果面试者都踩坑了。但是可以理解,毕竟大家都是针对题目而论。

          基本上回答都是类似下面这样

              function clone(object){
                  let _obj={}
                  for(let key in object){
                      _obj[key]=object[key];
                  }
                  return _obj;
              }
              let obj1=clone(obj);
          
              //-------------------或者-------------
              function clone(obj){
                  let _obj=Object.assign({},object);
                  return _obj;
              }
              let obj1=clone(obj);

          这个方案,目的是达到了,但是如果obj里面的属性,嵌套着对象或者数组,这个就有问题了。所以理想的解决方案应该是这个。

              function clone(object){
                  let _obj=JSON.parse(JSON.stringify(obj))
              } 

          这种方案,如果需要属性值是函数或者是null,undefined,就会被过滤掉。保险的做法是下面这样。原理也很简单,就是逐个遍历,如果检测到属性值是时引用类型就用当前属性进行遍历。

          function clone(obj){    
            if(!obj&& typeof obj!== 'object'){      
              return;    
            }
            var newObj=obj.constructor===Object?{}:[];    
            for(var key in obj){              
              newObj[key] =(obj[key]&&typeof obj[key]==='object')?clone(obj[key]):obj[key];       
            }    
            return newObj; 
          }
          7.其它考点

          其余几道题都是比较笼统的题目,没有唯一的解决方案,这里就不统一回答了!

          1.如果设计中使用了非标准的字体,你该如何去实现?

          图片,字体图标代替,如果是比较小的英文字体可以使用css3的@font-face。

          2.在开发项目上,知道那些优化的方式,提升性能,减少页面加载时间,代码质量,代码可读性等方面

          性能优化-压缩代码,懒加载,预加载,合并请求,小图片转换base64编码,资源按需加载等。

          代码质量优化-命名有意义,适当的注释,避免巨大函数,避免对象强耦合,代码逻辑清晰等。

          3.列举Es6,常用的一些新特性。

          参考资料如下:

          ECMAScript 6 入门

          30分钟掌握ES6/ES2015核心内容(上)

          30分钟掌握ES6/ES2015核心内容(下)

          实例感受-es6的常用语法和优越性

          ES6 Promise 用法讲解

          4.Div+css排版的时候,从页面渲染和代码可读性的角度,应该注意些什么?

          标签语义化,class和id命名有意义并且命名统一规范,css避免深嵌套(3级就得注意),避免@import,!important,和*通配符,避免行内样式,在head引入css等。

          参考:

          21条CSS高级技巧

          css写作建议和性能优化小结

          5.说下自己对模块化开发的理解,以及模块化开发的好处。

          提高开发效率,有利团队协同开发,

          避免全局变量污染,命名冲突,

          方便代码的复用维护等。

          8.小结

          面试题就是这10道,我自己的解决方案也说完了。虽热我们公司的技术栈用的主要是vue,webpack这一些,我面试交流的时候,也会问相关的问题,但是我在面试题里面我不出关于vue,webpack这些题目,就问文章这些题目,就是想知道面试者的基础如何(因为现在的行情,很多人都是注重学习热门的框架,库,工具等,却把基础落下了)。基础好的话,框架不难上手,但是基础不牢,就熟悉两三的框架和一些构建工具,以后技术转型可能会有阻力。现在前端的发展很快,技术很杂,但是基础一直没变。建议大家在学习新技术的同时,不要忘记巩固基础。

          最后,如果大家对面试题有什么解法建议或者建议出什么题型,欢迎指点。

          点击查看更多内容

          本文原创发布于慕课网 ,转载请注明出处,谢谢合作

          16人点赞

          若觉得本文不错,就分享一下吧!

          评论

          相关文章推荐

          正在加载中
          意见反馈 帮助中心 APP下载
          官方微信

          举报

          0/150
          提交
          取消
          香港王中王论坛资枓|香港马会生肖四不像必中一肖|2019年马会全年资料|65838com老奇人玄机资料|今晚开码出什么生肖|香港六六彩开奖结果|0306香港神童|个人心水四肖资料|33248老奇人二尾|一句话解特马诗|34113com最快开奖|449999玄机生活幽默|2019年内部公开资料|香港正板资枓大全|彩库宝典2019|2019年全年资料内部公开|399012com好运来高手|