ES6版本后续升级

ES2016

• Array.prototype.includes

// 用于判断某一项是否存在数组里，indexOf类似
// 区别在于indexOf无法判断NaN,而includes支持
const arr=[1,2,3,NaN]
// es5
if(arr.indexOf(3)>=0){
    console.log(true)
}
// es2016
if(arr.includes(3)){
    console.log(true)
}

• 求幂运算符**

// 求幂，用于替代Math.pow()
// es5
Math.pow(3,2)  // 9
// es2016
3**2  // 9

ES2017

• Object.values()

// 返回一个对象的值的集合，返回类型是数组类型，只返回自身的属性，不反悔原型链的属性
const obj={
    name:’zhang san'
    age:12,
    gender:’男'
}
const vals=Object.values(obj)
console.log(vals). // [‘zhang san’,12,’男’]

• Object.entries()

// 返回一个对象的键值对的集合，返回类型是数组类型。
const obj={
    name:'zhang san’,
    age:12,
    gender:'男'
}
console.log(Object.entries(obj))  
// [[’name’,’zhang san'],[‘age',12],[‘gender’,’男']]

• string padding

- padStart  // 在字符串的首部添加其他字符串
- padEnd  // 在字符串的尾部添加其他字符串
// 'someStr'.padStart(字符总数, [,添加的字符])
‘hello’.padStart(’10’,’a’)  // aaaaahello
‘hello’.padEnd(’10’,’ab’)  // helloababa
‘hello’.padEnd(‘10’). // 'hello     '

• Object.getOwnPropertyDescriptors

// 用来获取所有自身属性的描述符对象
const obj={
    name:'zhangsan',
    age:12,
    set setName(val){
        this.name='lisi'
    },
    get getName(){
        return this.name
    }
}
console.log(Object.getOwnPropertyDescriptor(obj,'setName'))
// setName上的描述符enumerable，configurable等

• 允许在函数形参末尾添加逗号

function(type, params,data,){}
// 目的是为了让代码更加整洁

• async/await函数

// 功能同于promise，避免多次callback，更符合单线程思维，遇到await暂停
async function fun(){
    const data=await Promise()  // data接受promise返回的值
}

• SharedArrayBuffer&Atomics

// 共享存储空间，兼容很差

ES2018

• async引入一部迭代器

// await可以和for一起使用，实现迭代器效果，执行完一个，再去执行另外一个
async function process(array) {
    for await (let i of array) {
        doSomething(i);
    }
}

• Promise.finally()

// promise结束后除了可以调用then和catch之外增加的方法
// 即不管成功还是失败都会执行的最终逻辑
promise()
.then(e=>{
    // 正确代码
})
.catch(e=>{
    // 错误代码
})
.finally(()=>{
    // 最终代码
})

• 三点运算符支持函数以及对象

// 之前…仅用于数组上，即[…a]这样，现在可以这样
let obj={
    name:’lisi’,
    age:12
};
const {name,…b}=obj;
console.log(b);  // {age:12}
// 也可以传递给函数
function fun({a,…x})

• 正则表达式命名捕获组

// 使用?<name>给捕获组命名
// es5命名
const reDate = /([0-9]{4})-([0-9]{2})-([0-9]{2})/,
      match=reDate.exec(‘2019-12-02’)
y=match[1]
m=match[2]
d=match[3]
// es2018命名
const reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
      match=reDate.exec(‘2019-12-02’)
y=match.groups.year
m=match.groups.month
d=match.groups.day

• 正则表达式反向断言

// 忽略符号，匹配价格数字
const match=/(?<=\D)\d+.\d+/.exec('$123.89’);
console.log(match[1]). // 123.89
// 反向否定断言
const match=/^(?<!\D)\d+.\d+/.exec('$123.89’);
console.log(match[1]). // null

• 正则doall模式

// 正则后面加s，允许终止符的出现
/hello.world/.test(‘hello\nworld’). // false
/hello.world/s.test(‘hello\nworld’). // true

• 正则表达式转译

const reGreekSymbol = /\p{Script=Greek}/u; 
reGreekSymbol.test('π'); // true

ES2019

• catch绑定可选

// es5
try{

}catch(unused){

}
// es2019
try{

}catch{

}

• json超集

json字符串可以包含未转译字符

• symbol描述

// symbol是在es2015加入的。为了方便读取他的内容，添加了描述字段
const mySymbol=Symbol(’name’)
console.log(mySymbol). // Symbol(name)
console.log(mySymbol.toString()). // Symbol(name)
console.log(mySymbol.description). // name

• 更新Function.prototype.toString()

// 可以输出注释,但不适用于尖头函数
function /* description */ foo /* something */ (){}
//es5
console.log(foo.toString()). // function foo(){}
// es2019
console.log(foo.toString())
// function /* description */ foo /* something */ (){}

• Object.fromEntries

// entries的反向操作，把二维数组转换成对象
Object.fromEntries([['name','aa'],['age',12]])
// {name:’aa’,age:12}

• json.stringify

// es5
console.log(JSON.stringify('\uD800')); // "�"
// es2019
console.log(JSON.stringify('\uD800')); // "\ud800"

• string的trimStart和trimEnd方法

// String.tirm
‘  asd ‘.trim()  // "asd"
// String.trimStart()
'  asd '.trimStart() // "asd “
// String.trimEnd()
'  asd '.trimEnd()  // "  asd"

• Array.prototype的flat和flatMap

// flat平铺数组
const arr = [1, 2, [3, 4, [5, 6]]];
arr.flat(); // [1, 2, 3, 4, [5, 6]]
arr.flat(2); // [1, 2, 3, 4, 5, 6]
arr.flat(Infinity); // [1, 2, 3, 4, 5, 6]. 全部展开
// flatMap先映射在平铺
// 先用空格隔开成为数组，再进行平铺
['a','b bb'].flatMap(v=>v.split(' '))