JavaScript中的let与var有什么区别？

Question

JavaScript中的let与var有什么区别？

5

我知道let具有块级作用域，而var具有函数级作用域。但是在这种情况下，我不明白如何使用let可以解决问题。

const arr = [1,2,3,4];
for (var i = 0; i < arr.length; i++) {
setTimeout(function() {
   console.log(arr[i]) 
}, 1000);
} // Prints undefined 5 times

const arr = [1,2,3,4];
for (let i = 0; i < arr.length; i++) {
setTimeout(function() {
   console.log(arr[i]) 
}, 1000);
} // Prints all the values correctly

- Krishna

3个回答

1

首先，输出的次数将是四次而不是五次（如您在评论中提到的）。我将您的代码粘贴到Babel REPL中，这就是我得到的结果，

"use strict";

var arr = [1, 2, 3, 4];

var _loop = function _loop(i) {
setTimeout(function () {
   console.log(arr[i]);
}, 1000);
};

for (var i = 0; i < arr.length; i++) {
_loop(i);
}

你现在看到let是如何在内部工作的了吗？:-)

- Sreenivas Shenoy

0

您仍然可以在 setTimeout 中使用 var。您可以使用立即调用的函数表达式（IIFE）创建一个闭包，使得 setTimeout 函数能够识别 i 的值。

const arr = [1,2,3,4];
for (var i = 0; i < arr.length; i++) {
(function(i){
setTimeout(function() {
   console.log(arr[i]) 
}, 1000)})(i);
}

- Ankit Agarwal

4

这并没有回答“为什么 let 起作用”的问题。 - Amadan

谢谢你的回答，Ankit。但是我知道如何使用IIFE使其工作。我只是想知道'let'是如何使其工作的。 - Krishna

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- 31piy · Accepted Answer

这都与变量的作用域有关。让我们尝试将两个部分包装到函数中，并观察输出：

function test() {
  // `i` will be declared here, making it a non-for-loop scoped variable
  const arr = [1, 2, 3, 4];
  for (var i = 0; i < arr.length; i++) {
    setTimeout(function() {
      console.log(arr[i])
    }, 1000);
  } // Prints undefined 5 times
}

test();

在第一个情况下，i会被提升，由于setTimeout的异步性质，循环结束后i会立即变为4，这将使arr[i]指向数组中的一个undefined元素。

在第二个情况下，i没有被提升，并且具有对每次循环迭代的作用域访问权限，使得i能够准确地被console.log语句使用。因此结果符合预期：

function test() {
  const arr = [1, 2, 3, 4];
  for (let i = 0; i < arr.length; i++) {
    setTimeout(function() {
      console.log(arr[i])
    }, 1000);
  } // Prints all the values correctly

}

test();