我遇到的前端面試題總結（2018）

來到新公司上班已經快一個月的時間，趁着空閒時間把本身這段時間的面試題進行一波總結，避免再次踩坑，有些問題仍是須要本身去查一下，有時間的話會把答案補全

1.  關於模塊化的理解，AMD、CMD規範
   • AMD、CMD規範其實就是require.js、sea.js在推廣過程當中對模塊規範化的產出
   • 模塊化就是將一個大文件拆分紅相互依賴的小文件，再進行統一的拼裝和加載。只有這樣，纔有多人協做的可能
2.  響應式佈局的原理
   • 響應式佈局就是根據不一樣的屏幕大小設置不一樣的樣式
   • Media Queries（媒體查詢） 是響應式設計的核心
3.  Redux的原則
   • 單一數據源
   • 數據是隻讀的
   • state的更改只能由純函數修改
4.  怎麼經過路由對不一樣帳號進行權限管理
   • 這個其實就是帳號權限的問題，通常後臺系統會用這個，路由鑑權的問題，通常須要後臺同窗配合
5.  重繪和迴流
   • 重繪：只改變dom樣式會觸發重繪 如 color
   • 迴流：改變dom的佈局 如padding
   • 迴流確定會觸發重繪，重繪不必定會觸發迴流 
6.  詞法做用域，爲何叫詞法做用域
   • 詞法做用域又叫靜態做用域，是在詞法解析階段已經肯定了一個變量的做用域
7.  promise 和 async關係
   • async是Generator的語法糖，返回一個promise對象
8.  ajax攔截全局請求
9.  ajax與fetch的關係與區別
   • ajax的實質是 XMLHttpRequest
10.  react生命週期
    • 實例化：
      1. getDefaultProps
      2. getInitialState
      3. componentWillMount
      4. render
      5. componentDidMount
    • 存在期
    1. componentWillReceiveProps
    2. shouldComponentUpdate
       
    3. componentWillUpdate
       
    4. render
       
    5. componentDidUpdate
    • 銷燬
      1. componentWillUnmount
11.  數組解構賦值
    • 這個就是考察對 es6 是否熟悉
12.  react-redux的connect方法實質，接收的參數
13.  js基本數據類型
    • null
    • undefined
    • number
    • boolean
    • string
    • object
    • symbol
14.  redux怎麼管理數據，有什麼好處？
15.  什麼是跨域，（引伸：解決跨域的方法）
    • 前端常見跨域解決方案（全）
16.  koa中間件的原理，能夠引伸到redux的中間件
17.  setTimeout(func,100)會在100毫秒之後執行嗎？
    • 涉及到js單線程問題
18.  變量提高，var、let、const
    • 做用域塊
19.  symbol的做用，與應用
    • 保證每一個屬性的名字都是獨一無二的，從根本上防止屬性名的衝突
20.  數組經常使用的方法
21.  對於工程化、模塊化、組件化、先後端分離的理解
    • 前端工程化主要應該從模塊化、組件化、規範化、自動化四個方面來思考，下面一一展開
    • 模塊化就是將一個大文件拆分紅相互依賴的小文件，再進行統一的拼裝和加載。只有這樣，纔有多人協做的可能
    • 從UI拆分下來的每一個包含模板(HTML)+樣式(CSS)+邏輯(JS)功能完備的結構單元，咱們稱之爲組件。
22.  對於前端頁面出現卡頓或者性能問題怎麼調試
23.  前端怎麼監控產生的異常或者怎麼監控性能問題
24.  前端語義化是什麼意思(可能會根據這個問題引伸SEO)
    • 簡單的來講就是用正確的標籤作正確的事情
25.  doctype的做用
26.  class的實質是什麼
27.  new class （對象實例化） 實際發生了什麼
    1. 一個繼承自 class.prototype 的新對象被建立。
    2. 使用指定的參數調用構造函數 Foo ，並將 this 綁定到新建立的對象。new Foo 等同於 new Foo()，也就是沒有指定參數列表，Foo 不帶任何參數調用的狀況。
    3. 由構造函數返回的對象就是 new 表達式的結果。若是構造函數沒有顯式返回一個對象，則使用步驟1建立的對象。（通常狀況下，構造函數不返回值，可是用戶能夠選擇主動返回對象，來覆蓋正常的對象建立步驟）
28.  this在不一樣狀態下的指向（window、class、object、箭頭函數）
29.  React哪些數據不會輸出到頁面
    1. 布爾值
    2. null
    3. undefined
30.  get與post的區別
31.  移動端事件穿透，fastclick以及tab事件
    • 移動端常見問題，fastclick以及tab事件都是爲了解決部分機型 click 事件有300毫秒延遲的問題
32.  移動端手勢相關的庫實現原理
33.  swiper實現原理
34.  ES6新增的數據結構Set，Map以及WeakSet，WeakMap
35.  實現隨機8位驗證碼，生成1000個不重複的驗證碼

    • //生成驗證碼
      function verificationCode(){
          let code = (Math.random()*100000000).toFixed(0)
          //console.log(msg,msg.length))
          //長度不夠8位的補0
          while(msg.length<8){
              code = "0" + code
              console.log(code)
          }
          return code
      }
      function message(){
          //使用對象存放驗證碼
          let codes = {}
          //let arr = []
          let index = 0
          while(index < 1000){
              let code = verificationCode()
              if(!codes[code]){
                  codes[code] = index
                  index++
                  //arr.push(code)
              }
          }
          console.log(codes)
          //console.log(arr.length)
      }

36.  判斷數組是不是一個嚴格遞增的數組
37.  爲何React的setState設計成異步的
    • 提升性能
38.  EventLoop是什麼，任務隊列優先級
    • JavaScript：完全理解同步、異步和事件循環(Event Loop)
39.  let、const轉換成es5的寫法
40.  bind的實現

最後推薦一篇文章前端面試考點多？看這些文章就夠了