ES6---let var cons相关面试题

1. 时机（代码的执行顺序）

//1. 第一种情况
 var a = 1
    function fn(){
        console.log(a) // 1
    }
    fn() var a = 1


//2.第二种情况
    function fn(){
        console.log(a) // 2
    }
    a = 2 //先执行a=2，对a重新赋值，在执行fn，console.log(a)就是2
    fn()


//3.第三种情况（注意和第二种情况的比较）
 function fn(){
        console.log(a) // 1
    }
    fn()
    a = 2

2.语法问题

//1. 第一种情况
   for(var i = 0; i < 6; i++){
//i =0,1,2,3,5都会执行循环，当i=6退出循环，此时，console.log(i)为6
   }
   console.log(i) //6 因为变量提升


//2.第二种情况
 for(var i = 0; i < 6; i++){
        function fn(){
            console.log(i) // 0 1 2 3 4 5
        }
        fn()
   }


  //3.第三种情况，也主要是时机问题
 for(var i = 0; i < 6; i++){
        function fn(){
            console.log(i) //  6
        }
      btn.onclick = fn
   }
用户点击的时候才会执行fn,此时i已经为6。所以就是6.

作用域

//1. 第一种情况
 for(var i = 0; i < 6; i++){
       liTags[i].onclick = function(){
           console.log(i) // 6
       }
   } 
console.log(i) //此时i已经变成6了，当你点击的时候，i还是6


//2.第二种情况
 for(var i = 0; i < 6; i++){
       var j = i
       liTags[j].onclick = function(){
           console.log(j) // 5
       }
   }
   console.log(i,j) //6,5 
//此时代码里只有一个i和j,当i改变的时候，j也会变。当i为6的时候跳出循环，,i为6的值没有传递给j，此时j=5。var会变量提升，所以j和i所处的位置是一样的。


//3.第三种情况
for(var i = 0; i < 6; i++){
       let j = i
       liTags[j].onclick = function(){
           console.log(j) // 0 1 2 3 4 5
       }
   }
   console.log(i,j) //6,undefined  


//4. 第四种情况，立即执行函数
 for(var i = 0; i < 6; i++){
        (function(j){
            liTags[j].onclick = function(){
                console.log(j) // 0 1 2 3 4 5
            }
        })(i)      
   }

魔法

image.png

i的作用域只在()中，{}中是无法访问到i的。for循环有一个魔法，每次进入循环，都会在横线处创建一个i,这个创建的i就等于外面的i的值。这段代码是JS自动加的，我们看不到，我们所写的代码如下：

// 0,1,2,3,4,5退出循环，i变成6  。。。此时只有一个i.i的值改变了而已。
   for(let i = 0; i < liTags; i++){    
           //块里面的i = ()括号里面的i的值
            liTags[i].onclick = function(){
                console.log(i)     i0-0 i1-1 i2-2 i3-3 i4-4 i5-5   
     }
//()括号里面的i值 = 块里面的i
  }
//一共有7个i，（）括号里面一个i,以及每次循环产生的块级i有0-5一共6个，所以此处代码一共有7个i.

“要解决每次循环有不同的值，要有多个变量。”