簡單開頭
首先技術面試官會根據簡歷里所寫的專案和個人掌握技術堆疊提問（我不知道已經改過多少次簡歷了，因為前期投簡歷是真的是沉在茫茫大海，撈漂流瓶都撈不到的那種）
我的技術堆疊：（Vue還在苦苦的自學當中，隨便推薦一下coderwhy老師B站的教學視頻，真的不錯，講得深入淺出，越聽越想聽）地址：https://www.bilibili.com/video/BV15741177Eh
熟悉HTML5、CSS3、JavaScript、AJAX
了解Vue、ES6語法、jQuery、Bootstrap
一、CSS
1、怎樣實作垂直水平居中？ ?
方法1：flex彈性布局（這個布局我最近的畢設登錄頁面有用到，最近才復習的）
<style> /*父級盒子*/ .demo{ display: flex; /*給父級盒子設定彈性布局*/ align-items: center; /*彈性盒子元素在交叉軸(相對于直角坐標系y軸)方向上的對齊方式，垂直居中*/ justify-content: center; /*彈性盒子元素在主軸(相對于直角坐標系x軸)方向上的對齊方式,水平居中*/ height: 100px; /*給定父元素高度*/ background-color: wheat; /*父級盒子背景色*/ } /*子元素*/ span{ border: 2px dashed brown; /*外邊框樣式*/ } </style> <div class="demo"> <!-- 父級盒子 --> <span>DEMO</span> <!-- 子元素 --> </div>
方法2：grid網格布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <style> /*父級盒子*/ .demo{ display: grid; /*網格布局*/ height: 100px; /*給定高度*/ background-color: wheat; /*父級盒子背景色*/ } /*子元素*/ span{ /*margin: A; A上下左右*/ /*margin: A B; A上下-B左右*/ /*margin: A B C; A上-B左右-C下*/ /*margin: A B C D; A上-B右-C下-D左*/ /*padding、border同理*/ margin: auto; /*上下居中,左右居中*/ border: 2px dashed brown; /*邊框樣式*/ } </style> <div class="demo"> <span>DEMO</span> </div> </body> </html>
方法3：(已知寬高)給父級盒子設定相對定位，給子元素設定絕對定位 top:50% left:50%
方法4：(未知寬高)給父級盒子設定相對定位，給子元素設定絕對定位 top:50% left:50% transform(-50%,-50%) //2D轉換，X軸，Y軸移動，這個基本不會用到
我還補充了使用line-height實作文本垂直居中的方法，也就是父級盒子給定高度，文本元素line-height和父級高度設定一樣就可，還有水平居中，margin: 0 auto這樣的，畢竟以前入門前端的時候最愛這樣寫，
二、HTML
1、說幾個塊級元素標簽 ?
p、div、ul、ol、li、dl、dt、dd、h1-h6、form、table、H5新增header、section、aside、footer...
2、說幾個行內塊級元素標簽 ?(這里我差點把h1-h6標簽和p標簽說成行內塊級元素了，，，，被面試官反復質問）
a、span、em、strong、b、i、u、label、br、img、big、small、sub、sup、button
三、HTML5
1、相比舊版本，新增了哪些標簽？?×（我就說了些input擴展和多媒體標簽）
語意化標簽：
<nav> 導航標簽 </nav> <aside> 側邊欄標簽 </aside> <header> 頭部標簽 </header> <footer> 尾部標簽 </footer> <article> 內容標簽 </article> <section> 定義檔案某個區域 </section>
多媒體標簽：
<audio src=""> 音頻</audio> <video controls>視頻 <source src="xxx.mp4"> 將不同的視頻格式存放在source元素中，解決兼容性問題 <source src="xxx.avi"> </video>
表單擴展：
required: 內容不能為空 <input type="text" required> autofocus: 自動聚焦 <input type="submit" autofocus> multiple: 上傳提交多個檔案 <input type="file" multiple> placeholder: 輸入框的占位文字 <input type="text" placeholder="請輸入內容">
input輸入框type擴展
url: URL型別 <input type="url"> date: 日期型別 <input type="date"> time: 時間型別 <input type="time"> number: 數字型別 <input type="number"> tel: 手機號碼型別 <input type="tel"> search: 搜索框型別 <input type="search"> color: 取色板型別 <input type="color"> email: 郵件型別 <input type="email">
2、H5中的web storage的兩種存盤方式是哪兩種？它們的區別在哪？?
sessionStorage和localStorage，其中sessionStroage不是持久化的，只有在同一個會話當中的頁面才能訪問，而且關倍訓后就會消失，而localStorage是持久化的，保存在本地，只有手動洗掉才會消失，
3、看到你的專案中用到了cookie，說說cookie和web storage的區別，?
首先cookie需要手動去寫set、get、remove方法，而web storage有自帶的呼叫方法，其次cookie的存盤容量相對于web storage要小一些，還有就是cookie需要設定時間，瀏覽器會定期檢查清理過期的cookie，
4、那sessionStorage的清除方法是哪個？?
clear
四、JavaScript
1、什么是閉包？為什么要使用閉包？?×（我剛開始看閉包的時候，我覺得我已經自閉了）
閉包：閉包就是能夠讀取其他函式內部變數的函式（函式嵌套），
為什么要使用？
讀取函式內部變數，讓這些變數一直待在在記憶體當中，不會被垃圾回收；
防止變數污染全域；
提高函式中變數的復用性，
2、什么是原型？?×（這個我就說了一點prototype和_proto_，結果面試官直接開始深挖，我表示被問僵了）
https://www.jianshu.com/p/72156bc03ac1
3、獲取DOM元素的方法？?（當時我腦子里只浮現了querySelector，都快忘了最簡單的id選擇）
//常用 document.getElementById(); //ID選擇器 document.querySelector(); //回傳匹配指定 CSS 選擇器元素的第一個子元素 ， document.getElementsByClassName(); //類選擇器 document.getElementsByTagName(); //標簽選擇器
4、基本資料型別？?（我以為他要問null和undefined的區別，預判失敗，，，）
null空(注意：typeof null 等于Object)
undefined未定義（和undefined和null的區別經常考）
string字符型別
symbol(資料型別，唯一)
ES10新增bigInt
Number數字型別
boolean布爾型別 （差點說漏掉了）
補充參考資料型別：Object物件、Array陣列、 function函式、Date日期、RegExp（ Regular expression正則運算式）
5、什么是深拷貝、淺拷貝？怎樣實作深拷貝？ ?（這個我還好自己手動敲過幾遍代碼，還是記得一些基礎的方法）
淺拷貝也就是參考資料型別，例如Object物件，賦值物件會隨著原物件的改變而改變，因為是兩者同時通過一個地址參考同一個存放在堆里的資料，
深拷貝也就是賦值物件不會隨著原物件的改變而改變，而是把原物件存在于堆中的參考資料完全復制拷貝一份，并且開辟一個新的空間存放，（怎么突然聯想到游戲王貝卡斯的拷貝貓和十代的新空間加班，，，可能是前段時間玩得比較多）
深拷貝的實作方法很多，最簡單的就是用JSON.stringfy()和JSON.parse()轉換（除開乞丐法還有其他的方法，之后去練習練習）
陣列深拷貝的實作方法：注意，一旦陣列中存在嵌套，例如陣列嵌套陣列，陣列嵌套物件，這些方法都沒用，因為出現了參考資料型別，
//3-1、slice方法-不是真正意義上的深拷貝，因為如果含有二級屬性，也就是陣列套陣列，二級屬性的參考還是不會改變 function test1(){ let num1 = [1,2,3,4]; console.log(num1) //列印原陣列值 let num2 = num1.slice(); num1.push(11); console.log(num1); //列印結果 console.log(num2); } //3-2、concat方法-因為如果含有二級屬性，也就是陣列套陣列，二級屬性的參考還是不會改變 function test2(){ let num1 = [1,2,3]; console.log(num1); let num2 = [].concat(num1); //利用空陣列連接num1陣列 num1.push(11); console.log(num1); //列印結果 console.log(num2); } //3-3、ES6中的 ... function test3(){ let arr1 = [1,2,3,4]; console.log(arr1); let arr2 = [...arr1]; arr1.push(5) console.log(arr1); console.log(arr2); } test4(); //3-4、Array.from方法 function test4(){ let arr1 = [1,2,3,4]; console.log(arr1); let arr2 = Array.from(arr1); arr1.push(5) console.log(arr1); console.log(arr2); }
五、ES6
1、你在做專案的程序中有用到ES6的哪些新增特性？?×
箭頭函式、let、const，for-in（鍵）、for-of（值）、物件增強寫法等等，
（我的專案其時都太基礎了，實在用不了什么復雜一點的技術，還記得第一次面試時，那個技術面小姐姐問我怎么修改箭頭函式的this指向，我回答說bind、apply、call都不行，我也不知道，，，其實修改一下父級背景關系的指向就可，她還問箭頭函式和普通函式的區別有哪些，我慌亂中回答箭頭函式不含建構式，，，應該是不可以作為建構式使用，為什么不能是“因為標準規范定義了生成器必須是function*，而箭頭函式就無法匹配這個token”抄的大佬的解答）
2、談談var、const、let三者之間的區別 ?（ES6面試老熟人了）
var存在變數提升，let、const不存在；
var可重復宣告變數，let、const不能；
let、const存在暫時性死區即塊級作用域，var不存在，（經典就是定時器使用var，列印幾個一樣的數字，，，）
let定義變數，const定義常量不能被修改，但是const定義的物件中的屬性可以被修改，因為物件是參考資料型別，存放在堆記憶體當中，堆疊記憶體中只是存放著該資料的參考地址，
3、談談promise （我回答promise相當于保持狀態的回呼函式，其他沒記起來-_-，這塊了解得比較模糊需要惡補）×
https://blog.csdn.net/qq_42492055/article/details/80841331
六、Vue
1、根據標簽class屬性動態修改樣式怎么實作？× （這個被我答錯了，但面試官給我指出來，而且詳細說明了一下實作方法，面試官人挺好的）
主要是v-bind的結合class屬性，可以寫成v-bind:，或者:，其中active就是class屬性，通過isActive布爾變數來控制active，在CSS中使用類選擇器 .active 設定動態樣式，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> button{ background: black; color: white; font-weight: bold; } .active{ background: red; color: white; font-weight: bold; } </style> </head> <body> <div id="app"> <button @click="isClick()" :class="getClasses()">按鈕</button> <h2 class="title" :class="{active:isActive}">233</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { message: '您好！', status: 'active', isActive: false, }, methods: { isClick: function (){ this.isActive=!this.isActive }, getClasses:function (){ return {active:this.isActive} //回傳物件屬性 } } }) </script> </body> </html>
2、Vue的生命周期？?（我一開始有背過這張圖，其實也沒用，理解才是真理）
創建-掛載-更新-銷毀
3、如果操作DOM元素，是在create（創建）階段還是mount（掛載）階段？?
掛載階段
4、父子組件的通信是通過什么傳遞的？?
父傳子：自定義屬性props
子傳父：自定義事件$emit(）
5、Vue中是怎樣阻止事件冒泡的？為什么會產生事件冒泡？?×
vue中阻止點擊事件冒泡，在需要阻止的標簽中設定屬性 @click.stop，
因為DOM結構中，父元素和子元素之間存在著層次關系，當底層事件被觸發，就會向上冒泡，直到最上層，這幾層的元素都會被觸發，但實際開發當中，并不希望出現這種情況，就好比一個div盒子里面放了一個button按鈕，一旦button被點擊，button和div都會觸發點擊監聽事件，
6、watch、computed函式有了解嗎？具體怎么使用?×
watch監聽函式：監聽單個函式，或者單個物件的資料變化（這個當時我在刷vue的教學視頻的時候只練了一次，印象很淺，）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <input type="text" v-model="temp"> </div> <script src="./js/vue.js"></script> <script> new Vue({ el: '#app', data: { temp: '' }, watch: { // temp值發生變化,呼叫該方法 temp(newValue, oldValue) { // newValue: 新值 // oldValue: 舊值 console.log('oldValue:',oldValue) console.log('newValue:',newValue) } } }) </script> </body> </html>
computed計算屬性：計算屬性會采用快取機制，在多個重復呼叫的程序中，減小資源占用，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h2>{{firstName}} {{lastName}}</h2> <!--html中不要采用邏輯過于復雜的語法--> <h2>{{getFullName()}}</h2> <h2>{{fullName}}</h2> <h2>{{getFullName()}}</h2> <h2>{{fullName}}</h2> <h2>{{getFullName()}}</h2> <h2>{{fullName}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { message: '您好！', firstName: 'kobe', lastName: 'bryant' }, methods: { getFullName: function (){ console.log("---getFUllName---") return this.firstName + ' ' + this.lastName } }, computed: { //計算屬性會采用快取機制，在多個重復呼叫的程序中，減小資源占用 fullName(){ console.log("---fullName---") return this.firstName + ' ' + this.lastName } } }) </script> </body> </html>
七、Android（能問到Android就離譜，誰讓我有提到大學專業課有這門課，，）
1、Android的螢屏適配有哪些方法？（蚌埠住了，雖然我參加外包比賽時搞過Android的UI設計圖，這個平時課程中是真沒去碰過，孤陋寡聞了）×
https://www.jianshu.com/p/746fa1ba313c
八、小結
其中?就是答得很順暢但不知道對錯，?×就是回答扭扭捏捏大概率是錯的，×基本上是完全沒想起來或者不知道，整個面試程序，兩個技術面+一個人事，一對三，剛開始有點緊張，進去的時候看見公司的裝修環境不錯很整潔大方，不但沒有緩解緊張反而倒是增加了我的緊張程度，然后在一間小房間里坐著面對面提問這樣，不過后來一直回答一直回答就放松了許多，然后面完人事姐姐說兩三天會通知結果，個人感覺整個面試程序回答得還是不是很好，有點磕磕巴巴的，某一個知識點面試官一旦深入我就招架不住了，在走回地鐵站的路上心想基本無望了，金三銀四，我這都快四月中旬了，還沒找到實習作業，實在面不過開發崗，我都準備去面測驗崗了，很怕找不到實習作業，身邊很多同學都開始實習一個月了，很慌，加上論文畢設還在做，，，
在面試完的第二天下午，我當時還在校門口考核站崗，站崗期間我一直在想軟體測驗的知識和那幾個基礎演算法題，因為感覺昨天面試沒什么戲，準備打算去面后端或者測驗崗了，站崗程序中，有人打了兩個電話，我都沒接到，因為站崗不讓碰手機，我看到未接的電話記錄，這不是我面試的那家公司嗎？！然后以期待和忐忑的狀態回撥了過去，你好，請問打電話有什么事嗎？“您好，請問是XXX嗎，通過昨天線下的面試了解到您的基礎還是比較扎實什么什么還是比較優秀的”，然后說是要給我發offer，我頓了一會兒才反應過來，著實有點淚流滿面了，想想這一個月拿著簡歷大熱天到處跑，熬夜準備面試題，可以說是在徘徊中焦慮在焦慮中恐慌，不過這一切都是值得的，自己要學的東西還有很多很多，
搜索
復制
4、父子組件的通信是通過什么傳遞的？?
父傳子：自定義屬性props
子傳父：自定義事件$emit(）
5、Vue中是怎樣阻止事件冒泡的？為什么會產生事件冒泡？?×
vue中阻止點擊事件冒泡，在需要阻止的標簽中設定屬性 @click.stop，
因為DOM結構中，父元素和子元素之間存在著層次關系，當底層事件被觸發，就會向上冒泡，直到最上層，這幾層的元素都會被觸發，但實際開發當中，并不希望出現這種情況，就好比一個div盒子里面放了一個button按鈕，一旦button被點擊，button和div都會觸發點擊監聽事件，
6、watch、computed函式有了解嗎？具體怎么使用?×
watch監聽函式：監聽單個函式，或者單個物件的資料變化（這個當時我在刷vue的教學視頻的時候只練了一次，印象很淺，）
————————————————
著作權宣告：本文為CSDN博主「RootkitaI」的原創文章，遵循CC 4.0 BY-SA著作權協議，轉載請附上原文出處鏈接及本宣告，
原文鏈接：https://blog.csdn.net/weixin_43906233/article/details/124105240
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/458136.html
標籤：JavaScript
上一篇：Node.js基礎入門第八天