ES6: These 8 hidden cheats, knowing 3 counts as my loss!

Tags: ES6, JavaScript, Performance Optimization, Code Simplification

Writing less code naturally leads to fewer bugs. ”Lu Xun (not mentioned)

Today, let's not talk about React or Vue. Let's go back to the language layer and dig up those ES6 obscure APIs that are "given by the official, but we always make our own wheels".

Each of them has been implemented through the browser's native implementation, and can run without polyfill. With one sentence leading to five sentences, simply copy and paste after reading can make colleagues exclaim, 'Is there still such an operation?'.

1. Array flattening: flat/flatMap

Scenario: The backend crams the tree structure into you, while the frontend only wants to take leaf nodes.

bonus：flatMap = map + flat(1)， Complete the "one to many" mapping in one loop.

2. Object ↔  Array 'teleportation': entries ↔  fromEntries

Scenario: I only want to perform "filtering/mapping/sorting" on objects, but I am too lazy to write "reduce".

URL parsing can also be completed in one line:

3. String completion: padStart/padEnd

Scenario: Time, order, ID card, the digits must be aligned.

Fixed Number:

4. Array deduplication+set operation: Set

Scenario: The interface returned 10000 pieces of data, of which 30% were duplicate IDs.

5. Deconstruction of "nested+default values"

Scenario: Interface fields are often missing and need to be downgraded.

Deep security value:

6. Asynchronous "tail sweeping" artifact: terminal()

Scenario: Loading must be turned off when the request ends, and it must be turned off for both successful and failed requests.

Conclusion: How to painlessly develop a "new habit"?

The code review deliberately asked: Can flatMap/from Entries be used here?

Flag: Use these 8 APIs in the business for three consecutive weeks, and give yourself a ★ every time you use them.

Team sharing: Share this article in the group, who will use it in the PR latest, please have the whole group milk tea 🧋。