小編的話與主題列表

第 12 屆 iThome 鐵人賽

DAY 1

Modern Web

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

12th鐵人賽 ecmascript

Yuri Tsai

2020-09-16 18:09:10

1611 瀏覽

分享至

本系列文章經過重新編排和擴充，已出書為ECMAScript關鍵30天。原始文章因當時準備時程緊迫，多少有些許錯誤。為了避免造成讀者的困擾，以及配合書籍的內容規劃，將會陸續更新本系列文章。
本篇文章在 2021/11/6 已更新。

前言

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

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

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

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

語法分類

以下會依標準內建物件或特性來彙總相關語法，讓你在閱讀本系列時，除了可以按標準版本逐步暸解到最新語法時，也可以系統性地掌握每種標準內建物件相關的標準釋出。

主題	對應天數	語法關鍵字
`number`	Day 04	`MIN_SAFE_INTEGER` `MAX_SAFE_INTEGER` `NaN` `isSafeInteger` `isInteger` `parseInt` `parseFloat` `isNaN`
`Math`	Day 04	`sign` `trunc` `cbrt`
`string`	Day 05 / Day 18 / Day 22 / Day 24 / Day 26 / Day 29	`includes` `startsWith` `endsWith` `repeat` `padStart` `padEnd` `trimStart` `trimEnd` `matchAll` `replaceAll` `at`
`Array`	Day 06 / Day 16 / Day 22 / Day 29	`from` `of` `find` `findIndex` `fill` `entries` `keys` `values` `includes` `flat` `flatMap` `at`
`Object`	Day 07 / Day 08 / Day 18 / Day 22 / Day 29	`is` `assign` `getOwnPropertySymbols` `keys` `values` `entries` `getOwnPropertyDescriptors` `fromEntries` `hasOwn`
`symbol`	Day 08 / Day 22	`Symbol` `for` `keyFor` `description`
`Set`	Day 09	`new Set` `size` `add` `delete` `has` `clear` `new WeakSet` `keys` `values` `entries` `forEach` `for of`
`Map`	Day 09	`new Map` `size` `set` `get` `delete` `has` `clear` `new WeakMap` `keys` `values` `entries` `forEach` `for of`
`Fuction`	Day 10 / Day 13	`=>` `function*` `yield` `next`
`Class`	Day 12 / Day 29	`class` `constructor` `super` `extends` `set` `get` `static` `#`
`Promise`	Day 14 / Day 20 / Day 25 / Day 26	`all` `race` `finally` `allSettled` `any`
`async/await`	Day 17 / Day 20 / Day 29	`for await of`
`RegExp`	Day 21 / Day 29	`(?<=y)x` `(?<!=y)x` `?<name>` `d`
`bigint`	Day 24	`n`
`Intl`	Day 27	`ListFormat`
`WeakRef`	Day 27	`new WeakRef`
`FinalizationRegistry`	Day 27	`new FinalizationRegistry`
變數	Day 03	`let` `const`
運算子 & 關鍵字	Day 11 / Day 16 / Day 19 / Day 21 / Day 23 / Day 25 / Day26	`...` `**` `?.` `??` `globalThis` `_`
流程控制	Day 22	`try catch`
模組	Day 15 / Day 24	`export` `as` `* as` `import` `from` `import.meta`