摘要：因為題目是我自己寫的，并不是網上摘的，所以知識點比較基礎，也不全面。即使是面試題，也有人掉坑。小結面試題就是這道，我自己的解決方案也說完了。

大家都知道‘不忘初心，方得始終’，但多少人知道‘初心易得，始終難守’。時代在變化，技術在發展，基礎沒變。學習新技術的時候，不應把基礎落下。

因為機緣巧合，讓當了無數次面試者的我，當上了面試官，也和幾個面試者交流過。既然要應對面試者，我就當然要準備面試題了，好讓我大概知道面試者是什么水平。這個時候，也該詳解下，自己的寫的那些題目。因為題目是我自己寫的，并不是網上摘的，所以知識點比較基礎，也不全面。如果大家對面試題有什么建議，歡迎指點。

需求：定義‘我吃火鍋’

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

代碼實現方面：

//面向過程
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這些題目，就問文章這些題目，就是想知道面試者的基礎如何（因為現在的行情，很多人都是注重學習熱門的框架，庫，工具等，卻把基礎落下了）。基礎好的話，框架不難上手，但是基礎不牢，就熟悉兩三的框架和一些構建工具，以后技術轉型可能會有阻力。現在前端的發展很快，技術很雜，但是基礎一直沒變。建議大家在學習新技術的同時，不要忘記鞏固基礎。

最后，如果大家對面試題有什么解法建議或者建議出什么題型，歡迎指點。

-------------------------華麗的分割線--------------------
想了解更多，關注關注我的微信公眾號：守候書閣