上一篇我们总结复习了前面所有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不能使用箭头函数）。例如上面的函数可以这么写：
let readData = async ()=>{
}总结一下，“async”和“await”优点如下；
1、不再依赖于外部的runner，进行了统一。
2、可以使用箭头函数。
ES7还有一些其他的新特性，鉴于还没有完全确定和发布，使用起来具有一定的风险（以后不一定会有），这里就不再研究和介绍了，感兴趣的童鞋可以持续关注官方的动态。
参考：深入解读ES6系列视频教程（kaikeba.com提供，主讲老师石川（Blue））
转载请注明出处：https://blog.csdn.net/acmman/article/details/117404027