小惠珠哦

这个屌丝很懒，什么也没留下！

热门标签

ES7、ES8、ES9、ES10、ES11 新特性总结_前端es7

作者：小惠珠哦 | 2024-06-21 06:22:20

踩

前端es7

ES7新特性

一、Array.prototype.includes

二、Object.values 和 Object.entries

二、trimStart 和 trimEnd

三、Array.prototype.flat 与 flatMap

四、Symbol.prototype.description

ES11新特性

一、String.prototype.matchAll

ES7新特性

一、Array.prototype.includes

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


    const name = ['Tom','Jerry','Bob']
    //判断
    console.log(name.includes("Tom"));  //true
    console.log(name.includes("Jack")); //false

二、指数操作符

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


    console.log(2 ** 10);   //1024
    console.log(Math.pow(2,10));    //1024

ES8新特性

一、async 和 await

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

1.async 函数

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


    async function fn(){
        //return "Tom"
        //throw new Error("出错了！")//抛出错误，返回的结果是一个失败的Promise
        //返回的结果如果是一个Promise对象
        return new Promise((resolve,reject)=>{
            resolve('成功的数据')
            //reject('失败的错误')
        })
    }
    const result = fn()
    //调用then方法
    result.then(value=>{
        console.log(value);
    },reason=>{
        console.warn(reason);
    })
    console.log(result);

2.await 表达式

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

async和await结合读取文件：


//1.引入fs模块
const fs = require("fs")
//读取【01】
function read01(){
    return new Promise((resolve,reject)=>{
        fs.readFile("./resources/01.md",(err,data)=>{
            //如果失败
            if(err) reject(err);
            //如果成功
            resolve(data)
        })
    })  
}
//读取【02】
function read02(){
    return new Promise((resolve,reject)=>{
        fs.readFile("./resources/02.md",(err,data)=>{
            //如果失败
            if(err) reject(err);
            //如果成功
            resolve(data)
        })
    })  
}
//读取【01】
function read03(){
    return new Promise((resolve,reject)=>{
        fs.readFile("./resources/03.md",(err,data)=>{
            //如果失败
            if(err) reject(err);
            //如果成功
            resolve(data)
        })
    })  
}
 
//声明一个async函数
async function main(){
    try{
        //获取01内容
    let read1 = await read01()
    //获取02内容
    let read2 = await read02()
    //获取03内容
    let read3 = await read03()
 
    console.log(read1.toString());
    console.log(read2.toString());
    console.log(read3.toString());
    }catch(e){
        console.log(e);
    }
    
}
main()

二、Object.values 和 Object.entries

1. Object.values() 方法返回一个给定对象的所有可枚举属性值的数组

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

3. Object.getOwnPropertyDescriptors 该方法返回指定对象所有自身属性的描述对象


    const person = {
        name:"Tom",
        hobby:['basketball','dance','rap'],
        subject:['Math','English']
    }
    //获取对象所有的键
    console.log(Object.keys(person));
    //获取对象所有的值
    console.log(Object.values(person));
    //entries
    console.log(Object.entries(person));
    //创建Map
    const m = new Map(Object.entries(person))
    console.log(m);
    console.log(m.get('hobby'));
    //对象属性的描述对象
    console.log(Object.getOwnPropertyDescriptors(person));

ES9新特性

一、Rest/Spread 属性

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

例一：


    function connect({host,port,...user}){
        console.log(host);
        console.log(port);
        console.log(user);
    }
    connect({
        host:'127.0.0.1',
        port:3306,
        username:"root",
        password:"root",
        type:"master"
    })

例二：


    const one = {
        a:"aa"
    }
    const two = {
        b:"bb"
    }
    const three = {
        c:"cc"
    }
    const all = {...one,...two,...three}
    console.log(all);

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

ES9 允许命名捕获组使用符号『 ?<name> 』 , 这样获取捕获结果可读性更强

一般方式：


    //声明一个字符串
    let str = "<a href='http://www.baidu.com'>百度</a>"
    //提取url与【标签文本】
    const reg = /<a href='(.*)'>(.*)<\/a>/;
    //执行
    const result = reg.exec(str)
    console.log(result);
    console.log(result[1]);
    console.log(result[2]);

命名捕获组：


    let str = "<a href='http://www.baidu.com'>百度</a>"
    const reg = /<a href='(?<url>.*)'>(?<text>.*)<\/a>/;
    const result = reg.exec(str)
    console.log(result);
    console.log(result.groups.url);
    console.log(result.groups.text);

三、正则表达式反向断言

ES9 支持反向断言，通过对匹配结果前面的内容进行判断，对匹配进行筛选。

正向断言：


    let str = "js234566酷酷酷222啦啦啦"
    //正向断言
    const reg = /\d+(?=啦)/
    console.log(reg.exec(str));

反向断言：


    let str = "js234566酷酷酷222啦啦啦"
    //反向断言
    const reg = /(?<=酷)\d+/
    console.log(reg.exec(str));

四、正则表达式 dotAll 模式

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


//dot . 元字符 除换行符以外的任意单个字符
let str = `
<ul>
    <li>
        <a>肖生克的救赎</a>
        <p>上映日期: 1994-09-10</p>
    </li>
    <li>
        <a>阿甘正传</a>
        <p>上映日期: 1994-07-06</p>
    </li>
</ul>`;
const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs
let result;
let data = []
while(result = reg.exec(str)){
    data.push({title:result[1],time:result[2]})
}
console.log(data);

ES10新特性

一、Object.fromEntries

在ES8中使用Object.entries将对象转化为数组，在ES10中，使用Object.fromEntries将数组转换为对象。


    const result = Object.fromEntries([
        ['name',"Tom"],
        ['hobby','dance,rap']
    ])
    console.log(result);
 
    //Map
    const m = new Map();
    m.set('name','Tom')
    const result1 = Object.fromEntries(m)
    console.log(result1);
 
    //在ES8中
    const arr = Object.entries({
        name:"Tom"
    })
    console.log(arr);

二、trimStart 和 trimEnd

trimStart清除字符串左侧空白；trimEnd清除字符串右侧空白


    let str = "   kkk    "
    console.log(str);   //'   kkk    '
    console.log(str.trimStart());   //'kkk    '
    console.log(str.trimEnd()); //'   kkk'

三、Array.prototype.flat 与 flatMap

Array.prototype.flat将多维数组转化为低维数组，参数为深度，是一个数字


    const arr = [1,2,[3,4,5]]
    console.log(arr.flat());
 
    const arr1 = [1,2,[3,4,[5,6]]]
    console.log(arr1.flat(2));
 
    //flatMap
    const arr2 = [1,2,3,4]
    const result = arr2.flatMap(item => [item*10])
    console.log(result);

四、Symbol.prototype.description

获取Symbol的字符串描述


    let s = Symbol("Tom")
    console.log(s.description); //Tom

ES11新特性

一、String.prototype.matchAll

String.prototype.matchAll得到正则批量匹配的结果


let str = `
<ul>
    <li>
        <a>肖生克的救赎</a>
        <p>上映日期: 1994-09-10</p>
    </li>
    <li>
        <a>阿甘正传</a>
        <p>上映日期: 1994-07-06</p>
    </li>
</ul>`;
//声明正则
const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/sg
//调用方法
const result = str.matchAll(reg)
const arr = [...result]
console.log(arr);

二、类的私有属性


    class Person{
        //公有属性
        name;
        //私有属性
        #age;
        #weight;
        //构造方法
        constructor(name,age,weight){
            this.name = name;
            this.#age = age;
            this.#weight = weight
        }
        intro(){
            console.log(this.name);
            console.log(this.#age);
            console.log(this.#weight);
        }
    }
    //实例化
    const girl = new Person('Tom',12,"45KG")
    //console.log(girl.#age); //获取不到
    girl.intro()

三、Promise.allSettled

接收一个Promise数组，返回一个Promise对象，返回结果永远是成功的状态


    //声明两个Promise对象
    const p1 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('商品数据 - 1')
        },1000)
    })
    const p2 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            //resolve('商品数据 - 2')
            reject('出错了')
        },1000)
    })
    //调用allSettled方法
    const result = Promise.allSettled([p1,p2])
    console.log(result);

四、可选链操作符

?. 在对象层级较深时，不用做层级判断的简便写法


    function main(config){
        //const cache1Host = config && config.cache1 &&config.cache1.host
        const cache1Host = config?.cache1?.host
        console.log(cache1Host);
    }
    main({
        cache1:{
            host:'192.168.1.100',
            username:'root'
        },
        cache2:{
            host:'192.168.1.200',
            username:'admin'
        }
    })

五、动态 import 导入

实现按需加载


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button id="btn">点一下</button>
</body>
<script src="./app.js" type="module"></script>
</html>

六、globalThis 对象

不管在任何环境下，globalThis始终指向全局对象

console.log(globalThis);    //Window

七、BigInt

大整型，应用于大数值运算


    let n = 123n
    console.log(n,typeof(n));//123n "bigint"
 
    //函数
    let a = 123
    console.log(BigInt(a));//123n


    //大数值运算
    let max = Number.MAX_SAFE_INTEGER;
    console.log(max);   //9007199254740991
    console.log(max+1);//9007199254740992
    console.log(max+2);//9007199254740992
 
    console.log(BigInt(max));   //9007199254740991n
    console.log(BigInt(max)+BigInt(1));//9007199254740992n
    console.log(BigInt(max)+BigInt(2));//9007199254740993n

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】

ES7、ES8、ES9、ES10、ES11 新特性 总结_前端es7

ES7新特性

一、Array.prototype.includes

二、指数操作符

ES8新特性

一、async 和 await

1.async 函数

2.await 表达式

async和await结合读取文件：

二、Object.values 和 Object.entries

ES9新特性

一、Rest/Spread 属性

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

三、正则表达式反向断言

四、正则表达式 dotAll 模式

ES10新特性

一、Object.fromEntries

二、trimStart 和 trimEnd

三、Array.prototype.flat 与 flatMap

四、Symbol.prototype.description

ES11新特性

一、String.prototype.matchAll

二、类的私有属性

三、Promise.allSettled

四、可选链操作符

五、动态 import 导入

六、globalThis 对象

七、BigInt

ES7、ES8、ES9、ES10、ES11 新特性总结_前端es7