最近，看了一些es6的相关知识点，有时候看完就忘记了，所以写下该博客，以此记录。
1、变量（let,const）
es6使用let定义变量，const定义常量。
变量可重复赋值，但常量重复赋值会报错（报错信息如下：Uncaught TypeError: Assignment to constant variable.）。
使用let,const定义的变量有块级作用域，使用var定义的变量没有块级作用域。
let是用来声明块级作用域，它所声明的变量，只是在let命令所在的那个代码块中有效。
const也是用来声明块级作用域，但它声明的是常量。就是一旦声明，常量的值就不能改变。
具体的例子:
使用var定义的变量：
<script type="text/javascript">
for(var i=0;i<10;i++){
console.log("i的值为"+i);
}
console.log(i);//10
</script>
使用let定义的变量：
<script type="text/javascript">
for(let i=0;i<10;i++){
console.log("i的值为"+i);
}
console.log(i);//Uncaught ReferenceError: i is not defined 因为let声明块级作用域
</script>
下面用一个例子来说明使用var和let（无块级作用域和有块级作用域的区别）：点击每个li ，弹出相应的下标。
方式1：使用闭包的方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--实现点击每个li,弹出相应的下标--> <!--用闭包形式--> <script> window.onload=function () { var oLi=document.getElementsByTagName("li"); for(var i=0;i<oLi.length;i++){ (function (i) { oLi[i].onclick=function () { alert(i); } })(i) } } </script> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </body> </html>
方式2：使用块级作用域
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--实现点击每个li,弹出相应的下标--> <!--用的是es6的let定义变量--> <script> window.onload=function () { var oLi=document.getElementsByTagName('li'); for(let i=0;i<oLi.length;i++){ oLi[i].onclick=function () { alert(i); } } } </script> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </body> </html>
记录1：再看书的时候看到一个点，所以记录如下：（面试的时候有可能会问到哦）
for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。
for (let i = 0; i < 3; i++) {
let i = 'abc';
console.log(i);
}
// abc
// abc
// abc
上面代码正确运行，输出了 3 次abc。这表明函数内部的变量i与循环变量i不在同一个作用域，有各自单独的作用域。
记录2：说说let跟var的区别？
1、let命令不存在变量提升，如果在let前使用，会导致报错
2、暂时性死区，如果块区中存在let和const命令，就会形成封闭作用域
3、不允许重复声明，因此，不能在函数内部重新声明参数
2、箭头函数 （()=>{}的形式）
箭头函数的两个特点：
1、当只有一个参数的时候，()可以省略
2、当只有一个return的时候，{}可以省略
以上两点见以下例子：
例子1：当只有一个参数的时候，()可以省略
<script> let show=a=>{ alert(a); }; show(12); </script>
例子2：当只有一个return的时候，{}可以省略
<script> let sum=(a, b)=>a+b; alert(sum(12, 5)); </script>
箭头函数与普通函数的区别是什么？
1、this的指向不同（箭头函数没有自己的this，所以箭头函数内部的this，就是它外层代码块的this。）
2、箭头函数是匿名函数，不能作为构造函数，不能使用new
（eg:
<script type="text/javascript">
let FunctionConstructor = () => {console.log('lll');
}
let func = new FunctionConstructor();
</script>
如图：
）
3、箭头函数不能变量提升，必须先声明在调用。
4、不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。
5、不可以使用yield命令，因此箭头函数不能用作Generator函数。
3、class,extends,super
ES6中引入了“类”的概念，但是只是引用了类的写法，js其实还是没有类。它只是为了让对象原型的写法更加清晰,更像面向对象的写法。
例子1：对象原型的写法
<script type="text/javascript">
function obj() {
// body...
this.name="我叫xxx";
}
obj.prototype={
age:function () {
console.log('今年18岁');
}
}
var o=new obj();
console.log(o.name);
console.log(o.age());
</script>
例子2：使用class写法
<script type="text/javascript">
class obj1{
constructor(name1){
this.name1="test";
}
age1(){
console.log("今年10岁");
}
}
var o2=new obj1();
console.log(o2.name1);
console.log(o2.age1());
</script>
例子3：继承（extends,super）
<script type="text/javascript">
// 这是父类
class ObjFn{
constructor(){
this.name = '我是xxx'
}
age(){
console.log( this.name + '，今年18岁' );
}
}
// 这是子类
class SubClassFn extends ObjFn{
constructor(){
//子类没有自己的this,子类的this，是通过super方法继承父类的this对象得到的。
//这就是先得到了父类的this，
// 也就是父类的实例对象super();
this.eat = '就是能吃';
}
play(){
console.log('就是能玩');
}
}
let _subClassFn = new SubClassFn();
_subClassFn.age();
console.log( _subClassFn.eat )
_subClassFn.play();
</script>
4、函数
es6的函数新增两种语法：1、展开扩展--剩余参数，2、展开数组
具体例子如下：
1、展开数组--属于参数
<script> let arr=[12,5,8,9,22] show(...arr); function show(num1,num2,...args) { alert(num1); alert(num2); alert(args); alert(num1+num2); } </script>注意：...args只能放在最后，必须是最后一个参数。
2、展开数组
<script> let arr=[12, 5, 8]; //...arr => 12, 5, 8 function sum(a, b, c){ alert(a+b+c); //a对应12，b对应5，c对应8 } sum(...arr); </script>
5、解构赋值
解构赋值的关键是：
1、等号左边跟等号右边结构必须要一致（如：是数组就左右都是数组，是json就左右都是json）
2、声明和赋值必须在一句话中完成，不能分开。
例子1:等号左边跟等号右边结构必须要一致
正确:
let [a, b, c] = [1, 2, 3] console.log(a, b, c)
错误：
<!--错误：右边要是个正确的结构（东西）。现在的{12,5}说数组不是数组，说json又不是json--> <script> let {a, b} = {12, 5} console.log(a, b) </script>
例子2：声明和赋值必须在一句话中完成，不能分开
<!--错误：声明跟赋值要在一起，必须在一句话中完成--> <script> let [a, b]; [a, b] = [12, 5] console.log(a, b) </script>
6、数组
个人觉得数组还是很重要的。我主要总结map、reduce、filter、forEach这4个方法。
1、map是映射，比如对于分数，[30,60]=>[不及格，及格]映射结果类似这种。
2、reduce可以用来求和以及求平均
3、filter是过滤器
4、forEach可用来循环。
map例子：
<script> let arr=[12,5,60,89,100,99,33,55]; let res=arr.map(item=>item>=60?'及格':'不及格'); alert(res); </script>
reduce例子：
<script> let score = [19, 88, 99, 55, 33] let result = score.reduce((tmp, item, index) => { if (index < score.length - 1) { return tmp + item } else { return (tmp + item) / score.length } }) alert(score) alert(result) </script>
filter例子:
<!--能对3进行整除的展示，否则不显示--> <script> let arr = [12, 5, 8, 99, 27, 36] let result = arr.filter(item => item % 3 == 0) alert(result) </script>
forEach例子：
<script> let arr = [12, 5, 8, 99, 27, 36] let result = arr.forEach((item, index) => { alert(index + ":" + item) }) </script>
7、字符串
字符串新增了俩个方法：startsWith和endsWith;以及新增的字符串模板（`${变量}`）
例子1：
<script> let str='abcdef'; if(str.startsWith('a')){ alert('该字符串以字母a开头'); } if(str.endsWith('f')){ alert('该字符串以字母f结束'); } </script>
例子2：
<script> let a=12; alert('此处使用字符串模板来取值：'+`${a}`); </script>
8、Promise
我理解的Promise是以同步的方式进行异步的操作。
Promise包括的方法：
（1）Promise.prototype.then()可以接收两个函数，一个是处理成功后的函数（resolve），一个是处理错误结果的函数（reject）。
（2）Promise.prototype.catch()就是用来接收 报错信息的。
（3）Promise.all()就是用来循环处理数组、对象、集合。
（4）Promise.race()只要有哪个最先结果 就出最终的结果 。而不必等到所有的操作数都得出结果。
（5）Promise.resolve()处理成功后的函数
（6）Promise.reject()处理错误结果的函数
例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.js"></script> <script> function createPromise(url) { return new Promise(function (resolve,reject) { $.ajax({ url, dataType:'json', success(results){ resolve(results); }, error(err){ reject(err); } }) }) } Promise.all([ createPromise('data/arr.txt'), createPromise('data/num.txt') ]).then(results=>{ alert('成功了'); let [arr,num]=results; alert(arr); alert(num); },err=>{ alert('至少一个失败了'); }) </script> </head> <body> </body> </html>
9、generator和yield
generator函数： 三种形式都可以function *函数或者function* 函数()或者是function * 函数()。并且yield既可以传参又可以返回
例子1：yield传参
<script> function *show(num1,num2) { alert(`${num1},${num2}`); alert('a'); let c=yield alert('b'); alert(c); } let genObj=show(11,22); genObj.next(); genObj.next(12); </script>
例子2：yield返回
<script> function * show() { alert('a'); yield 12; alert('b'); return 11111; } let genObj=show(); let res1=genObj.next(); console.log(res1); let res2=genObj.next(); console.log(res2); </script>