前端面試覆盤專題（一）：複習大綱及蛻變計劃

前言

距離上次更新已通過去了很久，在這幾個月裏，雖然沒有更新文章，可是本身也沒有閒着，出去轉了轉各大公司的前端招聘要求，真正的體驗了一把前端的行情和走勢。在經歷了這些以後，我開始從新修正本身的學習方向，完善本身的知識架構體系和學習方法，我會將我知道的和經歷的傾囊相授，之因此寫這些，不是要標榜本身有多厲害，只是想把本身踩過的坑走過的彎路分享出來，幫助真正熱愛前端的同窗站在咱們前人的肩膀上跨越技術障礙，留足精力去探索前端更有趣、本身真正喜歡的東西，同時也是對本身在這幾個月的一個交代；在文章的末尾，我會發起一個「前端蛻變計劃」，具體的信息我會在文章最後說明，歡迎熱愛前端的小夥伴一塊兒加入。

專題介紹

首先，專題是覆盤系列，我會根據本身目前親身接觸的比較中肯的形式來定總體體系，對於比較極端和小衆的形式，我也會順手提到，防止意外踩坑。整個專題系列耗時會比較長，文章也會比較多，我會根據先歸納再細節的方式逐級展開。

根據面試輪次，按照技術層次分，順利的話，會分爲5輪，這5輪分別是層級遞進的，各輪考察內容主要以下：

graph TD
第一輪:前端基礎知識掌握狀況及實際編程能力

graph TD
第二輪:項目開發能力及發現和解決實際問題能力

graph TD
第三輪:技術架構原理和JavaScript設計模式以及數據結構算法

graph TD
第四輪:自我職業規劃和對行業新技術瞭解以及將來發展的的認知

graph TD
第五輪:你指望的工做方式和你是如何肯定本身指望薪資標準的

以上的面試層次是中大型公司的流程，你們能夠參照5輪面試的主體結構來構建本身的知識體系，針對性的複習，另外由於涉及到的知識很是的普遍，更新時間會很是的長，若是等不及，能夠私聊我進行討論。在每一個專題我會只列出幾道題，可是在給出解答思路的時候會進行外延拓展，仍是那句話，答案不重要，涵蓋的知識如何串起來，讓面試官真正認識到你是真的懂，這纔是關鍵。

本文專題

面試輪次：第一輪

考察能力：前端基礎知識掌握狀況及實際編程能力

主體知識：JS基礎----堆棧內存閉包做用域

題目：

一、parseInt()和Number()有什麼區別？

二、var 和 const的區別？

三、如何實現一個函數add使得：add(1)(4,5,6)(7,8)(10) 輸出 41 ？

四、說說ES6裏面對數字類型的加強特性有哪些？
複製代碼

題目解答思路

題目一 parseInt()和Number()有什麼區別？

考查知識: JS數據類型、爲何會有隱式轉換

主體思路：先答這兩個API的做用是什麼，再說具體哪不一樣（入參，過程，結果），再說爲何會出現這種緣由；

示例答案：parseInt和Number都是兩個用於將入參轉爲數字的方法。parseInt是將入參轉化爲指定進制的整數，而Number是將傳入的參數轉換成數字類型的值，二者在容許接收的參數個數上不一樣，同時在轉換結果上也可能不一樣，這是第一點區別；第二點區別在於轉換過程當中，parseInt會盡量的將傳入的參數轉爲數字，直到遇到不能轉換爲數字的字符，而Number會在轉換前對入參進行掃描，只要含有不能轉換成數字的字符，所有返回NaN;第三點在於，對於特殊類型的處理，對於null和undefined,parseInt均會返回NaN, 而Number返回0和NaN;

題目二 var 和 const 有什麼區別？

考查知識: JS定義變量的方法，以及爲何要新增定義變量的方式

主體思路：先答這兩個API的做用是什麼，再說具體哪不一樣，再說爲何會出現這種緣由；

示例答案：var和const都是聲明變量的方式，而他們之間的區別，主要在如下幾個方面：

1）兼容性和語法支持；var是JS最先聲明變量的方式，只要支持JS，都支持var聲明變量的方式，而const是ES6新加入的語法，在部分不支持的環境中須要使用工具轉換成var的寫法；
  
  2）變量提高的區別；var聲明的變量會存在着變量提高的特性，也就意味着在變量正式被賦值以前均可以被讀取，而const聲明的變量不具有變量提高的做用；
  
  3）與全局對象的關係；在全局環境中，使用var申明的變量，既是一個全局的變量同時仍是全局對象window的一個屬性，而使用const聲明的變量僅僅是一個變量；
  
  4）重複聲明；使用var聲明的變量，容許在相同的環境中再次聲明一個同名變量，而使用const聲明的變量，不容許再次聲明同名變量；
  
  5）暫時性死區；const具備暫時性死區的特性，在變量被聲明賦值以前，訪問變量會出現報錯的問題，這是ES6爲嚴格語法規則加入的特性，保證了變量在聲明以後纔可讀取；
  
  6）與塊級做用域的關係；const和let的出現很大的一個緣由是由於在ES6中除了之前的全局做用域和函數做用域，新增了塊級做用域的概念，而const的有效範圍其實就是塊級做用域，再一次細分了做用域的維度大小；
  
  7）爲何會出現const呢？
  ES規範的出現是爲了改變JS自己存在的問題，使其可以安全穩定的在較大的綜合項目中穩定運行，所以對於一些影響因素從新添加新的語法規則得以改善，同時又保持原有語法正常支持；
複製代碼

題目三： 如何實現一個函數連續相加函數add，使得：add(1)(4,5,6)(7,8)(10) 輸出 41 ？

主體思路：根據題目信息，每一次add執行完成後還能夠再次執行，意味着add執行完成後返回的是一個函數，而這個函數能夠將全部傳入的參數進行累加，因此，問題就變成了：

1）如何記錄下每一次傳入的參數；

2）如何在執行後依然返回一個函數，而且還能實現累加；

3）若是返回的是一個函數，如何能實如今訪問執行結果的時候返回一個數字？

要解決參數記錄，最容易想到的就是設置一個全局變量，將每次傳入的參數都記下來，而後再求和；這是最容易想到的一個方法，可是這個方法有個弊端，那就是在同一個命名空間，分別執行兩次相同參數的函數，獲得的結果徹底不一致，並且，後一次執行的結果是前一次結果的兩倍，緣由就在於雖然實現了記下每一次的參數，可是理想的情況是：當我從新執行的時候，我但願的結果是初始值，而不是被上次執行結果污染的；寫成代碼就是：

add(1)(4,5,6) // 16 add(1)(4,5,6) // 32

而我須要的是： add(1)(4,5,6) // 16

add(1)(4,5,6) // 16

因此，使用全局變量去解決參數記錄問題是存在問題，那麼就得另外想辦法；那能解決這個問題的另外一個辦法就是閉包，閉包可以實現咱們在外部訪問函數內部的變量，理論上保存變量的問題是解決了；那麼第二個問題是執行結果是一個函數，在閉包裏這也不是問題，由於閉包在大多數狀況下最明顯的特徵就是返回一個被外部佔用的變量，這點也知足要求。

因此根據上述思路，僞代碼能夠寫成這樣:

function add(arg){
    
    arg = oldArg + arg;  // 參數合併，而且首次執行參數是初始值

    return function(arg){  // 返回一個函數，將合併後參數繼續傳入
     // ……
     
    }
}

複製代碼

如今還存在最後一個問題，如何在訪問的時候可以返回一個數字？根據前面的思路，函數執行後會返回一個函數，而函數是個引用類型的值，對於引用類型的值，當訪問值時，實際上訪問的是引用類型中[Symbol.toPrimittive]、valueOf、toString去獲取引用類型的原始值，因此咱們只須要選取其中一個重寫其方法就能夠了。如今問題基本都理清了，按照思路，直接寫出答案：

function add(...arg){

  function proxy(...innerArg){

    arg = [...arg,...innerArg];

    return proxy
  }

  proxy.toString = function(){

    return arg.reduce(function(total, item){return total + item}, 0)
  }

  return proxy
}
複製代碼

須要注意的是，這裏的proxy並非那個Proxy函數，若是以爲繞的話，能夠換成其餘名字都行。

題目四： 說說ES6裏面對數字類型的加強特性有哪些？

主體思路:

限定很明確，是對數字類型，所以儘量的詳盡一點歸納總結新特性，既考察你對ES6的瞭解程度，又考察總結臨時歸納能力。

參考答案：

ES6對數字類型能力支持主要出於兩方面的考慮，一個是改善既有的缺陷，再有就是提供能力加強；

先說缺陷彌補：

1）增長Object.is()方法彌補等價判斷缺陷；
       在以往 +0 === -0 結果是true, 可是有時候咱們但願的是隻要是徹底同樣，結果就返回true,
       但凡是有差別，結果就返回false, 但事實並不是如,江湖上一直流傳着如下代碼：
複製代碼

+0 === -0  // true
           
  NaN === NaN  // false
複製代碼

這種狀況讓人非常頭疼，在特定業務下，不得不本身寫工具函數去判斷是否真的一致，ES6爲了彌補這一問題，新增了Object.is(a,b)方法，目的就是要解決這種判斷不一致問題，再來看看彌補以後的結果：

Object.is(+0, -0) // false

Object.is(NaN,NaN)  // true
複製代碼

這纔是符合咱們認知的等價。

2）增長Number.EPSILON,能夠用來判斷兩數相等

JS對數字的表示不區分整型和浮點型，統統都用雙精度64位浮點型表示，這就致使在轉換一些數字時，沒辦法徹底準確的用二進制表示，因此纔會出現經典的0.1 + 0.2 !== 0.3 問題，在設計交易金額時，處理精度很是的老火，要麼本身寫處理函數作先放大後縮小，要麼採用第三方工具，總之就是戰戰兢兢；ES6新增Number.EPSILON，他的值時2的-52次方，咱們能夠借用該值極小的特性，認爲只要兩個數之間的差值小於該值，就能夠認爲兩數相等，雖然依然沒法一步到位省去比較過程，可是能夠簡化咱們的比較邏輯，封裝以後掛載全局仍是很好用的

再說能力加強：

1）bigInt bigInt要解決的問題是超出最大安全數和小於最小安全數以後，數據會失真的問題，雖然咱們可使用字符串的形式表示，卻沒法依靠字符串作數字運算，還得實時防着後端給的數字會超出範圍，在計算的時候也須要藉助後端能力，bigInt可以實現數據不失真表示，還能進行運算，可謂是一大福音；

2）最大安全數和最小安全數 準確的說叫最大安全整數和最小安全整數，表示爲：Number.MAX_SAFE_INTEGER 和Number.MIN_SAFE_INTEGER，對應數值分別爲2^53 和 2^(-53),超出該範圍的值會失真，實際項目中，能夠藉此作安全性判斷，結合bigInt綜合應用；

前端蛻變計劃

什麼是前端蛻變計劃？

前端蛻變計劃是一項面向熱愛並致力於努力提高自個人前端開發者的公開的學習提高計劃。

計劃要解決什麼問題？

前端蛻變計劃要解決的問題主要是：有想法可是沒毅力堅持、有毅力可是方法收效甚微和有想法可是不知道從哪入手的前端學習者的困惑。

參與後我能獲得什麼？

思惟習慣：

持續學習習慣： 有沒有思考過一個問題：爲何到如今，即便是初入前端，依然能拿到很高的工資？緣由就在於，雖然前端是一個須要積累的職業，可是迭代速度很是的快，十年前你須要懂IE兼容的辦法，可是如今呢，你只要學了原生JS和vue/react,你就能拿到滿意的offer,快速發展帶來的不只僅是學習成本的增長，同時也意味着再任什麼時候候，只要你掌握了當前比較熱門的技術，你就能從前端分到一杯羹，而後在工做中再去彌補本身的基礎知識，這對於新人很是友好，可是對於老前端，卻須要持續的學習，才能在技術上想必新手有比較大的職業優點，畢竟新手對於薪資和加班要求都沒那麼高。

自我驅動： 人都是有惰性的，不多有人能堅持長時間的去作一件事，除了學習，外界的一切都具備吸引力，因此這個計劃要達到的目標其中一個就是要實現自我意識覺醒，找到舒服的學習方式，從而實現本身主動去學習，前期咱們會按期推送題目，提醒學習，漸漸的養成習慣，實現自我主動學習，遇到難題了再回過頭來交流。

記答案!==會了： 前端知識有不少知識是沒有權威講解爲何是這樣的參考資料的，對於一些反人類的知識點，即便想問爲何，也不要知道找誰問，慢慢的，對於一些題記住了答案，殊不知道原理，因此，計劃要解決的問題就是讓你想問爲何的時候，有人會，而且還能給出詳細的分析，理解後再記憶，這樣的記憶纔有意義。

持續總結： 前端知識雜而多，而且要想掌握深入，不是那麼容易的，另外，在不一樣的階段，你對同一個知識點的理解角度和深度也會不同，你須要記住那些面試愛問而實際工做中又碰不到的知識點，同時也能

學習方法：

項目驅動自我能力： 一直把作項目當作是自我學習以外的事情，直到有一天遇到了一個只從實際項目中獲取知識的高手，我才意識到本身的想法存在誤區，我要說的是，想辦法從實際工做項目中汲取養分，若是以爲汲取不到，那必定是方法出現了問題，想辦法去請教熟悉這種學習方法的人，從他們那取經，同時，工做以外的自我擴展也不能放下，畢竟工做中用到的知識不等於實際面試中考察的知識，因此，儘量的二者兼顧。

構建知識樹： 我遇到的比較厲害的高手，都是有本身的知識架構樹，必定不要嫌棄構建知識樹耗時還耗力，他能具象化你的知識體系，讓你真正的從紙面上看到本身會哪些，哪些知識仍是空白的，同時也讓你再次從零複習時快速創建知識體系。

專題興趣組： 找到志同道合的人，針對某個專題，聽聽他們怎麼理解，不要老是悶在本身的世界裏，思想的碰撞纔會激發出更多的學習樂趣；小組的人不須要太多，3-8人足矣，要保持足夠的好學態度，互相鼓勵，共同探討。

刷題： 這個技巧相信大多數同窗都用過，以戰養戰，若是刷題方法得當，可以實現短時間內在編程能力實戰上有比較大的提高，可是必定要得當，如何才能去評估方法是否得當呢？有個比較簡單的辦法，作一道題目，一個星期後你還會寫，而且保證下次碰到相同類型的題目可以有思路，那麼你就真的掌握了刷題技巧，反之，你該思考究竟是哪一個環節出現了問題，不要毫無目的的亂刷題，背題目是無論用的，背了忘，忘了背，既沒有效果，還爲難了本身。

心態：

放下焦慮： 前端發展太迅速了，以致於你們把握不許前端在此時此刻的行情，因而乎總有一部分抱有目的的人說前端飽和了，前端涼了等相關謠言，若是你對前端後必定的瞭解，這些話天然不攻自破，壞就壞在這些人對於這個論點給出明確的論據，讓你即便不相信，但心裏依然產生波動，不自主的陷入到職業焦慮中；另外還有一種焦慮是技術焦慮，所謂的技術焦慮就是，技術更新迭代太快，擔憂本身跟不上發展潮流而被淘汰，但實際上，沒有人可以實現駕馭全部新老技術，也不必一味的求新，而對當前已掌握的技術淺嘗輒止，不然就會形成樣樣都知道，樣樣都不熟的狀態，若是你不知道該如何調整，歡迎加入加入中，一塊兒克服焦慮。

學會焦慮： 有的同窗會問，剛剛你不才說了要放心焦慮嗎？這咋還說要學會焦慮呢，這裏我要說的是，對於別人扔給你的無辜焦慮，你應該要學會丟掉，可是本身要有危機意識，由於，你不學習，長期以往，就真的會出現工資倒掛的狀況，你應該要產生內驅，可是這個度，你要把握好，不然要麼着魔，要麼抑鬱。

我如何參與？

我會根據你對技術的熱愛程度，分爲狂熱和熱愛，對於狂熱，我會拆分出小組，一組7-10人，對於熱愛，我會統一合併到一塊兒，人數可能較多，因此你們可能經過微信搜索公衆號【前端進階指南】來參與到計劃中，但願一年後再次想起今天的決定，發自心裏的以爲今天選對了，不拼一把，你怎麼知道本身是人才仍是廢柴。

最後

最後送給你們一段我很喜歡的話：

"The best time to plant a tree was 10 years ago. The second best time is now."

種一棵樹最好的時機是十年前，其次是如今。

我是格局，帶你看有深度的前端世界，搭建適合本身的知識架構，關注我，跑的更快一點。