タグ : ECMAScript
使用 filter() 與 includes() 實作 SQL LIKE
SQL 的 LIKE 非常好用，若要在 JavaScript 實現 LIKE，則要搭配 filter() 與 includes()。
如何將 Object Array 轉 CSV 並下載 ?
雖然可以從 Server 端直接處理 CSV 下載，但若 CSV 內必須處理多國語言，則必須將 Object Array 先下載到 Browser，然後再轉成 CSV 下載。
使用 Date.parse() 將 ISO String 轉成 Timestamp
實務上 API 常回傳帶有 TZ 的 ISO String 日期，可使用 Date.parse() 將 ISO String 轉成 ECMAScript 的 Timestamp。
如何取得中英文字串的字元數？
JavaScript 使用 Unicode 之後，無論是 中文 或 英文 都視為一個字元，若想將中文 視為 兩個字元，英文 視為 一個字元，則無法單純使用 ECMAScript 內建的 length()。
使用 eval() 一次從 Object 解構出多個變數
若我們想將 Object 直接解構成變數，若變數不多，可直接使用 Object Destructuring，但若變數很多，可改用 eval() 動態解構出多個變數。
Padding Partial String
If we want to pad the partial string, we can’t simply use padStart() to get the result.
Substring to Specific Character
If we want to substring to a specific character, we can’t just use substring() to get the result.
Destructuring the Function Parameter
Sometimes we may get an Object with an Array on the parameter. We can use Object and Array destructuring together for the function parameter.
Finding Value with Recursive Object
Sometimes we may get data by the data structure of a Recursive Object. We have to write some recursive functions to find value with these Recursive Objects.
How to Convert Object into Query String ?
If data is an Object, we can use Object.entries, map and join to convert Object into Query String.
Extracting Floating-Point Number to N Digits
As for extracting Floating-point Number to finite digit, we can use parseInt or toFixed.
4 Ways to Convert from Number to String
We can convert from Number to String by String, toString, Type Coercion or Template String.
4 Ways to Convert from String to Number
We can convert from String to Number by Number, parseInt, + or ~~ operator.
Why Number Literal has Instance Methods ?
We often use Number Literal in Practical, not Wrapper Object of Number. We can call instance method directly on Number Literal. But why?
Using Primitive Wrapper Object to Wrap Number
In addition to using Primitive for Number, we can use Primitive Wrapper Object to wrap Number.
6 Ways to Define Integer Literal
We can define integer literal in decimal, hexadecimal, octal or binary.
Using Symbol Property to Make Property Invisible
If we want to add invisible properties to the Object, we can use Symbol Property to make properties invisible.
Using Symbol Method to Make Method Invisible
If we want to add invisible methods to the Object, we can use Symbol Method to make methods invisible.
Using console.error to Display Runtime Error
console.log、console.warn and console.error can display debugging messages on the console, but console.error is suitable for displaying runtime error.
Using console.warn to Make Debugging Messages Different
Although we can fully customize console.log with CSS inline style, console.warn provides a simple way to make debugging messages a little different from console.log.
Using console.dir to Get The Property of DOM Element
If we use console.log to display the DOM element, we will get pure HTML only. What we have to do is using console.dir to get the property of the DOM element.
Using console.time to Measure the Performance
If we care about the performance of some code snippets, we can use console.time to measure the performance.
Using console.group to Group Debugging Messages
If we use console.log in the for loop, it may produce too many debugging messages to read. It’s a good time to use the console.group to group them under a group.
Using console.table to Display Array of Objects
Besides using console.log to display debugging messages, we can use console.table to display Array of Objects for a better layout.
Using CSS Inline Style with console.log
Not only just showing debugging messages on the console of DevTools, but we can also use CSS to change their style.
Using Symbol to Add Object Property
If we want to add Object property at runtime, it chanced that we override property of original Object. Since Symbol is a unique value, using Symbol Property to prevent property from overriding.
Using Object and Symbol to Simulate Enums
If we only allow limited values for arguments, using Enums is a good choice. Unfortunately, we don’t have native Enums in JavaScript, but we can use Object and Symbol to simulate it.
Using entries to get Index and Element from Array
ECMAScript 2015 introduced Array.prototype.entries, which returns index and element from Array.
Using Object.entries to Get Key and Value
If we want to get key and value from Object simultaneously, we used to use Object.keys to get all keys, and then use [] with the key to get value. Now we can use Object.entries to get key and value at once.
Always Passing Object to Function
Object Destructuring was introduced by ECMAScript 2015. Using it with function argument, we can implement Pass By Name feature in ECMAScript.
使用 for await of 處理 Array Promise
當 ECMAScript 2015 引進 Promise 概念後，實務上會遇到 Array Promise，若要搭配 ECMAScript 2017 的 async await，可使用 for await of 讓 Codebase 更精簡。
如何判斷 Object 的 Property 是否存在 ?
若想取得 Object 的 Property 做運算，但又不確定 Object 是否包含此 Property 時，ECMAScript 提供多種方式可判斷 Property 是否存在。
在 reduce 內使用 Asynchronous Function
Array.prototype.reduce 只能接受傳入 Synchronous Function，若要傳入 Asynchronous Function，可依需求使用不同方式實現。