let相关面试题

第一题

var i
for( i=0; i<6; i++){
  function fn(){
    console.log(i)
  }
  fn()
}

结果是0,1,2,3,4,5

第二题

for(var i=0; i<6; i++){
  function fn(){
    console.log(i)
  }
  btn.onclick = fn //6
}
// 点击的时候i早已变成6了
console.log(i) //6

第三题 console.log(i)为几，为什么，怎么打印对应的数值

  <ul>
    <li>导航1</li>
    <li>导航2</li>
    <li>导航3</li>
    <li>导航4</li>
    <li>导航5</li>
    <li>导航6</li>
  </ul>

  <script>
    var li = $('ul>li')
    for(var i=0; i<li.length; i++){
      li[i].onclick = function(){
        console.log(i)  //6
      }
    }

    console.log(i) //6
  </script>

由于i早就变成了6，的、所以console.log(i) //6

---

错误方法

    var li = $('ul>li')

    var i
    for(i=0; i<li.length; i++){
      var j=i
      li[j].onclick = function(){
        console.log(j)
      }
    }
    console.log(i,j) //6 5

相当于
    var i
    var j
    for(i=0; i<li.length; i++){
      j= i
      li[j].onclick = function(){
        console.log(j)
      }
    }

由于j会提前，并没有储存五个i，就随着i边，所以打出来j是5。

正确方法：

    var i
    for(i=0; i<li.length; i++){
      let j=i
      li[j].onclick = function(){
        console.log(j)
      }
    }

由于let的作用域只在{}之间，每次循环都有一个新的j对应一个i（let声明变量只能赋值一次），所以能打出对应的j。

    for(let i=0; i<li.length; i++){
      li[i].onclick = function(){
        console.log(i)
      }
    }

image.png