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

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

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

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

一、数组

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

结果：

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

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

编写一个数组进行循环：

效果：

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

效果：

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

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

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

效果：

我们可以看到，“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},...）。

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

效果：

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

然后entries的实例：

效果：

可以看到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(可选)为具体填充的字符串内容。
测试：

效果：

 

四、语法容忍度

在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”，我们不需要再封装方法，就可以直接来用，例如：

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

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

let readData = async ()=>{

}

总结一下，“async”和“await”优点如下；
1、不再依赖于外部的runner，进行了统一。
2、可以使用箭头函数。

ES7还有一些其他的新特性，鉴于还没有完全确定和发布，使用起来具有一定的风险（以后不一定会有），这里就不再研究和介绍了，感兴趣的童鞋可以持续关注官方的动态。

参考：深入解读ES6系列视频教程（kaikeba.com提供，主讲老师石川（Blue））

转载请注明出处：https://blog.csdn.net/acmman/article/details/117404027