Haven’t finished ES6 yet? The spec is now out in ES10(ES2019)! After reading this article, from now on in the front end entertainment industry talk and laugh.

Purpose of the article

This article aims to let you know the latest progress of ES, including the features that have been included in the standard and the proposal in the current progress, and master the ability of independent learning. In order to facilitate learning and use, this paper also provides the following ways (see appendix) :

  1. ES latest standards and proposals
  2. Implementation reports of new features by the browser kernel
  3. The extent to which the V8 engine implements new features
  4. The extent to which Node implements new features

Terms and Relationships

  • ECMAScript ECMAScript is the Language Specification of JavasSript. It is a file. It describes the JS language should have the ability, API(including exposed external API and internal API), basic implementation steps. The most common standard is ES6(2015) and the most recent is ES10. For the future ES standard, it is collectively called ESNext, which means the next generation ES standard after the current time.

  • ECMAScript is to JS what C99 is to C. JS is a concrete implementation of ECMA.

  • V8 is a language engine written according to the ECMAScript specification that can run JS code. Node has a V8 engine and an asynchronous IO library called Libuv.

  • A Proposal is a feature description Proposal that the JS community hopes to add in the future. After several links of review, it will be formally incorporated into ECMA standard, and will be implemented by the JS engine of various manufacturers in the future.

  • TC39 issued ECMAScript committee, many browser vendors included.

About the proposal

Proposals are divided into six states/stages, and The TC39 Process is described in detail here:

  1. Stage 0/Strawperson Preliminary ideas
  2. Stage 1/Proposal already contains API descriptions, usage examples, major challenges, and more. The Committee (TC39) is interested and appoints champions.
  3. Stage 2/Draft is described in a standardized manner that the committee hopes will be implemented.
  4. Stage 3/Candidate Further improvement.
  5. Stage 4/Finished is complete and will be released in the next release of the standard.
  6. Inactive this is not a standard procedure, but it is classified in tc39 proposal as an Inactive proposal that is rejected or withdrawn.

Current proposals are available at Github-TC39 /proposals: Tracking ECMAScript proposals. One of the proposals into Stage2 has a greater likelihood of eventual realization. Note in finished form with Expected Publication Year, some of them have been released, such as Rest/Spread the Properties, Promise. Prototype. Finally.

Of course, it depends on the implementation of V8 and other engines (some unstable features can be enabled via Harmony Flag). Generally, when a proposal reaches a later stage, the proposer or the community will propose a polyfill proposal. You can check the polyfill in the Github repository of the proposal or use the Babel plugin to try github-babel /proposals in advance: ✍️ Tracking the status of Babel’s implementation of TC39 proposals (may be out of date)

Once in Stage4, test cases written for the proposal will be incorporated into Test262, and the Js engine can implement the functionality and prove its capability through test cases, typically including the newly supported features in the release documentation. To Promise to QuickJs this a small engine. The prototype. Finally the support, for example:

Test262 for Promise. Prototype. Finally use cases:

Note about Test262 in the QuickJs documentation:

Promise. Prototype. Finally achieve the entry:

static const JSCFunctionListEntry js_promise_proto_funcs[] = {
    JS_CFUNC_DEF("then".2, js_promise_then ),
    JS_CFUNC_DEF("catch".1, js_promise_catch ),
    JS_CFUNC_DEF("finally".1, js_promise_finally ),
    JS_PROP_STRING_DEF("[Symbol.toStringTag]"."Promise", JS_PROP_CONFIGURABLE ),
};
Copy the code

Test reports from QuickJs:

Test262 coverage by JS engine is fully reported in the Test262 Report.

Main Development Direction

ES6, ES7, ES8, ES9, ES10 New features at a glance – Digging as can be seen, the proposal area is relatively dense:

  • Object oriented: includes creating objects, inheriting objects, private variables, decorators, static methods, and so on
  • Asynchronous: includes Promise, Async, for-await-of, etc
  • Memory operation: including ArrayBuffer, SharedArrayBuffer, Atomics, etc
  • Metaprogramming: including Reflect, Proxy, Object.values, etc
  • Module mechanism: including import\export, import(), top-level-await, etc

Listing of utility features

The purpose of this article is not to list the knowledge points, and this article does not deliberately introduce the latest features, but only extracts from ES6 to the latest proposals that the author thinks are more practical, may affect our current common writing method, and can obtain obvious benefits after rewriting.

Promise/Async — MVP goes to this pair

Quite mature, most influential feature in recent years. As for the author’s description of V2ex problems, there are many fallacies:

Promise is essentially an eventloop mechanism. JS adds a Promise job queue to the original task queue. Each eventloop will check the job queue first, and then check the Task queue after it is empty.

Generator is a coroutine in JS that yields a function, saves the execution context of the function when it encounters the code, jumps out of the current function to execute the next function, and returns to the execution of the last saved function when it manually next. This saves a system call made during an IO operation and continues to release the CPU to other code blocks until the call is finished and copied to the application space.

Async \await encapsulates the Generator with Promise to realize automatic next. Essentially, the CALLBACK executes next after the IO operation is completed.

Object and array deconstruction – significantly reduces code

I’m sure most people will use it. Here are just two points:

  1. The new proposal already allows the use of the reset parameter in deconstruction
  2. We can declare and then deconstruct the assignment:let name = ''; ({name} = {name:"otisqzhang"});

Array.prototype.includes — Remove ugly indexOf(xx)! = = 1

Includes determines whether an element exists and returns a Boolean value instead of the index location. IndexOf (xx)! So theta is equal to minus 1 so I can write it a little bit more elegantly.

Optional Chaining — Uncaught TypeError Good medicine

TypeError: Cannot read property ‘xx’ of undefined error you must have written a lot of aa.bb &&aa.bb. cc etc using short circuit to compatible with potential Uncaught TypeError: Cannot read property ‘xx’ of undefined error. The Optional Chaining proposal has entered the finished stage and will be released in 2020. Will aa be available then? .bb? Cc, combine Nullish coalescing Operator

There are also quite a few useful features, such as for-await-of, promise. finally, and so on, but this is just a primer.

More ways

Understand the proposal

Github-tc39 / Proposals: Tracking ECMAScript proposals

Understand the standard

  • ES10: ECMAScript® 2019 Language Specification
  • ES9: ECMAScript® 2018 Language Specification
  • ES8: ECMAScript® 2017 Language Specification
  • ES7: ECMAScript® 2016 Language Specification
  • ES6: ECMAScript® 2015 Language Specification

To understand implementation

Most comprehensive table feature (including Babel, browser, Node, etc.) : ECMAScript Compat Table

  • Each node version of the support degree (measurement errors, such as promise. Prototype. Finally, the V8 5.8 + support through harmony namely flag) : node. Js support

  • V8 engine support: Features · V8

  • Node release progress: nodejs.org/en/about/re…

  • Browser engine support: Test262 Report

  • Performance test: jsperf.com/