ECMAScript シリーズ | 次世代 Hugo

General

• 發現 ECMAScript 本質
• ECMAScript 之 Coding Style
• ECMAScript 之 ASI

Variable

• ECMAScript 之 var
• ECMAScript 之 Hoisting
• ECMAScript 之 let

Type

• 如何判斷變數型別 ?

String

• 如何將 String 轉成 Char Array ?
• 使用 charAt() 回傳 String 指定 Index 的 Char
• 使用 indexOf() 尋找 String 的 Index
• 使用 replace() 取代 String
• 4 Ways to Convert from Number to String
• 使用 split() 將 String 轉成 Array
• 使用 slice() 取得部分 String
• slice() 與 substring() 比較
• 使用 padStart() 在 String 之前補 0
• 使用 padEnd() 在 String 之後補 0

Number

• 6 Ways to Define Integer Literal
• Using Primitive Wrapper Object to Wrap Number
• ECMAScript 之 Decimal Base Exponent
• 4 Ways to Convert from String to Number
• 使用 ~~ 取代 Math.floor()
• Extracting Floating-Point Number to N Digits
• 手動從 Float 轉成 Integer
• 如何計算 N 次方 ?
• 將整數的最後幾位去除

Boolean

• 如何手動轉型成 Boolean ?
• ECMAScript 之 Truthy Value

Array

• ECMAScript 之 Array Destructuring
• 使用 every() 判斷 Array 是否全部符合條件
• 使用 some() 判斷 Array 符合條件是否存在
• 如何移除 Array 中重複部分 ?
• 如何 Clone Array ?
• 如何合併 Array ?
• Using entries to get Index and Element from Array
• 使用 entries() 讓 for of Loop 也有 Index
• 使用 Array.apply() 建立 Array
• 使用 Array.from() 將 Array-like Object 轉成 Array
• 使用 Array.of() 取代 Array.apply() 建立 Array
• 使用 splice() 直接修改原本 Array
• 使用 indexOf() 尋找 Array 的 Index
• 使用 join() 將 Array 轉成 String
• 使用 slice() 取得部份 Array
• 如何清空 Array ?
• 如何刪除 Array 中的 Object ?
• 如何實現 Tuple ?
• 使用 fill() 一次改變 Array 內多個 Element
• 使用 flatMap() 取出 Array 中所有 Combination

Object

• ECMAScript 之建立 Object
• ECMAScript 之讀取 Property
• ECMAScript 之寫入 property
• ECMAScript 之 Primitive Wrapper
• ECMAScript 之 Property Descriptor
• ECMAScript 之 Getter Property
• ECMAScript 之 Object Destructuring
• ECMAScript 之 Array-like Object
• 如何 Clone Object ?
• 如何 Merge Object ?
• ECMAScript 之 Property Accessor
• Using Object.entries to Get Key and Value
• 使用 Object.fromEntries() 將 Pair Array 轉成 Object
• 如何建立 Pure Object ?
• 使用 Object.freeze() 使 Object 實現 Immutable
• 使用 Object.keys() 將 Object 所有 Key 轉成 Array
• 使用 Object.values() 將 Object 所有 Value 轉成 Array
• 使用 Object.entries() 將 Key / Value 轉成 Array
• 如何取得 Object 所有 Key ?
• 當 Object 的 Key 重複時，其 Value 將被覆蓋

Date

• 使用 Date.parse() 將 ISO String 轉成 Timestamp
• 將時間拉滿到 23:59:59

JSON

• 使用 JSON.stringify() 將 Object 轉成 JSON String
• 如何美化 JSON String ?
• 使用 JSON.parse() 將 JSON String 轉成 Object

Operator

• 存在感很低的 Void Operator
• ECMAScript 之 Spread Operator
• ECMAScript 之 Bitwise Operator
• 使用 Nullish Coalescing Operator 判斷 Nill
• 使用 Optional Chaining Operator 判斷 Property 是否存在
• ECMAScript 之 Equality Operator
• 在 Promise Chain 使用 Comma Operator

Function

• ECMAScript 之 Function
• ECMAScript 之 Higher Order Function
• 深入探討 Function 傳遞 Argument
• 將 Arguments 轉成 Array
• 如何優雅地 Debug Callback ?
• 如何將 Array 傳進 Function ?
• ECMAScript 之 Rest Parameter
• ECMAScript 之 Generic Method
• 如何實現 Pure Function ?
• 如何降低程式碼複雜度 ?
• 如何將 Method 轉成 Function ?
• 使用 bind() 實現 Partial Application
• 如何將 Argument 變成 Key ?
• 從 Static Method 抽出 Free Function
• ECMAScript 之 Static Variable
• Always Passing Object to Function

IIFE

• ECMAScript 之 IIFE
• 使用 IIFE 建立 Local Variable
• Higher Order Function、Closure 與 IIFE

Closure

• ECMAScript 之 Lexical Scope
• ECMAScript 之 Scope Chain
• 深入探討 Closure 黑魔法
• 實務上如何使用 Closure ?
• 如何避免 Callback 在迴圈中不如預期 ?
• 如何使 Function 只執行一次 ?
• 深入探討 Currying
• 使用 Closure 實現 Encapsulation
• 使用 Closure 實現 Module Pattern

Undefined

• 如何判斷 undefined ?

This

• ECMAScript 之 this
• 如何在 Callback 中使用 this ?
• 深入探討 Arrow Function 與 this
• 如何使 Function 存取自訂 Property ?
• ECMAScript 之 OOP 使用 this
• 使用 Object Destructure 將 Method 抽成 Free Function

Promise

• 使用 Event Loop Model 執行 Asynchronous Function
• 從 Callback、Promise 到 Async Await
• 三種快速建立 Fulfilled Promise 方法
• 三種快速建立 Rejected Promise 方法
• 如何在 For Loop 使用 setTimeout() ?
• Currying 與 Asynchronous Function
• Promise 之 then() 與 Await
• Promise 之 catch() 與 Catch
• Promise 之 finally() 與 Finally
• Promise 之 Promise.resolve() 與 Async
• Promise 之 Promise.reject() 與 Throw
• Promise 之 Promise Constructor
• 使用 Promise.race() 實現 Timeout 機制
• 使用 Promise.all() 將多個 Promise 包成單一 Promise
• 使用 Promise.all() 處理 Nested Promise
• 在 forEach 內使用 Asynchronous Function
• 在 map 內使用 Asynchronous Function
• 在 filter 內使用 Asynchronous Function
• 在 reduce 內使用 Asynchronous Function
• 使用 for await of 處理 Array Promise
• 使用 Promise.allSettled() 只取得 Fulfilled Promise
• Promise Chain 之 Multiple Catch

Prototype

• 深入探討 Constructor Function
• 深入探討 Class 與 Prototype Chain
• 深入探討 Inheritance 與 Prototype Chain
• 自行實作 Object.create()
• 深入探討 __proto__、prototype 與 [[prototype]]
• 你不一定需要 Class
• 基本型別之 Prototype Chain

Class

• 你所不知道的 Class
• Class 與 Constructor Function 詳細比較
• ECMAScript 之 Class Expression
• 深入探討 for…in 與 Class
• ECMAScript 之 Static Method
• ECMAScript 之 Private Class Field

Dynamic

• 使用 Dynamic Property 取代 Global Variable

Iterable

• Iterable 也能使用 Destructuring

Set

• ECMAScript 之 Set Type

Map

• 如何取得以 Object 為 Key 的 Map ?

Module

• Module 進化史：CommonJS、AMD 與 ES Module
• ECMAScript 之 ES Module
• ECMAScript 之 CommonJS Module

Generator

• 使用 Generator 實現 Infinite Array

Symbol

• Symbol Overview
• Using Object and Symbol to Simulate Enums
• Using Symbol to Add Object Property
• Using Symbol Property to Make Property Invisible
• Using Symbol Method to Make Method Invisible

Recursion

• 使用 Recursion 實現 map()
• 使用 Recursion 實現 filter()
• 使用 Recursion 實現 reduce()

Babel

• 使用 Babel 支援 Pipeline Operator
• 使用 Babel 支援 Nullish Coalescing Operator
• 使用 Babel 支援 Optional Chaining Operator
• 如何避免 regeneratorRuntime 錯誤 ?

Console

• Using CSS Inline Style with console.log
• Using console.table to Display Array of Objects
• Using console.group to Group Debugging Messages
• Using console.time to Measure the Performance
• Using console.dir to Get The Property of DOM Element
• Using console.error to Display Runtime Error

Cookbook

Number

• Why Number Literal has Instance Methods ?

String

• Substring to Specific Character
• Padding Partial String
• 如何取得中英文字串的字元數？

Object

• 如何判斷 Object 的 Property 是否存在 ?
• 如何刪除 Object 的 Property ?
• How to Convert Object into Query String ?
• 使用 eval() 一次從 Object 解構出多個變數

Array

• 使用 filter() 與 includes() 實作 SQL LIKE

Function

• Finding Value with Recursive Object
• Destructuring the Function Parameter
• 如何將 Object Array 轉 CSV 並下載 ?

Promise

• 如何在 forEach 內使用 Asynchronous Function 計算 Sum ?
• 若 URL 不存在，則重試 N 次再繼續
• 若 API 讀取錯誤，則重試 N 次讀取