ECMAScript——指数操作符、async和await、 ES8对象方法扩展

最新推荐文章于 2024-09-02 08:45:00 发布

h_jQuery

最新推荐文章于 2024-09-02 08:45:00 发布

阅读量244

点赞数

分类专栏： javascript es6 node.js 文章标签： ecmascript javascript vue.js node

本文链接：https://blog.youkuaiyun.com/h_jQuery/article/details/120330299

版权

javascript 同时被 3 个专栏收录

124 篇文章

订阅专栏

es6

73 篇文章

订阅专栏

node.js

26 篇文章

订阅专栏

ECMAScript

ECMAScript 7的新特性

Array.prototype.includes

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

指数操作符

**[**]**用来实现幂运算，功能与Math.pow结果相同

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // Array.prototype.includes
        const arr = ['西游记', '红楼梦', '三国演义', '水浒传'];
        console.log(arr.includes('西游记')); //true
        // **：实现幂的运算
        console.log(2 ** 3); //Math.pow(2,3)——8
    </script>
</body>

</html>

ECMAScript 8的新特性

async和await

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

async函数

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

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

await表达式

1.await必须写在async函数中

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

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

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

async函数

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // async函数，返回的是一个promise对象;返回的是一个对象，而不是值
        async function fn() {
            // 只要返回的结果不是一个promise类型的对象，则函数的返回结果就是一个成功的promise对象
            // 和.then的返回值情况一样
            // return 'hello'
            // return;
            // 抛出错误，返回一个失败的promise
            // throw new Error('bugbugbugbugbug');
            // throw 'bugbug';
            // 返回一个promise对象,promise对象调用的是resolve，则是成功的，reject就是失败
            return new Promise((resolve, reject) => {
                resolve('成功的promise');
                // reject('失败的promise');
            })
        };
        const res = fn();
        console.log(res); //是一个promise对象
        // 调用then方法，得到对象中返回的值
        res.then(value => {
            console.log(value); //成功的promise
        }, reason => {
            console.log(reason); //失败的promise
        })
    </script>
</body>

</html>

await

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // promise有两个属性，一个属性对应它的状态，一个属性对应它状态的值
        // 状态：初始化，成功，失败
        const obj = new Promise((resolve, reject) => {
            // resolve('成功的promise');
            // 失败的状态需要用try...catch捕获
            reject('失败的promise');
        });
        async function func() {
            // 用了await，就省略了调用then方法，直接得到promise对象的状态值
            // await的值是promise对象的状态对应的值
            // 成功的状态
            /* let res = await obj;
            console.log(res); */
            // 失败的状态
            try {
                // 捕获错误
                let res = await obj;
                console.log(res);
            } catch (e) {
                // 输出错误
                // 这个e就是失败状态的值
                console.log(e);
            }
        };
        func(); //输出的是对应的状态值
    </script>
</body>

</html>

js文件

const fs = require('fs');

// 返回的是一个promise对象
function testaa() {
    return new Promise((resolve, reject) => {
        fs.readFile('./resources/aa.txt', (err, data) => {
            if (err) reject(err);
            resolve(data);
        })
    })
};

function testbb() {
    return new Promise((resolve, reject) => {
        fs.readFile('./resources/bb.txt', (err, data) => {
            if (err) reject(err);
            resolve(data);
        })
    })
};

function testcc() {
    return new Promise((resolve, reject) => {
        fs.readFile('./resources/cc.txt', (err, data) => {
            if (err) reject(err);
            resolve(data);
        })
    })
};
async function test() {
    //知道一定成功，可以不写try...catch
    let aa = await testaa();
    let bb = await testbb();
    let cc = await testcc();
    console.log(aa.toString());
    console.log(bb.toString());
    console.log(cc.toString());
};
test();

发送ajax请求

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 发送AJAX请求，返回的结果是promise对象
        function sendAjax(url) {
            // 返回一个promise对象
            return new Promise((resolve, reject) => {
                // 1.创建对象
                const xhr = new XMLHttpRequest();
                // 2.初始化
                xhr.open('get', url);
                // 3.发送
                xhr.send();
                // 4.事件绑定
                xhr.onreadystatechange = function() {
                    if (x.readyState === 4) {
                        if (xhr.status >= 200 && xhr.status < 300) {
                            // 成功
                            resolve(xhr.response);
                        } else {
                            // 失败
                            reject(xhr.status);
                        }
                    }
                }
            })
        }
        // promise then 方法测试
        /* sendAjax('接口路径').then(value => {
            console.log(value);
        }, reason => {
            console.log(reason);
        }); */
        // async和await测试
        async function test() {
            let res = await sendAjax('接口路径');
            console.log(res);
        };
        test();
    </script>
</body>

</html>

ES8对象方法扩展

Object.valus和Object.entries

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

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

Object.getOwnPropertyDescriptors

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

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        const school = {
            name: 'xxx学院',
            cities: ['北京', '上海', '广州', '深圳'],
            item: ['javascript', 'java', 'vue', 'react']
        };
        /* // 获取对象的所有键
        console.log(Object.keys(school)); //['name','cities','item'],形成了一个数组
        // 获取对象所有的值
        console.log(Object.values(school)); //['xxx学院',['北京', '上海', '广州', '深圳'],['javascript', 'java', 'vue', 'react']]
        //    返回[[name,key],[name,key],[name,key]]
        // console.log(Object.entries(school));
        const m = new Map(Object.entries(school));
        console.log(m.get('name')); */
        // 注意属性后面是有s的
        // getOwnPropertyDescriptors：返回对象的描述对象
        // console.log(Object.getOwnPropertyDescriptors(school));
        // 创建对象
        // 第一个参数是原型对象，第二个参数是描述对象
        const obj = Object.create(null, {
            // 进行深层次的克隆
            name: {
                // 设置值
                value: 'xxx学院',
                // 属性特性
                writable: true,
                configurable: true,
                enumerable: true
            }
        })
    </script>
</body>

</html>

ES9的新特性

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

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 使用rest参数,除了host和 port, 将后续的参数放到user这个对象里面里面
        /* function connect({
            host,
            port,
            ...user
        }) {
            console.log(host);
            console.log(port);
            // console.log(userpwd);
            // console.log(username);
            console.log(user);
        }; */
        /* function connect({
                    host,
                    port,
                    username,
                    userpwd
                }) {
                    console.log(host);
                    console.log(port);
                    console.log(userpwd);
                    console.log(username);
                }; */
        /*  connect({
             host: '127.0.0.1',
             port: 3306,
             username: 'root',
             userpwd: 'root',
             type: 'admin'
         })() */
        const xyj = {
            name1: '西游记'
        };
        const hlm = {
            name2: '红楼梦'
        };
        const sgyy = {
            name3: '三国演义'
        };
        const shz = {
            name4: '水浒传'
        };
        // 用rest参数将上面四个对象的属性合并成一个新的对象，所以上面的对象的属性名不能重复
        const sdms = {...xyj,
            ...hlm,
            ...shz,
            ...sgyy
        };
        console.log(sdms);
    </script>
</body>

</html>