[toc] ### 1. let 有塊級作用域， var 沒有 ```js { var a = 10; let b = 20; } console.log(a); // 10 console.log(b); // b is not defined 報錯 ``` ### 2. var 在同一個作用域中可以重復聲明，let 不可以 ### 3. var 存在聲明提前，let 不可以 ### 4. for 循環中的 var 與 let 1) for中var i會對外界產生影響 ``` for(var i=1; i<5; i++){ console.log(i); //1, 2, 3, 4 } console.log(i); //5 ``` for中let i的作用域僅限for循環內 ``` for(let i=1; i<5; i++){ console.log(i); //1, 2, 3, 4 } console.log(i); //i is not defined ``` 2) for中var i中會覆蓋外界上層的聲明 ```js var i = 3; for(let i=1; i<5; i++){ console.log(i); //1, 2, 3, 4 } console.log(i); //5 ``` 3) 用var聲明的for循環會跳過點擊事件，當點擊事件執行的時候，i返回for循環最后得出的值 ``` <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script> var lis = document.getElementsByTagName("li"); for(var i=0; i<lis.length; i++){ lis[i].onclick = function(){ // lis[i].style.color = "red"; //無法執行，因為沒有lis[3] //改成this.style.color = "red"可以執行 console.log(i); //i=3 } console.log(i); //0, 1, 2 } </script> ``` 4) let會正常執行 ``` var lis = document.getElementsByTagName("li"); for(let i=0; i<lis.length; i++){ lis[i].onclick = function(){ // lis[i].style.color = "red"; //可以正常執行, lis[i]返回點擊的i值 console.log(i); } console.log(i); } ``` ``` var num1 = 55; var num2 = 66; function f1(num, num1) { num = 100; //此時傳入的55變為100 num1 = 100; //此時傳入的66變為100 num2 = 100; //該函數內沒有num2，因此var num2 = 100覆蓋了全局變量num2變為100 console.log(num); //100 console.log(num1); //100 console.log(num2); //100,只有外界的全局變量num2受到函數的影響 } f1(num1, num2); //傳入55, 66 console.log(num1); //55 console.log(num2); //100 console.log(num); //報錯，而不是undefined ```