使用“let”和“var”有什么区别？

不念不忘少年蓝@ 2024-03-31 16:50 77阅读 0赞

## 问题描述： ##

ECMAScript 6 引入了 the let statement。

我听说它被描述为一个局部变量，但我仍然不太确定它与 var 关键字的行为有何不同。

有什么区别？什么时候应该使用 let 而不是 var？

> huntsbot.com聚合了超过10+全球外包任务平台的外包需求，寻找外包任务与机会变的简单与高效。

## 解决方案1: ##

> huntsbot.com全球7大洲远程工作机会，探索不一样的工作方式

范围规则

主要区别在于范围规则。由 var 关键字声明的变量的作用域是直接函数体（因此是函数作用域），而 let 变量的作用域是由 \{ \} 表示的直接 enclosure 块（因此是块作用域） .

函数 run() \{ var foo = “Foo”;让酒吧=“酒吧”； console.log(foo, bar); // Foo Bar \{ var moo = “Mooo” let baz = “Bazz”; console.log(moo, baz); // Mooo Bazz \} console.log(moo); // Mooo console.log(baz); // 参考错误 \} run();

将 let 关键字引入语言的原因是函数范围令人困惑，并且是 JavaScript 中错误的主要来源之一。

看看 another Stack Overflow question 中的这个例子：

变量函数 = \[\]; // 让我们创建 3 个函数 for (var i = 0; i < 3; i++) \{ // 并将它们存储在 funcs funcs\[i\] = function() \{ // 每个都应该记录它的值。 console.log(“我的值：” + i); \}; \} for (var j = 0; j < 3; j++) \{ // 现在让我们运行每一个来查看 funcsj; \}

每次调用 funcsj; 时都会将 My value: 3 输出到控制台，因为匿名函数绑定到同一个变量。

人们必须创建立即调用的函数来从循环中捕获正确的值，但这也很麻烦。

吊装

虽然用 var 关键字声明的变量是 hoisted（在代码运行之前用 undefined 初始化），这意味着它们甚至在声明之前就可以在其封闭范围内访问：

函数运行（）\{控制台.log（foo）； // 未定义 var foo = “Foo”;控制台.log(foo); // Foo \} run();

let 变量在其定义被评估之前不会被初始化。在初始化之前访问它们会导致 ReferenceError。从块的开始到处理初始化，该变量被称为处于“临时死区”。

功能 checkHoisting() \{ console.log(foo); // ReferenceError let foo = “Foo”;控制台.log(foo); // Foo \} checkHoisting();

创建全局对象属性

在顶层，let 与 var 不同，它不会在全局对象上创建属性：

var foo = “Foo”; // 全局作用域 let bar = “Bar”; // 不允许全局作用域 console.log(window.foo); // Foo console.log(window.bar); // 不明确的

重新声明

在严格模式下，var 将允许您在同一范围内重新声明相同的变量，而 let 会引发 SyntaxError。

‘使用严格’; var foo = “foo1”; var foo = “foo2”; // 没问题，‘foo1’ 被 ‘foo2’ 替换。让 bar = “bar1”;让 bar = “bar2”; // SyntaxError: 标识符 ‘bar’ 已经被声明

`请记住，您可以随时创建块。函数（）{代码；{让inBlock = 5； } 代码; };`

`那么 let 语句的目的仅仅是在某个块中不需要时释放内存吗？`

`@NoBugs，是的，鼓励变量仅在需要的地方存在。`

`let 块表达式 let (variable declaration) statement 是非标准的，将来会被删除，bugzilla.mozilla.org/show_bug.cgi?id=1023609。`

`顶级范围的 let不与 var 相同 -- let 明确不会创建全局范围的引用：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…`

## 解决方案2: ##

> 与HuntsBot一起，探索全球自由职业机会–huntsbot.com

let 还可用于避免闭包问题。它绑定新值而不是保留旧引用，如下面的示例所示。

for(var i=1; i<6; i++) \{ $(“\#div” + i).click(function () \{ console.log(i); \}); \} 点击每个数字会登录到控制台：< /p> 1 2 3 4 5

上面的代码演示了一个经典的 JavaScript 闭包问题。对 i 变量的引用存储在点击处理程序闭包中，而不是 i 的实际值。

每个单击处理程序都将引用同一个对象，因为只有一个计数器对象可以容纳 6 个，因此每次单击都会得到 6 个。

一般的解决方法是将其包装在匿名函数中并将 i 作为参数传递。现在也可以通过使用 let 而不是 var 来避免此类问题，如下面的代码所示。

（在 Chrome 和 Firefox 50 中测试）

for(let i=1; i<6; i++) \{ $(“\#div” + i).click(function () \{ console.log(i); \}); \} 点击每个数字会登录到控制台：< /p> 1 2 3 4 5

`这其实很酷。我希望“i”在循环体之外定义，包含在括号内，并且不会在“i”周围形成“闭包”。当然你的例子证明不是这样。我认为从语法的角度来看这有点令人困惑，但这种情况非常普遍，以这种方式支持它是有意义的。非常感谢您提出这个问题。`

`IE 11 支持 let，但它会为所有按钮提示“6”。您是否有任何消息来源说明 let 的行为方式？`

`看起来您的答案是正确的行为：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…`

`事实上，这是 Javascript 中的一个常见缺陷，现在我明白为什么 let 会非常有用。在循环中设置事件侦听器不再需要在每次迭代时立即调用函数表达式来确定本地范围 i。`

`使用“let”只是推迟了这个问题。所以每次迭代都会创建一个私有的独立块作用域，但是“i”变量仍然可能被块内的后续更改破坏，（授予迭代器变量通常不会在块内更改，但块内其他声明的 let 变量很可能be) 并且块内声明的任何函数在调用时都可能破坏块内声明的其他函数的“i”值，因为它们共享相同的私有块范围，因此对“i”的引用相同。`

## 解决方案3: ##

> huntsbot.com聚合了超过10+全球外包任务平台的外包需求，寻找外包任务与机会变的简单与高效。

let 和 var 有什么区别？

使用 var 语句定义的变量在定义它的整个函数中都是已知的，从函数的开始。 (\*)

使用 let 语句定义的变量仅在定义它的块中是已知的，从定义它的那一刻起。 (\*\*)

要了解差异，请考虑以下代码：

// i IS NOT known here
    // j IS NOT known here
    // k IS known here, but undefined
    // l IS NOT known here
    
    function loop(arr) {
        
        // i IS known here, but undefined
        // j IS NOT known here
        // k IS known here, but has a value only the second time loop is called
        // l IS NOT known here
    
        for( var i = 0; i < arr.length; i++ ) {
        
            // i IS known here, and has a value
            // j IS NOT known here
            // k IS known here, but has a value only the second time loop is called
            // l IS NOT known here
        };
    
        // i IS known here, and has a value
        // j IS NOT known here
        // k IS known here, but has a value only the second time loop is called
        // l IS NOT known here
    
        for( let j = 0; j < arr.length; j++ ) {
        
            // i IS known here, and has a value
            // j IS known here, and has a value
            // k IS known here, but has a value only the second time loop is called
            // l IS NOT known here
        };
    
        // i IS known here, and has a value
        // j IS NOT known here
        // k IS known here, but has a value only the second time loop is called
        // l IS NOT known here
    }
    
    loop([1,2,3,4]);
    
    for( var k = 0; k < arr.length; k++ ) {
        
        // i IS NOT known here
        // j IS NOT known here
        // k IS known here, and has a value
        // l IS NOT known here
    };
    
    for( let l = 0; l < arr.length; l++ ) {
        
        // i IS NOT known here
        // j IS NOT known here
        // k IS known here, and has a value
        // l IS known here, and has a value
    };
    
    loop([1,2,3,4]);
    
    // i IS NOT known here
    // j IS NOT known here
    // k IS known here, and has a value
    // l IS NOT known here

在这里，我们可以看到我们的变量 j 只在第一个 for 循环中知道，而在之前和之后都不知道。然而，我们的变量 i 在整个函数中是已知的。

另外，考虑到块范围的变量在声明之前是未知的，因为它们没有被提升。您也不允许在同一个块内重新声明同一个块范围的变量。这使得块范围的变量比全局或功能范围的变量更不容易出错，全局或功能范围的变量被提升并且在多个声明的情况下不会产生任何错误。

今天使用 let 安全吗？

有些人会争辩说，将来我们将只使用 let 语句，而 var 语句将变得过时。 JavaScript 大师 Kyle Simpson 写了 a very elaborate article on why he believes that won’t be the case。

然而，今天绝对不是这样。事实上，我们实际上需要问自己，使用 let 语句是否安全。该问题的答案取决于您的环境：

如果您正在编写服务器端 JavaScript 代码 (Node.js)，则可以安全地使用 let 语句。

如果您正在编写客户端 JavaScript 代码并使用基于浏览器的转译器（如 Traceur 或 babel-standalone），则可以安全地使用 let 语句，但是您的代码可能在性能方面并非最佳。

如果您正在编写客户端 JavaScript 代码并使用基于节点的转译器（如 traceur shell 脚本或 Babel），则可以安全地使用 let 语句。而且因为您的浏览器只会知道转译的代码，所以性能缺陷应该是有限的。

如果您正在编写客户端 JavaScript 代码并且不使用转译器，则需要考虑浏览器支持。还有一些浏览器根本不支持 let ：

https://i.stack.imgur.com/J9kEC.png

如何跟踪浏览器支持

有关在您阅读此答案时哪些浏览器支持 let 语句的最新概述，请参阅 this Can I Use page。

(\*) 全局和函数范围的变量可以在声明之前初始化和使用，因为 JavaScript 变量是 hoisted。 这意味着声明总是位于范围的顶部。

(\*\*) 块范围的变量不被提升

> huntsbot.com – 高效赚钱，自由工作

`关于答案 v4：i 在功能块中随处可见！它以 undefined 开始（由于提升），直到您分配一个值！ ps：let 也被提升（到它的包含块的顶部），但在第一次分配之前在块中引用时会给出 ReferenceError。 （ps2：我是一个支持分号的人，但你真的不需要在 block 后面加分号）。话虽如此，感谢您添加有关支持的现实检查！`

`@GitaarLAB：根据 Mozilla Developer Network：“在 ECMAScript 2015 中，let 绑定不受变量提升的影响，这意味着 let 声明不会移动到当前执行上下文的顶部。” - 无论如何，我对我的答案进行了一些改进，以澄清 let 和 var 之间提升行为的区别！`

`您的答案改善了很多（我彻底检查了）。请注意，您在评论中引用的同一链接还说：“（let）变量从块开始到处理初始化都处于“临时死区”。这意味着“标识符”（指向“某物”的文本字符串“保留”）已经保留在相关范围内，否则它将成为根/主机/窗口范围的一部分。对我个人而言，“提升”只是将声明的“标识符”保留/链接到其相关范围；不包括它们的初始化/分配/可修改性！`

`还有..+1。您链接的 Kyle Simpson 文章是一篇优秀的阅读文章，谢谢！ “时间死区”又名“TDZ”也很清楚。我想补充一件有趣的事情：我在 MDN 上读到过，let 和 const建议仅在您真正需要它们的附加功能时使用，因为强制/检查这些额外的功能功能（如只写常量）导致（当前）引擎执行/检查/验证/设置的“更多工作”（以及范围树中的其他范围节点）。`

`请注意，MDN 说 IE 确实正确解释了 let。它是哪一个？ developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…`

## 解决方案4: ##

> 与HuntsBot一起，探索全球自由职业机会–huntsbot.com

这是一个带有一些示例的 explanation of the let keyword。

let 的工作方式与 var 非常相似。主要区别在于 var 变量的作用域是整个封闭函数

Wikipedia 上的 This table 显示了哪些浏览器支持 Javascript 1.7。

请注意，只有 Mozilla 和 Chrome 浏览器支持它。 IE、Safari 和其他可能没有。

`链接文档中的关键文本似乎是，“let 的工作方式与 var 非常相似。主要区别在于 var 变量的范围是整个封闭函数”。`

`@olliej，实际上 Mozilla 领先于游戏。见第 19 页，共 ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf`

`@TylerCrompton 这只是保留多年的一组词。当 mozilla 添加 let 时，它纯粹是一个 mozilla 扩展，没有相关规范。 ES6 应该为 let 语句定义行为，但这是在 mozilla 引入语法之后出现的。记住 moz 也有 E4X，它完全死了，只有 moz。`

`IE11 添加了对 let msdn.microsoft.com/en-us/library/ie/dn342892%28v=vs.85%29.aspx 的支持`

`现在let支持目前所有最新的浏览器，除了 Opera、Blackberry 和QQ浏览器。`

## 解决方案5: ##

> huntsbot.com高效搞钱，一站式跟进超10+任务平台外包需求

接受的答案缺少一点：

{
        
      let a = 123;
    };
    
    console.log(a); // ReferenceError: a is not defined

`接受的答案并未在其示例中解释这一点。接受的答案仅在 for 循环初始化程序中进行了演示，大大缩小了 let 限制的应用范围。赞成。`

`@stimpy77 它明确指出“let 的范围为最近的封闭块”；是否需要包括清单的每一种方式？`

`有很多例子，但没有一个能正确地证明这个问题..我可能已经对接受的答案和这个答案都投了赞成票？`

`这一贡献表明，“块”可以简单地是一组括在括号中的行；即它不需要与任何类型的控制流、循环等相关联。`

## 解决方案6: ##

> huntsbot.com提供全网独家一站式外包任务、远程工作、创意产品分享与订阅服务!

让

块范围

使用 let 关键字声明的变量是块范围的，这意味着它们仅在声明它们的 block 中可用。

在顶层（函数之外）

在顶层，使用 let 声明的变量不会在全局对象上创建属性。

var globalVariable = 42;
    let blockScopedVariable = 43;
    
    console.log(globalVariable); // 42
    console.log(blockScopedVariable); // 43
    
    console.log(this.globalVariable); // 42
    console.log(this.blockScopedVariable); // undefined

在函数内部

在函数内部（但在块外部），let 与 var 具有相同的范围。

(() => {
        
      var functionScopedVariable = 42;
      let blockScopedVariable = 43;
    
      console.log(functionScopedVariable); // 42
      console.log(blockScopedVariable); // 43
    })();
    
    console.log(functionScopedVariable); // ReferenceError: functionScopedVariable is not defined
    console.log(blockScopedVariable); // ReferenceError: blockScopedVariable is not defined

块内

在块内使用 let 声明的变量不能在该块外访问。

{
        
      var globalVariable = 42;
      let blockScopedVariable = 43;
      console.log(globalVariable); // 42
      console.log(blockScopedVariable); // 43
    }
    
    console.log(globalVariable); // 42
    console.log(blockScopedVariable); // ReferenceError: blockScopedVariable is not defined

循环内

循环中用 let 声明的变量只能在该循环内引用。

for (var i = 0; i < 3; i++) {
        
      var j = i * 2;
    }
    console.log(i); // 3
    console.log(j); // 4
    
    for (let k = 0; k < 3; k++) {
        
      let l = k * 2;
    }
    console.log(typeof k); // undefined
    console.log(typeof l); // undefined
    // Trying to do console.log(k) or console.log(l) here would throw a ReferenceError.

带闭包的循环

如果您在循环中使用 let 而不是 var，则每次迭代都会获得一个新变量。这意味着您可以安全地在循环内使用闭包。

// Logs 3 thrice, not what we meant.
    for (var i = 0; i < 3; i++) {
        
      setTimeout(() => console.log(i), 0);
    }
    
    // Logs 0, 1 and 2, as expected.
    for (let j = 0; j < 3; j++) {
        
      setTimeout(() => console.log(j), 0);
    }

时间死区

由于 the temporal dead zone，使用 let 声明的变量在声明之前无法访问。尝试这样做会引发错误。

console.log(noTDZ); // undefined
    var noTDZ = 43;
    console.log(hasTDZ); // ReferenceError: hasTDZ is not defined
    let hasTDZ = 42;

无需重新声明

您不能使用 let 多次声明同一个变量。您也不能使用与使用 var 声明的另一个变量具有相同标识符的 let 声明一个变量。

var a;
    var a; // Works fine.
    
    let b;
    let b; // SyntaxError: Identifier 'b' has already been declared
    
    var c;
    let c; // SyntaxError: Identifier 'c' has already been declared

常量

const 与 let 非常相似——它是块范围的并且具有 TDZ。然而，有两件事是不同的。

无需重新分配

无法重新分配使用 const 声明的变量。

const a = 42;
    a = 43; // TypeError: Assignment to constant variable.

请注意，这并不意味着该值是不可变的。它的属性仍然可以更改。

const obj = {
        };
    obj.a = 42;
    console.log(obj.a); // 42

如果您想拥有一个不可变对象，您应该使用 Object.freeze()。

const obj = Object.freeze({
        a: 40});
    obj.a = 42;
    console.log(obj.a); // 40
    console.log(obj.b); // undefined

需要初始化程序

使用 const 声明变量时，您始终必须指定一个值。

const a; // SyntaxError: Missing initializer in const declaration

## 解决方案7: ##

> huntsbot.com提供全网独家一站式外包任务、远程工作、创意产品分享与订阅服务!

在最基本的条件下，

for (let i = 0; i < 5; i++) {
        
      // i accessible ✔️
    }
    // i not accessible ❌

for (var i = 0; i < 5; i++) {
        
      // i accessible ✔️
    }
    // i accessible ✔️

⚡️沙盒玩↓

https://codesandbox.io/static/img/play-codesandbox.svg

## 解决方案8: ##

> huntsbot.com提供全网独家一站式外包任务、远程工作、创意产品分享与订阅服务!

https://i.stack.imgur.com/dqNYW.png

如您所见，var j 变量的值仍在 for 循环范围（块范围）之外，但 let i 变量在 for 循环范围之外未定义。

“使用严格”； console.log(“var:”); for (var j = 0; j < 2; j++) \{ console.log(j); \} 控制台.log(j); console.log(“let:”); for (let i = 0; i < 2; i++) \{ console.log(i); \} 控制台.log(i);

## 解决方案9: ##

> huntsbot.com汇聚了国内外优秀的初创产品创意，可按收入、分类等筛选，希望这些产品与实践经验能给您带来灵感。

主要区别在于 scope 的不同，而 let 只能在它声明的 scope 内可用，就像在 for 循环中一样，var例如， 可以在循环外访问。来自 MDN 中的文档（示例也来自 MDN）：

let 允许您将范围限制在使用它的块、语句或表达式中声明变量。这与 var 关键字不同，它在全局范围内定义一个变量，或者在整个函数的本地定义一个变量，而不考虑块范围。 let 声明的变量的作用域是定义它们的块，以及任何包含的子块。这样，let 的工作方式非常类似于 var。主要区别在于 var 变量的作用域是整个封闭函数：

在程序和函数的顶层，let 与 var 不同，它不会在全局对象上创建属性。例如：

var x = 'global';
    let y = 'global';
    console.log(this.x); // "global"
    console.log(this.y); // undefined

在块内使用时，让变量的范围限制在该块内。注意作用域在声明它的函数内部的 var 之间的区别。

var a = 1;
    var b = 2;
    
    if (a === 1) {
        
      var a = 11; // the scope is global
      let b = 22; // the scope is inside the if-block
    
      console.log(a);  // 11
      console.log(b);  // 22
    } 
    
    console.log(a); // 11
    console.log(b); // 2

也不要忘记它的 ECMA6 功能，所以它还没有完全支持，所以最好总是使用 Babel 等将它转换为 ECMA5 …有关访问 babel website 的更多信息

`我不知道最后一个例子是否准确。因为通过不是从函数而是直接命令行调用它，它仍然被认为是同一函数的一部分。因此，如果您从函数外部调用它，它的行为方式不应相同。`

## 解决方案10: ##

> huntsbot.com洞察每一个产品背后的需求与收益，从而捕获灵感

有一些细微的差别 — let 作用域的行为更像是变量作用域在任何其他语言中的行为或多或少。

例如，它的范围是封闭块，它们在声明之前不存在，等等。

但是值得注意的是，let 只是较新的 Javascript 实现的一部分，并且具有不同程度的 browser support。

`还值得注意的是，ECMAScript 是标准，let 包含在 6th edition draft 中，并且很可能会出现在最终规范中。`

`刚刚偶然发现这个问题，在 2012 年仍然只有 Mozilla 浏览器支持 let。 Safari、IE 和 Chome 都没有。`

`意外创建部分块范围的想法是一个好点，请注意，let 不会提升，使用由块顶部定义的 let 定义的变量。如果您的 if 语句不仅仅是几行代码，您可能会忘记在定义该变量之前不能使用该变量。好点！！！`

`这是 let 和 var 之间最重要的区别之一，它不在公认的答案中，哈哈。特别是考虑到由于提升和范围界定可能发生的众多错误。如果您不提及提升，我觉得 let 和 var 之间没有太多区别。`

`@EricB：是和否：“在 ECMAScript 2015 中，let 会将变量提升 到块的顶部。但是，在变量声明之前引用块中的变量会导致 ReferenceError（我的注释：而不是旧的 undefined）。从块开始到处理声明，该变量处于“临时死区”中。” “switch 语句，因为只有一个底层块”也是如此。来源：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…`

## 解决方案11: ##

> 保持自己快人一步,享受全网独家提供的一站式外包任务、远程工作、创意产品订阅服务–huntsbot.com

变量不提升 let 不会提升到它们出现的块的整个范围。相比之下， var 可以提升如下。 \{ 控制台.log(cc); // 不明确的。提升 var cc = 23; \} \{ 控制台.log(bb); // ReferenceError: bb 没有定义 let bb = 23;实际上，根据@Bergi， var 和 let 都被提升了。

let 的垃圾收集块范围与闭包和垃圾收集以回收内存有关。考虑一下，函数 process(data) \{ //… \} var hugeData = \{ … \};过程（巨大数据）； var btn = document.getElementById(“mybutton”); btn.addEventListener(“click”, function click(evt)\{ //… \});点击处理程序回调根本不需要hugeData 变量。理论上，在 process(…) 运行之后，巨大的数据结构 hugeData 可能会被垃圾回收。然而，有可能一些 JS 引擎仍然必须保持这个巨大的结构，因为 click 函数在整个范围内都有一个闭包。但是，块作用域可以使这个庞大的数据结构被垃圾回收。 function process(data) \{ //… \} \{ // 在这个块中声明的任何东西都可以被垃圾回收 let hugeData = \{ … \};过程（巨大数据）； \} var btn = document.getElementById(“mybutton”); btn.addEventListener(“click”, function click(evt)\{ //… \});

let 循环 循环中的 let 可以将其重新绑定到循环的每次迭代，确保从上一次循环迭代结束时重新为其分配值。考虑一下， // 打印 ‘5’ 5 次 for (var i = 0; i < 5; ++i) \{ setTimeout(function () \{ console.log(i); \}, 1000);但是，用 let // print 1, 2, 3, 4, 5 替换 var。 now for (let i = 0; i < 5; ++i) \{ setTimeout(function () \{ console.log(i); \}, 1000);因为让我们用这些名称创建一个新的词法环境 a) 初始化表达式 b) 每次迭代（之前评估增量表达式），更多细节在这里。

`是的，它们被吊起，但由于（鼓声）时间死区而表现得好像没有被吊起 - 一个非常戏剧性的标识符名称，在声明之前无法访问:-)`

`所以 let 被提升了，但是不可用？这与“未吊装”有何不同？`

`希望布赖恩或伯吉回来回答这个问题。是否提升了 let 的声明，但没有提升分配？谢谢！`

`有趣的是，当涉及到 let 时，它甚至被称为提升。我知道从技术上讲解析引擎正在预先捕获它，但出于所有意图和目的，程序员应该将它视为它不存在。另一方面，提升 var 对程序员有影响。`

`原文链接：https://www.huntsbot.com/qa/8KRW/whats-the-difference-between-using-let-and-var?lang=zh_CN`

> 一个优秀的自由职业者，应该有对需求敏感和精准需求捕获的能力，而huntsbot.com提供了这个机会