Some useful little features of ES6

Module is a new feature in ES6, a language level support for modularity.

Note: Unlike the previous Module loading mechanism, modules are loaded dynamically, and read-only references to variables are imported, not copies

Features:

Symbol is a “new” base data type; Starting with ES6, the basic data types in JavaScript are: string, number, Boolean, null, undefined, symbol

Symbol can be used as a key for an Object

Symbol has a global scope. Using the symbol. For (key) method, you can create (global scope does not specify a key) or obtain a global scope symbol. Using the symbol.keyfor (SYM) method, you can get the key of the specified Symbol

JavaScript internally uses a number of built-in symbols, as special keys, to implement some internal functions; For example, Symbol. Iterator is used to identify an iterator for an object

Here’s an example:

An Iterator is an interface that provides a uniform access mechanism for various data structures. Any data structure can be traversed (that is, all members of the data structure are processed in turn) by deploying the Iterator interface.

Iterator has three functions:

One is to provide a unified and simple access interface for various data structures.

Second, the members of the data structure can be arranged in a certain order;

Third, ES6 creates a new traversal command for… Of loop, Iterator interface for… Of consumption.

Here’s an example:

String, Array, Map, Set, etc., are native iterables because they implement the Symbol. Iterator key method in the prototype object

The for… Of is traversal of object iterators, while for… In is a traversal of enumerable values in an object

ObjectIs essentially a collection of key-value pairs (Hash structure), but traditionally only strings can be used as keys.

MapLike an object, it is a collection of key-value pairs, but the range of “keys” is not limited to strings. Values of any type (including objects) can be used as keys.

SetIt is similar to an array, but the member values are unique and there are no duplicate values.

Here’s an example:

metaprogramming

Metaprogramming refers to developers “programming the language itself.” Typically, programming languages expose apis that allow developers to manipulate certain features of the language itself. Two new ES6 features, Proxy and Reflect, are extensions of JavaScript’s object metaprogramming capabilities.

Proxy can “Proxy” the native behavior of an object and instead perform a custom behavior.

Proxy can be understood as that a layer of “interception” is set up before the target object, and the external access to the object must pass this layer of interception first. Therefore, it provides a mechanism to filter and rewrite the external access. The original meaning of the word Proxy is a Proxy, used here to mean that it “proxies” certain operations. Here’s an example:

Note: The Reflect object’s methods correspond to those on the Proxy object. If the method is on the Proxy object, you can find the corresponding method on the Reflect object. This makes it easy for the Proxy object to call the corresponding Reflect method, completing the default behavior as a basis for modifying the behavior. That is, no matter how Proxy changes the default behavior, you can always get the default behavior on Reflect.

Asynchronous programming

Prior to ES6, JavaScript asynchronous programming could not skip callbacks. The callback function method is very simple to use, and there is no problem when simple asynchronous task is called, but if there is a complex asynchronous task scenario, it appears to be inadequate. The main problem is that the nested callback function of multiple layers will lead to the horizontal development of the code, which is difficult to maintain; ES6 brings two new features to the asynchronous programming puzzle.

Promise is a solution to asynchronous programming that is more rational and powerful than the traditional solution of callbacks and events.

Promise is a new feature in ES6, which is also asynchronous programming. It has the following features:

1. It’s still a callback function

2. Callbacks that distinguish between success and failure, eliminating the nested judgment logic

3. Can easily complete the callback function mode to Promise mode conversion

4. Code from the horizontal extension of nested callback functions, to the vertical extension of chained calls, easy to understand and maintain

5.Promise has many advantages, but the code structure is still very different from that of synchronous code

See the examples:

1. The Generator function is a state machine that encapsulates multiple internal states.

2. Executing the Generator function returns a iterator object, that is,
The Generator function is an iterator object Generator in addition to the state machine. The iterator object that is returned iterates through each state inside the Generator function in turn.

3. Formally, there are two characteristics. First, there is an asterisk (*) between the function keyword and the function name. Second, the body of the function uses yield statements to define different internal states (yield means “output” in English).

Features:

1. You can use the yield keyword to terminate execution and return (inside out)

2. You can wake up again with a call to the next(val) method to continue (outside back inside).

3. At runtime (including suspended state), share local variables

The ES2017 standard introduces async functions to make asynchronous operations easier.

What is an async function?

In short, it is the syntactic sugar for Generator functions.

Personally, I think it will be the best way for JavaScript to support asynchronous programming right now

Consider the following example:

Alone

2018-05-16