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

摘要：因为题目是我自己写的，并不是网上摘的，所以知识点比较基础，也不全面。即使是面试题，也有人掉坑。小结面试题就是这道，我自己的解决方案也说完了。

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

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

需求：定义‘我吃火锅’

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

代码实现方面：

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

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

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

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

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

根据以下代码，写出结果

这道题我印象很深刻，因为是我在一年多以前，在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并不是一个函数。

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

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

    
        
        
    
    
        

            
0
            
1
            
2
            
3
            
4
            
5
            
6
            
7
            
8
            
9
        
    
    

问题在于：
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的，反而就是一个扣分项了。

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

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

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

代码如下

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

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);

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

要求实现一个函数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; 
}

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

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

性能优化-压缩代码，懒加载，预加载，合并请求，小图片转换base64编码，资源按需加载等。
代码质量优化-命名有意义，适当的注释，避免巨大函数，避免对象强耦合，代码逻辑清晰等。

参考资料如下：
ECMAScript 6 入门
30分钟掌握ES6/ES2015核心内容（上）
30分钟掌握ES6/ES2015核心内容（下）
实例感受-es6的常用语法和优越性
ES6 Promise 用法讲解

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

参考：
21条CSS高级技巧
css写作建议和性能优化小结

提高开发效率，有利团队协同开发，
避免全局变量污染，命名冲突，
方便代码的复用维护等。

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

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

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