摘要:因為題目是我自己寫的,并不是網(wǎng)上摘的,所以知識點比較基礎,也不全面。即使是面試題,也有人掉坑。小結面試題就是這道,我自己的解決方案也說完了。
大家都知道‘不忘初心,方得始終’,但多少人知道‘初心易得,始終難守’。時代在變化,技術在發(fā)展,基礎沒變。學習新技術的時候,不應把基礎落下。1.前言
因為機緣巧合,讓當了無數(shù)次面試者的我,當上了面試官,也和幾個面試者交流過。既然要應對面試者,我就當然要準備面試題了,好讓我大概知道面試者是什么水平。這個時候,也該詳解下,自己的寫的那些題目。因為題目是我自己寫的,并不是網(wǎng)上摘的,所以知識點比較基礎,也不全面。如果大家對面試題有什么建議,歡迎指點。
2.考點-面向對象需求:定義‘我吃火鍋’
面向過程的思想是:動作(我,吃火鍋)
代碼實現(xiàn)方面:
//面向過程 let eat=function(who,someThing){ console.log(`${who}吃${someThing}`); } eat("我","火鍋");//我吃火鍋
使用面向對象的方式改寫一下這個實例。
這道題,只希望有一個面向對象的意思在這里就行了,我期待的答案是這樣的。
let person={ name:"守候", eat:function(someThing){ console.log(`${this.name}吃${someThing}`); } } person.eat("火鍋");
更好的方式看下面這篇文章:JavaScript:面試頻繁出現(xiàn)的幾個易錯點。這里不展開講。
3.考點-預解析根據(jù)以下代碼,寫出結果
這道題我印象很深刻,因為是我在一年多以前,在Q群看到有人說直自己各種精通的時候,我就出這道題來提問,一抓一個準,至今那些各種精通的人,沒一個回答出來的。即使是面試題,也有人掉坑。
之前發(fā)布一篇文章的時候,有提及過這個面試題,也被人罵過,大概的意思是:現(xiàn)在都什么年代了,ES都不知道更新多少版本了,誰還這么寫代碼?看到這個我并沒有回應,也沒打算和誰對撕。但是我腦子里想到的第一件事就是:以前,新聞有條微博說70%網(wǎng)友贊成數(shù)學退出高考,有人談定回答:數(shù)學就是用來淘汰這70%人的。在這里我想說,雖然開發(fā)上這樣寫代碼肯定會被批斗,但是面試題,考的不只是開發(fā)上遇到的問題,也有考一些基礎知識。這道題就是其中之一。而且,現(xiàn)在我也覺得還有必要知道這個知識,還沒到全民寫 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();
這個之前寫文章有寫過,現(xiàn)在賦值粘貼下。
考點其實就兩個,第一變量聲明提前,第二函數(shù)聲明優(yōu)先于變量聲明!
下面我簡單分析一下,
第一部分運行結果:
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()的時候, 報錯。
第二部分運行結果:
1.underfind
2.報錯
在之前說過,預解析是把帶有var和function關鍵字的事先聲明,但不會賦值。所以一開始是underfind,然后報錯是因為執(zhí)行到a()的時候,a并不是一個函數(shù)。
//函數(shù)表達式,和變量聲明同等 var a=function(){ alert(10) } //函數(shù)聲明,優(yōu)于變量聲明 function a(){ 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是沒有反應的!
應該怎么解決以上問題?
在道題的考點就是事件委托,就是把事件綁在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,如下代碼
問題:這里相當于操作了10次DOM,有什么方案,減少DOM的操作次數(shù)?可寫代碼簡單說明。
這道題,有幾個人還是從vue的角度來解決問題(v-for,data),雖然這樣不能說錯,但是我題目沒提及vue的任何東西。考點就是利用innerHTML或者文檔碎片的形式。
代碼如下
innerHTMLvar oUl=document.getElementById("ul-test"); //定義臨時變量 var _html=""; for(var i=0;i<10;i++){ //保存臨時變量 _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);6.考點-對象深拷貝
寫出一個函數(shù),實現(xiàn)對,對象的深拷貝
要求實現(xiàn)一個函數(shù)clone。
let obj={ name:"小明", age:24 } let obj1=clone(obj);
修改obj1,不會影響到obj的值。
這道題,在obj上面,我故意只寫一層,對象里面沒有嵌套數(shù)組或對象,就是想看下面試者能不能往深處想一下。結果面試者都踩坑了。但是可以理解,畢竟大家都是針對題目而論。
基本上回答都是類似下面這樣
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里面的屬性,嵌套著對象或者數(shù)組,這個就有問題了。所以理想的解決方案應該是這個。
function clone(object){ let _obj=JSON.parse(JSON.stringify(obj)) }
這種方案,如果需要屬性值是函數(shù)或者是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.其它考點
其余幾道題都是比較籠統(tǒng)的題目,沒有唯一的解決方案,這里就不統(tǒng)一回答了!
1.如果設計中使用了非標準的字體,你該如何去實現(xiàn)?圖片,字體圖標代替,如果是比較小的英文字體可以使用css3的@font-face。
2.在開發(fā)項目上,知道那些優(yōu)化的方式,提升性能,減少頁面加載時間,代碼質量,代碼可讀性等方面性能優(yōu)化-壓縮代碼,懶加載,預加載,合并請求,小圖片轉換base64編碼,資源按需加載等。
代碼質量優(yōu)化-命名有意義,適當?shù)淖⑨專苊饩薮蠛瘮?shù),避免對象強耦合,代碼邏輯清晰等。
參考資料如下:
ECMAScript 6 入門
30分鐘掌握ES6/ES2015核心內容(上)
30分鐘掌握ES6/ES2015核心內容(下)
實例感受-es6的常用語法和優(yōu)越性
ES6 Promise 用法講解
標簽語義化,class和id命名有意義并且命名統(tǒng)一規(guī)范,css避免深嵌套(3級就得注意),避免@import,!important,和*通配符,避免行內樣式,在head引入css等。
參考:
21條CSS高級技巧
css寫作建議和性能優(yōu)化小結
提高開發(fā)效率,有利團隊協(xié)同開發(fā),
避免全局變量污染,命名沖突,
方便代碼的復用維護等。
面試題就是這10道,我自己的解決方案也說完了。雖熱我們公司的技術棧用的主要是vue,webpack這一些,我面試交流的時候,也會問相關的問題,但是我在面試題里面我不出關于vue,webpack這些題目,就問文章這些題目,就是想知道面試者的基礎如何(因為現(xiàn)在的行情,很多人都是注重學習熱門的框架,庫,工具等,卻把基礎落下了)。基礎好的話,框架不難上手,但是基礎不牢,就熟悉兩三的框架和一些構建工具,以后技術轉型可能會有阻力。現(xiàn)在前端的發(fā)展很快,技術很雜,但是基礎一直沒變。建議大家在學習新技術的同時,不要忘記鞏固基礎。
最后,如果大家對面試題有什么解法建議或者建議出什么題型,歡迎指點。
-------------------------華麗的分割線--------------------
想了解更多,關注關注我的微信公眾號:守候書閣
文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/93758.html
摘要:因為題目是我自己寫的,并不是網(wǎng)上摘的,所以知識點比較基礎,也不全面。即使是面試題,也有人掉坑。小結面試題就是這道,我自己的解決方案也說完了。 大家都知道‘不忘初心,方得始終’,但多少人知道‘初心易得,始終難守’。時代在變化,技術在發(fā)展,基礎沒變。學習新技術的時候,不應把基礎落下。 1.前言 因為機緣巧合,讓當了無數(shù)次面試者的我,當上了面試官,也和幾個面試者交流過。既然要應對面試者,我就...
摘要:因為題目是我自己寫的,并不是網(wǎng)上摘的,所以知識點比較基礎,也不全面。即使是面試題,也有人掉坑。小結面試題就是這道,我自己的解決方案也說完了。 大家都知道‘不忘初心,方得始終’,但多少人知道‘初心易得,始終難守’。時代在變化,技術在發(fā)展,基礎沒變。學習新技術的時候,不應把基礎落下。 1.前言 因為機緣巧合,讓當了無數(shù)次面試者的我,當上了面試官,也和幾個面試者交流過。既然要應對面試者,我就...
摘要:前言得益于金三銀四,在最近一段時間,面試了一些人,但是符合的寥寥無幾。看到我的面試題自己寫的面試題,自己想的答案。聽人說過一個面試套路面試官問的問題,可能面試官自己都不懂,目的只是為了壓工資,挫士氣。不過我是為了測試面試者是不是真的精通。 技術在不斷的創(chuàng)新,隨著框架,庫,構建工具,打包工具,版本控制工具等操作越來越方便,使用越來越簡單。面對這樣的情況,除了興奮,也要警惕。這些工具使得開...
摘要:哈哈,寫到這個話題想要先扯點別的,說實話我是比較自虐的人,大學時候本專業(yè)從來不好好上,一直覬覦著別人的專業(yè),因為自己文科生,總覺得沒有項技術在身出門找工作都沒有底氣,然后看什么炫學什么,簡直沒有目的和節(jié)操,覺得平面設計美就去狂記色號當然不是 哈哈,寫到這個話題想要先扯點別的,說實話我是比較自虐的人,大學時候本專業(yè)從來不好好上,一直覬覦著別人的專業(yè),因為自己文科生,總覺得沒有項技術在身出...
閱讀 2690·2021-11-08 13:16
閱讀 2367·2021-10-18 13:30
閱讀 2237·2021-09-27 13:35
閱讀 1993·2019-08-30 15:55
閱讀 2441·2019-08-30 13:22
閱讀 576·2019-08-30 11:24
閱讀 2077·2019-08-29 12:33
閱讀 1812·2019-08-26 12:10