Express Lane:

• New features of ES6, ES7, ES8, ES9, ES10, ES11, ES12 and ES13

According to the old rules, first take a look at the new functions of ES2020:

• Dynamic import (): Import on demand
• Null value merging operator: the expression is in?? The left operator of is evaluated as undefined or null, and the right operator is returned
• Optional links: User detects uncertain intermediate nodes
• BigInt: a new basic data type that represents an integer of arbitrary precision
• globalThis: Browser: window, worker: self, node: global
• Promise.allSettled: returns a promise decided after all given promises have been decided or rejected, with an object array. Each object represents the corresponding promise result
• For in structure: used to standardize the traversal order of for in statements

1. Dynamic import ()

It is used to realize on-demand import, import() is a syntax keyword similar to a function, similar to super(). It receives a string as the module identifier and returns a promise

In the module syntax defined in ES 2015, all module import syntax is statically declared:

Although this set of syntax can meet most import requirements, it can also support a series of important functions such as static analysis and tree jitter. However, it can not meet some needs of dynamic import. For example:

• You need to selectively load some support libraries according to browser compatibility,
• Load the code of a module only when it is actually needed, and then
• Simply want to delay loading some modules to improve the loading experience in a progressive rendering way

And so on, which are common requirements in practical work. Without dynamic import, it will be difficult to realize these requirements. Although we can dynamically import some scripts by creating script tags, this is a browser specific implementation and cannot be directly combined with the existing module syntax. Therefore, it can only be used as an internal implementation mechanism, but cannot be directly exposed to the users of the module.

But dynamic import () solves this problem. It can be used in any platform that supports this syntax, such as webpack, node, or browser environment. Moreover, the format of module identifier is specified by each platform. For example, webpack and node support directly loading node with module name_ Modules, while the browser supports loading remote modules using URLs.

When the module and other modules it depends on are loaded and executed, promise will enter the fully completed state, and the result value is an object containing all the exported contents of the module: the named export item is placed in the attribute with the same name of the object, while the default export item is placed in the attribute with the name of default. For example, there is the following module utils, and its import method is as follows:

If the module fails to load or execute because the module does not exist or cannot be accessed, promise will enter the rejected state, where you can perform some fallback processing.

2. Null merge operator (?)

You may have encountered that if a variable is empty, you need to assign it a default value. We usually write this:

However, there will be a bug in the above code. If the value of realCount is 0, it will be regarded as unable to get its value, and the string 'unable to get' will be obtained. If you want to do this, you can only use ternary operators before:

But now you can use?? Operator. It takes the value on the right of the operator only when the value on the left of the operator is null or undefined:

Moreover, the operator also supports short circuit characteristics:

However, it should be noted that this operator cannot be shared with the AND OR operator, otherwise a syntax exception will be thrown:

The ambiguity of this code is serious. In the understanding of different people, some people may feel that press (A & & B)?? "Default" operation is reasonable, while others think it is only right to run according to a & & (B??? "Default"), so when designing this operator, they simply avoid this situation through syntactic constraints. If you really need to use them in the same expression at the same time, use parentheses to distinguish them:

The main design purpose of this operator is to provide a supplementary operator for the optional chain operator, so it is usually used together with the optional chain operator:

The following describes the new optional chain operator (?.) in ES11

3. Optional link

This syntax can greatly simplify our code when we need to try to access properties or methods in an object and are not sure whether the object exists, such as the following:

When we don't know whether there is an element with a class name of class-a in the page, we need to make some judgments before accessing clientHeight to prevent bug s:

Although the above method can be implemented, some people will find it troublesome. Using the "optional chain operator" can simplify the code into the following form:

The following describes common usage scenarios:

Property access

If you need to obtain the attributes in an object, you can use this syntax:

In the above code, if a is undefined or null, the expression will immediately return undefined, otherwise it will return the value of the accessed property. In other words, they are equivalent to the following code:

Method call

You can also use this syntax when trying to call a method:

Similarly, if a is undefined or null, undefined will be returned, otherwise the method will be called. However, it should be noted that the operator does not judge whether a is a function type, so if a is a value of other types, the code will still throw an exception at run time.

Access deep level properties

This operator can also be used in series when accessing the deeper level properties of an object:

Some people may not bother to judge whether it is really necessary first, so they add this operator to each attribute in the access link. However, as shown in the above code, this code is not readable. Moreover, if an object that should exist does not exist because of some bug s, an exception should be thrown when accessing it, so that the problem can be found in time, rather than being hidden. It is recommended to use optional chain operators only when necessary.

4,BigInt

In ES, all values of type Number are stored in 64 bit floating-point format, so the maximum integer that type Number can effectively represent is 2 ^ 53. With the new BigInt type, you can manipulate integers of any precision.

There are two ways to use: 1. Add suffix n after the number literal; 2. Use its constructor BigInt

3n + 2n    // => 5n

3n  2n    // => 6n

3n  2n   // => 9n

3n % 2n    // => 1n

const bigInt = 3n;

bigInt / 2n;    // =>1n instead of 1.5n

1n & 3n    // => 1n

1n | 3n    // => 3n

1n ^ 3n    // => 2n

~1n        // => -2n

1n << 3n   // => 8n

1n >> 3n   // => 0n



1n >>> 3n  // Uncaught TypeError: BigInts have no unsigned right shift, use >> instead

1n + ' Number'   // => 1 Number

'Number ' + 2n   // => Number 2

1n + 1

// Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions

Math.pow(2n, 64n)

// Uncaught TypeError: Cannot convert a BigInt value to a number

1n  1    // => true

1n = 1   // => false

1n < 2     // => true

1n < 1     // => false



2n > 1     // => true

2n > 2     // => false

!!0n       // => false

!!1n       // => true

Number(1n) // => 1

BigInt(1)  // => 1n

// When the precision of BigInt value exceeds the range represented by Number type, the problem of precision loss occurs

Number(9007199254740993n)

// => 9007199254740992



// BigInt throws an exception when there are decimal places in the Number value

BigInt(1.1)

// VM4854:1 Uncaught RangeError: The number 1.1 cannot be converted to a BigInt because it is not an integer

const array = new BigInt64Array(4);

array[0]   // => 0n



array[0] = 2n

array[0]   // => 2n

const array = new BigUint64Array(4);

array[0] = 2n  64n

array[0]   // => 0n



array[0] = 2n ** 64n - 1n

array[0]   // => 18446744073709551615n

const globals = (new Function('return this;'))()

var getGlobal = function () {

// the only reliable means to get the global object is

    // Function('return this')()

    // However, this causes CSP violations in Chrome apps.

    if (typeof self ! 'undefined') { return self; }

if (typeof window ! 'undefined') { return window; }

if (typeof global ! 'undefined') { return global; }

throw new Error('unable to locate global object');

};

var globals = getGlobal();

if (!globals.Reflect) {

defineProperty(globals, 'Reflect', {}, true);

}

if (!globalThis.Reflect) {

defineProperty(globalThis, 'Reflect', {}, true);

}

async function a() {

const promiseA = fetch('/api/a')    // => rejected,  <Error: a>

    const promiseB = fetch('/api/B')    // => fulfilled, "b"



const results = await Promise.allSettled([ promiseA, promiseB])

results.length   // => 3

    results[0]       // => { status: "rejected", reason: <Error: a> }

    results[1]       // => { status: "fulfilled", value: "b" }

}

// Get the result information of all completed states

results.filter( result => result.status = "fulfilled" )

// Get the result information of all rejected states

results.filter( result => result.status = "rejected" )

// Get the result information of the first rejected state

results.find( result => result.status = "rejected" )

async function init() {

setInited(false)

setInitError(undefined)

const results = await Promise.allSettled([

loadDetail(),

loadRecommentListFirstPage(),

initSDK(),

])

const errors = results

.filter( result => result.status = "rejected" )

.map( rejectedResult => rejectedResult.reason )

if (errors.length) {

setInitError(errors[0])

$logs.error(errors)

}

setInited(true)}

async function login() {

// goto login ...



const results = messageCenter.login.emit()

const promiseResults = results.filter(isPromise)

if (promiseResults.length) {

await Promise.allSettled(promiseResults)

}

closeLoginModal()

closeLoading()}

function* EnumerateObjectProperties(obj) {

const visited = new Set();

for (const key of Reflect.ownKeys(obj)) {

if (typeof key = "symbol") continue;

const desc = Reflect.getOwnPropertyDescriptor(obj, key);

if (desc) {

visited.add(key);

if (desc.enumerable) yield key;

}

}

const proto = Reflect.getPrototypeOf(obj);

if (proto === null) return;

for (const protoKey of EnumerateObjectProperties(proto)) {

if (!visited.has(protoKey)) yield protoKey; }}