web前端面試題記錄

筆者近期在找工作，偶遇到一家，廣州9-14k的web前端面試，面試過程中是由面試官手寫題目，要求現場回答，特此記錄，簡歷上寫的是熟悉vue和小程式，出的題目基本上和vue相關的較多，乘著還有點記憶，趕緊記錄下來

題設1：你知道怎麼在小程式上內嵌網頁嗎，現在有乙個需求，現在小程式頁面上有乙個內嵌網頁，此時點選分享小程式，如何讓網頁知道小程式已經分享成功？

我的回答是只知道小程式可以用webview去實現網頁嵌入小程式，但是在實際專案中沒有使用過相關的運用。

說到webview如何知道小程式已經分享成功，我當時想到的方法比較沙雕，我居然想到在在點選分享按鈕的時候，此時讓網頁傳送websocket請求給服務端監聽是否分享成功，這種方式可行方式能不能行不說，而且還消耗伺服器資源，算是一種比較爛的方法把。

後來問面試官答案，他給我說的解決方法很簡單，說是只要在小程式分享的時候控制頁面的顯示隱藏即可，好吧~

題目2：知道陣列的sort方法嗎？講一講。

回答:知道，arr,sort((a,b)=>return a-b  or b-a    a-b是公升序排列，b-a是降序排列

面試官繼續問，那你知道為什麼a-b是從小到大，b-a是從大到小嗎？

我陷入了沉默。。果然只知道背是沒用的，後來回去查了才知道sort方法是用到氣泡排序，sort方法是先比較第一位數字，第一位相同才比較後一位。

因為sort()函式使用的是氣泡排序，氣泡排序會重複地走訪要排序的數列，一次比較兩個元素，如果他們的順序錯誤就把他們交換過來，一直重複地進行直到說該數列已經排序完成。

如果a-b>0(即正數)就把a和b的位置交換，也就是較小的乙個數會排到前面；

如果b-a>0就把a和b的位置交換，也就是較大的乙個數會排到前面。

感覺這個知道就好，個人理解就是按照字母表順序 a為1，b為2。 從小到大排序，反之則從大到小。

題目3：現在給定乙個陣列，比如arr = [1,2,3,4,5,6,7,8,9,10],怎麼讓陣列重新亂序排列

當時沒回答出來，現在重新整理一下，面試官告訴了我兩種方法

第一種很簡單的方法，新建乙個陣列，然後for迴圈隨機乙個push進去，原陣列再刪除

let newarr =

let len =arr.length
for(var i = 0;i)
console.log(newarr)

var arr = [1,2,3,4,5,6,7,8,9,10];

const newarr = arr.sort(()=>)
console.log(newarr)

我的回答：變數 $xx:xx,@each，用&去巢狀

用map-get去獲取（$color，key）中的value

'面試官告訴我還有@mixin這個東西 特此記錄一下，學的不精，面試的時候都忘記了之前學過這玩意了， @mixin一般和@include一起用

用這個mixin確實可以達到css的復用，特別是flex布局，以後會在專案中運用到這個東西。

題目5:有沒有對element-ui進行二次封裝過，這個問題很高頻，不知道是不是我面試的公司少還是什麼的，我已經遇到三家公司問過同乙個問題了

我的回答是沒有，之前在公司都是直接呼叫介面，如果介面和element提供的屬性不一樣，會去改data，而不會去改element的框架。現在計畫一年內寫乙個自己封裝的元件，vue或者react都行，

後來面試官問我有沒有看過一些ui框架庫的原始碼，我說element-ui和color-ui有看過一點點吧，心虛了。

題目：有對axios庫進行二次封裝嗎？還是直接用？

我當時回答的是用vue.$prototype.$http = axios ，然後再用this.http去get和post，其實也是掛載乙個http而已，根本算不上封裝

後來回家的時候想到當時在做小程式的時候有封裝過多個請求載入loading的，就是在傳送請求的時候ajax++,在請求完成之後ajax--到0，關閉loading

然後回去補了關於axios/fetch請求庫的封裝，這個我在另外一篇部落格axios的二次封裝和api介面規範裡會講到，這裡就不細講了

題目6：vue computed計算屬性的使用，這個也是很高頻。

曾經被問到如果用表單來做所有權重加起來等於100，應該怎麼設計，其實面試官問的是computed計算屬性，後面面試官叫我回去搞一下

大概是這樣子的，可以動態新增刪除，用computed判斷所有inputval加起來等於100時，disabled為false

貼上**：包括每個input的校驗

刪除

新增input框
提交

回答知道一點點,它實現了vue的可復用性，可以全域性設定mixin也可以區域性設定mixin，但是在查詢元件**的時候比較難找

// minix.js

export default 
},mounted() ,
methods: ,
getdata() }}

// todo.vue

import myminix from './minix';
export default 
},mounted() ,
minixs: [myminix], // todo.vue 中宣告minix 進行混合
methods: ,
submit() ,
}

題目8：vue元件屬性透傳

這裡用到了v-bind=「$attrs」  v-on="$listeners"

web前端面試題記錄

1.vue全家桶定義 2.路由怎麼定義使用的 路由的導航前衛有哪幾種 3.http請求get 與post的不同，post請求的引數放到 請求頭的訊息體中 4.vuex有哪個部分組成 action與mutataions有什麼不同 action是怎麼改變state中的值 commit 5.元件中怎麼傳值...

前端面試題記錄 不斷更新

1 當a等於什麼的時候，以下條件成立 let a if a 1 a 2 a 3 let a if a 1 a 2 a 3 或者 let b console.log b 1 b 2 b 3 2 實現深拷貝的方法 兩種以上 let a 1,2,3,4,5,6,7,8,9,10 第一種，使用assign ...

web前端面試題 http協議

1.http全稱 超文字協議傳輸 2.http工作流程 首先客戶機與伺服器需要建立連線。只要單擊某個超級鏈結，http的工作開始。1.收線客戶機與伺服器需要建立連線，只要單擊某個超級連線，http的工作開始 2.建立連線後，客戶機傳送乙個請求給伺服器，請求方式的格式為 統一資源識別符號 url 協議...