iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 1
0
Modern Web

從ES到ESNext - 30天輕鬆掌握ECMAScript系列 第 1

[Day01] 小編的話與主題列表

前言

只要是以 Javascript 或 Typescript 進行前端開發的工程師們,對於這些名詞應該都略有所聞甚至相當熟悉 – ES5、ES6、ES2015,到今年出現的 ES2020 等等。

記得 2015 年畢業後,在幾乎零基礎的狀況下,進到現任公司做 WEB 前端開發。那時候正好碰到 ECMAScript 在版本上的重大轉變,而我也正好乘上這股浪潮,將學到的新特性應用在開發上。

不過隨著每年的新語法釋出,加上相關技術和應用也一直在迭代,使得我們必須上手這些利器面對混戰。但如果沒有停下來看清楚面貌,最後可能就會像我一樣,雖然懂得怎麼使用,但卻沒有真正了解它,達到駕輕就熟的境界。

所以希望接下來的介紹與整理,可以逐步認識它們的演進,並且熟悉應用的方式與時機。這就是我想寫這個系列文章的動機。

每日主題列表

這裡會列出預計產出的文章主題和相關的關鍵字,並且提供連結可方便查閱。詳細的名稱或內容會再根據當天的定稿有所異動。

天數 主題 關鍵字
02 ECMAScript 與 Javascript
03 ES2015(ES6) - 變數(Variable) let / const
04 ES2015(ES6) - 數值 (Number & Math) Number.isInteger / Number.isNaN / sign / trunc / parseInt / parseFloat
05 ES2015(ES6) - 字串(String) includes / startsWith / endsWith / repeat
06 ES2015(ES6) - 陣列 Array.from / Array.of / find / findIndex / includes / fill / entries / keys / values
07 ES2015(ES6) - 物件 Object.is / Object.assign / Object.keys
08 ES2015(ES6) & ES2019(ES10) - Symbol Symbol / description / Symbol.for / Symbol.keyFor / Object.getOwnPropertySymbols
09 ES2015(ES6) - Set & Map Set / Map / WeakSet / WeakMap / has / add / delete / clear / size / entries / keys / values / forEach / for ... of
10 ES2015(ES6) - 函式(Function) this / =>
11 ES2015(ES6) & ES2018(ES9) - 剩餘/展開運算子(Rest/Spread Operator) ...
12 ES2015(ES6) - 類別(class) class / constructor / super / extends / set / get / static
13 ES2015(ES6) - 可迭代(Iterable)與產生器(Generator) for ... of / generator / yield
14 ES2015(ES6) - Promise then / catch / Promise.all / Promise.race
15 ES2015(ES6) - 模組 (Module)<未完>
16 ES2016(ES7) includes / **
17 ES2017(ES8) - Await & Async async / await
18 ES2017(ES8) - SharedArrayBuffer & Atomics<未完>
19 ES2017(ES8) - 其他 padStart / padEnd / Object.values / Object.entries / Object.getOwnPropertyDescriptors
20 ES2018(ES9) - 非同步<未完>
21 ES2018(ES9) - 正規表達式<未完>
22 ES2019(ES10) catch / Object.fromEntries / trimStart / trimEnd / flat / flatMap
23 ES2020(ES11) - 運算子 ?! / ??
24 ES2020(ES11) - 模組 import / export / import.meta
25 ES2020(ES11) - 內建物件 Promise.allSettled / matchAll / BigInt / globalThis
28 Typescript (tsconfig.json)

文章進行方式

除了今天跟明天是屬於概念方面的陳述,第三天之後的文章會針對每個語法跟特性整理。而每天的內容會盡量將性質相近的部分集中在一起介紹,希望能比較有系統性地理解概念跟用法。

在每個語法的小章節,我大致上涵蓋這些內容 –

  • 語法關鍵字、用法介紹
  • 如果是語法糖類型的話,會附上以往方式寫相同效果的範例程式進行比較
  • 範例程式會附上 JS 版與 TS 版,來符合不同開發者的閱讀偏好
  • 使用時機、心得、評論等

小結

萬事起頭難,不過第一天也這樣用力擠完啦 /images/emoticon/emoticon07.gif
今年還很有勇氣的報名另外兩個主題,如果有興趣的話也歡迎訂閱喔!


下一篇
[Day02] ECMAScript 與 Javascript
系列文
從ES到ESNext - 30天輕鬆掌握ECMAScript30

尚未有邦友留言

立即登入留言