大家都知道‘不忘初心，方得始终’，但多少人知道‘初心易得，始终难守’。时代在变化，技术在发展，基础没变。学习新技术的时候，不应把基础落下。
1.前言
因为机缘巧合，让当了无数次面试者的我，当上了面试官，也和几个面试者交流过。既然要应对面试者，我就当然要准备面试题了，好让我大概知道面试者是什么水平。这个时候，也该详解下，自己的写的那些题目。因为题目是我自己写的，并不是网上摘的，所以知识点比较基础，也不全面。如果大家对面试题有什么建议，欢迎指点。
2.考点-面向对象
需求：定义‘我吃火锅’
面向过程的思想是：动作(我,吃火锅)
代码实现方面：
//面向过程leteat=function(who,someThing){console.log(`${who}吃${someThing}`);}eat('我','火锅');//我吃火锅
使用面向对象的方式改写一下这个实例。
这道题，只希望有一个面向对象的意思在这里就行了，我期待的答案是这样的。
letperson={name:'守候',eat:function(someThing){console.log(`${this.name}吃${someThing}`); }}person.eat('火锅');
更好的方式看下面这篇文章：JavaScript：面试频繁出现的几个易错点。这里不展开讲。
3.考点-预解析
根据以下代码，写出结果
这道题我印象很深刻，因为是我在一年多以前，在Q群看到有人说直自己各种精通的时候，我就出这道题来提问，一抓一个准，至今那些各种精通的人，没一个回答出来的。即使是面试题，也有人掉坑。
之前发布一篇文章的时候，有提及过这个面试题，也被人骂过，大概的意思是：现在都什么年代了，ES都不知道更新多少版本了，谁还这么写代码？看到这个我并没有回应，也没打算和谁对撕。但是我脑子里想到的第一件事就是：以前，新闻有条微博说70%网友赞成数学退出高考，有人谈定回答：数学就是用来淘汰这70%人的。在这里我想说，虽然开发上这样写代码肯定会被批斗，但是面试题，考的不只是开发上遇到的问题，也有考一些基础知识。这道题就是其中之一。而且，现在我也觉得还有必要知道这个知识，还没到全民写 ES6 的时代，抛弃 ES5 的时代。
alert(a)a();vara=3;functiona(){
alert(10)
}alert(a)a=6;a();//------------分割线------------------alert(a)a();vara=3;vara=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并不是一个函数。
//函数表达式，和变量声明同等vara=function(){ alert(10)}//函数声明，优于变量声明 functiona(){ alert(10)}
4.考点-事件委托
一个简单的需求，比如想给ul下面的li加上点击事件，点击哪个li，就显示那个li的innerHTML。这个貌似很简单！代码如下！
问题在于：
1.for循环，循环的是li，10个li就循环10次，绑定10次事件，100个就循环了100次，绑定100次事件！
2.如果li不是本来就在页面上的，是未来元素，是页面加载了，再通过js动态加载进来了，上面的写法是无效的，点击li是没有反应的！
应该怎么解决以上问题？
在道题的考点就是事件委托，就是把事件绑在ul上面，之后的li就可以随便添加。代码如下
varoUl=document.getElementById("ul-test");oUl.addEventListener("click",function(ev){varev=ev||window.event;vartarget=ev.target||ev.srcElement;//如果点击的最底层是li元素if(target.tagName.toLowerCase()==='li'){ alert(target.innerHTML) }})
但是有些面试者就是从vue的角度回答这个问题--利用v-for进行绑定。虽然我们公司的项目是使用vue，这样说也没错，但是这道题我没提及到vue，说vue的，反而就是一个扣分项了。
5.考点-DOM操作
比如有一个需求，往ul里面添加10个li，如下代码
varoUl=document.getElementById("ul-test");for(vari=0;i<10;i++){varoLi=document.createElement('li'); oLi.innerHTML=i; oUl.appendChild(oLi); }
问题：这里相当于操作了10次DOM，有什么方案，减少DOM的操作次数？可写代码简单说明。
这道题，有几个人还是从vue的角度来解决问题（v-for，data），虽然这样不能说错，但是我题目没提及vue的任何东西。考点就是利用innerHTML或者文档碎片的形式。
代码如下
innerHTML
varoUl=document.getElementById("ul-test");//定义临时变量var_html='';for(vari=0;i<10;i++){//保存临时变量_html+='
文档碎片-createDocumentFragment
varoUl=document.getElementById("ul-test"),_frag =document.createDocumentFragment();for(vari=0;i<10;i++){varoLi=document.createElement('li'); oLi.innerHTML=i;//把元素添加进文档碎片_frag.appendChild(oLi);}//把文档碎片添加进元素oUl.appendChild(_frag);
6.考点-对象深拷贝
写出一个函数，实现对，对象的深拷贝
要求实现一个函数clone。
letobj={ name:'小明', age:24}letobj1=clone(obj);
修改obj1，不会影响到obj的值。
这道题，在obj上面，我故意只写一层，对象里面没有嵌套数组或对象，就是想看下面试者能不能往深处想一下。结果面试者都踩坑了。但是可以理解，毕竟大家都是针对题目而论。
基本上回答都是类似下面这样
functionclone(object){let_obj={}for(letkeyinobject){_obj[key]=object[key]; }return_obj;}letobj1=clone(obj);//-------------------或者-------------functionclone(obj){let_obj=Object.assign({},object);return_obj;}letobj1=clone(obj);
这个方案，目的是达到了，但是如果obj里面的属性，嵌套着对象或者数组，这个就有问题了。所以理想的解决方案应该是这个。
functionclone(object){let_obj=JSON.parse(JSON.stringify(obj))}
这种方案，如果需要属性值是函数或者是null，undefined，就会被过滤掉。保险的做法是下面这样。原理也很简单，就是逐个遍历，如果检测到属性值是时引用类型就用当前属性进行遍历。
functionclone(obj){if(!obj&& typeof obj!=='object'){return; }varnewObj=obj.constructor===Object?{}:[];for(varkeyinobj){newObj[key] =(obj[key]&&typeof obj[key]==='object')?clone(obj[key]):obj[key]; }returnnewObj; }
7.其它考点
其余几道题都是比较笼统的题目，没有唯一的解决方案，这里就不统一回答了！
1.如果设计中使用了非标准的字体，你该如何去实现？
图片，字体图标代替，如果是比较小的英文字体可以使用css3的@font-face。
2.在开发项目上，知道那些优化的方式，提升性能，减少页面加载时间，代码质量，代码可读性等方面
性能优化-压缩代码，懒加载，预加载，合并请求，小图片转换base64编码，资源按需加载等。
代码质量优化-命名有意义，适当的注释，避免巨大函数，避免对象强耦合，代码逻辑清晰等。
3.列举Es6，常用的一些新特性。
参考资料如下：
4.Div+css排版的时候，从页面渲染和代码可读性的角度，应该注意些什么？
标签语义化，class和id命名有意义并且命名统一规范，css避免深嵌套（3级就得注意），避免@import，!important，和*通配符，避免行内样式，在head引入css等。
参考：
5.说下自己对模块化开发的理解，以及模块化开发的好处。
提高开发效率，有利团队协同开发，
避免全局变量污染，命名冲突，
方便代码的复用维护等。
1、具有1-5工作经验的，面对目前流行的技术不知从何下手，需要突破技术瓶颈的。
2、在公司待久了，过得很安逸，但跳槽时面试碰壁。需要在短时间内进修、跳槽拿高薪的。
3、如果没有工作经验，但基础非常扎实，对java工作机制，常用设计思想，常用java开发框架掌握熟练的。
4、觉得自己很牛B，一般需求都能搞定。但是所学的知识点没有系统化，很难在技术领域继续突破的。
5.群号：java高级架构群：725633148 备注好信息！
6.阿里Java高级大牛直播讲解知识点，分享知识，多年工作经验的梳理和总结 带着大家全面 科学地建立自己的技术体系和技术认知！
8.小结
面试题就是这10道，我自己的解决方案也说完了。虽热我们公司的技术栈用的主要是vue，webpack这一些，我面试交流的时候，也会问相关的问题，但是我在面试题里面我不出关于vue，webpack这些题目，就问文章这些题目，就是想知道面试者的基础如何（因为现在的行情，很多人都是注重学习热门的框架，库，工具等，却把基础落下了）。基础好的话，框架不难上手，但是基础不牢，就熟悉两三的框架和一些构建工具，以后技术转型可能会有阻力。现在前端的发展很快，技术很杂，但是基础一直没变。建议大家在学习新技术的同时，不要忘记巩固基础。
最后，如果大家对面试题有什么解法建议或者建议出什么题型，欢迎指点。
网友评论