Bootstrap

ES7、ES8新特性

目录

ES7

一、Array.prototype.includes

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

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

二、指数操作符

 ES8

一、async和await

1.async函数

2.await

 二、对象方法扩展

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>

 二、对象方法扩展

Object.values,Object.entries,Object.getOwnPropertyDescriptors

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

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

3.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>ES8新特性</title>
</head>
<body>
    <script>
        //对象方法扩展
        let syx = {
            name:'宋亚轩',
            age:18,
            sex:'man'
        }

        
        console.log(Object.keys(syx));
        console.log(Object.values(syx));
        console.log(Object.entries(syx));
    </script>
</body>
</html>

;