ES6语法之let声明变量

开始的时候需要将编辑器调整成ES6的模式
webstorm的设置方式如下：
点击FILE下的Settings，然后选择Languages&Frameworks里的JavaScript
然后下拉框勾选ECMAScript 6 接着下面两个单选框也勾上

下面就是let和const 两者的介绍

一：用let 和 const 声明变量和常量   ES5之前是用 var 
1：作用域只局限于当前代码块
代码块：一般来说被大括号包裹的就是一个代码块
{
var str = '张山'；
console.log(str);  //1

let  str1 = '李四';
console.log(str1); //2
}
console.log(str);  //3
console.log(str1);  //4
1 和 2 两处输出都是正常的 ，然后出了大括号包裹范围后，3能够正常输出，
而4却不能，会报 str1 is not defined 的错误

由以上现象就可以看出，let 声明的变量存在作用域限制

2：使用let声明的变量作用域不会被提升
先来看一段代码块
{
console.log(str);
var  str = '张三';
}
这一段输出是什么？ 运行后发现输出是undifined （没有报错）
然后，如果换成let来声明变量的话，这段代码的输出又是什么？
结果是报错, str is not defined  
这里要区别报错和没报错下的undefined。比如说，如果用var 来声明的话，他没有报错，
当有下面一段代码的时候：
{
if(typeof(str) == 'undefined'){
            console.log(11);
}
console.log(str);
var  str = '张三';
}
是可以正常输出 11  和  undefined 的
然而换成let 的时候确实只会报错 str is not defined

3:在相同的作用域下不能声明相同的变量名
{
var str = '李四';
var str = '张山';
console.log(str);
}
输出结果是 张山. 在es5中，重复声明同一个变量是没关系的,规则是后一个变量把前一个覆盖。
然而换成let的话，就会报错： str has already  been declared  也不会做任何执行效果

4：for 循环体现let父子作用域
在页面中创建五个按钮：
然后写上如下js代码：
{
    var btn = document.querySelectorAll('button');
    for(var i = 0;i<btn.length;i++){
        btn[i].onclick = function () {
            alert('点击第'+i+'按钮');
        }
    }
}
然后在页面中点击任意一个，发现弹框显示都是 点击第5个按钮 信息
原因就是：for循环是同步的运行代码，而.onclick方法是异步的，所以在for循环运行结束后异步代码才开始找到i的值（5）。
这种现象有很多种解决办法：（闭包）和 （es6的let作用域限制）
闭包如下：
{
    var btn = document.querySelectorAll('button');
    for(var i = 0;i<btn.length;i++){
(function(i){
   btn[i].onclick = function () {
               alert('点击第'+i+'按钮');
            }
})(i)
    }
}

es6的作用域限制如下：
{
    var btn = document.querySelectorAll('button');
    for(let i = 0;i<btn.length;i++){  //1
        btn[i].onclick = function () {   //2
            alert('点击第'+i+'按钮'); //3
        }
    }
} //直接将i的声明改为let就可以了
这个原因就是父子作用域的限制。3中的i的取值作用域是2中的i，而2中的i的取值作用域是
1中的i，那么就限制了3中的i的作用域范围，使他只能在for循环中查找i值