ES6-let

用 let: 代替var

特点:

  1. 防止声明提前

  2. 不允许重复声明同名变量

  3. 添加块级作用域: 　

　　什么是块级作用域: 一个{}程序结构内，也是一个作用域。

   　 比如: for  while   do...while   if...else if...else

　　只要用let声明的变量，仅在当前块内有效

  4. 和for一起使用，可形成闭包!

   原理: (function(i){...})(i)

例1：

 1  var t=0;
 2   function conn(){
 3       t+=3; console.log("建立连接耗时：3s");
 4   }
 5   function query(){
 6       t+=8; console.log("查询数据耗时：8s");
 7      var err=true;
 8      (function(){
 9      var t=new Date();
10      console.log("出错啦,at:"+t.toLocaleString());
11  })();    
12  }
13  conn();
14  query()
15  console.log("共耗时："+t+"s");
显示代码

等价于：

 1 var t=0;
 2 function conn(){
 3     t+=3; console.log("建立连接耗时：3s");
 4 }
 5 function query(){
 6     t+=8; console.log("查询数据耗时：8s");
 7     var err=true;
 8     if(err){
 9     let t=new Date();    //var替换let 
10     console.log("出错啦,at:"+t.toLocaleString());
11     }
12 }
13 conn();
14 query()
15 console.log("共耗时："+t+"s");
显示代码

例2：

 1 <BODY>
 2 <button>点我!</button>
 3 <button>点我!</button>
 4 <button>点我!</button>
 5     <script>
 6         var btns=document.getElementsByTagName("button");
 7         for(var i=0;i<btns.length;i++){
 8             (function(i){
 9                 btns[i].onclick=function(){
10                     alert("我是第"+i+"个");
11                 }
12             })(i);
13     </script>
14  </BODY>
显示代码

等价于：

 1 <BODY>
 2 <button>点我!</button>
 3 <button>点我!</button>
 4 <button>点我!</button>
 5     <script>
 6         var btns=document.getElementsByTagName("button");
 7             for(let i=0;i<btns.length;i++){        //var换成let 
 8                 btns[i].onclick=function(){
 9                     alert("我是第"+i+"个");
10                 }
11         }
12     </script>
13  </BODY>
显示代码

 例3：

var a = 1;
var b = 2;

if (a === 1) {
  var a = 11; // the scope is global
  let b = 22; // the scope is inside the if-block

  console.log(a);  // 11
  console.log(b);  // 22
} 

console.log(a); // 11
console.log(b); // 2

　　

posted @ 2018-01-22 12:20  慕城蓝就  阅读(276)  评论(0)  编辑  收藏  举报