“让” 和 “让” 和有什么不一样？ 和“var”？

Question

ECMAScript 6 引入了 let 语句。

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

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

Answer 1

范围规则

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

function run() {
  var foo = "Foo";
  let bar = "Bar";

  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); // ReferenceError
}

run();

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

看一下另一个 Stack Overflow 问题中的示例：

var funcs = [];
// let's create 3 functions
for (var i = 0; i < 3; i++) {
  // and store them in funcs
  funcs[i] = function() {
    // each should log its value.
    console.log("My value: " + i);
  };
}
for (var j = 0; j < 3; j++) {
  // and now let's run each one to see
  funcs[j]();
}

每次调用 funcs[j](); 时，My value: 3 都会输出到控制台，因为匿名函数绑定到同一变量。

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

提升使用

var 关键字声明的变量提升和初始化，这意味着即使在声明它们之前它们也可以在其封闭范围内访问，但是在到达声明语句之前它们的值是未定义：

function checkHoisting() {
  console.log(foo); // undefined
  var foo = "Foo";
  console.log(foo); // Foo
}

checkHoisting();

let 变量已被提升，但未提升初始化直到它们的定义被评估。 在初始化之前访问它们会导致 ReferenceError。 据说该变量从开始时就位于时间死区阻塞直到声明语句被处理。

function checkHoisting() {
  console.log(foo); // ReferenceError
  let foo = "Foo";
  console.log(foo); // Foo
}

checkHoisting();

创建全局对象属性

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

var foo = "Foo"; // globally scoped
let bar = "Bar"; // globally scoped but not part of the global object

console.log(window.foo); // Foo
console.log(window.bar); // undefined

重新声明

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

'use strict';
var foo = "foo1";
var foo = "foo2"; // No problem, 'foo1' is replaced with 'foo2'.

let bar = "bar1"; 
let bar = "bar2"; // SyntaxError: Identifier 'bar' has already been declared

Answer 2

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

for(var i=1; i<6; i++) {
  $("#div" + i).click(function () { console.log(i); });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Clicking on each number will log to console:</p> 
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
<div id="div5">5</div>

上面的代码演示了一个经典的 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); });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Clicking on each number will log to console:</p> 
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
<div id="div5">5</div>

Answer 3

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 撰写了 一篇非常详尽的文章，解释了为什么他认为情况不会如此。

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

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

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

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

• 如果您正在编写客户端 JavaScript 代码并且不使用转译器，则需要考虑浏览器支持。

  仍然有一些浏览器根本不支持 let ：

---

如何跟踪浏览器支持

有关哪些浏览器支持的最新概述>let 语句在您阅读此答案时，请参阅此我可以吗使用页面。

---

(*) 全局和功能范围的变量可以在声明之前初始化和使用，因为 JavaScript 变量是 提升。这意味着声明始终移动到范围的顶部。

(**) 块作用域变量未提升

Answer 4

以下是对 let 关键字的说明以及一些示例。

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

维基百科上的此表显示了哪些浏览器支持 Javascript 1.7。

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

Answer 5

let

块作用域

使用 let 关键字声明的变量是块作用域的，这意味着它们仅在 声明它们的块。

在顶层（函数外部）

在顶层，使用 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);
}

临时死区

由于临时死区，无法访问使用let声明的变量在宣布之前。 尝试这样做会引发错误。

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

无需重新声明

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

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

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

Answer 6

接受的答案遗漏了一点：

{
  let a = 123;
};

console.log(a); // ReferenceError: a is not defined

Answer 7

用最基本的术语来说，

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

---

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

---

⚡️ 沙盒可以玩 ↓

Answer 8

以下是两者之间差异的示例：

正如您所看到的，var j 变量仍然具有超出for 循环作用域（块作用域），但 let i 变量在 for 循环作用域之外未定义。

"use strict";
console.log("var:");
for (var j = 0; j < 2; j++) {
  console.log(j);
}

console.log(j);

console.log("let:");
for (let i = 0; i < 2; i++) {
  console.log(i);
}

console.log(i);

Answer 9

主要区别在于范围差异，而let只能在其声明的范围内可用，就像在for循环中一样，var例如，可以在循环外部访问。 来自 MDN 中的文档（示例还来自 MDN）：

let 允许您声明范围仅限于使用该变量的块、语句或表达式的变量。 这与 var 关键字不同，后者全局定义变量，或者在整个函数本地定义变量，而不管块作用域如何。

由 let 声明的变量的作用域是定义它们的块以及任何包含的子块。 这样，let 的工作方式与 var 非常相似。 主要区别在于 var 变量的作用域是整个封闭函数：

函数 varTest() { 
    var x = 1; 
    如果属实） { 
      var x = 2;   // 相同的变量！ 
      控制台.log(x);   // 2 
    } 
    控制台.log(x);   // 2 
  } 

  函数让测试（）{ 
    设 x = 1； 
    如果属实） { 
      设 x = 2；   // 不同的变量 
      控制台.log(x);   // 2 
    } 
    控制台.log(x);   // 1 
  }` 
  

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

var x = '全局'; 
  让 y = '全局'; 
  console.log(this.x);   // “全球的” 
  console.log(this.y);   // 不明确的 
  

当在块内使用时，let 将变量的范围限制为该块。 请注意 var 之间的区别，其作用域位于声明它的函数内部。

var a = 1; 
  var b = 2; 

  如果（a === 1）{ 
    var a = 11;   // 作用域是全局的 
    令 b = 22；   // 范围在 if 块内 

    控制台.log(a);   // 11 
    控制台.log(b);   // 22 
  }  

  控制台.log(a);   // 11 
  控制台.log(b);   // 2 
  

另外不要忘记它是 ECMA6 功能，因此尚未完全支持，因此最好始终使用 Babel 等将其转换为 ECMA5...有关访问 babel 网站

Answer 10

有一些细微的差异 - let 作用域的行为或多或少与其他语言中的变量作用域的行为相似。

例如，它的作用域为封闭块，它们在声明之前并不存在，等等。

但是值得注意的是 let 只是较新的 Javascript 实现的一部分，并且具有不同程度的 浏览器支持。

Answer 11

• 变量未提升

  let 将不会提升到它们出现的块的整个范围。相比之下，var 可以如下提升.

  <前><代码>{
  控制台.日志（抄送）； // 不明确的。 吊装引起的
  var CC = 23;
  }

  {
  控制台.log(bb); // ReferenceError: bb 未定义
  设 bb = 23；
  }

  实际上，根据@Bergi，两者var 和 let 被提升。

• 垃圾收集

  let 的块作用域对于回收内存的闭包和垃圾收集很有用。 考虑一下，

  函数处理（数据）{ 
        //... 
    } 
  
    var 巨大数据 = { .. }; 
  
    处理（大数据）； 
  
    var btn = document.getElementById("mybutton"); 
    btn.addEventListener(“点击”, 函数点击(evt){ 
        //.... 
    }); 
    

  click 处理程序回调根本不需要 hugeData 变量。 理论上，在 process(..) 运行后，巨大的数据结构 hugeData 可以被垃圾收集。 但是，某些 JS 引擎可能仍然需要保留这个庞大的结构，因为 click 函数在整个范围内都有一个闭包。

  但是，块作用域可能会使这个巨大的数据结构被垃圾收集。

  函数处理（数据）{ 
        //... 
    } 
  
    { // 该块内声明的任何内容都可以被垃圾收集 
        让巨大的数据 = { .. }; 
        处理（大数据）； 
    } 
  
    var btn = document.getElementById("mybutton"); 
    btn.addEventListener(“点击”, 函数点击(evt){ 
        //.... 
    }); 
    

• let 循环

  循环中的

  let 可以将其重新绑定到循环的每次迭代，确保为其重新分配上一个循环迭代结束时的值。 考虑一下，

  // 打印 '5' 5 次 
    for (var i = 0; i < 5; ++i) { 
        设置超时（函数（）{ 
            控制台.log(i); 
        }, 1000);   
    } 
    

  但是，请将 var 替换为 let

  // 现在打印 1, 2, 3, 4, 5 
    for (令 i = 0; i < 5; ++i) { 
        设置超时（函数（）{ 
            控制台.log(i); 
        }, 1000);   
    } 
    

  因为 let 使用这些名称为 a) 初始化表达式 b) 每次迭代（之前是评估增量表达式）创建一个新的词法环境，更多详细信息为 这里。

Answer 12

区别在于每个变量声明的范围。

在实践中，作用域的差异会产生许多有用的结果：

1. let 变量仅在其最近的封闭块 中可见（{ ... }< /代码>）。
2. let 变量只能在声明变量之后出现的代码行中使用（即使它们已被提升！）。
3. let 变量不能由后续的 var 或 let 重新声明。
4. 全局 let 变量不会添加到全局 window 对象中。
5. let 变量易于使用与闭包（它们不会导致竞争条件）。

let 施加的限制降低了变量的可见性，并增加了尽早发现意外名称冲突的可能性。 这使得跟踪和推理变量变得更加容易，包括它们的可达性（帮助回收未使用的内存） 。

因此，当在大型程序中使用或以新的和意想不到的方式组合独立开发的框架时，let 变量不太可能引起问题。

如果您确定在循环中使用闭包 (#5) 或在代码中声明外部可见的全局变量 (#4) 时想要单绑定效果，则 var 可能仍然有用。 如果 export 从转译器空间迁移到核心语言中。

示例

1. 在最近的封闭块之外不使用：
此代码块将引发引用错误，因为第二次使用 x 发生在用 let 声明它的块之外：

{
    let x = 1;
}
console.log(`x is ${x}`);  // ReferenceError during parsing: "x is not defined".

相反，使用 var 的相同示例有效。

2. 声明前不使用：
此代码块将在代码运行之前抛出 ReferenceError，因为 x 在声明之前使用：

{
    x = x + 1;  // ReferenceError during parsing: "x is not defined".
    let x;
    console.log(`x is ${x}`);  // Never runs.
}

相反，使用 var 的相同示例code> 解析并运行，不会引发任何异常。

3. 无需重新声明：
以下代码演示了用 let 声明的变量以后不能重新声明：

let x = 1;
let x = 2;  // SyntaxError: Identifier 'x' has already been declared

4. 全局变量未附加到窗口：

var button = "I cause accidents because my name is too common.";
let link = "Though my name is common, I am harder to access from other JS files.";
console.log(link);  // OK
console.log(window.link);  // undefined (GOOD!)
console.log(window.button);  // OK

5. 易于使用闭包：
用 var 声明的变量不能很好地与循环内的闭包配合使用。 这是一个简单的循环，它输出变量 i 在不同时间点所具有的值序列：

for (let i = 0; i < 5; i++) {
    console.log(`i is ${i}`), 125/*ms*/);
}

具体来说，此输出：

i is 0
i is 1
i is 2
i is 3
i is 4

在 JavaScript 中，我们经常在比创建变量晚得多的时间使用变量。 当我们通过传递给 setTimeout 的闭包来延迟输出来演示这一点时：

for (let i = 0; i < 5; i++) {
    setTimeout(_ => console.log(`i is ${i}`), 125/*ms*/);
}

...只要我们坚持使用 let，输出就保持不变。 相反，如果我们使用 var i 来代替：

for (var i = 0; i < 5; i++) {
    setTimeout(_ => console.log(`i is ${i}`), 125/*ms*/);
}

...循环意外地输出“i is 5”五次：

i is 5
i is 5
i is 5
i is 5
i is 5

Answer 13

这是一个添加到其他人已经写过的内容的示例。 假设您想要创建一个函数数组 adderFunctions，其中每个函数采用单个 Number 参数，并返回该参数与函数在数组中的索引之和。 尝试使用 var 关键字通过循环生成 adderFunctions 不会像人们天真的期望的那样工作：

// An array of adder functions.
var adderFunctions = [];

for (var i = 0; i < 1000; i++) {
  // We want the function at index i to add the index to its argument.
  adderFunctions[i] = function(x) {
    // What is i bound to here?
    return x + i;
  };
}

var add12 = adderFunctions[12];

// Uh oh. The function is bound to i in the outer scope, which is currently 1000.
console.log(add12(8) === 20); // => false
console.log(add12(8) === 1008); // => true
console.log(i); // => 1000

// It gets worse.
i = -8;
console.log(add12(8) === 0); // => true

上面的过程不会生成所需的函数数组，因为 < code>i 的范围超出了创建每个函数的 for 块的迭代范围。 相反，在循环结束时，每个函数闭包中的 i 引用 i 中每个匿名函数在循环结束时的值 (1000)。代码>adderFunctions。 这根本不是我们想要的：现在内存中有 1000 个不同函数的数组，它们的行为完全相同。 如果我们随后更新i的值，则突变将影响所有adderFunctions。

不过，我们可以使用 let 关键字重试：

// Let's try this again.
// NOTE: We're using another ES6 keyword, const, for values that won't
// be reassigned. const and let have similar scoping behavior.
const adderFunctions = [];

for (let i = 0; i < 1000; i++) {
  // NOTE: We're using the newer arrow function syntax this time, but 
  // using the "function(x) { ..." syntax from the previous example 
  // here would not change the behavior shown.
  adderFunctions[i] = x => x + i;
}

const add12 = adderFunctions[12];

// Yay! The behavior is as expected. 
console.log(add12(8) === 20); // => true

// i's scope doesn't extend outside the for loop.
console.log(i); // => ReferenceError: i is not defined

这一次，i 在 for 循环的每次迭代中都会反弹。 现在，每个函数都保留创建函数时的 i 值，并且 adderFunctions 的行为符合预期。

现在，将这两种行为进行图像混合，您可能会明白为什么不建议将较新的 let 和 const 与较旧的 var 混合在一起相同的脚本。 这样做可能会导致一些极其混乱的代码。

const doubleAdderFunctions = [];

for (var i = 0; i < 1000; i++) {
    const j = i;
    doubleAdderFunctions[i] = x => x + i + j;
}

const add18 = doubleAdderFunctions[9];
const add24 = doubleAdderFunctions[12];

// It's not fun debugging situations like this, especially when the
// code is more complex than in this example.
console.log(add18(24) === 42); // => false
console.log(add24(18) === 42); // => false
console.log(add18(24) === add24(18)); // => false
console.log(add18(24) === 2018); // => false
console.log(add24(18) === 2018); // => false
console.log(add18(24) === 1033); // => true
console.log(add24(18) === 1030); // => true

不要让这种事发生在你身上。 使用短绒棉。

注意：这是一个教学示例，旨在演示循环中的 var/let 行为以及函数闭包，这也很容易去理解。 这将是一种糟糕的数字相加方式。 但是在匿名函数闭包中捕获数据的一般技术可能会在现实世界的其他上下文中遇到。 YMMV。

Answer 14

该解释摘自我在 Medium 上写的文章:

提升是一种 JavaScript 机制，其中变量和函数
声明被解析器移动到其范围的顶部
在之前将源代码读入中间表示
实际的代码执行由 JavaScript 解释器开始。 所以，实际上
无论变量或函数在哪里声明，它们都会
移动到其范围的顶部，无论其范围是否为
全球或本地。 这意味着

console.log (嗨);      
  var hi = "打个招呼"; 
  

实际上被解释为

var hi = 未定义; 
  控制台.log（嗨）； 
  hi =“打个招呼”； 
  

因此，正如我们刚才所看到的，var 变量被提升到顶部
其范围并正在使用 undefined 值进行初始化
这意味着我们可以在实际之前分配它们的值
在代码中声明它们，如下所示：

hi = “打个招呼” 
  控制台.log（嗨）；   // 打招呼 
  瓦尔嗨； 
  

关于函数声明，我们可以在实际声明它们之前调用它们，如下所示：

sayHi();   // 你好 

  函数 sayHi() { 
     console.log('嗨'); 
  }; 
  

另一方面，函数表达式不会被提升，因此我们会得到以下错误：

sayHi();   //输出：“TypeError：sayHi 不是函数 

  var sayHi = 函数() { 
    console.log('嗨'); 
  };  
  

ES6 向 JavaScript 开发人员引入了 let 和 const 关键字。 而 let 和 const 是块作用域的而不是函数
范围为 var 在讨论它们时，它不应该产生影响
吊装行为。 我们将从最后开始，JavaScript 提升 let
和const。

console.log(hi);   // 输出：初始化之前无法访问“hi”  
  让 hi = '嗨'; 
  

正如我们在上面看到的，let 不允许我们使用未声明的
变量，因此解释器显式输出引用错误
表示之前无法访问 hi 变量
初始化。 如果我们改变上面的let也会出现同样的错误
到常量

console.log(hi);   // 输出：初始化之前无法访问“hi” 
  const hi = '嗨'; 
  

所以，最重要的是，JavaScript 解析器搜索变量
声明和函数并将它们提升到其作用域的顶部
在代码执行之前并在内存中为它们赋值
如果解释器在执行代码时会遇到它们
将识别它们并能够用它们执行代码
指定的值。 使用 let 或 const 声明的变量保留
在执行开始时未初始化，而该变量
使用 var 声明的值将被初始化为 undefined。

我添加了这个视觉插图，以更好地帮助理解如何吊装
变量和函数被保存在内存中

Answer 15

函数 VS 块作用域：

var 和 let 之间的主要区别在于，用 var 声明的变量是函数作用域。 而用 let 声明的函数是块作用域。 例如：

function testVar () {
  if(true) {
    var foo = 'foo';
  }

  console.log(foo);
}

testVar();  
// logs 'foo'


function testLet () {
  if(true) {
    let bar = 'bar';
  }

  console.log(bar);
}

testLet(); 
// reference error
// bar is scoped to the block of the if statement 

变量与 var：

当第一个函数 testVar 被调用时，变量 foo 是用 var 声明的，仍然可以在 if 语句之外访问。 此变量 foo 在 testVar 函数 的范围内任何地方都可用。

带有 let 的变量：

当第二个函数 testLet 被调用时，用 let 声明的变量 bar 只能被访问在 if 语句内。 因为用 let 声明的变量是块作用域（其中块是大括号之间的代码，例如 if{} 、 for{} 、函数{}）。

let 变量不会被提升：

var 和 let 之间的另一个区别是用 let 声明的变量 不要被吊起。 一个例子是说明这种行为的最佳方式：

带有 let dont 的变量被提升：

console.log(letVar);

let letVar = 10;
// referenceError, the variable doesn't get hoisted

带有 var do 被提升：

console.log(varVar);

var varVar = 10;
// logs undefined, the variable gets hoisted

全局 let 不会附加到 window：

在全局作用域中使用 let 声明的变量（即以下代码）不在函数中）不会作为属性添加到全局 window 对象上。 例如（此代码在全局范围内）：

var bar = 5;
let foo  = 10;

console.log(bar); // logs 5
console.log(foo); // logs 10

console.log(window.bar);  
// logs 5, variable added to window object

console.log(window.foo);
// logs undefined, variable not added to window object

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

使用 let 而不是 var因为它的范围更具体。 这减少了处理大量变量时可能发生的潜在命名冲突。 当您希望显式地将全局变量放在 window 对象上时，可以使用 var（如果确实有必要，请务必仔细考虑）。

Answer 16

ES6 引入了两个新关键字（let 和 const）来替代 var。

当您需要块级减速时，您可以使用 let 和 const 而不是 var。

下表总结了 var、let 和 const

Answer 17

let 很有趣，因为它允许我们做这样的事情：

(() => {
    var count = 0;

    for (let i = 0; i < 2; ++i) {
        for (let i = 0; i < 2; ++i) {
            for (let i = 0; i < 2; ++i) {
                console.log(count++);
            }
        }
    }
})();

.as-console-wrapper { max-height: 100% !important; }

结果计数为 [0, 7]。

然而

(() => {
    var count = 0;

    for (var i = 0; i < 2; ++i) {
        for (var i = 0; i < 2; ++i) {
            for (var i = 0; i < 2; ++i) {
                console.log(count++);
            }
        }
    }
})();

只计算 [0, 1]。

Answer 18

至少在 Visual Studio 2015、TypeScript 1.5 中，“var”似乎允许在一个块中多次声明相同的变量名，而“let”则不允许。

这不会产生编译错误：

var x = 1;
var x = 2;

这将：

let x = 1;
let x = 2;

Answer 19

var   --> Function scope  
let   --> Block scope
const --> Block scope

var

在此代码示例中，变量 i 使用 var 声明。 因此，它有一个函数范围。 这意味着您只能从function x内部访问i。 您无法从 function x 外部读取它

function x(){
  var i = 100;
  console.log(i); // 100
}
 
console.log(i); // Error. You can't do this

x();

在此示例中，您可以看到 i 是在 if 块内声明的。 但它是使用 var 声明的。 因此，它获得了函数作用域。 这意味着您仍然可以访问function x内的变量i。 因为 var 的作用域始终是函数。 尽管变量 i 是在 if 块内声明的，但由于它使用 var，它的作用域为父 function x 。

function x(){
  if(true){
    var i = 100;
  }
  console.log(i); 
}

x();

现在变量i在函数y内部声明。 因此，i 的作用域为函数 y。 您可以在function y 中访问i。 但不是来自function y外部。

function x(){
  function y(){
    var i = 100;
    console.log(i);
  }
  
  y();
}

x();

function x(){
  function y(){
    var i = 100;
  }
  console.log(i); // ERROR
}

x();

let、const

let 和 const 具有块作用域。

const 和 let 行为相同。 但不同的是，当你给 const 赋值时，你不能重新赋值。 但您可以使用 let 重新分配值。

在此示例中，变量 i 在 if 块内声明。 因此只能从 if 块内部访问它。 我们无法从 if 块外部访问它。 （这里 const 与 let 的工作方式相同）

if(true){
  let i = 100;
  console.log(i); // Output: 100
}

console.log(i); // Error

function x(){
  if(true){
    let i = 100;
    console.log(i); // Output: 100
  }
  console.log(i); // Error
}

x();

(let, const) 与 var 的另一个区别是您可以在声明之前访问 var 定义的变量。 它会给你未定义。 但是，如果您使用 let 或 const 定义的变量来执行此操作，则会出现错误。

console.log(x);
var x = 100;

console.log(x); // ERROR
let x = 100;

Answer 20

var 是全局范围（可提升）变量。

let 和 const 是块作用域。

测试.js

{
    let l = 'let';
    const c = 'const';
    var v = 'var';
    v2 = 'var 2';
}

console.log(v, this.v);
console.log(v2, this.v2);
console.log(l); // ReferenceError: l is not defined
console.log(c); // ReferenceError: c is not defined

Answer 21

如果我正确阅读了规范，那么 let 谢天谢地 也可以用来避免 自调用函数用于模拟仅私有成员 - 一种流行的设计模式，会降低代码可读性，使调试复杂化，这没有增加真正的代码保护或其他好处 - 除了可能满足某人对语义的渴望，所以停止使用它。 /rant

var SomeConstructor;

{
    let privateScope = {};

    SomeConstructor = function SomeConstructor () {
        this.someProperty = "foo";
        privateScope.hiddenProperty = "bar";
    }

    SomeConstructor.prototype.showPublic = function () {
        console.log(this.someProperty); // foo
    }

    SomeConstructor.prototype.showPrivate = function () {
        console.log(privateScope.hiddenProperty); // bar
    }

}

var myInstance = new SomeConstructor();

myInstance.showPublic();
myInstance.showPrivate();

console.log(privateScope.hiddenProperty); // error

请参阅“模拟私有接口'

Answer 22

使用 let 时

let 关键字将变量声明附加到任何块的范围（通常是 { .. }pair) 它包含在其中。换句话说，let 隐式劫持任何块的变量声明范围。

let 变量无法在 window 对象中访问，因为它们无法全局访问。

function a(){
    { // this is the Max Scope for let variable
        let x = 12;
    }
    console.log(x);
}
a(); // Uncaught ReferenceError: x is not defined

当使用 var 时

var 和 ES5 中的变量在函数中具有作用域，这意味着变量在函数内有效，而不是在函数本身之外有效。

var 变量可以在 window 对象中访问，因为它们不能全局访问。

function a(){ // this is the Max Scope for var variable
    { 
        var x = 12;
    }
    console.log(x);
}
a(); // 12

如果您想了解更多信息，请继续阅读下面

关于范围的最著名的面试问题之一也足以满足 let 和 var 的确切使用：以下;

使用let时

for (let i = 0; i < 10 ; i++) {
    setTimeout(
        function a() {
            console.log(i); //print 0 to 9, that is literally AWW!!!
        }, 
        100 * i);
}

这是因为使用let时，对于每个循环迭代，变量都有作用域并拥有自己的副本。

使用var时

for (var i = 0; i < 10 ; i++) {
    setTimeout(
        function a() {
            console.log(i); //print 10 times 10
        }, 
        100 * i);
}

这是因为使用var时，对于每个循环迭代，变量都有作用域并具有共享副本。

Answer 23

使用 let 的一些技巧：

1.

    let statistics = [16, 170, 10];
    let [age, height, grade] = statistics;

    console.log(height)

2.

    let x = 120,
    y = 12;
    [x, y] = [y, x];
    console.log(`x: ${x} y: ${y}`);

3.

    let node = {
                   type: "Identifier",
                   name: "foo"
               };

    let { type, name, value } = node;

    console.log(type);      // "Identifier"
    console.log(name);      // "foo"
    console.log(value);     // undefined

    let node = {
        type: "Identifier"
    };

    let { type: localType, name: localName = "bar" } = node;

    console.log(localType);     // "Identifier"
    console.log(localName);     // "bar"

使用 let 进行 getter 和 setter：

let jar = {
    numberOfCookies: 10,
    get cookies() {
        return this.numberOfCookies;
    },
    set cookies(value) {
        this.numberOfCookies = value;
    }
};

console.log(jar.cookies)
jar.cookies = 7;

console.log(jar.cookies)

Answer 24

下面显示了 'let' 和 'var' 在作用域中的不同之处：

let gfoo = 123;
if (true) {
    let gfoo = 456;
}
console.log(gfoo); // 123

var hfoo = 123;
if (true) {
    var hfoo = 456;
}
console.log(hfoo); // 456

gfoo 最初由 let 定义，位于全局作用域 ，当我们在 if 子句 中再次声明 gfoo 时，它的范围发生了变化，并且当一个新值被分配给该范围内的变量不会影响全局范围。

而由 var 定义的 hfoo 最初位于全局范围，但当我们在 if 子句，它考虑全局范围 hfoo，尽管再次使用 var 来声明它。 当我们重新分配它的值时，我们发现全局范围 hfoo 也受到影响。 这是主要的区别。

Answer 25

我刚刚遇到一个用例，我必须使用 var 而不是 let 来引入新变量。 这是一个案例：

我想创建一个具有动态变量名称的新变量。

let variableName = 'a';
eval("let " + variableName + '= 10;');
console.log(a);   // this doesn't work

var variableName = 'a';
eval("var " + variableName + '= 10;');
console.log(a);   // this works

上面的代码不起作用，因为 eval 引入了一个新的代码块。 使用 var 声明将在该代码块之外声明一个变量，因为 var 在函数作用域中声明一个变量。

另一方面，let 在块作用域中声明变量。 因此，a 变量仅在 eval 块中可见。

Answer 26

let 与 var. 这一切都与范围有关。

var 变量是全局变量并且基本上可以在任何地方访问，而let 变量不是全局变量并且仅存在直到右括号杀死它们为止。

请参阅下面的示例，并注意 lion (let) 变量在两个 console.log 中的不同行为； 它超出了第二个 console.log 的范围。

var cat = "cat";
let dog = "dog";

var animals = () => {
  var giraffe = "giraffe";
  let lion = "lion";

  console.log(cat); //will print 'cat'.
  console.log(dog); //will print 'dog', because dog was declared outside this function (like var cat).

  console.log(giraffe); //will print 'giraffe'.
  console.log(lion); //will print 'lion', as lion is within scope.
}

console.log(giraffe); //will print 'giraffe', as giraffe is a global variable (var).
console.log(lion); //will print UNDEFINED, as lion is a 'let' variable and is now out of scope.

Answer 27

现在我认为使用 let 对语句块有更好的变量作用域：

function printnums()
{
    // i is not accessible here
    for(let i = 0; i <10; i+=)
    {
       console.log(i);
    }
    // i is not accessible here

    // j is accessible here
    for(var j = 0; j <10; j++)
    {
       console.log(j);
    }
    // j is accessible here
}

我认为人们会开始在此处使用 let，这样他们就会像其他语言、Java、C# 一样在 JavaScript 中具有类似的作用域 对 JavaScript 中的作用域没有清晰了解的人

过去常常犯这样的错误。

使用 let 不支持提升。

通过这种方法，JavaScript 中存在的错误将被消除。

请参阅ES6 深入了解：let 和const 以便更好地理解它。

Answer 28

正如刚才提到的：

区别在于范围。 var 的作用域为最近的函数
block 和 let 的作用域为最近的封闭块，其中
可以小于功能块。 如果在任何外部的话，两者都是全局的
块。让我们看一个例子：

示例1：

在我的两个示例中，我都有一个函数myfunc。 myfunc 包含一个等于 10 的变量 myvar。
在第一个示例中，我检查 myvar 是否等于 10 (myvar==10) 。 如果是，我再次使用 var 关键字声明一个变量 myvar （现在我有两个 myvar 变量）并为其分配一个新值 (20)。 在下一行中，我在控制台上打印它的值。 在条件块之后，我再次在控制台上打印 myvar 的值。 如果您查看 myfunc 的输出，myvar 的值等于 20。

示例2：
在我的第二个示例中，我没有在条件块中使用 var 关键字，而是使用 let 关键字声明 myvar 。 现在，当我调用 myfunc 时，我会得到两个不同的输出：myvar=20 和 myvar=10。

所以区别很简单，即范围。

Answer 29

我想将这些关键字链接到执行上下文，因为执行上下文在所有这一切中都很重要。 执行上下文有两个阶段：创建阶段和执行阶段。 此外，每个执行上下文都有一个变量环境和外部环境（其词法环境）。

在执行上下文的创建阶段，var、let 和 const 仍会将其变量存储在内存中，并在给定执行上下文的变量环境中使用未定义的值。 区别在于执行阶段。 如果在赋值之前使用引用 var 定义的变量，则该变量将是未定义的。 不会出现任何异常。

但是，在声明之前不能引用用 let 或 const 声明的变量。 如果您尝试在声明之前使用它，则在执行上下文的执行阶段将引发异常。 现在，由于执行上下文的创建阶段，该变量仍将位于内存中，但引擎将不允许您使用它：

function a(){
    b;
    let b;
}
a();
> Uncaught ReferenceError: b is not defined

使用 var 定义的变量，如果引擎在当前执行上下文的变量中找不到该变量环境，然后它将沿着作用域链（外部环境）向上查找该变量的外部环境的变量环境。 如果在那里找不到它，它将继续搜索作用域链。 let 和 const 的情况并非如此。

let 的第二个特性是它引入了块作用域。 块由花括号定义。 示例包括函数块、if 块、for 块等。当您在块内部使用 let 声明变量时，该变量仅在块内部可用。 事实上，每次运行该块时（例如在 for 循环中），它都会在内存中创建一个新变量。

ES6还引入了const关键字来声明变量。 const 也是块作用域的。 let 和 const 之间的区别在于 const 变量需要使用初始值设定项来声明，否则会产生错误。

最后，当涉及到执行上下文时，用 var 定义的变量将附加到“this”对象。 在全局执行上下文中，这将是浏览器中的窗口对象。 let 或 const 则不是这种情况。

Answer 30

由于我目前正在尝试深入了解 JavaScript，因此我将分享我的简短研究，其中包含一些已经讨论过的精彩文章以及不同角度的其他一些细节。

如果我们了解函数和块作用域之间的区别，那么理解var和let之间的区别会更容易。

让我们考虑以下情况：

(function timer() {
    for(var i = 0; i <= 5; i++) {
        setTimeout(function notime() { console.log(i); }, i * 1000);
    }
})();


   Stack            VariableEnvironment //one VariablEnvironment for timer();
                                       // when the timer is out - the value will be the same for each iteration
5. [setTimeout, i]  [i=5] 
4. [setTimeout, i]  
3. [setTimeout, i]
2. [setTimeout, i]
1. [setTimeout, i]
0. [setTimeout, i]

####################    

(function timer() {
    for (let i = 0; i <= 5; i++) {
        setTimeout(function notime() { console.log(i); }, i * 1000);
    }
})();

   Stack           LexicalEnvironment - each iteration has a new lexical environment
5. [setTimeout, i]  [i=5]       
                      LexicalEnvironment 
4. [setTimeout, i]    [i=4]     
                        LexicalEnvironment 
3. [setTimeout, i]      [i=3]       
                         LexicalEnvironment 
2. [setTimeout, i]       [i=2]
                           LexicalEnvironment 
1. [setTimeout, i]         [i=1]
                             LexicalEnvironment 
0. [setTimeout, i]           [i=0]

当调用 timer() 时，会创建一个 ExecutionContext，其中包含 VariableEnvironment 和所有 LexicalEnvironments 对应于每次迭代。

一个更简单的例子

函数作用域

function test() {
    for(var z = 0; z < 69; z++) {
        //todo
    }
    //z is visible outside the loop
}

块作用域

function test() {
    for(let z = 0; z < 69; z++) {
        //todo
    }
    //z is not defined :(
}

简而言之，let 和 var 之间的区别在于 var 是函数作用域，而 let 是块作用域。