2020年秋招前端面試題

位元組（商業變現）一面

1. 說說flex佈局、以及以下屬性flex-shrink/flex-grow/align-items

2. 說說陣列有哪些方法，然後問了一道reduce方法的題
   [‘x’, ‘v’, ‘sss’] => { x: true, v: true, … }把左邊的陣列變成右邊物件的形式

3. 用new的形式建立的物件和直接呼叫方法的形式有啥區別

   function Person(name){
       this.name = name;
       return {  }
   }
   const a = new Person('xxx')
   a.name = 'xxx' // 
   

4. 箭頭函式與普通函式的區別，箭頭函式可不可以用call/apply

5. xss和csrf和httpOnly

6. 說一下原型，怎麼表示例項物件a的constructor

   	prototype  __proto__
   	a.constructor
   

7. 用原型的方式實現下面的class，使得它可以用new建立並可以呼叫裡面的方法

   class Animal {
     constructor(name) {
       this.name = name;
     }
     
     static time = '週日'
     
     saySth (sth) {
       console.log(` ${Animal.time} ${this.name} say  ${sth}`);
     }
   }
   const aCat = new Animal('kitty');
   aCat.saySth('hello');
   

8. 下面輸出什麼（考察let/var的區別）

   	for (let i = 0; i < 5; i++) { 
   	    setTimeout(function() {
   	        console.log(i)
   	    }, 1000 * i);
   	}
   	// let 時正常輸出0,1,2,3,4。var時輸出的5個都是4	
   

9. 用js實現一個sum函式

   	// sum() // 0
   	// sum(1,2,3)(4)()  // 10
   	// sum(1)(2)(2)(2)(3)() // 10
   

10. 括號匹配

    	// 輸入字串的每個字元屬於'()[]{}'中的一種
    	// isBracketsValid(str) => 
    	
    	console.log(isBracketsValid('([])')); // true
    	console.log(isBracketsValid('([)]')); // false
    	console.log(isBracketsValid('({}{}[][()])')); // true
    	console.log(isBracketsValid('(((())))')); // true
    

位元組（商業變現）二面

1. 程式和執行緒的概念
2. 從瀏覽器輸入URL到顯示網頁會用到哪些協議
3. http/https的區別；ssl加密過程;udp和tcp的區別
4. 常見的網路攻擊以及其防禦方法
5. 實現響應式的方法以及原理
   rem、 媒體查詢、 flex、viewport
6. rem實現響應式的原理
7. 用過哪些瀏覽器，瀏這些覽器的核心是啥，不同的核心有啥區別
8. 實現 Promise.all 方法，寫不出來的話講講思路
9. 用 Javascript 構造一個迴圈佇列，使得可以這樣呼叫

   const loopQueue = new LoopQueue(['Surmon'])
   loopQueue.enqueue('SkyRover')
   loopQueue.enqueue('Evan')
   loopQueue.enqueue('Alice')
   console.log(loopQueue.size, loopQueue.isEmpty) // 4 false
   console.log(loopQueue.find(26)) // 'Evan'
   console.log(loopQueue.find(87651)) // 'Alice'
   

10. 最近有什麼學習計劃

騰訊（CSIG金融雲）一面

1. 實現一個防抖函式
2. Async await與Promise、定時器的輸出問題,具體不記得了，類似下面

      setTimeout(()=>{
   	      console.log('settimeout');
   	    }, 0)
   	    let promise = new Promise((resolve, reject) => {
   	      console.log('promise');
   	      resolve('resolve')
   	    })
   	    promise.then((value)=> console.log(value))
   	    console.log('script start');
   	//    順序：
   	//    promise
   	//    script start
   	//    resolve
   	//    settimeout
   

3. 實現深拷貝
4. ES5實現promise
5. 以下程式碼有什麼不好的地方？優化？

   function x(url){
   	Let img = new Image()
   	img.src = url
   }
   

6. 不借助sort實現陣列排序(以obj.age為排序依據)
7. 講講專案遇到的難點
8. 講講上面2/6題的解題思路
9. 箭頭函式和普通函式的區別
10. Es6定義常量的方式是什麼？用es5怎麼實現const

雲從科技一面

1. 寫一個vue元件，主要考察元件開發的流程，中間還問了
   （1）key的作用，key=index會不會有問題。
   （2)生命週期，我最常用的是created和mounted，問：這兩個的區別
2. 寫一下es6新特性
   let const
   […a]
   Set Map
   Promise
   class
   module
   陣列新增的方法Array.from
   async await generate
   箭頭函式
3. 箭頭函式與普通函式的區別
   this指向、arguments、箭頭函式不能通過bind/call/apply改變this的指向、箭頭函式不能作為建構函式不，能用new建立例項……箭頭函式沒有原型屬性、箭頭函式不能當做Generator函式,不能使用yield關鍵字
4. 陣列方法還有哪些
   push
   pop
   shift unshift
   splice slice
   forEach
   map
   filter
   indexOf lastIndexOf
   includes
   reduce
5. 寫一下常見狀態碼
   200 成功返回
   304 協商快取，強快取（這兩個是面試官說的）沒改變，不返回新的資料
   404 找不到資源
   401 授權問題，session過期
   500 伺服器端報錯
   501 503 伺服器過載
6. 協商快取和強快取的區別
7. 反問環節， 公司現在主要用vue，後面可能用react。小程式、移動端、PC端都有涉及。

雲從科技二面

1. 自我介紹和專案介紹
2. vuex的工作機制
3. vuex裡面的一個資料發生了變化（dispatch了），怎麼檢測到這個資料發生了變化？
   我答：先用mapGetters獲取這個資料，然後用watch監聽
4. vue mixin
5. vue 的 is屬性
6. sass mixin怎麼用的
7. 還用過sass的哪些功能？extend,變數，function
8. 在webpack裡面怎麼去處理sass？sass-loader
9. 還用過哪些loader？style-loader, css-loader
10. 用過哪些es6語法？
11. 你在什麼場景下會用到Set? 我答：陣列去重
12. 如果陣列裡有複雜型別的元素，可以去重嗎？
13. 為什麼從實習的公司離職？
14. 反問環節。

雲從科技三面（hr面）

1. hr面試的常見問題。

浩鯨雲端計算一面

1. 自我介紹
2. 對大學課程的理解
3. 這道筆試題的答案？原因？

   	for(var I = 0; I < 10; i++){
   		settimeout(function(){
   			console.log(i);
   		}, 0)
   	}
   

4. 箭頭函式。上面那題的function裡面的this指向誰？ window
5. 可以用什麼方式改變this？
6. bind可以再次繫結嗎？我答可以，叫我自己驗證一下。

   function func1(){}
   let func2 = func1.bind('a');
   let func3 = func2.bind('b');
   

   答案是不可以。
   上面是面試官寫的例子，說bind裡面的引數不一定要物件的，字串也可以。
7. cookie是怎麼從客戶端傳送給伺服器的，伺服器又是怎麼傳送給客戶端的？
8. 用過什麼版本控制工具？
9. 你實習做的專案後端是用什麼寫的？
10. 你現在還可以運算元據庫嗎？
11. 如果聯調的時候介面不對，你會怎麼做？是直接告訴後端同事嗎？
12. 如果介面需要調整，要你自己去改後端程式碼，能不能做到？
13. 反問環節。

浩鯨雲端計算二面

1. 問專案、怎麼學習、規劃等等

金山雲一面

1. 怎麼學習前端的
2. 箭頭函式的特點，作用
3. 用canvas繪製一個按鈕
4. css3新增的選擇器
5. HTML5狀態碼
6. 跨域解決方案
7. vue元件生命週期，獲取dom元素在哪個週期，怎麼獲取
8. 前端的難點
9. 未來1-3年的技術規劃

金山雲二面

1. 聊專案、規劃、學習路線等等

58同城一面

1. 自我介紹
2. 專案介紹
3. vue元件通訊
4. Vuex的工作機制
5. vue-router雜湊模式的原理
6. 空間複雜度為O(1)的前提下實現翻轉： www.58.com -> com.58.www
7. css自適應的兩欄
8. 行末怎麼顯示省略號
9. 適配方案
10. 想問webpack，我說了解不深
11. 想問canvas，我說了解不深

58同城二面

1. 問專案、學習路線、職業規劃等等

58同城三面（hr面）

1. hr面試的常規問題

金山辦公一面

1. 自我介紹
2. css盒子模型，如果要變為標準模型怎麼寫：box-sizing: content-box;
3. 垂直居中的方法
4. js都用過哪些
5. let, const, var的區別
6. 箭頭函式和普通函式的區別
7. 普通函式的this指向除了指向它的呼叫者，還有哪些？new， call, apply,
8. 用過哪些es6語法
9. vue生命週期
10. 父元件裡面有一個子元件，它們的生命週期順序是怎樣的？父元件從開始到beforeMount -> 子元件從開始到mounted ->父元件mounted
11. 元件通訊
12. $attrs和$lisener的一個具體問題（元件通訊的方法裡有一種就是用$attrs和$lisener）
13. 你是有用過provide和inject嗎（元件通訊的方法裡有一種就是用provide和inject）
14. computed和watch的區別
15. 如果一建立元件就要執行watch裡面的程式碼，應該用watch的哪個屬性？（官網文件有）
16. 專案上寫了用axios封裝網路請求，怎麼封裝的？
17. axios 攔截器用過嗎？
18. 有沒有用webpack自己構建過專案
19. 現在在哪
20. 反問環節。

CVTE一面

1. 自我介紹，專案中印象比較深的
2. http常見狀態碼，你提到的304，使用快取的步驟？
3. CSRF體現以及防禦辦法。
4. 跨域問題的解決方案？
5. JSONP的原理？
6. 用了哪些Es6語法？
7. 怎麼實現深拷貝？我說了兩個方法，問：用JSON的方法有什麼缺點？
8. Array裡哪些方法是會改變原陣列的？
9. 把array A和array B裡的元素不重複的放進C裡，有好幾種方法
10. 原型繼承是怎樣的？怎麼讓B繼承於A？用了prototype以後需要做些什麼？我答了重置constructor,面試官說還要繫結作用域，
11. bind/call/apply的區別？
12. 怎麼使用js測試CPU的壓力？用setTimeout/setInterval來測試實際等待輸出的時間與理論上所需的時間做對比，看是否有偏差
13. 閉包的優缺點？講到記憶體回收，說一下js的記憶體回收的機制？
14. 反問環節。

CVTE二面

1. 專案中印象比較深的點，你說到的快取問題，為什麼會出現這個bug
2. 怎麼去提升頁面的速度？我說到精靈圖，他問用精靈圖有什麼缺點
3. 有很多個網路請求，後一個的開始依賴於前一個的返回值，怎麼實現
4. 函式防抖的實現，這裡它一直叫我修改到最精簡的版本，中間出現過bug還問我哪裡有沒有問題
5. vue3.0的變化，我答了雙向資料繫結的原理變了，他問為什麼用proxy，它有啥優點
6. 邏輯題：燒繩子
   
7. 怎麼學習前端的，看什麼書，關注什麼部落格，側重於哪方面？
8. 你對前端的哪個領域更感興趣（移動端，pc端，程式端），答：移動端，問：為甚麼
9. 最近關注過前端什麼新技術，我答了es2020,他問es2020哪些語法

玄武科技一面

1. 專案難點
2. 作用域鏈
3. 原型問題
4. Css盒子在怪異模式和標準模式的區別

玄武科技二面

1. vue雙向資料繫結的原理
2. js的事件模型
3. salesforce的理解
4. 前端開發的必備素質

玄武科技hr面

1. 自我介紹
2. 父母在哪裡工作，家在哪
3. 首選工作城市，家人同意嗎
4. 作為技術崗，我作為女生的優勢
5. 有沒有同時在考公務員或者教師
6. 為什麼選擇了前端？不考慮測試或者後臺