【JavaScript的ES6语法】13、下一代ES的展望

最新推荐文章于 2024-08-30 16:23:11 发布

光仔December

最新推荐文章于 2024-08-30 16:23:11 发布

阅读量586

点赞数 4

分类专栏： JavaScript 文章标签： ES7 async await padStart padEnd

本文链接：https://blog.csdn.net/acmman/article/details/117404027

版权

JavaScript 专栏收录该内容

40 篇文章 9 订阅

订阅专栏

上一篇我们总结复习了前面所有ES6相关的知识点，本篇我们站在ES6的基础上，展望一下下一代ES的内容。

目前ES7的内容已经定稿，而ES8版本的还在酝酿中。我们就来预览一下ES7的拓展方向。

下面我们仍然按照不同的知识小结进行讲解（下面的测试依然可以使用谷歌浏览器，如果我们下载的是最新版的谷歌浏览器，其实已经支持ES7的新特性了）。

一、数组

1、includes方法
在ES7中，数组又多了一个方法，叫“includes”，该方法判断一个数组是否包含一个指定的值，如果包含则返回true，否则返回false。
注：这个和ES6中字符串的“includes”方法不一样，ES6的“includes”是用于字符串的。
例子：

<script type="text/javascript">
    let arr=[1,3,5];
    alert(arr.includes(99)+"|"+arr.includes(5));
</script>

结果：

2、新的循环方式
数组多了两种新的循环方式，分别是“for...of”与“for...in”，随之带来了“keys、values以及entries”三种属性。

那么“for...of”与“for...in”有什么区别呢？其使用场景又是什么呢？我们拿几组实例来说一下：

编写一个数组进行循环：

<script type="text/javascript">
    let arr=[1,3,5,7,9];
    for(let i in arr){
        console.log(i);
    }
</script>

效果：

此时“for...in”循环的是数组的key。如果我们用“for...of”：

<script type="text/javascript">
    let arr=[1,3,5,7,9];
    for(let i of arr){
        console.log(i);
    }
</script>

效果：

此时“for...of”循环的是数组的value。

此时我们可以发现他们的第一个区别：
●“for...in”循环的是数组的下标（key）；
●“for...of”循环的是数组的值（value）；

那如果我们用来循环json呢？我们看看效果：

<script type="text/javascript">
    let json={a:33,b:42,c:66};
    for(let i in json){
        console.log("for...in: "+i);
    }
    for(let i of json){
        console.log("for...of: "+i);
    }
</script>

效果：

我们可以看到，“for...in”顺利的打印出了json对象的key值，而“for...of”则报错了，结果是“TypeError”类型错误，说我们的“json”对象不是可“iterable”（迭代）的，即不是一个iterator迭代器。

所以我们知道了，“for...of”这种迭代方式，不能使用于json这种不可迭代的对象（没有实现iterator接口的对象）。

这里我们看一下前面提到的“keys、values以及entries”，他们分别指：
●keys：数组或可迭代对象的所有的key（下标或键）；
●values：数组或可迭代对象的所有value（具体的值）；
●entries：所有的key-value对信息（{key1:value1},{key2:value2},...）。

我们来用用上面的三个属性：

<script type="text/javascript">
    let arr=[1,3,5,7,9];
    console.log(arr.keys()+"|"+arr.values());
    for(let i of arr.keys()){
        console.log("keys: "+i);
    }
    for(let i of arr.values()){
        console.log("values: "+i);
    }
</script>

效果：

我们可以看到“arr.keys()”和“arr.values()”为两个数组，里面存放的就是目标数组的全部key和value。

然后entries的实例：

<script type="text/javascript">
    let arr=[1,3,5,7,9];
    console.log(arr.entries());
    for(let i of arr.entries()){
        console.log("entries: "+i);
    }
</script>

效果：

可以看到entries也是一个数组，其中装满了目标数组的所有键值对。
我们可以使用解构表达式在循环中分别获取key和value：

for(let [key,value] of arr.entries()){
    console.log(`${key}=${value}`);
}

总结来说，“for...in”主要是用来循环json数组的，而“for...of”是用来循环实现了iterator接口的迭代对象的。

后期如果全部对象都实现了迭代器，那就可以天下大同，所有对象都可以使用“for...of”进行循环遍历。

二、幂函数

过去js实际上就已经支持了幂函数，即“Math.pow()”：
console.log(Math.pow(3,8));//结果6561
在ES7中，幂函数有了更简洁的写法：
console.log(3**8);//结果6561

三、字符串新方法

ES7中字符串又增加了一些方法，“padStart”和“padEnd”，作用是将空字符串或其他字符串添加到原始字符串的开头或结尾：

String.padStart(targetLength,[padString])
String.padEnd(targetLength,[padString])

其中argetLength(必填)是当前字符串需要填充到的目标长度，padString(可选)为具体填充的字符串内容。
测试：

<script type="text/javascript">
    console.log('345'.padStart(5,"12"));
    console.log('ab'.padEnd(6,"cdefg"));
    console.log('888'.padStart(6));
</script>

效果：

四、语法容忍度

在ES6之前我们写数组，必须按照语法标准来写，例如“[1,3,5]”。而ES6之后，可以写成“[1,3,5,]”，后面多个逗号，程序会默认最后一个值不存在，给自动舍弃掉，而不会报语法错误：

ES7中，有多了一个“容忍度”，它允许我们出现空的方法参数，例如：

function show(a,b,c,){

}

方法参数后面多一个逗号，程序会默认最后一个参数不存在，自动舍弃掉。

五、generator和yield的升级版

在ES7中，有新的异步处理方式可以取代generator和yield，即“async”和“await”。
实际上两者的用法和之前的generator和yield差不多，有一些略微区别。
我们写个实例来说明一下它们的用法。

原来我们使用generator来解决异步调用问题时，需要编写一个类似runner的东西，但如果使用了“async”和“await”，我们不需要再封装方法，就可以直接来用，例如：

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript">
    async function readData(){
        let data1=await $.ajax({url:'data/1.txt',dataType:'json'});
        let data2=await $.ajax({url:'data/2.txt',dataType:'json'});
        let data3=await $.ajax({url:'data/3.txt',dataType:'json'});
        console.log(data1,data2,data3);
    }
    readData();
</script>

这种写法等价于原来generator的写法：

<script src="runner.js"></script>
<script type="text/javascript">
    runner(function *demo(){
        let data1=yield $.ajax({url: 'xxx',dataType:'json'});
        let data2=yield $.ajax({url: 'yyy',dataType:'json'});
        let data3=yield $.ajax({url: 'zzz',dataType:'json'});
        console.log(data1,data2,data3);
    });
</script>

只是不再调用自己封装的runner方法了，使用原生纯天然的写法。async还有一个好处，就是可以使用箭头函数（generator不能使用箭头函数）。例如上面的函数可以这么写：