ES7-11新特新速览

已于 2023-11-25 11:11:57 修改
阅读量105 收藏
点赞数
分类专栏： 笔记 ES 7-11 文章标签： javascript 前端 html
于 2022-04-17 12:56:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51445423/article/details/124228057
版权

ES7-11新特新速览

文章目录

ES7新特性

数组新特性

includes()

幂运算

2的10次方

console.log(2 ** 10);//1024

ES8新特性

async和await

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

异步编程的解决方案：

  • 生成器函数
  • promise
  • async和await

async函数

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

promise类型 的对象

return throw new Error("出错了");
return new Promise(()=>{
    resolve('成功');
})

async函数的声明

async function fn (){
    return 'yxj'
}
const result = fn();
console.log(result);//Promise { <state>: "fulfilled", <value>: "yxj" }

async函数的返回类型（是一个promise对象）

  • 只要返回值的类型不是一个promise类型的对象则async函数的返回结果就是一个成功的promise对象

    async function fn (){
    //只要返回的不是promise类型的对象，则返回结果就是成功的promise对象
    return;
}
const result = fn();
console.log(result);//Promise { <state>: "fulfilled", <value>: undefined }

  • 抛出promise类型错误

    async function fn (){
    throw new Error("出错了");
}
const result = fn();
console.log(result);//Promise { <state>: "rejected", <reason>: Error }

  • 返回的结果是一个promise对象时

    promise的返回值会成为他所在函数的返回值

    async function fn (){
    return new Promise((resolve,reject)=>{
        resolve("成功");
    })
}
const result = fn();//此时fn返回的结果也是成功的
console.log(result);//Promise { <state>: "fulfilled", <value>: "成功" }
//fn返回的值就是Promise返回的值

总结：

  • 声明async函数时在function前加async
  • 他的返回结果是一个promise类型的对象
  • 对象的状态由函数内部的return语句决定

可以调用then方法

async function fn (){
    return new Promise((resolve,reject)=>{
        reject("失败了");
    })
}
const result = fn();
result.then((value)=>{
    console.log(value);
},(reason)=>{
    console.log(reason);
})

await表达式

  • await必须写在async函数中

  • await右侧的表达式一般为promise对象

  • await返回的是promise成功的值

  • await的promise失败了就会抛出异常，需要通过try…catch捕获处理

// 先创建一个promise对象
const p = new Promise((resolve,reject)=>{
    // resolve("成功的值");
    reject("error");
})
async function fn(){
    // let result = await p;
    // console.log(result)

    try{
        let result = await p;
        console.log(result)
    }catch(e){
        console.log(e);//error
    }
;
}
// fn();//成功的值
fn();//error

async和await结合读取文件内容

//引入fs模块
const fs = require("fs");
// 读取文件1
function readA() {
    return new Promise((resolve,reject)=>{
        fs.readFile("./ddy.md",(err,data)=>{
            if(err){
                reject(err);
            }else{
                resolve(data);
            }
        })
    })
}
// 读取文件2
function readB() {
    return new Promise((resolve,reject)=>{
        fs.readFile("./study.md",(err,data)=>{
            if(err){
                reject(err);
            }else{
                resolve(data);
            }
        })
    })
}
// 读取文件3
function readC() {
    return new Promise((resolve,reject)=>{
        fs.readFile("./look.md",(err,data)=>{
            if(err){
                reject(err);
            }else{
                resolve(data);
            }
        })
    })
}
// 声明一个async函数
async function main(){
    // 获取a
    let A = await readA();
    // 获取b
    let B = await readB();
    // 获取c
    let C = await readC();

    console.log(A.toString());
    console.log(B.toString());
    console.log(C.toString());
}
main();
/**
 * PS F:\前端\ES6~11\async> node .\async.js        
        天行健,君子以自强不息.
        学而时习之不亦说乎?   
        读书破万卷,下笔如有神.
        PS F:\前端\ES6~11\async> 
 */

Promise与then方法结合发送Ajax

// 发送Ajax请求,返回结果是Promise对象
function sendAJAX(url){
    return new Promise((resolve,reject)=>{
        // 创建对象
        const xhr = new XMLHttpRequest();
        // 初始化
        xhr.open('GET',url);
        // 发送
        xhr.send();
        // 事件绑定
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if(xhr.status >= 200&&xhr.status <= 300){
                    resolve(xhr.response);
                }else{
                    reject(xhr.status);
                }
            }
        }
    })
}
// 测试
const result = sendAJAX('https://api.apiopen.top/getJoke');
console.log(result);//Promise { <state>: "pending" }
sendAJAX('https://api.apiopen.top/getJoke').then((value)=>{
    console.log(value);
},(reason)=>{

})

async和await结合发送Ajax

function sendAJAX(url){
    return new Promise((resolve,reject)=>{
        // 创建对象
        const xhr = new XMLHttpRequest();
        // 初始化
        xhr.open('GET',url);
        // 发送
        xhr.send();
        // 事件绑定
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if(xhr.status >= 200&&xhr.status <= 300){
                    resolve(xhr.response);
                }else{
                    reject(xhr.status);
                }
            }
        }
        })
}
// async await测试   axios的返回结果就是一个promise对象
async function main(){  
    // 向Ajax发送请求
    let result = await sendAJAX("https://api.apiopen.top/getJoke");
    console.log(result);
    // 如果还要向别的服务器发送请求
    let result2 = await sendAJAX("https://www.tianqiapi.com/api/?version=v1&city=北京%appid=23941491&appsecret=TXoD5e8P");
    console.log(result2);
}
main();

对象方法的扩展

const obj = {
    name:'yxj',
    age:18,
    sex:'男'
};

  • Object.keys()

    获取对象的键

     console.log(Object.keys(obj));//[ "name", "age", "sex" ]

  • Object.values()

    获取对象的值

    console.log(Object.values(obj));//[ "yxj", 18, "男" ]

  • Object.entries

    获取对象的键值

     console.log(Object.entries(obj));//0: Array [ "name", "yxj" ] 1: Array [ "age", 18 ] 2: Array [ "sex", "男" ]

  • Object.getOwnPropertyDesciptors

    返回对象属性的描述对象，深层次克隆对象时会使用到

    console.log(Object.getOwnPropertyDescriptors(obj));
/*
    age: Object { value: 18, writable: true, enumerable: true, … }
    configurable: true​​ //是否可以删除
    enumerable: true​​   //是否可以枚举
    value: 18  ​​//值
    writable: true     //是否可写
    <prototype>: Object { … }
    name: Object { value: "yxj", writable: true, enumerable: true, … }​
    sex: Object { value: "男", writable: true, enumerable: true, … }
    <prototype>: Object { … }
*/

对象属性的补充：

  • configurable 是否可以删除
  • enumerable 是否可以枚举
  • writable: true 是否可写

ES9的新特性

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

rest参数

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

扩展运算符

const name = {
    name:'yxj',
};
const age = {
    age:18,
};
const sex = {
    sex:'男',
};
// 将四个对象的属性合并为一个一个对象
const person = {...name,...age,...sex}
console.log(person);//Object { name: "yxj", age: 18, sex: "男" }

正则扩展

命名捕获分组

可以对分组匹配的结果进行命名 方便对结果进行处理

let str1 = '<a href="https://www.yxj.com">英达网</a>';
// 提取url与标签文本
const reg1 = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;
const result = reg1.exec(str1);
console.log(result);//多了 groups: Object { url: "https://www.yxj.com", text: "英达网" }

反向断言

断言：判断匹配结果是否正确

正向断言

let str = 'JS555211314行内555溜了溜了';//提取555
//根据后边的内容判断前面的内容是否合法
const reg = /\d+(?=溜)/;
const result = reg.exec(str);
console.log(result);//[555]

反向断言

let str = 'JS555211314行内555溜了溜了';//提取555
//根据前边的内容判断后面的内容是否合法
const reg = /(?<=内)\d+/;
const result = reg.exec(str);
console.log(result);//[555]

dotAll模式

dot . 元字符 除换行符以外的任意单个字符

        //把ul里的电影名称和对应的上映时间提取出来，存到对象里
        let str = `
        <ul>
            <li>
                <a>泰坦尼克号</a>
                <p>上映日期：1997-12-19</p>
            </li>
            <li>
                <a>阿甘正传</a>
                <p>上映日期：1994-07-06</p>
            </li>
        </ul>`;
        // 以前的做法
        const reg = /<li>\s+<a>(.*?)<\/a>\s+<p>(.*?)<\/p>/
        const result = reg.exec(str);
        console.log(result);

        // dot . 
        const reg1 = /<li>.*?<a>.*?<\/a>.*?<p>.*?<\/p>/gs;
        const result1 = reg.exec(str);
        console.log(result1);

ES10的新特性

Object.fromEntries

  • 可以用来创建一个对象

  • 他的参数可以是二维数组或者是Map

  • 二维数组的情况(将二维数组转为了对象)

    const result =  Object.fromEntries([
    ['name','yxj'],
    ['skill','html.css,javascript,vue']
])
console.log(result);//Object { name: "yxj", skill: "html.css,javascript,vue" }

  • Map的情况

    const m = new Map();
m.set('name','yxj');
const result2 =  Object.fromEntries(m);
console.log(result2);//Object { name: "yxj" }

    总结：

        es8里的Object.entries方法 与Object.fromEntries其实是一个逆运算

​    Object.entries将一个对象转换为一个二维数组

​    Object.fromEntries可以将一个二维数组转为对象

字符串的扩展方法

  • trim ES6提出 用于清除两侧的空白
  • trimSta ES10提出 用于清除左侧的空白
  • trimEnd ES10提出 用于清除右侧的空白
let str = '  yxj   ';
console.log(str);
console.log(str.trimSta());
console.log(str.trimEnd());

数组的方法

flat

  • 将多维数组转换成低维数组

  • 参数默认为1表示深度，相当于展开数组层数

    const arr = [[1,2],[3,4],[5]];
console.log(arr.flat());//Array(5) [ 1, 2, 3, 4, 5 ]

flatMap

  • 与数组的map方法类似
  • 能够把数组降维

Symbol的描述属性

  • description
let s = Symbol('yxj');
console.log(s.description);//yxj

ES11的新特性

class私有属性

class person{
    //共有属性
    name;
    //私有属性
    #age;
    #weight;
    constructor(name,age,weight){
        this.name = name;
        this.#age = age;
        this.#weight = weight;
    }
}

promise.allSettled

  • 可以分别得到每一个promise的状态及结果

  • 用于处理批量的异步任务

            const p1 = new Promise((resolve,reject)=>{
           setTimeout(()=>{
            resolve("商品数据 -1 ");
           },1000) 
        });
        const p2 = new Promise((resolve,reject)=>{
           setTimeout(()=>{
            resolve("商品数据 -1 ");
           },1000) 
        });
 
        // 调用allsettled方法  可以分别得到每一个promise的状态及结果
        const result = Promise.allSettled([p1,p2]);
        console.log(result);
        /*
            Promise { <state>: "pending" }
            <state>: "fulfilled"
            <value>: Array [ {…}, {…} ]
            0: Object { status: "fulfilled", value: "商品数据 -1 " }
            1: Object { status: "fulfilled", value: "商品数据 -1 " }
            length: 2
            <prototype>: Array []
            <prototype>: Promise.prototype { … }
        */

promise.all

  • 每一项promise都成功整体才会返回成功的promise
  • 也用于处理批量的异步任务

可选链操作符

  • ?.
  • 在获取深层次对象类型的参数时用到
//?. 
//在获取深层次对象类型的参数时用到
function main (config){
    const dbHost = config && config.db && config.db.host;
    console.log(dbHost);//192.168.1.100
    
    // 使用?.可以免去层层判断
    const dbHost2 = config?.db?.host;
    console.log(dbHost2);

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

动态import

  • 动态import可以实现按需加载
  • import()函数返回结果是一个Promise对象
  • Promise对象成功的值就是暴露出来的./app.js里的对象
const btn = document.getElementById("btn");
btn.onclick = function(){
    import('./app.js').then(module=>{
        module.methods();
    })
}

bigInt

  • 大整形
  • 只能操作整形
  • 表示方式：在普通整形的基础上+n
  • 用于大数值的运算
let n =521n;
console.log(n);//521n
console.log(typeof n);//bigint

  • 函数形式

    let n =521;
console.log(BigInt(n));//521n

  • 最大安全整数

    let max = Number.MAX_SAFE_INTEGER;
console.log(max);//9007199254740991
console.log(BigInt(max) + BigInt(5));//9007199254740996n

绝对全局对象

  • globalThis
  • 始终指向全局对象
console.log(globalThis);//window
let that = globalThis;
独立寒秋-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ES7-11新特性
weixin_57991809的博客
05-07 146
ES7-11新特性 ES7新特性 Includes()：表示某个数组是否包含给定的值，返回true和false indexOf()是之前的写法，返回1和-1 **幂运算：2**4 = 2*2*2*2*2 Math.pow(2,4)是之前的写法 ES8新特性 async和await：这2个结合可以让异步代码像同步代码一样 async函数： async函数的返回值为promise对象 promise对象的结果由as...
最新版 apache-skywalking-apm-es7-8.2.0.tar.gz
11-13
最新版 apache-skywalking-apm-es7-8.2.0.tar.gz
es7-11学习
xuan971130的博客
04-17 336
一、es7新特性 1.1 cinludes 相当于indexof，，但是indexof返回是数数字，下标 1.2 指数操作符 二、 es8新特性 2.1. async和await函数： （生成器函数和promise对象可以实现异步编程） async和await两种语法结合可以让异步代码像同步代码一样 2.1.1 async函数 在函数前面加async即可。 返回的结果是一个promise对象。promise对象的状态由对象来决定。如果返回的是失败的promise或者是错.
es7~es11相关知识
acm_cn1234567890的博客
09-07 262
1. es7新特性 (1). Array.prototype.includes 数组的includes(value)方法，用来检测数组中是否包含某个元素，返回布尔值。 const aa = ["张颜齐","段宜恩","郑秀晶"]; console.log(aa.includes("张颜齐"));//true (2). [**]用来实现幂运算 [**]与Math.pow()是一样的。 console.log(2 ** 10);//1024 Math.pow(2,10); 2. es8新特新 (1).Ob
es7-es11新特性
m0_56471534的博客
04-20 180
ES7新特性 includes判断某一元素是否在数组里 （ES6）indexOf判断某一元素是否在数组里，但是返回的结果是个数字 **幂运算 （ES6）Math.pow幂运算 ES8新特性 async和await两者结合起来可以让异步代码像同步代码一样 异步编程的解决方案：1.生成器函数 2.promise 3.async和await async函数 1.async函数的返回值为promise对象， 2. promise 对象的结果由async函数执行的返回值决定 a..
ES6笔记，文尾ES7 -- ES11（细节会持续补充）
前端小白, 稀土：雩风十六
08-04 351
ES6允许使用=>定义函数，格式如下//括号内传参, 可以看出优化了原来的function()部分 return a + b;
JavaScript高级 ES7-ES13 新特性
ximingx
01-30 2567
in来遍历对象类型，但是并没有被ECMA标准化，在ES11中，对其进行了标准化，for…某些字符串我们需要对其进行前后的填充，来实现某种格式化效果，ES8中增加了 padStart 和 padEnd 方法，分别是对字符串的首尾进行填充的。在ES7中，我们可以通过includes来判断一个数组中是否包含一个指定的元素，根据情况，如果包含则返回 true，否则返回false。flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
apache-skywalking-apm-es7-8.5.0.tar.gz
03-20
apache-skywalking-apm-es7-8.5.0.tar.gz
apache-skywalking-apm-es7-8.7.0.tar.gz
03-20
apache-skywalking-apm-es7-8.7.0.tar.gz
apache-skywalking-apm-es7-8.7.0
02-25
用于 springCloud 中的链路跟踪
apache-skywalking-apm-es7-8.0.1.tar
07-29
skywalking es7 tar包。 apache-skywalking-apm-es7-8.0.1.tar
Javascript 从ES5到ES7 - 11 fetch
我的英文站点：https://iorilan.medium.com/
02-05 591
fetch('http://example.com/movies.json') .then(function(response) { return response.json(); }) .then(function(myJson) { console.log(JSON.stringify(myJson)); });  
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 550
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
Harmony 开发的艺术 面向对象
不懂先生的博客
06-13 1044
然后你可以创建多个子类，如“圆形”、“矩形”和“三角形”，它们都继承自“形状”类并实现了自己的“绘制”方法。尽管每个对象的类型可能不同（圆形、矩形、三角形等），但由于它们都继承了“形状”类并实现了相同的“绘制”方法，因此你可以通过父类引用来统一调用它们的方法。然后你可以创建一个“狗”类，它继承自“动物”类，并添加或覆盖一些特定的属性和方法（如“叫”和“摇尾巴”）。所以面向对象的三大特征（封装、继承、多态）在java语言中很容易实现的设计，搬到早期的JavaScript中，就变噩梦一样的存在。
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1269
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
Vue在表单校验中trigger属性指定何时触发校验规则
李长渊的博客
06-13 806
Vue在表单校验中trigger属性指定何时触发校验规则
vue格网图
最新发布
南北粉面馆
06-16 145
【代码】vue格网图。
vue3 防止按钮的连续点击（连点）
MtangEr的博客
06-13 281
vue3防止按钮连续点击，可注册自定义指令 v-prevent-reclick实现
15116es7-1ak02-0ab0 固件
08-16
15116es7-1ak02-0ab0是西门子公司生产的一款工业设备的固件。固件是指存储在设备内部的一组程序和数据，用于控制设备的功能和操作。15116es7-1ak02-0ab0固件是专门为该工业设备开发的固件版本。该固件采用先进的技术...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

独立寒秋-

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值