這個系列是為了可以成為更好的前端工程師,所需要有的 JavaScript 技能,我把這些研究的重點都記錄下來了。
ES6 從推出到現在已經過蠻久了,應用上也很成熟了,在許多 JS 前端或後端框架上都能普遍看到它的身影。將來寫 JS 不管是前端還是後端,ES6 這些新特性真的是必備的技能了,所以事先好好地深入學習是必要的。
這個系列是為了可以成為更好的前端工程師,所需要有的 JavaScript 技能,我把這些研究的重點都記錄下來了。
ES6 從推出到現在已經過蠻久了,應用上也很成熟了,在許多 JS 前端或後端框架上都能普遍看到它的身影。將來寫 JS 不管是前端還是後端,ES6 這些新特性真的是必備的技能了,所以事先好好地深入學習是必要的。
在上一篇 ES6 開發環境建置(上) - Babel 編譯工具 講解 Babel 後,這篇將來介紹 ESLint ,使用 ESLint 偵錯工具來檢查 JavaScript 靜態程式碼的語法和風格,讓我們在編譯前可以減少錯誤產生,還能改善程式碼的品質與統一程式碼風格。
已經寫了好幾篇介紹 ES6 特色的文章,這次就來詳細介紹 JavaScript ES6 的開發環境要如何建立吧!由於文章內容有點長,就分為兩篇來討論,此篇主軸為 Babel,下一篇為 ESLint 的重點使用。
現今各大瀏覽器廠商所開發的 JavaScript 引擎還沒有對 ES6 標準中所有特性做到完美支持,不能直接放入,有些新語法會報錯。所以想使用這些新特性或語法在所有瀏覽器上,需要使用 Babel 編譯器來轉換成舊式的 ES5 標準代碼,才能完全符合環境的支持。
在 JavaScript ES6 標準規範中,其實還有很多的新擴展、新語法、新 API 都很有特色,只是這些就比較不常用了,大部分的功能也都能使用舊方法去實現,至少這些新事物能幫助簡化程序就是一大進步了。
本篇將會簡單地介紹 ES6 其他較實用常見的 API 與擴展,主要知道基本內容就好,並不會深入探討。
ES6 導入了模組系統的支援,它採用了 CommonJS 與 AMD 的優點,在編譯時進行靜態加載,而且可以使用於瀏覽器與伺服器端。概念上是將一個大程序拆分成互相依賴的小文件,需要用到時就拼裝起來使用,這對開發大型或複雜的專案是很重要的。
這是 ES6 中一種新的資料結構,每組資料都有對應的 key 值與 value 值,所以 Map 在意義上類似於物件。
而 key 值的範圍不限於字串,可以是各種類型的值(包括 number、array、object、function、symbol…等等)都可以當作 key,是一種更完善的 Hash 結構實現。
這是 ES6 中一種新的原始資料類型,表示獨一無二的值,Symbol 的值通過Symbol
函數生成,可以保證不會與其他屬性名或數值產生衝突,所以很適合用來代替傳統定義常數內容值的方式。
ES6 中的class
類別,它是效仿其他程式語言擁有物件導向(OOP)的概念,取代需要原型 prototype 的操作,因為寫法更簡潔與易於理解,用來代替 javascript 傳統建構物件的形式。
物件在 JavaScript 中是非常重要的資料結構,而在 ES6 之後擴展了它的語法結構,讓表示法變得更簡單易懂,還增加了屬性名稱的動態改變。
它是 ES6 標準裡其中非常受歡迎的新語法,允許使用 =>
(箭頭) 來定義函數,比起一般函數可以用更簡短的語法來表示,可以讓程式碼的可閱讀性提高。
悠遊於程式 Coding 之間
熱愛學習,尋找熱情,大膽擁抱它
熟悉 Web、JavaScript、Vue、PHP
現在正處於前端開發中
Welcome to my personal blog.
Engineer