【ES6】ES7--ES11新特性

最新推荐文章于 2024-04-29 10:49:04 发布

西西歪歪西歪

最新推荐文章于 2024-04-29 10:49:04 发布

阅读量1.6k

点赞数

分类专栏： ES6 文章标签： javascript 前端 ajax

本文链接：https://blog.csdn.net/weixin_58214412/article/details/123296708

版权

1.ES7新特性

2.ES8-async函数

3.ES8-await表达式

4.ES8-async与await结合读取文件

5.ES8-async与await结合发送AJAX 请求

14.ES10-Symbol.prototype.description

15.ES11-私有属性

16.ES11-Promise.allSettled方法

17.ES11-String.prototype.matchAll方法

18.ES11-可选链操作符

19.ES11-动态import

20.ES11-Biglnt类型

21.ES11-绝对全局对象globalThis

1.ES7新特性

Array.prototype.includes

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

指数操作符

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES7 新特性</title>
</head>
<body>
    <script>
        // includes   indexOf
        // const mingzhu = ['西游记','红楼梦','三国演义','水浒传'];

        //判断
        // console.log(mingzhu.includes('西游记'));
        // console.log(mingzhu.includes('金瓶梅'));

        // **
        console.log(2 ** 10);// 
        console.log(Math.pow(2, 10));
        
    </script>
</body>
</html>

2.ES8-async函数

1. async 函数的返回值为 promise 对象，

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>async函数</title>
</head>
<body>
    <script>
        //async 函数
        async function fn(){
            // 返回一个字符串
            // return '尚硅谷';
            // 返回的结果不是一个 Promise 类型的对象, 返回的结果就是成功 Promise 对象
            // return;
            //抛出错误, 返回的结果是一个失败的 Promise
            // throw new Error('出错啦!');
            //返回的结果如果是一个 Promise对象,Promise对象返回结果是成功那么函数就返回成功，且Promise对象的成功的值就是函数成功的值；返回失败同理。
            return new Promise((resolve, reject)=>{
                resolve('成功的数据');
                // reject("失败的错误");
            });
        }

        const result = fn();

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

3.ES8-await表达式

1. await 必须写在 async 函数中

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

3. await 返回的是 promise 成功的值

4. await 的 promise 失败了 , 就会抛出异常 , 需要通过 try...catch 捕获处理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>await</title>
</head>

<body>
    <script>
        //创建 promise 对象
        const p = new Promise((resolve, reject) => {
            // resolve("用户数据");
            reject("失败啦!");
        })

        // await 要放在 async 函数中.
        async function main() {
            try {
                let result = await p;
                //
                console.log(result);
            } catch (e) {
                console.log(e);
            }
        }
        //调用函数
        main();
    </script>
</body>

</html>

4.ES8-async与await结合读取文件

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

//1. 引入 fs 模块
const fs = require("fs");

//读取『为学』
function readWeiXue() {
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/为学.md", (err, data) => {
            //如果失败
            if (err) reject(err);
            //如果成功
            resolve(data);
        })
    })
}

function readChaYangShi() {
    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);
            //如果成功

最低0.47元/天解锁文章

西西歪歪西歪

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【ES6】ES7--ES11新特性

1.ES7新特性2.ES8-async函数3.ES8-await表达式4.ES8-async与await结合读取文件5.ES8-async与await结合发送AJAX 请求6.ES8对象方法扩展7.ES9扩展运算符与rest参数8.ES9正则扩展--命名捕获分组9.ES9正则扩展--反向断言10.ES9正则扩展--dotAll模式11.ES10对象方法扩展12.ES10字符串方法扩展13.ES10数组方法扩展14.ES10-Symbol.prototyp
复制链接

扫一扫