javascript中let，var和const之间的区别

使用javascript，变量声明一直是其棘手的部分之一。 与大多数基于C的语言不同，javascript变量始终不会在声明它们的位置创建。 创建变量的位置通常取决于您如何声明它。

除了使用var关键字声明变量外，ECMAScript 6还使开发人员也可以使用let和const关键字创建变量。 让我们深入研究let与var与const关键字之间的快速比较，并得出一些基于其各自属性在javascript中声明变量的最佳做法。 我们还将尝试回答以下问题：let优于var还是const优于let？

ECMAScript 6中的ECMA代表“欧洲计算机制造商协会”，它是负责制定和制定新版本ECMAScript规范的机构。 反过来，JavaScript是符合ECMAScript标准的脚本语言。

var声明和吊装

使用var关键字的变量声明会经历一种特定的变量声明机制，称为提升。 提升是一种机制，通过它可以在代码执行之前将变量声明移至其作用域的顶部。 因此，将在函数顶部创建在函数内某处定义的变量。 同样，如果变量在函数外部声明，它将自身附加到全局范围。

为了更好地了解起重的作用，让我们看一下以下演示功能。

function setColor ( condition )  {

    if (condition) {
        var color = 'blue' ;
        return color;
    } else {
        return null ;
    }

}

现在，如果您不熟悉javascript并且不熟悉提升的概念，则可以期望仅在条件评估为true时才创建可变颜色。 但这种情况并非如此。 以下代码将使您清楚地了解javascript如何读取代码以及在何处创建可变颜色。

function setColor ( condition )  {

    // Due to hoisting the variable is created at the top of the block scope
    var color;

    if (condition) {
        // Variable is assigned a value over here 
        var color = 'blue' ;
        return color;
    } else {
        // Variable color exists here as well with a value of undefined 
        return null ;
    }

    // Variable color exists here as well with a value of undefined 

}

let vs var声明和词法范围

词法作用域或块作用域是没有提升机制的变量声明，并且使声明的变量在定义的范围之外不可访问。 只有在ECMAScript 6（ES6）版本中，引入了let关键字来声明变量，从而引入了其他C-Type语言具有的块级变量绑定。

如果比较var vs let，则块级绑定是两者之间的主要区别之一。 使用let关键字声明变量的语法与使用var关键字的语法相同。 让我们看下面的代码示例，以了解在使用let关键字声明变量时，块级绑定产生了什么差异。

function setColor ( condition )  {

    if (condition) {
        // Variable is created and assigned a value over here  
        let color = 'blue' ;
        return color;
        // variable color is only avaiable in scope of this condition
    } else {
        // Variable color does not exist here  
        return null ;
    }

    // Variable color does not exist here  

}

上面的setColor（）函数示例的行为与任何其他C-Type语言非常相似。

使用let关键字在同一范围内没有重新声明

与var关键字允许您在同一范围内再次声明相同的变量不同，使用let关键字声明的变量将引发错误。 使用let关键字，即使声明是使用var关键字完成的，也只能在现有作用域中创建具有相同标识符的单个变量。 让我们以下面的代码为例。

var color = 'blue' ;

/// Declaring the same variable with let keyword will not work
let color = 'red' ;  // throws error 

现在，如果在不同的作用域中声明了相同的变量，它将不会引发错误，但是可以在已声明的作用域内与其他值一起使用。 这是一个例子：

var color = 'blue' ;

if (condition) {
    // This will not throw error 
    let color = 'red' ; 
    // color will be available as red in this scope  
}

使用const关键字声明变量

随着ECMAScript 6 const的引入，引入了一个声明常量的关键字。 JavaScript常数的工作方式几乎与大多数C-Type语言类似。 常数是一个变量，一旦声明，其值就不会改变。 因此，每个常量也必须在声明时进行初始化，这与使用var和let关键字声明的变量不同，使用const关键字声明的变量需要在声明时进行初始化。 考虑以下代码示例：

// Valid Constant 
const favouriteColor = 'blue'

// Syntax error if constant is not initialized 
const color;

这里favouriteColor常量将被成功声明，因为它已在声明时进行了初始化。 但是，颜色常量将引发错误，因为它在声明时尚未初始化。

const vs let声明

像let声明这样的const具有块级范围。 这意味着不同于使用var关键字声明的变量，常量不会提升到声明它们的作用域的顶部。

function setColor ( condition )  {

    if (condition) {
        // Constant is created and assigned a value over here  
        const color = 'blue' ;
        // Constant color is only avaiable in scope of this condition
    } else {
        // Constant color does not exist here  
        return null ;
    }

    // Constant color does not exist here  

}

如果考虑上述示例，则仅在条件为true且状态条件本身的范围内时，才声明并初始化常量颜色。

const与let和var有何不同

尽管它与let关键字相似，但是在用const声明的常量与用let和var关键字声明的变量之间有一个主要区别。 与变量不同，常量的值不会改变。 再次尝试重新分配常量的值都将引发错误。 考虑以下代码作为示例：

const color = 'blue' ;

// Trying to re-assign the value will throw an error
color = 'red' ; 

简而言之，JavaScript中的常量的行为与其他C-Type语言中的常量相同，其中分配给该常量的值保持不变，并且不会更改。

但是，必须注意，如果常量持有的值是一个对象，则可以修改这些对象的值。 这就是javascript常量与其他C-Type语言的不同之处。

那么，让我们胜过var吗？

看了上面的示例并理解了三个关键字之间的区别之后，我们只能得出结论，声明变量的每种方式都是唯一的，并且可以满足特定的用例。 虽然在大多数情况下，声明let关键字是最合适的，但是var和const也具有它们的相关用例。 当您根据实际需要实现的代码编写代码时，这三个选项均可以满足特定目的。

From: https://hackernoon.com/difference-between-let-var-and-const-in-javascript-t28c3ydp