[toc] ## var与let的区别 ### 1. 关于var和let的声明 1.1 var声明 ``` var i = 10; var i = 20; console.log(i); //20 ``` 1.2 let声明，在一个作用域下不可重复声明 ``` let i = 10; let i = 20; console.log(i); //Identifier 'i' has already been declared ``` 1.3 var的声明提前 ``` var a = 1; function test(){ console.log(a); //1 } test(); /*因为a是全局变量，所以函数内可打印出a的值为1*/ ``` 声明提前导致错误： ``` var a = 1; function test(){ console.log(a); //undefined var a = 2; } test(); ``` 以上函数可看作： ``` var a = 1; function test(){ var a; console.log(a); //undefined a = 2; } test(); ``` 因为函数内`var a`声明提前导致，console.log(a)打印undefined ### 2. 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中会覆盖外界上层的声明 ``` var i = 3; for(let i=1; i<5; i++){ console.log(i); //1, 2, 3, 4 } console.log(i); //5 ``` ### 3. for循环中嵌套事件，var与let的区别 1. 用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> ``` 2. 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); } ```