首页 > > 网页制作 > Javascript >

ES6-let

2018-06-24 01:21:41来源：未知阅读 ()

用 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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有