JS syntax ES6, ES7, es8, es9, ES10, es11, ES12 new features (Abstract)

ES6（2015）

1. class （class）

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

2. modularization (ES Module)

   //  modular  A  Export a method 
   export const sub = (a, b) => a + b;
   //  modular  B  Import and use 
   import { sub } from './A';
   console.log(sub(1, 2)); // 3

3. arrow （Arrow） function

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

4. Function parameter defaults
   function foo(age = 25,){ // ...}
5. Template string
   const name = ' Xiaohao ';
   const str = Your name is ${name};

6. Deconstruct assignment

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

7. Extension operator

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

8. Object attribute shorthand
   const name=' Xiaohao '; const obj = { name };

9. Promise

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

10. let and const
    let name = ' Xiaohao ';const arr = [];

ES7（2016）

1. Array.prototype.includes()
   [1].includes(1); // true
2. Exponential operators
   2**10; // 1024
   ES8（2017）

3. async/await

   // The ultimate asynchronous solution 
   
   async getData(){
    const res = await api.getTableData(); // await  Asynchronous task 
    // do something    
   }

4. Object.values()

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

5. Object.entries()

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

6. String padding

   // padStart
   'hello'.padStart(10); // "     hello"
   // padEnd
   'hello'.padEnd(10) "hello     "

7. Comma is allowed at the end of function parameter list
8. Object.getOwnPropertyDescriptors()
   Get descriptors of all properties of an object , If there is no self property , Then return the empty object .
9. SharedArrayBuffer object
   SharedArrayBuffer Object is used to represent a generic , Fixed length raw binary data buffer ,

/**
 * 
 * @param {*} length  The size of the array buffer created , In bytes (byte) In units of .
 * @returns {SharedArrayBuffer}  A new size specified  SharedArrayBuffer  object . Its contents are initialized to  0.
 */
new SharedArrayBuffer(10)

8. Atomics object
   Atomics Object provides a set of static methods for SharedArrayBuffer Object to perform atomic operations .

ES9（2018）

1. Asynchronous iteration
   await You can talk to for…of To use together , Run asynchronous operations in a serial fashion

   
   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 attribute

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

4. Regular expression names capture group

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

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]

2. String.trimStart() and String.trimEnd()
   Remove the white space at the beginning and end of a string
3. String.prototype.matchAll
   matchAll（） Returns an iterator for all matching objects

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

Insert picture description here

4. Symbol.prototype.description
   Read-only property , return Symbol The string of the optional description of the object .

Symbol('description').description; // 'description'

5. Object.fromEntries()
   Returns an array of key value pairs for enumerable properties of a given object itself

//  adopt  Object.fromEntries,  Can be  Map  Turn into  Object:
const map = new Map([ ['foo', 'bar'], ['baz', 42] ]);
console.log(Object.fromEntries(map)); // { foo: "bar", baz: 42 }

6. Optional Catch
   ES11（2020）
7. Nullish coalescing Operator( Null processing )
   The expression in ?? The left side of the The operator evaluates to undefined or null, Back to its right .

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（ Optional chain ）
   ?. The user detects uncertain intermediate nodes

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

3. Promise.allSettled
   Returns one in all given promise Having been resolved or rejected promise, With an array of objects , Each object represents the corresponding promise result

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => reject(' I failed Promise_1'));
const promise4 = new Promise((resolve, reject) => reject(' I failed Promise_2'));
const promiseList = [promise1,promise2,promise3, promise4]
Promise.allSettled(promiseList)
.then(values=>{
  console.log(values)
});

4. import()
   Import on demand
5. New basic data types BigInt
   An integer of arbitrary precision
6. globalThis
   browser ：window
   worker：self
   node：global

ES12（2021）

1. replaceAll
   Returns a brand new string , All characters that match the rules will be replaced

const str = 'hello world';
str.replaceAll('l', ''); // "heo word"

2. Promise.any

   Promise.any()  Receive one Promise Iteratable object , Just one of them  promise  success , Just go back to the successful one  promise . If there is not one of the iteratable objects  promise  success （ That all the  promises  All failed / Refuse ）, Just return a failed  promise
   
   const promise1 = new Promise((resolve, reject) => reject(' I failed Promise_1'));
   const promise2 = new Promise((resolve, reject) => reject(' I failed Promise_2'));
   const promiseList = [promise1, promise2];
   Promise.any(promiseList)
   .then(values=>{
     console.log(values);
   })
   .catch(e=>{
     console.log(e);
   });

3. WeakRefs
   Use WeakRefs Of Class Class creates a weak reference to an object ( A weak reference to an object is when the object should be GC Recycling doesn't stop GC Recycling behavior of waste )
4. Logical operators and assignment expressions
   Logical operators and assignment expressions , The new feature combines logical operators （&&,||,??） And assignment expressions JavaScript The existing The 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)

5. Number separator
   Number separator , You can create visual separators between numbers , adopt _ Underline to divide numbers , Make numbers more readable

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

1_000_000_000 === 1000000000; // true