ES6及其以后新特性

参考出处：知乎：JS语法 ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性

ES6(2015)

1. 类(class)

class Man{
    constructor(options){
        this.name = options.name
    }
    log(){
        console.log(this.name);
    }
}
const man = new Man({name:"mgd"});
man.log(); //mgd

2. 模块化(ES Module)

export const sub = (a,b)=>a+b

import { sub } from './test'
console.log(sub(2,5));

3. 箭头函数

const func = (a,b)=> a+b
func(2,5);
console.log(func(2,5)); //7

4. 函数参数默认值

function func2(age=25){
    console.log(age);
}
func2() //25
func2(18) //18

5. 模板字符串

let food = '包子'
const str = `王二狗爱吃${food}`
console.log(str); //ES6及以后新特性.html:43 王二狗爱吃包子

6. 解构赋值

let a=1;
let b =2;
[a,b]=[b,a]
console.log([a,b]); //[2, 1]

7. 扩展运算符

let arr = [1,2,3,4,5,56,7]
let str2 = 'good good study'
console.log(...arr); //1 2 3 4 5 56 7
console.log(...str2); //g o o d   g o o d   s t u d y

8. 对象属性简写

const name = 'mgd'
const obj = {name}
console.log(obj); // {name: "mgd"}

9. Promise

Promise.resolve().then(()=>{
    console.log(2);
})
console.log(1);
// 先打印1，后打印2

10. let和const

let name2 = "mgd"
const arr2 = []

ES7（2016）

1. Array.prototype.includes()

let arr3 = [1,2,34,56]
let bull = arr3.includes(34)
console.log(bull); //true

2. 指数操作符

let num = 2**10
console.log(num); //1024

ES8（2017）

1. async/await 异步终极解决方案

async getData(){
    const res = await api.getListData() //异步任务
    // 执行函数
}

2. Object.values()

let obj2 = {a: 1, b: 2, c: 3}
let arr4 = Object.values(obj2); 
console.log(arr4); // [1, 2, 3]

3. Object.entries()

let arr5 = Object.entries(obj2)
console.log(arr5); //[["a", 1], ["b", 2], ["c", 3]]

4. String padding

let str3 = "好好学习"
// padStart
let str4 = str3.padStart(10); 
console.log(str4); //      好好学习
// padEnd
let str5 = str3.padEnd(10)
console.log(str5,"。"); //好好学习       。

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

func3(age,name,height,){
    console.log(age,name,height);
}

6. Object.getOwnPropertyDescriptors()
   获取一个对象的所有自身属性的描述符,如果没有任何自身属性，则返回空对象。
7. SharedArrayBuffer对象
   SharedArrayBuffer 对象用来表示一个通用的，固定长度的原始二进制数据缓冲区

/**
 * 
 * @param {*} length 所创建的数组缓冲区的大小，以字节(byte)为单位。  
 * @returns {SharedArrayBuffer} 一个大小指定的新 SharedArrayBuffer 对象。其内容被初始化为 0。
 */
 new SharedArrayBuffer(10)

8. Atomics对象
   Atomics 对象提供了一组静态方法用来对 SharedArrayBuffer 对象进行原子操作。

const sab = new SharedArrayBuffer(1024);
const ta = new Uint8Array(sab);
console.log(ta[0]); //0
ta[0] = 5
console.log(ta[0]);// 5

• Atomics.add()
  将指定位置上的数组元素与给定的值相加，并返回相加前该元素的值。

Atomics.add(ta, 0, 12);
console.log(ta[0]); //17

• Atomics.load()
  返回数组中指定元素的值。

Atomics.load(ta, 0);
console.log(Atomics.load(ta, 0)); //17

• Atomics.and()
  将指定位置上的数组元素与给定的值相与，并返回与操作前该元素的值。

Atomics.and(ta, 0, 1);
console.log(Atomics.and(ta, 0, 1)); //1
console.log(Atomics.load(ta, 0)); //1

• Atomics.compareExchange()
  如果数组中指定的元素与给定的值相等，则将其更新为新的值，并返回该元素原先的值。

Atomics.compareExchange(ta, 0, 5, 12);
Atomics.load(ta, 0); // 12

• Atomics.exchange()
  将数组中指定的元素更新为给定的值，并返回该元素更新前的值。

Atomics.exchange(ta, 0, 12);
Atomics.load(ta, 0); // 12

• Atomics.isLockFree(size)
  可以用来检测当前系统是否支持硬件级的原子操作。对于指定大小的数组，如果当前系统支持硬件级的原子操作，则返回 true；否则就意味着对于该数组，Atomics 对象中的各原子操作都只能用锁来实现。此函数面向的是技术专家。

Atomics.isLockFree(1); // true
Atomics.isLockFree(2); // true
Atomics.isLockFree(3); // false
Atomics.isLockFree(4); // true

• Atomics.or()
  将指定位置上的数组元素与给定的值相或，并返回或操作前该元素的值。

Atomics.or(ta, 0, 1);
Atomics.load(ta, 0);  // 5

• Atomics.store()
  将数组中指定的元素设置为给定的值，并返回该值。

Atomics.store(ta, 0, 12); // 12

• Atomics.sub()
  将指定位置上的数组元素与给定的值相减，并返回相减前该元素的值。

Atomics.sub(ta, 0, 2);
Atomics.load(ta, 0); // 3

• Atomics.xor()
  将指定位置上的数组元素与给定的值相异或，并返回异或操作前该元素的值。

Atomics.xor(ta, 0, 1);
Atomics.load(ta, 0); // 4

ES9（2018）

1. 异步迭代
   await可以和for…of循环一起使用，以串行的方式运行异步操作

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 属性
   【译】ES2018 新特性：Rest/Spread 特性

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

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

const reg = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/;
const match = reg.exec('2021-02-23');
console.log(match);//["2021-02-23", "2021", "02", "23", index: 0, input: "2021-02-23", groups: {day: "23",month: "02",year: "2021"}]

5. 正则表达式反向断言

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

6. 正则表达式dotAll模式
   正则表达式中点.匹配除回车外的任何单字符，标记s改变这种行为，允许行终止符的出现

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

ES10（2019）

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

let arr6 = [1, 2, [3, 4]].flat(Infinity);
console.log(arr6); //[1, 2, 3, 4]

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

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

let str6 = '    ccc     '
console.log(str6.trimStart()); //ccc     
console.log(str6.trimEnd());//    ccc

3. String.prototype.matchAll
   matchAll（）为所有匹配的匹配对象返回一个迭代器

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

4. Symbol.prototype.description
只读属性，回 Symbol 对象的可选描述的字符串。

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

5. Object.fromEntries()
   返回一个给定对象自身可枚举属性的键值对数组

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 u2 = user.u2 ?? '用户2'  
let u3 = user.u3 ?? '用户3'  
let u4 = user.u4 ?? '用户4'  
let u5 = user.u5 ?? '用户5'  
console.log(u2,u3,u4,u5); //false "用户3" "用户4" ""

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

let user = {}
let u1 = user.childer.name 
let u2 = user.childer?.name 

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)
});

4. import()
按需导入
5. 新基本数据类型BigInt
任意精度的整数
6. globalThis

globalThis 属性	属性特性
writable	true
enumerable	false
configurable	true

if (typeof globalThis.setTimeout !== 'function') {
  //  此环境中没有 setTimeout 方法！
}

ES12（2021）

1. replaceAll
   返回一个全新的字符串，所有符合匹配规则的字符都将被替换掉

const str7 = 'hello world';
str7.replaceAll('l', '')
console.log(str7.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 moneys = 1000000000;
if(money===moneys){
    console.log(money+'='+moneys); // 000000000=1000000000
}