需求：定義‘我吃火鍋’

面向過程的思想是：動(dòng)作(我,吃火鍋)

代碼實(shí)現(xiàn)方面：

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

使用面向?qū)ο蟮姆绞礁膶懸幌逻@個(gè)實(shí)例。

這道題，只希望有一個(gè)面向?qū)ο蟮囊馑荚谶@里就行了，我期待的答案是這樣的。

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

更好的方式看下面這篇文章：JavaScript：面試頻繁出現(xiàn)的幾個(gè)易錯(cuò)點(diǎn)。這里不展開講。

根據(jù)以下代碼，寫出結(jié)果

這道題我印象很深刻，因?yàn)槭俏以谝荒甓嘁郧埃赒群看到有人說直自己各種精通的時(shí)候，我就出這道題來提問，一抓一個(gè)準(zhǔn)，至今那些各種精通的人，沒一個(gè)回答出來的。即使是面試題，也有人掉坑。

之前發(fā)布一篇文章的時(shí)候，有提及過這個(gè)面試題，也被人罵過，大概的意思是：現(xiàn)在都什么年代了，ES都不知道更新多少版本了，誰還這么寫代碼？看到這個(gè)我并沒有回應(yīng)，也沒打算和誰對(duì)撕。但是我腦子里想到的第一件事就是：以前，新聞?dòng)袟l微博說70%網(wǎng)友贊成數(shù)學(xué)退出高考，有人談定回答：數(shù)學(xué)就是用來淘汰這70%人的。在這里我想說，雖然開發(fā)上這樣寫代碼肯定會(huì)被批斗，但是面試題，考的不只是開發(fā)上遇到的問題，也有考一些基礎(chǔ)知識(shí)。這道題就是其中之一。而且，現(xiàn)在我也覺得還有必要知道這個(gè)知識(shí)，還沒到全民寫 ES6 的時(shí)代，拋棄 ES5 的時(shí)代。

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

這個(gè)之前寫文章有寫過，現(xiàn)在賦值粘貼下。
考點(diǎn)其實(shí)就兩個(gè)，第一變量聲明提前，第二函數(shù)聲明優(yōu)先于變量聲明！
下面我簡(jiǎn)單分析一下，
第一部分運(yùn)行結(jié)果：
1.函數(shù)聲明優(yōu)先于變量聲明，所以，剛開始，a就是function a(){alert(10)} ，就會(huì)看到這個(gè)函數(shù)。
2.a()，執(zhí)行函數(shù)，就是出現(xiàn)alert(10)
3.執(zhí)行了var a=3; 所以alert(a)就是顯示3
4.由于a不是一個(gè)函數(shù)了，所以往下在執(zhí)行到a()的時(shí)候， 報(bào)錯(cuò)。
第二部分運(yùn)行結(jié)果：
1.underfind
2.報(bào)錯(cuò)
在之前說過，預(yù)解析是把帶有var和function關(guān)鍵字的事先聲明，但不會(huì)賦值。所以一開始是underfind，然后報(bào)錯(cuò)是因?yàn)閳?zhí)行到a()的時(shí)候，a并不是一個(gè)函數(shù)。

//函數(shù)表達(dá)式，和變量聲明同等
var a=function(){
    alert(10)
} 
//函數(shù)聲明，優(yōu)于變量聲明    
function a(){
    alert(10)
} 

一個(gè)簡(jiǎn)單的需求，比如想給ul下面的li加上點(diǎn)擊事件，點(diǎn)擊哪個(gè)li，就顯示那個(gè)li的innerHTML。這個(gè)貌似很簡(jiǎn)單！代碼如下！

    
        
        
    
    
        

            
0
            
1
            
2
            
3
            
4
            
5
            
6
            
7
            
8
            
9
        
    
    

問題在于：
1.for循環(huán)，循環(huán)的是li，10個(gè)li就循環(huán)10次，綁定10次事件，100個(gè)就循環(huán)了100次，綁定100次事件！
2.如果li不是本來就在頁面上的，是未來元素，是頁面加載了，再通過js動(dòng)態(tài)加載進(jìn)來了，上面的寫法是無效的，點(diǎn)擊li是沒有反應(yīng)的！

應(yīng)該怎么解決以上問題？

在道題的考點(diǎn)就是事件委托，就是把事件綁在ul上面，之后的li就可以隨便添加。代碼如下

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

但是有些面試者就是從vue的角度回答這個(gè)問題--利用v-for進(jìn)行綁定。雖然我們公司的項(xiàng)目是使用vue，這樣說也沒錯(cuò)，但是這道題我沒提及到vue，說vue的，反而就是一個(gè)扣分項(xiàng)了。

比如有一個(gè)需求，往ul里面添加10個(gè)li，如下代碼

問題：這里相當(dāng)于操作了10次DOM，有什么方案，減少DOM的操作次數(shù)？可寫代碼簡(jiǎn)單說明。

這道題，有幾個(gè)人還是從vue的角度來解決問題（v-for，data），雖然這樣不能說錯(cuò)，但是我題目沒提及vue的任何東西?？键c(diǎn)就是利用innerHTML或者文檔碎片的形式。

代碼如下

var oUl=document.getElementById("ul-test");
//定義臨時(shí)變量
var _html="";
for(var i=0;i<10;i++){
    //保存臨時(shí)變量
    _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;
    //把元素添加進(jìn)文檔碎片
    _frag.appendChild(oLi);
}
//把文檔碎片添加進(jìn)元素
oUl.appendChild(_frag);

寫出一個(gè)函數(shù)，實(shí)現(xiàn)對(duì)，對(duì)象的深拷貝

要求實(shí)現(xiàn)一個(gè)函數(shù)clone。

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

修改obj1，不會(huì)影響到obj的值。

這道題，在obj上面，我故意只寫一層，對(duì)象里面沒有嵌套數(shù)組或?qū)ο?，就是想看下面試者能不能往深處想一下。結(jié)果面試者都踩坑了。但是可以理解，畢竟大家都是針對(duì)題目而論。

基本上回答都是類似下面這樣

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

這個(gè)方案，目的是達(dá)到了，但是如果obj里面的屬性，嵌套著對(duì)象或者數(shù)組，這個(gè)就有問題了。所以理想的解決方案應(yīng)該是這個(gè)。

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

這種方案，如果需要屬性值是函數(shù)或者是undefined，就會(huì)被過濾掉。保險(xiǎn)的做法是下面這樣。原理也很簡(jiǎn)單，就是逐個(gè)遍歷，如果檢測(cè)到屬性值是時(shí)引用類型就用當(dāng)前屬性進(jìn)行遍歷。

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

其余幾道題都是比較籠統(tǒng)的題目，沒有唯一的解決方案，這里就不統(tǒng)一回答了！

圖片，字體圖標(biāo)代替，如果是比較小的英文字體可以使用css3的@font-face。

性能優(yōu)化-壓縮代碼，懶加載，預(yù)加載，合并請(qǐng)求，小圖片轉(zhuǎn)換base64編碼，資源按需加載等。
代碼質(zhì)量?jī)?yōu)化-命名有意義，適當(dāng)?shù)淖⑨?，避免巨大函?shù)，避免對(duì)象強(qiáng)耦合，代碼邏輯清晰等。

參考資料如下：
ECMAScript 6 入門
30分鐘掌握ES6/ES2015核心內(nèi)容（上）
30分鐘掌握ES6/ES2015核心內(nèi)容（下）
實(shí)例感受-es6的常用語法和優(yōu)越性
ES6 Promise 用法講解

標(biāo)簽語義化，class和id命名有意義并且命名統(tǒng)一規(guī)范，css避免深嵌套（3級(jí)就得注意），避免@import，!important，和*通配符，避免行內(nèi)樣式，在head引入css等。

參考：
21條CSS高級(jí)技巧
css寫作建議和性能優(yōu)化小結(jié)

提高開發(fā)效率，有利團(tuán)隊(duì)協(xié)同開發(fā)，
避免全局變量污染，命名沖突，
方便代碼的復(fù)用維護(hù)等。

面試題就是這10道，我自己的解決方案也說完了。雖熱我們公司的技術(shù)棧用的主要是vue，webpack這一些，我面試交流的時(shí)候，也會(huì)問相關(guān)的問題，但是我在面試題里面我不出關(guān)于vue，webpack這些題目，就問文章這些題目，就是想知道面試者的基礎(chǔ)如何（因?yàn)楝F(xiàn)在的行情，很多人都是注重學(xué)習(xí)熱門的框架，庫，工具等，卻把基礎(chǔ)落下了）?；A(chǔ)好的話，框架不難上手，但是基礎(chǔ)不牢，就熟悉兩三的框架和一些構(gòu)建工具，以后技術(shù)轉(zhuǎn)型可能會(huì)有阻力。現(xiàn)在前端的發(fā)展很快，技術(shù)很雜，但是基礎(chǔ)一直沒變。建議大家在學(xué)習(xí)新技術(shù)的同時(shí)，不要忘記鞏固基礎(chǔ)。

最后，如果大家對(duì)面試題有什么解法建議或者建議出什么題型，歡迎指點(diǎn)。

-------------------------華麗的分割線--------------------
想了解更多，關(guān)注關(guān)注我的微信公眾號(hào)：守候書閣