用 let: 代替var 特點: 1. 防止聲明提前 2. 不允許重覆聲明同名變數 3. 添加塊級作用域: 什麼是塊級作用域: 一個{}程式結構內，也是一個作用域。 比如: for while do...while if...else if...else 只要用let聲明的變數，僅在當前塊內有效 4 ...
用 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
