let面试题

【前言】

    本文谈下常见的一道JS面试题，let声明变量与var的区别，块级作用域等

 

【主体】

    篇幅问题，部分放到文章JS中的let和var的区别里。

    

    （1）面试题：接下来看到面试题

编写一个函数，该函数将遍历整数列表，并在延迟3秒后打印每个元素的索引

   

    （2）错误写法：经常错误写法是这样的：

const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
  setTimeout(function() {
    console.log('The index of this number is: ' + i);
  }, 3000);
}

   如果运行上面代码，3 秒延迟后你会看到，实际上每次打印输出是 4，而不是期望的 0，1，2，3 。

   为了正确理解为什么会发生这种情况，了解为什么会在 JavaScript 中发生这种情况将非常有用，这正是面试官试图测试的内容。

 

   （3）原因解析：

   原因是因为 setTimeout 函数创建了一个可以访问其外部作用域的函数（闭包），该作用域是包含索引 i 的循环。 经过 3 秒后，执行该函数并打印出 i 的值，该值在循环结束时为 4，因为它循环经过0,1,2,3,4并且循环最终停止在 4。

    （4）解决方案

   1、解决方案有很多种，最简单的一种就是用let方法（将上面的var改为let即可）

const arr = [10, 12, 15, 21];
for (let i = 0; i < arr.length; i++) {
  setTimeout(function() {
    console.log('The index of this number is: ' + i);
  }, 3000);
}

   原因：ES6可以用let定义块级作用域变量，稍后详解

   2、闭包

const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
  setTimeout(function(i_local){
    return function () {
      console.log('The index of this number is: ' + i_local);
    }
  }(i), 3000)
}

 

 

    （5）拓展：块级作用域

    详情看文章浅谈JS块级作用域

 

 

 

.