JavaScript的ES6语法12ES6总结复习
Posted 光仔December
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript的ES6语法12ES6总结复习相关的知识，希望对你有一定的参考价值。
之前我们已经将ES6的大部分内容讲解完毕了，本篇就来回顾梳理一下前面学习过的知识。
1、变量：let、const
let、const是ES6新增的变量修饰符，我们回顾一下它们和之前的var的区别：
（1）var 可以重复声明、函数级
（2）let 局部变量，不能够重复声明、块级
（3）const 常量，不能够重复声明、块级
例如下面的函数：
<!DOCTYPE html>
<html>
<head>
<title>TEST ES6</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<input type="button" value="1"/>
<input type="button" value="2"/>
<input type="button" value="3"/>
<script type="text/javascript">
window.onload=function(){
var aBtn=document.getElementsByTagName('input');
for(var i=0;i<aBtn.length;i++){
aBtn[i].onclick=function(){
alert(i);
}
}
}
</script>
</body>
</html>点击按钮时，全是3：
因为i的作用域是函数级的，是共用的，alert的是最终的i值。
如果使用let就会避免该问题，因为它是块级的，只在当前代码块中生效：
<script type="text/javascript">
window.onload=function(){
var aBtn=document.getElementsByTagName('input');
for(let i=0;i<aBtn.length;i++){
aBtn[i].onclick=function(){
alert(i);
}
}
}
</script>效果：
2、函数：箭头函数
箭头函数有以下优点：
（1）方便
如果只有一个参数，()可以省略；
如果只有一个return，{}也可以省略；
（2）修正this
this相对正常一点。
3、参数拓展
（1）新增一个“...”参数，它可以收集和扩展。
例如参数扩展：
<script type="text/javascript">
function show(a,b,...arg){
alert(a);
alert(b);
alert(arg);
}
show(1,2,3,4,5,6,7,8);
</script>效果：
其中的“3,4,5,6,7,8”参数就被收集到arg里面去了，参数可以无限扩展。
同时它还可以收集参数，作为其它函数或数组的子元素：
<script type="text/javascript">
let arr=[1,3,5];
let arr2=[...arr,...arr]
alert(arr2);
</script>效果：
（2）参数默认值
可以在设置函数的参数时，为参数设置一个默认值，有值的时候赋值，没值的时候使用默认值，如：
function show(a,b=5){
}4、数组新方法
数组新增了4个新的方法：
（1）map：映射，接收一个函数，将原数组中所有元素用这个函数处理后放入新数组返回。
（2）reduce：接受一个函数（必须）和一个初始值（可选），该函数接收两个参数：
● 第一个参数是上一次reduce处理的结果
● 第二个参数是数组中要处理的下一个元素
reduce()会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数。
（3）filter：过滤，只留下符合条件的，适用于做筛选。
（3）forEach：用于循环，循环内可以取出每个元素和其下标值。
5、字符串
（1）新增“startsWith”和“endsWith”方法，用于判断字符串是以什么开头和什么结尾；
（2）字符串模板：`${a}xxxx${b}`。在字符串模板中，使用花括号“${}”包裹需要拼接的变量，就可以直接实现字符串的拼接。同时字符串模板可以折行。
6、Promise
主要用来封装异步操作，其中最常用的是“Promise.all([])”方法，该方法可以放入N个Promise子程序，这些子程序都是异步的，当所有子程序都运行成功时，才调用成功方法，否则就调用失败方法：
7、generator
可以执行到一半能暂停的函数，格式：
function *show(){
yield;
}8、JSON
有两个新增的函数：
（1）JSON.stringify();//JSON对象转字符串
（2）JSON.prase();//字符串转JSON对象
9、解构赋值
可以一次性给多个参数赋值，例如：
let arr=[1,2,3];
let [x,y,z]=arr;//x,y,z将与arr中的每个位置对应来取值
console.log(x,y,z);//结果：1,2,3要保证：
赋值的左右两边结构是一样的；
右边必须是一个合法的对象；
声明和赋值一次完成。
10、面向对象
（1）对象的新写法
class Test(){
constructor(){
}
方法1(){
}
方法2(){
}
//...
}（2）继承
class Cls2 extends Cls1{
constructor(){
super();
}
}以上就是之前讲过的所有的ES6知识点，后面我们就通过编写实例项目来运用上面学习的ES6知识。
参考：深入解读ES6系列视频教程（kaikeba.com提供，主讲老师石川（Blue））
转载请注明出处：https://blog.csdn.net/acmman/article/details/117200803
以上是关于JavaScript的ES6语法12ES6总结复习的主要内容，如果未能解决你的问题，请参考以下文章