let 和 var 的区别以及什么是暂时性死区？let配合for循环和var配合for循环有什么区别？

目录

1、var有变量提升，let 没有变量提升

2、var 可以重复声明，而let不能重复声明

3、let可以定义块级作用域 { }

4、临时失效区 （暂时性死区）

① 什么是暂时性死区？

② 表现在哪里？

5、let 配合for循环的独特应用

① 用 var 配合 for 循环，有导致什么问题？

② let非常适合用于 for循环内部的块级作用域

6、拓展

① 为什么ES6规定暂时性死区和 let 、const 语句不出现变量提升？

② 为什么ES6中需要块级作用域？

---

1、var 有变量提升，let 没有变量提升

变量提升 ：将变量提升到当前作用域的上边

      console.log(a) // 定义了没有赋值，值为 undefined
      var a = 10
      console.log(b) // 报错 Uncaught ReferenceError: b is not defined。
      let b = 10

      var a = 99
      f()
      console.log(a)
      function f() {
        console.log(a)
        var a = 10
        console.log(a)
      }

输出结果：undefined           10             99        

（注意：这里是先触发 f 函数：变量 a 在函数内进行了提升，所以打印的时候是 undefined）

2、var 可以重复声明，而let不能重复声明

var可以重复声明 

var c = 10
var c = 20
console.log(c) // 20

let不允许在相同作用域内，重复声明同一个变量。

否则报错：Uncaught SyntaxError: Identifier 'XXX' has already been declared

let c = 10
let c = 20
console.log(c) // 报错

// 报错
function func() {
  let a = 10;
  var a = 1;
}

// 报错
function func() {
  let a = 10;
  let a = 1;
}

function func(arg) {
  let arg;
}
func() // 报错


function func(arg) {
  {
    let arg;
  }
}
func() // 不报错

3、let可以定义块级作用域 { }

var 是全局声明；

      var m = 5
      if (m) {
        var n = 100
      }
      console.log(n) // 100

let 可以定义块级作用域变量，是局部变量，只在它当前的代码块内有效，而且有暂时性死区的约束。 

      var m = 5
      if (m) {
        let n = 100
      }
      console.log(n) // 报错

下面的函数有两个代码块，都声明了变量 n，运行后输出 5。

这表示外层代码块不受内层代码块的影响。

如果两次都使用var定义变量n，最后输出的值才是 10。  

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

4、临时失效区 （暂时性死区）

① 什么是暂时性死区？

ES6 明确规定，如果区块中存在 let 和 const 命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错

使用 let 或 const 声明的变量，会针对这个变量形成一个封闭的块级作用域，在这个块级作用域当中，如果在声明变量前访问该变量，就会报 referenceError 错误；如果在声明变量后访问，则可以正常获取变量值： ​​​​​​​ 

总之，在代码块内，使用 let 命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区” （当前作用域不允许同名的变量进来）

function foo() { 
  let bar = 3 
  console.log(bar) 
} 
foo()

这段代码正常输出 3。因此在相应花括号形成的作用域中，存在一个“死区”，起始于函数开头，终止于相关变量声明的一行。在这个范围内无法访问 let 或 const 声明的变量。

② 表现在哪里？

用 let 声明的变量，不存在变量提升。而且要求必须 等 let 声明语句执行完之后，变量才能使用，不然会报Uncaught ReferenceError错误。

暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。 

      var x = 10
      function a() {
        console.log(x)
        let x = 20
        // console.log(x);
      }
      a()

      var x = 10
      function a() {
        // console.log(x)
        let x = 20
        console.log(x); // 20
      }
      a()

if (true) {
  // TDZ开始
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; // TDZ结束
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}

5、let 配合for循环的独特应用

① 用 var 配合 for 循环，有导致什么问题？

var配合for循环，此时输出了10个10。

下面代码中，变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i。

每一次循环，变量i的值都会发生改变，而循环内被赋给数组a的函数内部的console.log(i)，里面的i指向的就是全局的i。

也就是说，所有数组a的成员里面的i，指向的都是同一个i，导致运行时输出的是最后一轮的i的值，也就是 10

        for (var i = 0; i < 10; i++) {
            setTimeout(function () {  // 同步注册回调函数到 异步的 宏任务队列。
                console.log(i);        // 执行此代码时，同步代码for循环已经执行完成
            }, 0);
        }

 同步注册回调函数到异步的宏任务队列，当执行到打印的时候，同步代码for循环已经执行完成。

② let非常适合用于 for循环内部的块级作用域

JS中的for循环体比较特殊，每次执行都是一个全新的独立的块作用域。

用 let 声明的变量传入到 for 循环体的作用域后，不会发生改变，不受外界的影响。

        for (let i = 0; i < 10; i++) {
            setTimeout(function () {
                console.log(i);    //  i 是循环体内局部作用域，不受外界影响。
            }, 0);
        }

let配合for循环，使用输出0 1 2 3 4 5 6 7 8 9

i 虽然在全局作用域声明，但是在for循环体局部作用域中使用的时候，变量会被固定，不受外界干扰。 

6、拓展

① 为什么ES6规定暂时性死区和 let 、const 语句不出现变量提升？

主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为。

② 为什么ES6中需要块级作用域？

ES5只有全局作用域和函数作用域，没有块级作用域，这带来了很多不合理的场景。

01、内层变量可能会被覆盖外层变量

var tmp = new Date();

function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}

f(); // undefined

上面代码的原意是，if代码块的外部使用外层的tmp变量，内部使用内层的tmp变量。

但是，函数f执行后，输出结果为undefined，原因在于变量提升，导致内层的tmp变量覆盖了外层的tmp变量。 

02、用来记数的循环变量泄露为全局变量

下面代码中，变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。

var s = 'hello';

for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}

console.log(i); // 5

块级作用域的出现，实际上使得获得广泛应用的匿名立即执行函数表达式（匿名 IIFE）不再必要了。

// IIFE 写法
(function () {
  var tmp = ...;
  ...
}());

// 块级作用域写法
{
  let tmp = ...;
  ...
}

ES6 入门教程

7、总结

① let 和 var 的区别

var 存在变量声明提升；let 不存在变量声明提升。

在相同作用域内，var 可以重复声明；let 不允许重复声明同一个变量。

var 是全局声明；let 可以定义块级作用域，是局部变量，只在当前代码块内有效，而且有暂时性死区的约束。

 ② 暂时性死区

如果在某个作用域中存在 let 和 const 命令，这个作用域从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

总之，在代码块内，使用 let 命令声明变量之前，该变量都是不可用的。

这在语法上，称为“暂时性死区” （当前作用域不允许同名的变量进来）

暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。 

③ let 配合 for 循环 和 var 配合 for 循环有什么区别？

var 配合 for 循环，var 会声明一个全局变量 i，每次循环都是在改变同一个变量 i，会导致异步输出的结果都是同一个值；还会导致循环变量泄露为全局变量。

而 let 配合 for 循环，每次执行都是全新的独立块级作用域，不会被新循环时覆盖，let非常适合用于 for循环声明计数器 i ；