javascript中的let vs var [重复]

Posted

技术标签:

【中文标题】javascript中的let vs var [重复]【英文标题】:let vs var in javascript [duplicate] 【发布时间】:2018-06-08 17:02:06 【问题描述】:

我知道 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

【问题讨论】:

【参考方案1】:

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

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();

【讨论】:

我还是不明白。 let 是在 for 周围还是在 for 内部?有四种不同的i,还是一种?如果是一个,它与var 的情况有什么不同(大概i 仍然会被捕获,就像var 一样)?如果是四个,为什么i++ 有效(即旧的i 和新的i 是如何被访问的)?如果有人有 ES2018 的相关段落,那就太棒了。 (编辑:建议的副本有答案。) 嗯,对不起,我没听懂。你能解释一下hoisted是什么意思吗? In the second case, i is not hoisted, and has scoped access to each iteration of the loop, making i accurately available to console.log statement. 没错,但循环的执行不会因setTimeout 而停止。在这种情况下,循环也会结束,如果您在 settimeout 之外记录i 的值,您在settimeout 开始执行之前,将看到它的值i 设置为length-1。所以问题是settimeout 如何获得i 的值,即使它的值设置为length-1 在第二个示例中,i 的绑定每次迭代都会发生变化,给人的印象是拥有单独的 i 副本。请仔细阅读原始帖子(此问题被标记为重复)以澄清更多信息。 :) @Amadan 在 ES6+ 中 i 在块内,每次迭代都会创建一个新的词法环境。在“IterationStatement 下:for ( LexicalDeclaration Expression ; Expression ) Statement”在 ECMA2017 版本的第 13.7.4.7 节中,在第 2 步中创建循环环境并在第 7 步中设置到位。根据第 13.7.4.8 节,循环环境在第一次循环迭代(步骤 2)之前被复制,并在循环结束时以现有状态再次复制,在 `++i' 增量之前(步骤 3.e) 之前的环境在循环终止。【参考方案2】:

首先,输出将是四次而不是五次(如您的评论中所述)。 我将您的代码粘贴到 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 在内部是如何工作的了吗? :-)

【讨论】:

【参考方案3】:

您仍然可以将var 用于setTimeout。您可以使用立即调用的函数表达式 (IIFE) 在 setTimeout 周围创建一个闭包,以便 i 的值被 setTimeout 函数识别。

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

【讨论】:

这并不能回答“为什么let 有效”的问题。 感谢您的回答 Ankit。但我知道如何使用 IIFE 使其工作。我只是想知道“让”如何使这项工作发挥作用。

以上是关于javascript中的let vs var [重复]的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript中的 let 和 var

Javascript中的var和let

JavaScript中的let关键字

let vs var

Larkin - let vs var

Swift - 以编程方式创建视图时的 Lazy Var vs. Let(节省内存)