大家都知道‘不忘初心，方得始終’音羞，但多少人知道‘初心易得囱桨，始終難守’。時代在變化嗅绰，技術(shù)在發(fā)展舍肠，基礎(chǔ)沒變搀继。學習新技術(shù)的時候，不應(yīng)把基礎(chǔ)落下翠语。
1.前言
因為機緣巧合叽躯，讓當了無數(shù)次面試者的我，當上了面試官肌括，也和幾個面試者交流過点骑。既然要應(yīng)對面試者，我就當然要準備面試題了谍夭，好讓我大概知道面試者是什么水平黑滴。這個時候，也該詳解下慧库，自己的寫的那些題目跷跪。因為題目是我自己寫的馋嗜，并不是網(wǎng)上摘的齐板，所以知識點比較基礎(chǔ)，也不全面葛菇。如果大家對面試題有什么建議甘磨，歡迎指點。
2.考點-面向?qū)ο?/p>
需求：定義‘我吃火鍋’
面向過程的思想是：動作(我,吃火鍋)
代碼實現(xiàn)方面：
//面向過程leteat=function(who,someThing){console.log(`${who}吃${someThing}`);}eat('我','火鍋');//我吃火鍋
使用面向?qū)ο蟮姆绞礁膶懸幌逻@個實例眯停。
這道題济舆，只希望有一個面向?qū)ο蟮囊馑荚谶@里就行了，我期待的答案是這樣的莺债。
letperson={name:'守候',eat:function(someThing){console.log(`${this.name}吃${someThing}`);? ? }}person.eat('火鍋');
更好的方式看下面這篇文章：JavaScript：面試頻繁出現(xiàn)的幾個易錯點滋觉。這里不展開講。
3.考點-預(yù)解析
根據(jù)以下代碼齐邦，寫出結(jié)果
這道題我印象很深刻椎侠，因為是我在一年多以前，在Q群看到有人說直自己各種精通的時候措拇，我就出這道題來提問我纪，一抓一個準，至今那些各種精通的人丐吓，沒一個回答出來的浅悉。即使是面試題，也有人掉坑券犁。
之前發(fā)布一篇文章的時候术健，有提及過這個面試題，也被人罵過粘衬，大概的意思是：現(xiàn)在都什么年代了荞估，ES都不知道更新多少版本了比被，誰還這么寫代碼？看到這個我并沒有回應(yīng)泼舱，也沒打算和誰對撕等缀。但是我腦子里想到的第一件事就是：以前，新聞有條微博說70%網(wǎng)友贊成數(shù)學退出高考娇昙，有人談定回答：數(shù)學就是用來淘汰這70%人的尺迂。在這里我想說，雖然開發(fā)上這樣寫代碼肯定會被批斗冒掌，但是面試題噪裕，考的不只是開發(fā)上遇到的問題，也有考一些基礎(chǔ)知識股毫。這道題就是其中之一膳音。而且，現(xiàn)在我也覺得還有必要知道這個知識铃诬，還沒到全民寫 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();
這個之前寫文章有寫過趣席，現(xiàn)在賦值粘貼下兵志。?
考點其實就兩個，第一變量聲明提前宣肚，第二函數(shù)聲明優(yōu)先于變量聲明想罕！
下面我簡單分析一下，
第一部分運行結(jié)果：
1.函數(shù)聲明優(yōu)先于變量聲明霉涨，所以按价，剛開始，a就是function a(){alert(10)}?笙瑟，就會看到這個函數(shù)楼镐。
2.a()，執(zhí)行函數(shù)逮走，就是出現(xiàn)alert(10)
3.執(zhí)行了var a=3;?所以alert(a)就是顯示3
4.由于a不是一個函數(shù)了鸠蚪，所以往下在執(zhí)行到a()的時候， 報錯师溅。
第二部分運行結(jié)果：
1.underfind
2.報錯
在之前說過茅信，預(yù)解析是把帶有var和function關(guān)鍵字的事先聲明芹血，但不會賦值哲戚。所以一開始是underfind，然后報錯是因為執(zhí)行到a()的時候囚戚，a并不是一個函數(shù)窿锉。
//函數(shù)表達式酌摇，和變量聲明同等vara=function(){? ? alert(10)}//函數(shù)聲明膝舅，優(yōu)于變量聲明? ? functiona(){? ? alert(10)}
4.考點-事件委托
一個簡單的需求，比如想給ul下面的li加上點擊事件窑多，點擊哪個li仍稀，就顯示那個li的innerHTML。這個貌似很簡單埂息！代碼如下技潘！
問題在于：
1.for循環(huán)，循環(huán)的是li千康，10個li就循環(huán)10次享幽，綁定10次事件，100個就循環(huán)了100次拾弃，綁定100次事件值桩！
2.如果li不是本來就在頁面上的，是未來元素豪椿，是頁面加載了奔坟，再通過js動態(tài)加載進來了，上面的寫法是無效的砂碉，點擊li是沒有反應(yīng)的蛀蜜！
應(yīng)該怎么解決以上問題？
在道題的考點就是事件委托增蹭，就是把事件綁在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的操作次數(shù)？可寫代碼簡單說明舰褪。
這道題皆疹，有幾個人還是從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.考點-對象深拷貝
寫出一個函數(shù)窄绒，實現(xiàn)對，對象的深拷貝
要求實現(xiàn)一個函數(shù)clone崔兴。
letobj={? ? name:'小明',? ? age:24}letobj1=clone(obj);
修改obj1颗祝，不會影響到obj的值。
這道題恼布，在obj上面螺戳，我故意只寫一層，對象里面沒有嵌套數(shù)組或?qū)ο笳酃褪窍肟聪旅嬖囌吣懿荒芡钐幭胍幌戮笥住＝Y(jié)果面試者都踩坑了。但是可以理解爽待，畢竟大家都是針對題目而論损同。
基本上回答都是類似下面這樣
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里面的屬性膏燃，嵌套著對象或者數(shù)組，這個就有問題了何什。所以理想的解決方案應(yīng)該是這個组哩。
functionclone(object){let_obj=JSON.parse(JSON.stringify(obj))}
這種方案，如果需要屬性值是函數(shù)或者是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.其它考點
其余幾道題都是比較籠統(tǒng)的題目琅翻，沒有唯一的解決方案，這里就不統(tǒng)一回答了柑贞！
1.如果設(shè)計中使用了非標準的字體方椎，你該如何去實現(xiàn)？
圖片凌外，字體圖標代替辩尊，如果是比較小的英文字體可以使用css3的@font-face。
2.在開發(fā)項目上康辑，知道那些優(yōu)化的方式摄欲，提升性能轿亮，減少頁面加載時間，代碼質(zhì)量胸墙，代碼可讀性等方面
性能優(yōu)化-壓縮代碼我注，懶加載，預(yù)加載迟隅，合并請求但骨，小圖片轉(zhuǎn)換base64編碼，資源按需加載等智袭。
代碼質(zhì)量優(yōu)化-命名有意義奔缠，適當?shù)淖⑨專苊饩薮蠛瘮?shù)吼野，避免對象強耦合校哎，代碼邏輯清晰等。
3.列舉Es6瞳步，常用的一些新特性闷哆。
參考資料如下：
4.Div+css排版的時候，從頁面渲染和代碼可讀性的角度单起，應(yīng)該注意些什么抱怔？
標簽語義化，class和id命名有意義并且命名統(tǒng)一規(guī)范嘀倒，css避免深嵌套（3級就得注意）屈留，避免@import，!important括儒，和*通配符绕沈，避免行內(nèi)樣式，在head引入css等帮寻。
參考：
5.說下自己對模塊化開發(fā)的理解，以及模塊化開發(fā)的好處赠摇。
提高開發(fā)效率固逗，有利團隊協(xié)同開發(fā)，
避免全局變量污染藕帜，命名沖突烫罩，
方便代碼的復(fù)用維護等。
1洽故、具有1-5工作經(jīng)驗的贝攒，面對目前流行的技術(shù)不知從何下手，需要突破技術(shù)瓶頸的时甚。
2隘弊、在公司待久了哈踱，過得很安逸，但跳槽時面試碰壁梨熙。需要在短時間內(nèi)進修开镣、跳槽拿高薪的。
3咽扇、如果沒有工作經(jīng)驗邪财，但基礎(chǔ)非常扎實，對java工作機制质欲，常用設(shè)計思想树埠，常用java開發(fā)框架掌握熟練的。
4嘶伟、覺得自己很牛B怎憋，一般需求都能搞定。但是所學的知識點沒有系統(tǒng)化奋早，很難在技術(shù)領(lǐng)域繼續(xù)突破的盛霎。
5.群號：java高級架構(gòu)群：725633148?備注好信息！
6.阿里Java高級大牛直播講解知識點耽装，分享知識愤炸，多年工作經(jīng)驗的梳理和總結(jié)?帶著大家全面?科學地建立自己的技術(shù)體系和技術(shù)認知！
8.小結(jié)
面試題就是這10道掉奄，我自己的解決方案也說完了规个。雖熱我們公司的技術(shù)棧用的主要是vue，webpack這一些姓建，我面試交流的時候诞仓，也會問相關(guān)的問題，但是我在面試題里面我不出關(guān)于vue速兔，webpack這些題目墅拭，就問文章這些題目，就是想知道面試者的基礎(chǔ)如何（因為現(xiàn)在的行情涣狗，很多人都是注重學習熱門的框架谍婉，庫，工具等镀钓，卻把基礎(chǔ)落下了）穗熬。基礎(chǔ)好的話丁溅，框架不難上手唤蔗，但是基礎(chǔ)不牢，就熟悉兩三的框架和一些構(gòu)建工具，以后技術(shù)轉(zhuǎn)型可能會有阻力〖斯瘢現(xiàn)在前端的發(fā)展很快箱季，技術(shù)很雜，但是基礎(chǔ)一直沒變领虹。建議大家在學習新技術(shù)的同時规哪，不要忘記鞏固基礎(chǔ)。
最后塌衰，如果大家對面試題有什么解法建議或者建議出什么題型诉稍，歡迎指點。
