本身写的面试题，本身想的答案

时间 2019-11-05

原文原文链接

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

1.前言

由于机缘巧合，让当了无数次面试者的我，当上了面试官，也和几个面试者交流过。既然要应对面试者，我就固然要准备面试题了，好让我大概知道面试者是什么水平。这个时候，也该详解下，本身的写的那些题目。由于题目是我本身写的，并非网上摘的，因此知识点比较基础，也不全面。若是你们对面试题有什么建议，欢迎指点。javascript

2.考点-面向对象

需求：定义‘我吃火锅’css

面向过程的思想是：动做(我,吃火锅)html

代码实现方面：前端

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

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

这道题，只但愿有一个面向对象的意思在这里就好了，我期待的答案是这样的。java

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

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

3.考点-预解析

根据如下代码，写出结果css3

这道题我印象很深入，由于是我在一年多之前，在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.报错
在以前说过，预解析是把带有var和function关键字的事先声明，但不会赋值。因此一开始是underfind，而后报错是由于执行到a()的时候，a并非一个函数。es6

//函数表达式，和变量声明同等
var a=function(){
    alert(10)
} 
//函数声明，优于变量声明    
function a(){
    alert(10)
}

4.考点-事件委托

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

<!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))
}

这种方案，若是须要属性值是函数或者是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这些题目，就问文章这些题目，就是想知道面试者的基础如何（由于如今的行情，不少人都是注重学习热门的框架，库，工具等，却把基础落下了）。基础好的话，框架不难上手，可是基础不牢，就熟悉两三的框架和一些构建工具，之后技术转型可能会有阻力。如今前端的发展很快，技术很杂，可是基础一直没变。建议你们在学习新技术的同时，不要忘记巩固基础。

最后，若是你们对面试题有什么解法建议或者建议出什么题型，欢迎指点。

-------------------------华丽的分割线--------------------
想了解更多，关注关注个人微信公众号：守候书阁