(Keep a large list of English, to encourage you to learn English šŸ˜€)

The following will try to keep it simple. Where diagrams and codes can be used, I will try not to write words, keeping the most intuitive feeling. The simple API will be directly given to the official document

A, ECMAScript 2016

1, the Array. The prototype. Includes

Array.prototype.includes() – JavaScript | MDN

const arr = [1, 2, 3, NaN]; if (arr.indexOf(3) >= 0) { console.log(true) } // true if (arr.includes(3)) { console.log(true) } // true Arr.indexof (NaN) // -1 cannot identify NaN arr.includes(NaN); // True recognizes NaNCopy the code

2. The exponent (power) operator **

Math.pow(2, 3)
// 8

2 ** 3
// 8Copy the code

Second, the ECMAScript 2017

1, the Object. Values ()

Object.values() – JavaScript | MDN

const obj = { foo: "bar", baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]Copy the code

2, the Object. Entries ()

Object.entries() – JavaScript | MDN

const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

// array like object
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]Copy the code

3. String padding

String.prototype.padStart() – JavaScript | MDN

String.prototype.padEnd() – JavaScript | MDN

'abc'.padStart(10);         // "       abc"
'abc'.padStart(10, "foo");  // "foofoofabc"
'abc'.padStart(6,"123465"); // "123abc"
'abc'.padStart(8, "0");     // "00000abc"
'abc'.padStart(1);          // "abc"

'abc'.padEnd(10);          // "abc       "
'abc'.padEnd(10, "foo");   // "abcfoofoof"
'abc'.padEnd(6, "123456"); // "abc123"
'abc'.padEnd(1);           // "abc"Copy the code

Note that Emojis and double-byte characters occupy two digits

'heart'. PadStart (10, "ā¤ ļø"); // prints.. 'ā¤ ļø ā¤ ļø ā¤ heart'Copy the code

4, the Object. GetOwnPropertyDescriptors

Object.getOwnPropertyDescriptor() – JavaScript | MDN

Object.getOwnPropertyDescriptor(obj, prop)Copy the code

Object. GetOwnPropertyDescriptor () method returns the specified Object on a has its own corresponding attribute descriptor. (Own properties are those that are directly assigned to the object and do not need to be looked up on the stereotype chain.)

5. Function arguments end with a comma

Function fn(a, b,) {} function fn(a, b,) {Copy the code

6, Async/Await

async function – JavaScript | MDN

Third, ECMAScript 2018

1. Shared memory and atomic operations

Personally, this is the most explosive and powerful new feature of all the updates

Even with the strong reinforcement of “pseudo-multithreading” of Event loop and Service Worker, the fact that JS is single-threaded still cannot be concealed.

Shared memory and atomic operation, JS brings multi-threaded function, allowing developers to manage their own memory to develop high performance and high concurrency programs.

The core is SharedArrayBuffer – JavaScript | MDN SharedArrayBuffer object

The SharedArrayBuffer object is used to represent a generic, fixed-length raw binary data buffer, similar to the ArrayBuffer object, but in a way that they can be used to create views on shared memory. Unlike an ArrayBuffer, a SharedArrayBuffer cannot become detached.

Keywords: Shared memory

Until now, postMessage was the only way to communicate and transfer data between the JS main thread and the Web worker.

The SharedArrayBuffer allows shared memory, which inevitably leads to race relations, which the backend language addresses through locking, where Atomics global objects are introduced

Atomics – JavaScript | MDN

The Atomics object provides atomic operations as static methods. They are used with SharedArrayBuffer objects.

Atomics objects provide several methods to handle this relationship, including reads and updates

Interested parties can participate in the following information (in English, A Cartoon intro to SharedArrayBuffers — Mozilla Hacks — The Web Developer blog ES proposal Shared memory and atomics

2. Template strings for non-escape sequences

This section can be directly to view the following link to the escape sequence template string | esnext | es6 es7 es2017 es2018 es2019

3. Object expansion operator

let { firstName, age, ... rest } = { firstName: 'a', age: 18, a: 1, b: 2 }; firstName; // 'a', age; // 18 rest; {a: 1, b: 2}Copy the code

4, Promise. Prototype. Finally ()

A new API – promise. Believe that everyone will use the promise prototype. Finally () – JavaScript | MDN

5. Asynchronous iterators

For-await-of is provided, iterating asynchronously, waiting for each promise to be resolved before the next one executes

const promises = [
  new Promise(resolve => resolve(1)),
  new Promise(resolve => resolve(2)),
  new Promise(resolve => resolve(3))
];Copy the code
// old
async function test1() {
  for (const obj of promises) {
    console.log(obj);
  }
}
test1(); // 
// PromiseĀ {<resolved>: 1}
// PromiseĀ {<resolved>: 2}
// PromiseĀ {<resolved>: 3}Copy the code
// new async function test2() { for await (const obj of promises) { console.log(obj); } } test2(); / / 1, 2, 3Copy the code

6. Regular expression correlation

This part of the content, students can refer to

  • dotAllPattern so that. Can match any character
  • Name the capture group, which can be interpreted as adding a reference
const regex = /(\d{4})-(\d{2})-(\d{2})/; const matchers = regex.exec('2015-01-02'); matchers[0]; // 2015-01-02 matchers[1]; // 2015 matchers[2]; // 01 matchers[3]; / /.Copy the code
  • Reverse assert Lookbehind Assertions
  • Unicode Property Escapes Unicode Property Escapes

Afterword.

Thank you for your patience to see here, hope to gain!

If you are not very busy, please click starā­ [Github blog portal], which is a great encouragement to the author.

I like to keep records during the learning process and share my accumulation and thinking on the road of front-end. I hope to communicate and make progress with you. For more articles, please refer to [amandakelake’s Github blog].

Here are examples of everything new in ECMAScript 2016, 2017, and 2018