开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> ES7~ES11新特性 -> 正文阅读

[JavaScript知识库]ES7~ES11新特性

ES7

Array.prototype.includes

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

const mingzhu = ['西游记','红楼梦','三国演义','水浒传'];
console.log(mingzhu.includes('西游记'));//true
console.log(mingzhu.includes('从百草园到三味书屋'));//false

指数操作符

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

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

ES8新特性

async 和 await

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

async 函数

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

【return类型1——返回结果不是一个Promise类型】

        //async函数
        async function fn(){
            //返回的结果不是一个Promise类型的对象，则函数返回的结果就是成功的Promise对象
            return '果粒陈';
        }
        const result = fn();
        console.log(result);

在这里插入图片描述
【返回类型2——返回结果是一个失败的Promise】

        async function fn(){
        		//抛出错误，返回的结果是一个失败的Promise
            throw new Error('出错啦');
        }
        const result = fn();
        console.log(result);

在这里插入图片描述
【返回类型3——返回一个Promise对象】(这种情况居多)

        async function fn(){
            return new Promise((resolve,reject)=>{
                resolve('成功的数据');
            });
        }
        const result = fn();
        console.log(result);

在这里插入图片描述

        async function fn(){
            return new Promise((resolve,reject)=>{
                reject('失败的错误');
            });
        }
        const result = fn();
        console.log(result);

在这里插入图片描述

await表达式

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

 //创建一个promise对象
        const p = new Promise((resolve,reject) => {
            resolve("用户数据");
        });
        //await要放在axync函数中
        async function main(){
            let result = await p;
            console.log(result);
        }
        main();

在这里插入图片描述

        //创建一个promise对象
        const p = new Promise((resolve,reject) => {
            reject("失败啦！！！");
        });
        //await要放在axync函数中
        async function main(){
          try {
            let result = await p;
            console.log(result);    
          } catch (e) {
              console.log(e);
          }
        }
        main();

在这里插入图片描述

async和await结合读取文件

const fs = require("fs");
//读取“为学”
function readWeiXue() {
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/为学.md", (err, data) => {
            //如果失败
            if(err){
                reject(err);
            }
            //如果成功
            resolve(data);
        });
    });
}
//读取“插秧诗”
function readChaYang() {
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/插秧诗.md", (err, data) => {
            //如果失败
            if(err){
                reject(err);
            }
            //如果成功
            resolve(data);
        });
    });
}
//读取“观书有感”
function readGuanShu() {
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/观书有感.md", (err, data) => {
            //如果失败
            if(err){
                reject(err);
            }
            //如果成功
            resolve(data);
        });
    });
}
async function main(){
    let weixue = await readWeiXue();
    let ChaYang = await readChaYang();
    let GuanShu = await readGuanShu();
    console.log(weixue.toString());
    console.log(ChaYang.toString());
    console.log(GuanShu.toString());
}
main();

在这里插入图片描述

async和await封装AJAC请求

        //发送Ajax请求，返回结果是Promise对象
        //发送一个get请求，参数为URL
        function sendAjax(url) {
            return new Promise((resolve, reject) => {
                const x = new XMLHttpRequest();
                x.open('GET', url);
                x.send();
                x.onreadystatechange = function () {
                    if (x.readyState === 4) {
                        //成功
                        if (x.status >= 200 && x.status < 300) {
                            resolve(x.response);
                        }else{
                            //失败
                            reject(x.status);
                        }
                    }
                }
            });
        }
        //promise then 方法测试
        sendAjax('接口').then(value=>{
            console.log(value);
        },reason=>{

        });
        //async与await测试
        async function main(){
            let result = await sendAjax("接口地址");
            console.log(result);
        }

对象方法扩展

const school  ={
    name:'果粒陈',
    citys:['北京','上海','深圳'],
    xueke:['前端','java','大数据','运维'],
}
//获取对象多所有的键
console.log(Object.keys(school));//['name', 'citys', 'xueke']

Object.values()

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

        const school  ={
            name:'果粒陈',
            citys:['北京','上海','深圳'],
            xueke:['前端','java','大数据','运维'],
        }
        //获取对象所有的值
        console.log(Object.values(school));

在这里插入图片描述

Object.entries()

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

        //声明对象
        const school  ={
            name:'果粒陈',
            citys:['北京','上海','深圳'],
            xueke:['前端','java','大数据','运维'],
        }
        console.log(Object.entries(school));
        const m = new Map(Object.entries(school));
        console.log(m);
        //console.log(m.get('name'))//果粒陈

在这里插入图片描述

Object.getOwnPropertyDescriptors

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

        const school  ={
            name:'果粒陈',
            citys:['北京','上海','深圳'],
            xueke:['前端','java','大数据','运维'],
        }
        //对象属性的描述对象
        console.log(Object.getOwnPropertyDescriptors(school));

在这里插入图片描述

const obj = Object.create(null,{
            name:{
                //设置值
                value:'果粒陈',
                //属性特性
                writable:true,//是否可写
                configurable:true,//是否可以删除
                enumerable:true,//是否可以枚举
            }
        });

ES9新特性

Rest/Spread 属性

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

reset参数：

        function connect({host,port,...user}){
            console.log(host);
            console.log(port);
            console.log(user);
        }
        connect({
            host:'127.0.0.1',
            port:'3306',
            username:'cxj',
            password:'123456'
        })

在这里插入图片描述
扩展运算符对对象的操作：
它能够将对象展开，形成参数的序列

        const skillOne = {
            q:'天音波'
        }
        const skillTwo = {
            w:'金钟罩'
        }
        const skillThree = {
            e:'铁布衫'
        }
        const skillFour ={
            r:'天雷破'
        }
        const result = {...skillOne,...skillTwo,...skillThree,...skillFour};
        console.log(result);//{q: '天音波', w: '金钟罩', e: '铁布衫', r: '天雷破'}

正则扩展

正则命名捕获分组

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

【用正则捕获】

        let str = '<a href="http://www.cxj.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.cxj.com">果粒陈</a>';
        //提取url与标签文本
        const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;
        const result = reg.exec(str)
        console.log(result);
        //提取的时候
        //console.log(result.groups.text);//果粒陈

在这里插入图片描述

反向断言

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

        let str = '345oiuf89754果粒陈';
        //需求，把后面的数字提取出来
        const reg  =/\d+(?=果)/;
        const result = reg.exec(str);
        console.log(result);

在这里插入图片描述【反向断言】根据匹配结果后面的内容进行判断

        const reg = /(?<=f)\d+/;
        const result = reg.exec(str);
        console.log(result);

在这里插入图片描述

dotAll模式

dot本身有.的意思，.指的是正则中的元字符
正则表达式中.表示除回车外的任何单字符。模式修正符s，加了它之后，.将能够匹配任意字符，包含换行符。

【单个匹配】

        let str = `
        <ul>
            <li>
                <a>肖生克的救赎</a>
                <p>上映日期: 1994-09-10</p>
            </li>
            <li>
                <a>阿甘正传</a>
                <p>上映日期: 1994-07-06</p>
            </li>
        </ul>`;
        //需求：提取出ul>li中的电影名称和上映时间提取出来，放在一个对象中
        //声明正则
        // const reg = /<li>\s+<a>(.*?)<\/a>\s+<p>(.*?)<\/p>/;//没有加模式修正符
        const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/s;
        const result = reg.exec(str);
        console.log(result);

在这里插入图片描述
【多个匹配】加上模式修正符g（全局匹配），然后遍循环输出

        let str = `
        <ul>
            <li>
                <a>肖生克的救赎</a>
                <p>上映日期: 1994-09-10</p>
            </li>
            <li>
                <a>阿甘正传</a>
                <p>上映日期: 1994-07-06</p>
            </li>
        </ul>`;
        //需求：提取出ul>li中的电影名称和上映时间提取出来，放在一个对象中
        //声明正则
        // const reg = /<li>\s+<a>(.*?)<\/a>\s+<p>(.*?)<\/p>/;//没有加模式修正符
        const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;
        let result
        while (result = reg.exec(str)) {
            console.log(result);
        }

在这里插入图片描述

ES10新特性

Object.fromEntries

用来创建一个对象。它的参数比较特殊，它接收一个二维数组或者一个map。

【接收二维数组】

        const result = Object.fromEntries([
            ['name','果粒陈'],
            ['xueke','Java,大数据,前端']
        ]);
        console.log(result);

在这里插入图片描述【接收map】

        const m = new Map();
        m.set('name','cxj');
        m.set('city','北京,上海,广州')
        const result = Object.fromEntries(m);
        console.log(result);

在这里插入图片描述

trimStart 和 trimEnd

ES5中字符串本身就已经有一个方法——trim，它用来清除字符串两侧的空白字符。
ES中的trimStart和trimEnd用来指定清除左侧或右侧的空白字符

        let str = '   jiofev    ';
        console.log(str);
        console.log(str.trimStart());
        console.log(str.trimEnd());

在这里插入图片描述

Array.prototype.flat 与 flatMap

flat 多维数组转换为低纬数组【不带参数，默认深度为1】

const arr = [1,2,3,4,[5,6]];
        console.log(arr.flat());//[1, 2, 3, 4, 5, 6]
        const arr1 = [1,2,3,4,[5,6,[7,8,9]]];
        //深度为2，比如这个三维数组，这里深度为2，给他转换成一维数组了
        console.log(arr1.flat(2));//[1, 2, 3, 4, 5, 6, 7, 8, 9]

flatMap 把Map的结果做一个维度降低

        const arr = [1,2,3,4];
        //箭头函数返回一个数组，下面输出的时候，输出会是二维数组。这时使用flatMap就会将它转换为一维数组。
        const result = arr.flatMap(item => [item*10]);        
        console.log(result);//[10, 20, 30, 40]

Symbol.prototype.description

用来获取Symbol的字符串描述

const s = Symbol('果粒陈');
console.log(s.description);//果粒陈

ECMASript 11 新特性

类的私有属性

        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('小红',20,100);
        console.log(girl);//Person {name: '小红', #age: 20, #weight: 100}
        console.log(girl.name);//小红
        //console.log(girl.#age);//报错，因为它是私有属性，在类外面无法获取
        girl.intro();//输出如下
        //小红
        //20
        //100

Promise.allSettled和Promise.all

该方法接收一个Promise的数组，返回的结果是一个Promise对象。但是返回的结果永远是成功的状态额，而且成功的值是里面每一个Promise的状态和结果。

        const p1 = new Promise((resolve,reject)=>{
            setTimeout(() => {
                resolve("商品数据-1");
            }, 1000);
        });
        const p2 = new Promise((resolve,reject)=>{
            setTimeout(() => {
                resolve("商品数据-2");
            }, 1000);
        });
        //调用allSettled方法
        const result = Promise.allSettled([p1,p2]);
        console.log(result);

在这里插入图片描述

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

在这里插入图片描述

Promise.all 和上面的方法很像，不同的是他返回的结果要根据里面每一个Promise的状态决定。如果他们都成功，它才会成功。反之，则Promise.all返回的Promise就是失败的

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

在这里插入图片描述

可选链操作符

可选链操作符，是?.的组合。当应对对象类型的参数的时候，对象的层级比较深，有了可选链操作符之后，就不用做层级的判断了。

        function main(config){
            // const dbHost = config && config.db && config.db.host;
            const dbHost = config?.db?.host;

            console.log(dbHost);//192.168.1.100
        }

        main({
            db: {
                host:'192.168.1.100',
                username: 'root'
            },
            cache: {
                host: '192.168.1.200',
                username:'admin'
            }
        })

动态 import 导入

在入口文件动态引入，也就是用的时候再引入。例如下面的入口文件：

//获取元素
const btn = document.getElementById('btn');

btn.onclick = function(){
    import('./hello.js').then(module => {
        module.hello();
    });
}

BigInt类型

BigInt,大整型。主要用来更大的数值运算

		//表示方式
        let n = 521n;
        console.log(n,typeof(n));//521n 'bigint'

        //BigInt函数。可以将普通的整数的值转换为大整数型。
        let n1 = 123;
        console.log(BigInt(n1));//123n
        //注意：不能转换浮点型数据
        let n2 = 1.2;
        console.log(BigInt(n2));//报错。The number 1.2 cannot be converted to a BigInt because it is not an integer

【运算】

		//大数值运算
        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