前端工程師自檢清單

知識體系來源於一名【合格】前端工程師的自檢清單

 

winter在他的《重學前端》課程中提到:

到現在爲止,前端工程師已經成爲研發體系中的重要崗位之一。可是,與此相對的是,我發現極少或者幾乎沒有大學的計算機專業願意開設前端課程,更沒有系統性的教學方案出現。大部分前端工程師的知識,其實都是來自於實踐和工作中零散的學習。


 

一.JavaScript基礎

變量和類型

  • Javascript規定了幾種語言類型

七種內置類型null,undefined,string,number,boolean,object,symbol

undefined:1.undefined類型表示爲定義,它的值只有一個undefined

                     2.任何變量賦值前都是undefined類型,值爲undefined

                     3.undefined是一個變量不是關鍵字

null:1.只有一個值就是null    2.表示空值是關鍵字,可用null關鍵字獲取null

string:1.string的意義並非字符串,而是字符串UTF16編碼

              2.字符串是永遠無法變更的

number:1.number類型有264- 253+3 個值。

                 2.根據雙精度浮點數定義,有效的整數範圍是 -0x1fffffffffffff 至 0x1fffffffffffff,無法精確表示此範圍外的整數。

                 3.根據雙精度浮點數定義,非整數的Number類型無法用==來比較(三個等號也不行),正確的比較方法是用           JavaScript提供的最小精度值:

console.log( 0.1 + 0.2 == 0.3);//false
//正確的比較方法
console.log( Math.abs(0.1 + 0.2 - 0.3) <= Number.EPSILON);//true

 symbol:1.表示獨一無二的值,它是一切非字符串的對象key的集合

                 2.Symbol 值通過Symbol函數生成。這就是說,對象的屬性名現在可以有兩種類型

object:object是js中最複雜的類型。也是js的核心機制之一,object是對象,在js中,對象的定義是“屬性的集合”,屬性分爲數據屬性和訪問器屬性,二者都是key-value的結構,key可以是字符串或者symbol類型

 

除了七種語言類型,還有規範類型 :

1.list和record:用於描述函數傳參的過程

2.set:主要用於解釋字符集等

3.completion record:用於描述異常、跳出等語句執行過程

4.reference:用於描述對象屬性訪問、delete等

5.property descriptor:用於描述對象的屬性

6.lexical environment和environment record:用於描述變量和作用域

7.data block:用於描述二進制數據

 

  • Javascript對象的底層數據結構是什麼

  什麼是數據結構?百度百科:數據結構是計算機存儲、組織數據的方式。數據結構是指相互之間存在一種或多種特定關係的數據元素的集合。精心選擇的數據結構可帶來更高運行或者存儲效率。

  其實就是數據的事,結構組織。不再關注數據,而是關注組織數據,數據就事一堆書本,怎麼擺放合適

常用的數據結構:1.棧和隊列  2.單向鏈接列表和雙重鏈接列表  3.樹(深度優先搜索和廣度優先搜索)

是動態分配內存,內存大小不一,也不會自動釋放

是自動分配相對固定大小的內存空間,並由系統自動釋放,棧現金後出,隊列後勁先出

  JS基本類型數據都是直按值存儲在棧中的(undefined、null、不是new出來的布爾,數字,字符串),每種類型的數據佔用的內存空間大小是確定的,更容易管理內存空間

  JS引用類型數據存儲於堆中(如對象,數據,函數等),引用類型的數據的地址指針是存儲於棧中的,當我們想要訪問引用類型的值的時候,需要先從棧中獲得對象的地址指針,然後,在通過地址指針找到堆中的所需要的數據

數據在內存中的存儲結構分爲兩種:

順序存儲結構:吧數據元素存放在地址連續的存儲單元裏比如數組

鏈式存儲結構:把數據元素存放在內次年任意的存儲單元內比如鏈表

JavaScript的數據結構,ES5中自帶的array、object,ES6自帶的set、map、weakset、weakmap

在JavaScript中不管多複雜的數據,都可以組織成object形式的對象。對象大多表現爲Dictionary如{a: foo,b :bar}

 

  • Symbol類型在實際開發中的應用、可手動實現一個簡單的Symbol

  • JavaScript中的變量在內存中的具體存儲形式

  • 基本類型對應的內置對象,以及他們之間的裝箱拆箱操作

裝箱轉換:基本類型 -> 對象

                  1.每一種基本類型,都在對象中有對應的類,裝箱機制會頻繁產生臨時對象

                  2.使用object函數可以顯示調用裝箱能力

                  3.每一類裝箱對象皆有私有的 Class 屬性,這些屬性可以Object.prototype.toString 獲取。在 JavaScript 中,沒有任何方法可以更改私有的Class 屬性,因此 Object.prototype.toString 是可以準確識別對象對應的基本類型的方法,它比 instanceof 更加準確。

                  4.call函數本身會產生裝箱操作,需要配合typeof來區分基本類型還是對象類型。

拆箱轉換:對象 -> 基本類型

                  1.ToPrimitive 函數,它是對象類型到基本類型的轉換

                  2.拆箱轉換會嘗試調用 valueOf 和 toString 來獲得拆箱後的基本類型。如果valueOf 和 toString都不存在,或者沒有返回基本類型,則會產生TypeError。

 

  • 理解值類型和引用類型

  • nullundefined的區別

  • 至少可以說出三種判斷JavaScript數據類型的方式,以及他們的優缺點,如何準確的判斷數組類型

  • 可能發生隱式類型轉換的場景以及轉換原則,應如何避免或巧妙應用

  • 出現小數精度丟失的原因,JavaScript可以存儲的最大數字、最大安全數字,JavaScript處理大數字的方法、避免精度丟失的方法。

 

 

 

 

 

 

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章