ES7、ES8新特性

琳琳在哪

已于 2022-04-21 22:29:43 修改

阅读量399

点赞数

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

于 2022-04-17 08:27:18 首次发布

本文链接：https://blog.csdn.net/qq_63479468/article/details/124220913

版权

前端专栏收录该内容

28 篇文章 0 订阅

订阅专栏

ES7

一、Array.prototype.includes

1.用来判断数组中是否包含某元素，返回布尔类型值；

Object.values,Object.entries,Object.getOwnPropertyDescriptors

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

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

3.Object.getOwnPropertyDescriptors(); 返回指定对象所有自身属性的描述对象；

ES7

一、Array.prototype.includes

Includes方法:

1.用来判断数组中是否包含某元素，返回布尔类型值；

语法：arr.includes(元素值,序号);

<!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>ES7新特性</title>
</head>
<body>
    <script>
        //includes
        let arr = ['0','1','2','3','4','5','6','7','8'];
        console.log(arr.includes('3'));
        console.log(arr.includes('9'));
    </script>
</body>
</html>

想要查找的元素记得加引号，即使是数字

2.用来判断字符串，返回布尔类型值；

语法：includes("某个特定值");

二、指数操作符

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

幂运算的简化写法，例如：2的10次方：2**10；

<!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>ES7新特性</title>
</head>
<body>
    <script>
        //指数操作符
        console.log(Math.pow(2,10));
        console.log(2**10);
    </script>
</body>
</html>

ES8

一、async和await

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

简化异步函数的写法；

1.async函数：

（1）async函数的返回值为promise对象；

（2）promise对象的结果由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>ES8新特性</title>
</head>
<body>
    <script>
        //asnyc函数：异步函数
        async function fn() {
            return 123;
            //若报错，则返回的Promise对象也是错误的
            throw new Error("出错啦");


            return new Promise((resolve, reject) => {
                resolve(123);
                reject("shibai");
            })
        }

        const result = fn();
        console.log(result);

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

如果返回的是Promise对象，则返回的结果也是Promise对象的结果

2.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 http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES8新特性</title>
</head>
<body>
    <script>
     
        //await函数
        // async + await：异步函数
        const p = new Promise((resolve, reject)=>{
            resolve(123);
        })
        async function fn(){
            //await返回的是promise成功的值
            let result = await p;
            console.log(result);
        }
        fn();
    </script>
</body>
</html>