JavaScript-ES7~ES8新特性使用教程

古城微笑少年丶 2023-10-02 20:21 58阅读 0赞

因为ES6的内容太多了, 如果想学ES6的新特性, 那么可以看 `http://t.csdn.cn/1bXjB` 超级全, 吐血编写

### ES7 ###

#### includes() 数组中是否包含 ####

includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。 使用 includes() 判断字符串和字符时是区分大小写的  
语法:  
`arr.includes(searchElement)`  
`arr.includes(searchElement, fromIndex)`

*  element：要查找的元素
 *  start：开始查找的位置。
 *  返回值: 如果数组中包含要查找的元素，则返回true，否则返回false。
 *  如果start参数小于0，则重置为0，如果start参数大于等于数组长度，则返回false。

[1,2,3].includes(2);     // true
    [1,2,3].includes(2, 0);  // true
    [1,2,3].includes(2, 2);  // false
    [1,2,3].includes(2, 5);  // false
    [1,2,3].includes(2, -1); // false

该方法与indexOf()的区别在于，indexOf()不会识别NaN和稀疏数组中的缺失元素。而includes()方法可以。

var array = [1,2,3];
        array.length = 5;
        array.push(NaN);
        array.push(undefined);
        array.push("");
    
        console.log( array.includes(undefined))// true
        console.log( array.includes(NaN)) // true
        console.log( array.includes("")) // true
        console.log(array.indexOf(undefined))// 6
        console.log(array.indexOf(NaN))// -1
        console.log(array.indexOf(""))// 7

#### 指数运算符\*\* ####

在ES7中引入了指数运算符，具有与Math.pow()`求幂运算` 等效的计算结果

console.log(2**10);// 输出1024
    console.log(Math.pow(2, 10)) // 输出1024

### ES8 ###

#### Async/Await ####

我们都知道使用Promise能很好地解决回调地狱的问题，但如果处理流程比较复杂的话，那么整段代码将充斥着then，语义化不明显，代码不能很好地表示执行流程，那有没有比Promise更优雅的异步方式? ES7提出的基于Promise的解决异步的最终方案`Async/Await`。

##### async #####

async是一个加在**函数前的修饰符**，被async定义的函数会默认返回一个Promise对象**resolve的值**。因此对async修饰的函数可以直接使用then方法, 如果方法出现了异常,那么会调用catch ,**注意被async修饰的方法会变为异步方法**

async function fun0(){
        
            console.log(1);
            return 1;
        }
        fun0().then(val=>{
        
            console.log(val) // 1,1
        }).catch(err=>{
        
            console.log(err)
        })
    
        async function fun1(){
        
            console.log('Promise');
            return new Promise(function(resolve,reject){
        
                resolve('Promise1')
            })
        }
        fun1().then(val => {
        
            console.log(val); // Promise Promise
        })
    
    
    
        async function fun2(){
        
           throw  new Error("xxxxx")
        }
        fun2().then(val=>{
        
            console.log(val)
        }).catch(err=>{
        
            console.log(err) //xxxxx
        })

##### await #####

await 也是一个修饰符，**只能放在async定义的函数内**。可以理解为等待 , await 修饰的如果是Promise对象：可以获取Promise中返回的内容（resolve或reject的参数），且取到值后语句才会往下执行；如果不是Promise对象,比如字符串那么会把这个字符串当做await表达式的结果

使用await必须是直系（作用域链不能隔代），这样会报错：Uncaught SyntaxError: await is only valid in async function。,比如下面

let data = 'data'
    demo  = async function () {
        
        const test = function () {
        
            await data //错误使用
        }
    }

注意只有 let c = await new Promise ,配合才能进行等待内部执行结果,如果不是和Promise 进行配合那么await 等于无效

const demo = async ()=>{
        
        let result = await setTimeout(()=>{
        
          console.log('我延迟了一秒');
        }, 1000)
        console.log('======================');
       
    }
    demo() 
    // 执行结果
    //======================
    //我延迟了一秒 
    //奇怪，并没有await啊？setTimeout是异步啊，问题在哪？问题就在于setTimeout这是个异步，但是不是Promise！起不到“等待一会”的作用。
    //请记住await是在等待一个Promise的异步返回

混合使用async 和await 案例

async function fun(){
        
            let a =  1;
    
            //内部使用了ajax会异步, 我们在外部使用await等待内部请求的结果
            let b = await new Promise((resolve,reject)=>{
        
                var ajax = new XMLHttpRequest();
                ajax.open("GET", "http://localhost:7003/test/haoxiaoxiao");
                ajax.setRequestHeader("Content-Type", "application/json");
                ajax.send({
        
                    "userName": "卢超glrau",
                    "passWord": "Y2hKz0h",
                    "phone": "18110454396",
                    "email": "h.whf@gjifcniah.dk"
                });
                ajax.onreadystatechange = function () {
        
                    if (ajax.readyState == 4 && ajax.status == 200) {
        
                        var json = JSON.parse(ajax.responseText);
                        console.log(json)
                        resolve(json);
                    }
                }
            })
             //内部使用了setTimeout会异步, 我们在外部使用await等待setTimeout内部的结果
            let c = await new Promise((resolve, reject) => {
        
                setTimeout(()=>{
        
                    resolve('Promise')
                }, 1000)
            });
    
            let d = await function(){
        
                return 'function'
            }()
    
            console.log(a,b,c,d)
            return b;
    
        }
        fun();

##### async/await 优势实战 #####

const setDelay = (millisecond) => {
        
      return new Promise((resolve, reject)=>{
        
          if (typeof millisecond != 'number') reject(new Error('参数必须是number类型'));
          setTimeout(()=> {
        
            resolve(`我延迟了${
          millisecond}毫秒后输出的`)
          }, millisecond)
      })
    }
    const setDelaySecond = (seconds) => {
        
      return new Promise((resolve, reject)=>{
        
          if (typeof seconds != 'number' || seconds > 10) reject(new Error('参数必须是number类型，并且小于等于10'));
          setTimeout(()=> {
        
            resolve(`我延迟了${
          seconds}秒后输出的，注意单位是秒`)
          }, seconds * 1000)
      })
    }

比如上面两个延时函数（写在上面），比如我想先延时1秒，在延迟2秒，再延时1秒，最后输出“完成”，这个过程，如果用then的写法，大概是这样：

setDelay(1000)
    .then(result=>{
        
        console.log(result);
        return setDelaySecond(2) //注意
    })
    .then(result=>{
        
        console.log(result);
        return setDelay(1000)  //注意
    })
    .then(result=>{
        
        console.log(result);
        console.log('完成')
    })
    .catch(err=>{
        
        console.log(err);
    })

咋一看是不是挺繁琐的？如果逻辑多了估计看得更累，现在我们来试一下async/await

看！是不是没有冗余的长长的链式代码，语义化也非常清楚，非常舒服，那么你看到这里，一定还发现了，上面的catch我们是不是没有在async中实现？接下去我们就分析一下async/await如何处理错误？

##### async/await错误处理 #####

因为async函数返回的是一个Promise，所以我们可以在外面catch住错误。

(async ()=>{
        
            const result = await setDelay(1000);
            console.log(result);
            console.log(await setDelaySecond(2));
            console.log(await setDelay(1000));
            console.log('完成了');
        })().catch(err=>{
        
            console.log(err)
        })
    
    // 下面这种也行
    
        const demo = async ()=>{
        
            const result = await setDelay(1000);
            console.log(result);
            console.log(await setDelaySecond(2));
            console.log(await setDelay(1000));
            console.log('完成了');
        }
        demo().catch(err=>{
        
            console.log(err);
        })

在async函数的catch中捕获错误，当做一个Pormise处理，同时你不想用这种方法，可以使用try…catch语句：

(async ()=>{
        
      try{
        
        const result = await setDelay(1000);
        console.log(result);
        console.log(await setDelaySecond(2));
        console.log(await setDelay(1000));
        console.log('完成了');
      } catch (e) {
        
        console.log(e); // 这里捕获错误
      }
    })()

这时候你就不需要在外面catch了。有人会问了，我try…catch好像只能包裹代码块，如果我需要拆分开分别处理，不想因为一个的错误就整个process都crash掉了，那么难道我要写一堆try…catch吗？我就是别扭，我就是不想写try…catch怎嘛办？ 我们知道await后面跟着的肯定是一个Promise那是不是可以这样写？

(async ()=>{
        
      const result = await setDelay(1000).catch(err=>{
        
          console.log(err)
      });
      console.log(result);
      const result1 = await setDelaySecond(12).catch(err=>{
        
          console.log(err)
      })
      console.log(result1);
      console.log(await setDelay(1000));
      console.log('完成了');
    })()

是不是就算有错误，也不会影响后续的操作，是不是很棒？当然不是，你说这代码也忒丑了吧，乱七八糟的，写得别扭await又跟着catch。那么我们可以改进一下，封装一下提取错误的代码函数：

##### async/await的中断（终止程序） #####

写在async/await中想要中断程序就很简单了，因为语义化非常明显，其实就和一般的function写法一样，想要中断的时候，直接return一个值就行，null，空，false都是可以的。看例子：

#### Object.values(),Object.entries() ####

ES5 引入了Object.keys方法，返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名。ES8引入了跟Object.keys配套的Object.values和Object.entries，作为遍历一个对象的补充手段，供for…of循环使用。

**Object.values()**

//假设我们要遍历如下对象obj的所有值：
    const obj = {
        a: 1, b: 2, c: 3};
    
    //不使用Object.values() :ES7
    const vals=Object.keys(obj).map(key=>obj[key]);
    console.log(vals);//[1, 2, 3]
    
    //使用Object.values() :ES8
    const values=Object.values(obj1);
    console.log(values);//[1, 2, 3]

**Object.entries()**

//不使用Object.entries() :ES7
    Object.keys(obj).forEach(key=>{
        
    	console.log('key:'+key+' value:'+obj[key]);
    })
    //key:a value:1
    //key:b value:2
    //key:c value:3
    
    
    //使用Object.entries() :ES8
    for(let [key,value] of Object.entries(obj1)){
        
    	console.log(`key: ${
          key} value:${
          value}`)
    }
    //key:a value:1
    //key:b value:2
    //key:c value:3

#### String padding ####

在ES8中String 新增了两个实例函数 String.prototype.padStart 和 String.prototype.padEnd，允许将空字符串或其他字符串添加到原始字符串的开头或结尾。  
ES5对String补白的方式, 例如将数字都输出成两位数，前面0补位学习

for(let i = 1 ; i < 32 ; i++){
        
      console.log(i >= 10 ? i : `0${
          i}`)
    }
    // 1-9输出01-09
    // 10-31正常输出

**padStart**  
用另外一个字符串填充当前字符串(若是须要的话，会重复屡次)，从头补白（也就是左侧）

*  第一个参数是目标长度，要输出的位数
 *  第二个参数是占位内容，默认是空格
 *  返回值是生成的新的字符串

for(let i = 1 ; i < 32 ; i++){
        
      // 目标是2位数，不够的用0补齐
      console.log(i.toString().padStart(2, '0'))
    }
    // 1-9输出01-09
    // 10-31正常输出

**padEnd**  
用另外一个字符串填充当前字符串(若是须要的话，会重复屡次)，从当前字符串的末尾（右侧）开始填充

*  第一个参数是目标长度，要输出的位数
 *  第二个参数是占位内容，默认是空格
 *  返回值是生成的新的字符串

for(let i = 1 ; i <= 100 ; i++){
        
           // 从尾部补充到指定的长度
            console.log(i.toString().padEnd(3, 'xx'))
        }
        //1xx
        //11x
        //100

#### 函数参数列表结尾允许逗号 ####

重新排列项目更简单，不必添加和删除逗号,最后的逗号了js自动处理。

//定义参数时
    function foo(
        param1,
        param2,//结尾逗号
    ) {
        }
    //传参时
    foo(
        'coffe',
        '1891',//结尾逗号
    );
    //对象中
    let obj = {
        
        "a": 'coffe',
        "b": '1891',//结尾逗号
    };
    //数组中
    let arr = [
        'coffe',
        '1891',//结尾逗号
    ];

#### Object.getOwnPropertyDescriptors() ####

获取所有属性里面的数据描述符,只接受一个参数，目标对象。

console.log(Object.getOwnPropertyDescriptors(data))
    // Portland: {value: "78/50", writable: true, enumerable: true, configurable: true}
    // Dublin: {value: "88/52", writable: true, enumerable: true, configurable: true}
    // Lima: {value: "58/40", writable: false, enumerable: false, configurable: true}

获取单个属性的描述符 Object.getOwnPropertyDescriptor() 这个方法接收两个参数：属性所在的对象和要读取其描述符的属性名称。

**返回值是一个对象:**

*  如果是访问器属性，这个对象的属性有configurable、enumerable、get和set；
 *  如果是数据属性，这个对象的属性有configurable、enumerable、writable和value。  
    ![在这里插入图片描述][31f57bb029b543e4986bb2cffc0437f5.png]

#### SharedArrayBuffer对象 ####

![在这里插入图片描述][e6207aac33854c069b2cd13b8ebae550.png]  
使用SharedArrayBuffer，两个线程的两个WebWorker都可以在同一块内存中写入数据和读取数据。这意味着它们不像postMessage那样具有通信开销和延迟。两个Web工作人员都可以立即访问到需要的数据。但是，同时从两个线程同时访问存在一定的危险。它可能导致内存中出现竞争状况。 现在游览器都禁用了SharedArrayBuffer,

#### Atomics对象 ####

Atomics 对象提供了一组静态方法用来对 SharedArrayBuffer 对象进行原子操作。

![在这里插入图片描述][241d60d901ab468c8532f2a2d4413093.gif]

点赞 -收藏-关注-便于以后复习和收到最新内容有其他问题在评论区讨论-或者私信我-收到会在第一时间回复感谢,配合,希望我的努力对你有帮助^\_^ 免责声明：本文部分素材来源于网络，版权归原创者所有，如存在文章/图片/音视频等使用不当的情况，请随时私信联系我。

[31f57bb029b543e4986bb2cffc0437f5.png]: https://img-blog.csdnimg.cn/31f57bb029b543e4986bb2cffc0437f5.png
[e6207aac33854c069b2cd13b8ebae550.png]: https://img-blog.csdnimg.cn/e6207aac33854c069b2cd13b8ebae550.png
[241d60d901ab468c8532f2a2d4413093.gif]: https://img-blog.csdnimg.cn/241d60d901ab468c8532f2a2d4413093.gif