New features of JS syntax ES6, ES7, ES8, ES9, ES10, ES11, ES12

New features

ES6（2015）

1. Class

class Man { constructor(name) { this.name ='小豪'; } console() { console.log(this.name); } } const man = new Man('小豪'); man.console() ; // Xiaohao

2. ES Module

// Module A exports a method
export const sub = (a, b) => a + b;
// Module B is imported using
import {sub} from'./A';
console.log(sub(1, 2)) ; // 3

3. Arrow function

const func = (a, b) => a + b;
func(1, 2); // 3

4. Function parameter default value

function foo(age = 25,){ // …}

5. Template string

const name ='小豪';
const str = Your name is ${name};

6. Destructuring assignment

let a = 1, b= 2;
[a, b] = [b, a]; // a 2 b 1

7. Spread operator

let a = […‘hello world’]; // [“h”, “e”, “l”, “l”, “o”, " ", “w”, “o”, “r”, “l”, “d”]

8. Shorthand for object properties

const name='小豪',
const obj = {name };

9. Promise

Promise.resolve().then(() => {console.log(2); });
console.log(1);
// print 1 first, then print 2

10. let and const

let name ='小豪';
const arr = [];

ES7 （2016）

1. Array.prototype.includes()

[1].includes(1); // true

2. Exponent operator

2**10; // 1024

ES8 （2017

1. async/await

Asynchronous ultimate solution

async getData(){
const res = await api.getTableData(); // await 异步任务
// do something
}

2. Object.values()

Object.values({a: 1, b: 2, c: 3}); // [1, 2, 3]

3. Object.entries()

Object.entries({a: 1, b: 2, c: 3}); // [[“a”, 1], [“b”, 2], [“c”, 3]]

4. String padding

// padStart
‘hello’.padStart(10); // " hello"
// padEnd
‘hello’.padEnd(10) "hello "

5. Comma is allowed at the end of the function parameter list

6. Object.getOwnPropertyDescriptors()

Get all the descriptors of an object's own attributes, if there are no own attributes, return an empty object.

7. SharedArrayBuffer对象

The SharedArrayBuffer object is used to represent a universal, fixed-length raw binary data buffer,

/**
*

• @param {*} length The size of the array buffer created, in bytes.
• @returns {SharedArrayBuffer} A new SharedArrayBuffer object with a specified size. Its content is initialized to 0.
  */
  new SharedArrayBuffer(10)

8. Atomics object

The Atomics object provides a set of static methods to perform atomic operations on SharedArrayBuffer objects.

ES9 （2018）

1. Asynchronous iteration

await can be used with for...of loops to run asynchronous operations in a serial manner

async function process(array) {
for await (let i of array) {
// doSomething(i);
}
}

2. Promise.finally()

Promise.resolve().then().catch(e => e).finally();

3. Rest/Spread properties

const values = [1, 2, 3, 5, 6];
console.log( Math.max(…values) ); // 6

4. Regular expression named capture group

const reg = /(?[0-9]{4})-(?[0-9]{2})-(?[0-9]{2})/;
const match = reg.exec(‘2021-02-23’);

image

5. Regex reverse assertion

(?=p), (?<=p) before p (position), after p (position)
(?!p), (?<!p>) Except before p (position), except after p (position)

(?<=w)

image

(?<!w)

image

6. Regular expression dotAll mode

The midpoint of the regular expression. Matches any single character except the carriage return. The mark s changes this behavior and allows the occurrence of line terminator

/hello.world/.test(‘hello\nworld’); // false

image

ES10 （2019）

1. Array.flat()和Array.flatMap()

flat()

[1, 2, [3, 4]].flat(Infinity); // [1, 2, 3, 4]

flatMap()

[1, 2, 3, 4].flatMap(a => [a**2]); // [1, 4, 9, 16]

2. String.trimStart()和String.trimEnd()

Remove blank characters at the beginning and end of the string

3. String.prototype.matchAll

matchAll() returns an iterator for all matched match objects

const raw_arr = ‘test1 test2 test3’.matchAll((/t(e)(st(\d?))/g));
const arr = […raw_arr];

4. Symbol.prototype.description

Read-only attribute, which returns the optional description string of the Symbol object.

Symbol(‘description’).description; // ‘description’

5. Object.fromEntries()

Returns an array of key-value pairs of the enumerable properties of the given object itself

// Through Object.fromEntries, you can convert Map to Object:
const map = new Map([ ['foo','bar'], ['baz', 42] ]);
console.log(Object.fromEntries(map )); // {foo: “bar”, baz: 42}

6. Optional Catch

ES11（2020）

1. Nullish coalescing Operator (null value processing)

The operator on the left side of the expression evaluates to undefined or null and returns its right side.

let user = { u1: 0, u2: false, u3: null, u4: undefined u5:'', } let u2 = user.u2 ??'User 2'// false let u3 = user.u3 ??'User 3'// User 3 let u4 = user.u4 ??'User 4'// User 4 let u5 = user.u5 ??'User 5'//''

2. Optional chaining

?. Intermediate nodes with uncertain user detection

let user = {}
let u1 = user.childer.name // TypeError: Cannot read property ‘name’ of undefined
let u1 = user.childer?.name // undefined

3. Promise.allSettled

Returns a promise that is resolved after all the given promises have been resolved or rejected, with an array of objects, each of which represents the corresponding promise result

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => reject(‘我是失败的Promise_1’));
const promise4 = new Promise((resolve, reject) => reject(‘我是失败的Promise_2’));
const promiseList = [promise1,promise2,promise3, promise4]
Promise.allSettled(promiseList)
.then(values=>{
console.log(values)
});

image

4. import()

Import on demand

5. New basic data type BigInt

Arbitrary precision integer

6. globalThis

Browser: window
worker: self
node: global

ES12（2021）

1. replaceAll

Return a brand new string, all characters that meet the matching rules will be replaced

const str = ‘hello world’;
str.replaceAll(‘l’, ‘’); // “heo word”

2. Promise.any

Promise.any() receives a Promise iterable object, as long as one of the promises succeeds, it returns the promise that has succeeded. If none of the promises in the iterable object succeeds (that is, all promises fail/reject), return a failed promise

const promise1 = new Promise((resolve, reject) => reject('I am a failed
Promise_1 ')); const promise2 = new Promise((resolve, reject) => reject('I am a failed Promise_2'));
const promiseList = [promise1, promise2];
Promise.any(promiseList)
.then(values=>{ console.log(values); }) .catch(e=>{ console.log(e); });

image

3. WeakRefs

Use the Class class of WeakRefs to create a weak reference to an object (a weak reference to an object means that when the object should be collected by the GC, it will not prevent the GC's collection behavior)

4. Logical operators and assignment expressions

Logical operators and assignment expressions, new features combine logical operators (&&, ||, ??) and assignment expressions. The existing compound assignment operators in JavaScript are:

a || = b
// equivalence
a = a || (a = b)

a &&= b
//等价于
a = a && (a = b)

a ?? = b
// Equivalence relation
a = a ?? (a = b)

5. Number separator

Number separator, you can create a visual separator between numbers, and use _underscores to separate numbers to make numbers more readable

const money = 1_000_000_000;
//equivalent to
const money = 1000000000;

1_000_000_000 === 1000000000; // true

Picture of
❤️爱心