ES6-let

用 let: 代替var

特点:

  1. 防止声明提前

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

  3. 添加块级作用域:  

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

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

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

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

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

例1:

图片 1图片 2

 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");

显示代码

等价于:

图片 3图片 4

 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:

图片 5图片 6

 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>

显示代码

等价于:

图片 7图片 8

 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

  

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图