Chaol Liu

## 安裝 ### 先決條件 - node - 至少 v10.13, 建議安裝最新的 LTS 版本 - 文字編輯器, 建議 VSCode 和 Vetur 擴充工具, 或只用 WebStorm - terminal, 建議用 VSCode 的 integrated terminal, 或只是 WebStorm...

# [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) - `Set` 物件是一個集合. 能以插入的順序 iterate 集合中的項目. `Set` 中的值 **只能出現一次**; 他在 `Set` 集合中是唯一的. ## 說明 ### value 的相等性 - 因為每個 `Set` 中的值必須是唯一的, 所以會檢查是否相等. - `NaN` 和 `undefined` 也可以儲存在 `Set`...

# [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) - `Map` 物件是 key-value 配對, 而且記得原本插入 keys 的順序. key 或 value 可以使用任何值(包括物件和原生值). ## 說明 - `Map` 物件會以插入的順序 iterate 項目 - `for...of` 每次回傳 `[key, value]` 的陣列. ### Key 的相等性...

# [私有的類別欄位](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields) - 類別的屬性預設都是公開的, 可以在類別外部修改. 現在可以用 hash `#` 前綴在類別欄位上. ## 語法 ```javascript class ClassWithPrivateField { #privateField; } class ClassWithPrivateMethod { #privateMethod() { return "hello world"; } } class ClassWithPrivateStaticField {...

# [Optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) - **Optional chaining** 運算子(`?.`) 是讀取物件底層的屬性值, 但不需要明確驗證每個 chaining 的參考都合法. 功能相似於 `.` chaining 運算子, 若參考是 `nullish`(`null` 或 `undefined`) 會造成錯誤, 而 `?.` 會 short-circuits 運算回傳 `undefined`. 如果用於函式呼叫且不存在, 則回傳 `undefined`. ##...

# [Nullish coalescing operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) - **Nullish coalescing 運算子** 是一個邏輯運算子, 當 `左側運算元` 是 `null` 或 `undefined` 時, 回傳 `右側運算元`. - 與 邏輯 OR (`||`) 運算子比較: - `||` 是如果左側運算元是任何 `falsy 值`, 不只是...

# [Arrow Function Expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) - **箭頭函式運算式** 比傳統的 `函式運算式` 寫法更簡潔, 但是他有限制, 無法運用在所有情況. - **不同之處 & 限制**: - 沒有自己的 `this` 或 `super`, 所以不應該用於 `methods`. - 沒有 `arguments` 或 `new.target` 的關鍵字. - 不適合使用...

# [Rest 參數](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters) - **rest 參數** 語法讓函式接受不定量的參數, 並將全部參數視為一個 `陣列`, 表現出 variadic functions (這個詞來自 C, 指的是可以接受不定量參數的函式). ## 語法 ```javascript function f(a, b, ...theArgs) { // ... } ``` ## 說明 -...

# [Spread 語法](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) - 將 `陣列`, `字串` (iterable 類型) 展開, 就會有 0 到多個 - `參數`(用於函式呼叫時) - `項目`(用於 array literal 時) - 將 `物件` 展開, 就會有 0 到多個 - `key-value` 配對(用於...

# [Destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) - 他的語法是一種 JavaScript expression, 可以直接 - 從 `[]` 取出項目值, - 從 `{}` 取出屬性值, - 再放到獨立的變數 ## 語法 ```javascript let a, b, rest; [a, b] = [10, 20];...