es7-es11新特性

ES7-ES11

210429

1、ECMAScript7新特性

1.1. Array.prototype.includes

includes方法用来检测数组中是否包含某个元素，返回布尔类型值

//indexOf 返回0 1
const famousbook = ['西游记','红楼梦','三国演义','水浒传']
console.log(famousbook.includes('西游记')) //true
console.log(famousbook.includes('撒哈拉沙漠')) //false

1.2. 指数操作符

在ES7中引入指数运算符**，用来实现幂运算，功能与Math.pow结果相同

console.log(2 ** 10)
console.log(Math.pow(2,10))

2、ECMAScript8新特性

2.1 async和await

async和await两种语法结合可以让异步代码像同步代码一样

async函数

返回值为promise对象
promise对象的结果由async函数执行的返回值决定

async function fn(){
    //返回的结果不是一个promise类型的对象，返回的结果就是成功promise对象
    //return 字符串 return;
    //抛出错误，返回的结果是一个失败的promise
    //throw new Error('出错啦！')
    //返回的结果如果是一个promise对象，fn()根据promise对象的状态返回
    return new Promise((resolve,reject)=>{
        resolve('成功的数据')
        reject('失败的错误')
    })
}
const res = fn()
//console.log(res)

//调用then方法
result.then(value => {
    console.log(value)
},reason => {
    console.warn(reason)
})

await表达式

await必须写在async函数中
await右侧的表达式一般为promise对象
await返回的是promise成功的值
await的promise失败了，就会抛出异常，需要通过try...catch捕获处理

const p = new Promise((resolve,reject)=>{
    //resolve("user data")
    reject("error")
})
//await要放在async函数中
async function main(){
    try{
        let res = await p
        console.log(res) //user data
    }catch(e){
        console.log(e) //error
    }
}
//调用函数
main()

async和await结合读取文件

const fs = require('fs')
function file1(){
    return new Promise((resolve,reject)=>{
        fs.readFile("文件路径",(err,data)=>{
            if(err)
                reject(err)
            resolve(data)
        })
    })
}
async function fn(){
    //获取file1内容
    let f1 = await file1()
    //输出文件中的内容
    console.log(f1.toString())
}

async和await封装AJAX请求

需解决同源策略

2.2 Object.values 和 Object.entries

0509

Object.values()方法返回一个给定对象的所有可枚举属性值的数组
Object.entries()方法返回一个给定对象自身可遍历属性[key,value]的数组

2.3 Object.getOwnPropertyDescriptors

该方法返回指定对象所在自身属性的描述对象

3、ECMAScript9新特性

3.1 扩展运算符和rest参数

Rest参数与spread扩展运算符在ES6中已引入，不过ES6中只针对数组，在ES9中为对象提供了像数组一样的rest参数和扩展运算符

3.2 正则扩展-命名捕获分组

3.3 正则扩展-反向断言

3.4 正则dotAll模式

4、ECMAScript10新特性

4.1 对象扩展方法Object.fromEntries

Object.fromEntries：将数组/Map转为对象

4.2 字符串扩展方法trimStart/trimEnd

trimStart清除左侧空格

trimEnd清除右侧空格

4.3 数组扩展方法flat/flatMap

4.4 symbol扩展

Symbol.prototype.description

5、ECMAScript11新特性

5.1 私有属性

5.2 Promise.allSettled

allSettled无论数组中的promise成功还是失败都会全部执行

all数组里有reject停止执行

5.3 String.prototype.matchAll

批量提取数据

5.4 可选链操作符

5.5 动态import

//app.js
//静态导入
//import * as m1 from "./hello.js"
const btn = document.getElementById('btn')
btn.onclick = function(){
    //动态引入，需要用再加载
    import('./hello.js').then(module=>{
        //console.log(module)
        module.hello()
    })
}

//hello.js
export function hello(){
    alert('Hello')
}

5.6 BigInt

大整型

5.7 globalThis

始终指向全局对象

ECMAScript