js语法ES6、ES7、ES8、ES9、ES10、ES11、ES12的新特性

ES6（2015）
1、let和const

  let name = 'john';
  const arr = [];

2、类(Class)

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

3、箭头函数(Arrow)

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

4、函数参数默认值

 function foo (age = 25)  {
   // ...
}

5、模版字符串

  const name = 'john';
  const str = `Your name is ${name}`;

6、解构赋值

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

7、延展操作符

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

8、对象属性简写

  const name = 'john';
  const obj = {name};

9、模块化(ES Module)

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

10、Promise

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

ES7(2016)

1、指数操作符

  2**10; //  1024, 类似Math.pow(2, 10);

2、Array.prototype.includes()

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

ES8(2017)

1、async/await

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

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

  'hello'.paddingStart(10);  // '          hello';
  'hello'.paddingEnd(10);  //  'hello          ';

5、函数参数列表结尾允许逗号

6、列出对象所有属性的描述对象集合Object.getOwnPropertyDescriptors

  Object.getOwnPropertyDescriptors({name: 'john', age: 28})
  //
  {
     name: {
        value: 'john',
        writable: true,
        enumerable: true,
        configurable: true
     },
     age: {
        value: 28,
        writable: true,
        enumerable: true,
        configurable: true
     }
  }

7、表示固定长度的二进制数据缓冲区sharedArrayBuffer对象

  new SharedArrayBuffer(10)

8、Atomics对象, 提供静态方法操作sharedArrayBuffer对象进行原子操作, 二进制数据空间数据处理

ES9(2018)

1、异步迭代
await与for of结合循环使用，串行运行异步操作

async function process (array) {
  for await (let i of array) {
    // do sth.
  }
}

2、Promise.finally()

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

3、Rest/Spread属性

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

4、正则表达式命名捕获组

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

// {
 ...,
 groups: {
   day: '23',
   month: '02',
   year: '2021'
 }
}

5、正则表达式反向断言

  (?=p)、(?<=p)  p 前面(位置)、p 后面(位置)
  (?!p)、(?<!p>) 除了 p 前面(位置)、除了 p 后面(位置)

6、正则表达式dotAll模式
.可表示回车之外所有单字符，对于行字符除外

/hello.world/.test('hello\nworld'); // false

ES10(2019)

1、Array.flat()和Array.flatMap()
// flat, 递归数组，串联拼接成新数组，去除空值, 默认深度为1合并，可传参Infinity, 合并所有深度层级

  [1, 2, [3, 4]].flat(); // [1, 2, 3, 4], 
  [1, 2, [3, 4, [5, 6]]].flat(); // [1, 2, Array(3)], 
  [1, 2, [3, 4, [5, 6]]].flat(Infinity); // [1, 2, 3, 4, 5, 6], 
// flatMap, 对数组元素进行map操作，depth为1
  [1, 2, 3, 4].flatMap(a => [a**2]); // [1, 4, 9, 16]

2、String.trimStart()和String.trimEnd()，去除字符串首尾空白字符

3、String.prototype.matchAll，为所有匹配对象返回一个迭代器

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

4、Symbol.prototype.description，只读属性，返回Symbol对象的可选描述字符串。
Symbol(‘description’).description; // ‘description’

5、Object.fromEntries()

// 通过 Object.fromEntries， 可以将 Map 转化为 Object:
const map = new Map([ ['foo', 'bar'], ['baz', 42] ]);
console.log(Object.fromEntries(map)); // { foo: "bar", baz: 42 }

6、可选 Catch

ES11（2020）

1、Nullish coalescing Operator(空值处理)
表达式在??的左侧运算符求值为undefined或null, 返回其右侧

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

2、 Optional chaining（可选链）
?.用户检测不确定的中间节点

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

3、Promise.allSettled返回所有数组中给定promise已同意或被拒绝后的promise对象结果, 没有处理状态的Promise不会返回

  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)
  });
  
// fulfilled, rejected进行了resolve和reject的状态处理会返回结果

4、import()

5、新基本数据类型BigInt（任意精度的整数）
表示任意精度的整数，数值后面加n即可，

不能使用Number和BigInt操作数的混合执行算术运算，需要通过显式转换其中的一种类型,
此外，出于兼容性原因，不允许在BigInt上使用一元加号（+）运算符,

Chrome +67和Opera +54完全支持BigInt数据类型，
Edge和Safari还没有实现它，
Firefox默认不支持BigInt，但是可以在about:config中将javascript.options.bigint 设置为true来开启，
更好的选择是使用JSBI库，它是BigInt提案的纯JS实现，可以使用babel插件自动将JSBI代码编译为原生 BigInt代码，JSBI一旦浏览器支持，就不需要重写代码。

原数据超过16位会失精度：
   a = 1212123123123123123123123123123123123123
   // 1.2121231231231232e+39
   
使用bigInt类型处理, 可全部输出，注意和其他数运算需要同为bigInt
  a = 1212123123123123123123123123123123123123n
  //  1212123123123123123123123123123123123123n

6、globalThis

浏览器：window
worker：self
node：global

ES12(2021)

1、replaceAll返回一个全新字符串，所有匹配全部替换

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

2、Promise.any

Promise.any() 接收一个Promise可迭代对象，只要其中的一个 promise 成功，就返回那个已经成功的 promise 。如果可迭代对象中没有一个 promise 成功（即所有的 promises 都失败/拒绝），就返回一个失败的 promise

   const promise1 = new Promise((resolve, reject) => reject('我是失败的Promise_1'));
   const promise2 = new Promise((resolve, reject) => reject('我是失败的Promise_2'));
   const promiseList = [promise1, promise2];
   Promise.any(promiseList).then(values=>{
      console.log(values);
  }).catch(e=>{
      console.log(e);
  });

3、WeakRefs

使用WeakRefs的Class类创建对对象的弱引用(对对象的弱引用是指当该对象应该被GC回收时不会阻止GC的回收行为)

4、逻辑运算符和赋值表达式

对于逻辑运算结果结合赋值直接赋予变量
逻辑运算符和赋值表达式，新特性结合了逻辑运算符（&&，||，??）和赋值表达式而JavaScript已存在的复合赋值运算符有：

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

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

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

5、数字分隔符

数字分隔符，可以在数字之间创建可视化分隔符，通过_下划线来分割数字，使数字更具可读性，

  const money = 1_000_000_000;
  // 等价于
  const money = 1000000000;
  1_000_000_000 === 1000000000; // true