preface

This article documents common features of ES6 and later versions, and continues to be updated

New features

ES6(2015)

1. Class

Class Man {constructor(name) {this.name = '... '; } console() { console.log(this.name); }} const man = new man (' I '); man.console(); / / small houseCopy the code

2. ES Module

// export const sub = (A, b) => A + b; // module B import with import {sub} from './A'; console.log(sub(1, 2)); / / 3Copy the code

3. Arrow function

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

4. Default values of function parameters

function foo(age = 25,){ // ... }Copy the code

5. Template string

Const name = 'hoho '; const str = `Your name is ${name}`;Copy the code

6. Deconstruct assignments

let a = 1, b= 2;
[a, b] = [b, a]; // a 2  b 1
Copy the code

7. Extension operators

let a = [...'hello world']; // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]
Copy the code

8. Object property shorthand

Const name=' small ', const obj = {name};Copy the code

9. Promise

Promise.resolve().then(() => { console.log(2); }); console.log(1); // Print 1, then print 2Copy the code

10. Let and const

Let name = 'xiaohao'; // This is a value reference type const arr = []; Arr [0] = '1'Copy the code

ES7 (2016).

1. Array.prototype.includes()

[1].includes(1); // true
Copy the code

2. Index operators

2 * * 10; / / 1024Copy the code

ES8 (2017).

1. async/await

async getData(){ const res = await api.getTableData(); // await async task // do something}Copy the code

2. Object.values()

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

3. Object.entries()

Object.entries({a: 1, b: 2, c: 3}); // [["a", 1], ["b", 2], ["c", 3]]
Copy the code

4. String padding

// padStart
'hello'.padStart(10); // "     hello"
// padEnd
'hello'.padEnd(10) "hello     "
Copy the code

5. Allow commas at the end of function argument lists

6. Object.getOwnPropertyDescriptors()

Gets the descriptor for all of an object's own properties, or returns an empty object if there are none.Copy the code

7. SharedArrayBuffer object

The SharedArrayBuffer object is used to represent a generic, fixed-length buffer of raw binary data, /** ** @param {*} length The size of the array buffer created, in bytes. * @returns {SharedArrayBuffer} a new SharedArrayBuffer object of specified size. Its contents are initialized to 0. */ new SharedArrayBuffer(10)Copy the code

8. Atomics object

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

ES9 (2018).

1. Asynchronous iteration

Await can be used with for... Async function process(array) {for await (let I of array) {// doSomething(I); }}Copy the code

2. Promise.finally()

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

3. The Rest/Spread properties

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

4. Name capture groups using regular expressions

const reg = /(? <year>[0-9]{4})-(? <month>[0-9]{2})-(? <day>[0-9]{2})/; const match = reg.exec('2021-02-23');Copy the code

5. Regular expression reverse assertion

(? = p) and (? <=p) before p, after p (? ! P) and (? <! P > p> p> pCopy the code

6. Regular expression dotAll mode

Regular expression midpoint. Matches any single character except carriage return. The s flag changes this behavior by allowing line terminators /hello.world/.test('hello\nworld'); // falseCopy the code

ES10 (2019).

1. Array. Flat () and 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]
Copy the code

2. String. TrimStart () and String. TrimEnd ()

Removes whitespace at the beginning and end of a stringCopy the code

3. String.prototype.matchAll

MatchAll () returns an iterator for all matched matches const raw_arr = 'test1 test2 test3'. MatchAll ((/t(e)(st(\d?)) )/g)); const arr = [...raw_arr];Copy the code

4. Symbol.prototype.description

Read-only property, a string that returns the optional description of the Symbol object. Symbol('description').description; // 'description'Copy the code

5. Object.fromEntries()

Returns an array of key-value pairs for a given Object's own enumerable properties. // A Map can be converted to Object using object. fromEntries: const map = new Map([ ['foo', 'bar'], ['baz', 42] ]); console.log(Object.fromEntries(map)); // { foo: "bar", baz: 42 }Copy the code

6. Optional Catch

ES11 (2020).

1. Nullish coalescing Operator(Null value processing)

Expression in?? Returns the right-hand side of the operator evaluated to undefined or null. 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?? 'user4' // user4 let u5 = user.u5?? 'user 5' //'Copy the code

2. Optional chaining

? Let user = {} let u1 = user.childer.name // TypeError: Cannot read property 'name' of undefined let u1 = user.childer?.name // undefinedCopy the code

3. Promise.allSettled

Const promise1 = promise.resolve (3); const promise1 = promise.resolve (3); const promise2 = 42; Const Promise_1 = new Promise((resolve, reject) => reject(' I am a failure ')); Const promise4 = new Promise((resolve, reject) => reject(' I am a failure ')); const promiseList = [promise1,promise2,promise3, promise4] Promise.allSettled(promiseList) .then(values=>{ console.log(values) });Copy the code

4. import()

According to the need to importCopy the code

5. New basic data type BigInt

An integer of arbitrary precisionCopy the code

6. globalThis

Browser: Window worker: self node: globalCopy the code

ES12 (2021).

1. replaceAll

Const STR = 'hello world'; const STR = 'hello world'; str.replaceAll('l', ''); // "heo word"Copy the code

2. Promise.any

Promise.any() receives a Promise iterable and returns the Promise that succeeded as soon as one of the promises succeeds. If none of the iterables succeeds (i.e. all promises fail/reject), Const promise1 = new promise ((resolve, reject) => reject(' I am a Promise_1')); Const promise2 = new Promise((resolve, reject) => reject(' I am a failure ')); const promiseList = [promise1, promise2]; Promise.any(promiseList) .then(values=>{ console.log(values); }) .catch(e=>{ console.log(e); });Copy the code

3. WeakRefs

WeakRefs Class creates a weak reference to an object (a weak reference to an object means that it does not prevent the GC from collecting when the object should be collected by the GC)Copy the code

4. Logical operators and assignment expressions

Logical operators and assignment expression, new features combined with logical operators, &&, | |,??) And assignment expression and JavaScript existing compound assignment operators are: a | | = b / / equivalent to a = a | | (a = b) a && = b / / equivalent to a = a && (a = b) a?? = b // equivalent to a = a?? (a = b)Copy the code

5. Numeric delimiters

Const money = 1_000_000_000; const money = 1_000_000_000; const money = 1_000_000_000; // Const money = 1000000000; 1 _000_000_000 = = = 1000000000; // trueCopy the code

Original author name: Xiao Hao see the world

Original source: SegmentFault

Original link: segmentfault.com/a/1190