什么是阻塞作用域变量 ES6？

在 ES5 中，当我们使用var关键字声明变量时，变量的作用域要么是全局的，要么是局部的。
全局变量：当我们在函数之外声明一个变量时。
局部变量：当我们在函数内部声明一个变量时。

但是，ECMAScript 2015 (ES6) 引入了两个新关键字let和const和 这两个关键字在 JavaScript 中提供了块作用域。在大括号 { } 中声明的所有变量都被限制为只能在该块内和该块的块内访问。我们无法访问该块之外的变量，它要么通过 ReferenceError（变量未定义），要么如果他在全局范围内有一个同名的变量，那么它将引用该变量。

let 关键字：使用var关键字声明的变量允许重新声明，但不允许在同一块中使用let关键字声明的变量重新声明。它将通过一个 SyntaxError: Identifier has been declared。

例子：

HTML

    function valueAssign() {
        let x = 10;
        var z = 15;
        if (true) {
            let y = 5;
            console.log(y); // Here y is 5
            console.log(x); // Here x is 10
            console.log(z); // Here z is 15
        }
        console.log(x); // Here x is 10
        console.log(z); // Here z is 15
        console.log(y); // ReferenceError: y is not defined  
    }
  
    valueAssign();

输出：

5
10
15
10
15
ReferenceError: y is not defined

这里我们看到 x 和 z 都在外部块中声明，引用 if 的块 {} 和 y 在内部块中声明。这里 z 是使用 var 关键字声明的，所以我们在这个 valueAssign()函数中的任何地方都使用 z 变量，因为使用 var 关键字声明的变量不能具有块作用域。但是 x 和 y 都是使用 let 关键字声明的。这里 x 在外部块中声明，因此我们可以在内部块中使用 x。由于 y 是在内部块中声明的，所以我们不能在外部块中使用它。 Let 和 const 将作用于我将声明的块，并将作用于其中的块。出于这个原因，当我们在外部块中打印 y 时，它会给出错误。

示例 2：在此示例中，我们将看到使用var和let重新声明变量的工作：

HTML

    // Redeclared using var
    function valueAssignWithVar() {
        var y = 20;
        y = 30; // Redeclare allowed
        console.log(y);
    }
  
    // Redeclared using let in different block
    function valueAssignWithLet1() {
        let x = 20;
        if (true) {
            let x = 5; // Redeclare allowed
            console.log(x);
        }
        console.log(x);
    }
  
    // Redeclared using let in same block
    function valueAssignWithLet2() {
        let x = 10;
        let x = 5; // Redeclare not allowed
  
        // SyntaxError: Identifier 'x' has
        // already been declared
        console.log(x); 
    }
  
    valueAssignWithVar();
    valueAssignWithLet1();
    valueAssignWithLet2();

输出：

30
5
20
SyntaxError: Identifier 'x' has already been declared

const 关键字：用const关键字声明的变量严格不允许在同一个块中重新声明和重新赋值。当您不想在整个程序中更改该变量的值时，我们使用const关键字。

示例：在此示例中，我们将看到使用const重新分配变量的工作原理

HTML

    // Reassigned not allowed
    const x = 10;
    x = 5; // TypeError: Assignment to constant variable
    console.log(x);

输出 ：

TypeError: Assignment to constant variable.

示例 2：在此示例中，我们将看到使用const重新声明变量的工作原理

HTML

    // Redeclared using const in different block
    function valueAssignWithConst1() {
        const x = 20;
        if (true) {
            const x = 5; // Redeclare allowed
            console.log(x);
        }
        console.log(x);
    }
  
    // Redeclared using const in same block
    function valueAssignWithConst2() {
        const x = 10;
        const x = 5; // Redeclare not allowed
  
        // SyntaxError: Identifier 'x' has
        // already been declared
        console.log(x); 
    }
  
    valueAssignWithConst1();
    valueAssignWithConst2();

输出：

SyntaxError: Identifier 'x' has already been declared

示例 3：在此示例中，我们将看到 Block Scope 与const的工作方式

HTML

    function valueAssign() {
        const x = 10;
        var z = 15;
        if (true) {
            const y = 5;
            console.log(y); // Here y is 5
            console.log(x); // Here x is 10
            console.log(z); // Here z is 15
        }
        console.log(x); // Here x is 10
        console.log(z); // Here z is 15
        console.log(y); // Error: y is not defined  
    }
  
    valueAssign();

输出 ：

5
10
15
10
15
ReferenceError: y is not defined