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

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

2018.03.28 08:52 3372浏览

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

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
提交
取消