本身寫的面試題，本身想的答案

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

最後，若是你們對面試題有什麼解法建議或者建議出什麼題型，歡迎指點。

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