JavaScript 中 var、let 和 const 关键字的区别

在 JavaScript 中，用户可以使用 var、let 和 const 三个关键字来声明变量。在本文中，我们将看到 var、let 和 const 关键字之间的区别。我们将讨论每个关键字的范围和其他必需的概念。

JavaScript 中的var 关键字： var是 JavaScript 中用于声明变量的最古老的关键字。

作用域：全局作用域或函数作用域。 var关键字的作用域是全局或函数作用域。这意味着可以全局访问函数外部定义的变量，并且可以在函数内部访问特定函数内部定义的变量。

示例 1：全局声明变量“a”。因此，变量 'a' 的范围是全局的，它可以在程序中的任何地方访问。显示的输出在控制台中。

Javascript

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

Javascript

    console.log(a);
    var a = 10;
<script></code></pre></div><br><hr><h5 class="code">Javascript</h5><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace"><script>
    let a = 10;
    function f() {
        let b = 9
        console.log(b);
        console.log(a);
    }
    f();

输出：

10
10

示例 2：在函数内部声明了变量“a”。如果用户试图在函数之外访问它，它将显示错误。用户可以使用var关键字声明两个具有相同名称的变量。此外，用户可以将值重新分配给var变量。控制台中显示的输出。

Javascript

    function f() {
 
        // It can be accessible any
        // where within this function
        var a = 10;
        console.log(a)
    }
    f();
 
    // A cannot be accessible
    // outside of function
    console.log(a);

输出：

10
ReferenceError: a is not defined

示例 3：用户可以使用var重新声明变量，并且用户可以更新var变量。输出显示在控制台中。

Javascript

 
    var a = 10
   
    // User can re-declare
    // variable using var
    var a = 8
 
    // User can update var variable
    a = 7

输出：

7

示例 4：如果用户在声明之前使用 var 变量，它会使用未定义的值进行初始化。输出显示在控制台中。

Javascript

    console.log(a);
    var a = 10;
<script>
</code></pre></div></div></div></div><p><strong>输出：</strong> </p><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace">undefined</code></pre></div><p> <strong>JavaScript 中的 let 关键字：</strong> <strong>let</strong><i>关键字</i>是<i>var</i>关键字的改进版本。</p><p><strong>作用域：</strong><strong>块作用域：</strong> <i>let</i>变量的作用域只是块作用域。在特定块 ({block}) 之外无法访问它。让我们看看下面的例子。</p><p><strong>示例 1：</strong>输出显示在控制台中。</p><div class="noIdeBtnDiv"><div class="responsive-tabs"><h2 class="tabtitle"> Javascript </h2><div class="tabcontent"><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace"><script>
    let a = 10;
    function f() {
        let b = 9
        console.log(b);
        console.log(a);
    }
    f();

输出：

9
10

示例 2：代码返回错误，因为我们在函数块外部访问let变量。输出显示在控制台中。

Javascript

    let a = 10;
    function f() {
        if (true) {
            let b = 9
 
            // It prints 9
            console.log(b);
        }
 
        // It gives error as it
        // defined in if block
        console.log(b);
    }
    f()
 
    // It prints 10
    console.log(a)

输出：

9
ReferenceError: b is not defined

示例 3：用户不能重新声明使用let关键字定义的变量，但可以对其进行更新。

Javascript

 
    let a = 10
 
    // It is not allowed
    let a = 10
 
    // It is allowed
    a = 10

输出：

Uncaught SyntaxError: Identifier 'a' has already been declared

示例 4：用户可以使用let关键字在不同的块中声明同名变量。

Javascript

  let a = 10
  if (true) {
    let a=9
    console.log(a) // It prints 9
  }
  console.log(a) // It prints 10

输出：

9 
10

例 5：如果用户在声明前使用let变量，它不会像var变量一样用undefined初始化并返回错误。

Javascript

    console.log(a);
    let a = 10;

输出：

Uncaught ReferenceError: Cannot access 'a' before initialization

JavaScript 中的 const 关键字： const关键字具有与let关键字相同的所有属性，除了用户不能更新它。

作用域：块作用域：当用户声明一个const变量时，需要对其进行初始化，否则会返回错误。一旦声明了const变量，用户就无法更新它。

示例 1：我们正在更改 const 变量的值，使其返回错误。输出显示在控制台中。

Javascript

    const a = 10;
    function f() {
        a = 9
        console.log(a)
    }
    f();

输出：

a=9
TypeError:Assignment to constant variable.

示例 2：用户不能更改const对象的属性，但可以更改const对象的属性值。

Javascript

    const a = {
        prop1: 10,
        prop2: 9
    }
     
    // It is allowed
    a.prop1 = 3
 
    // It is not allowed
    a = {
        b: 10,
        prop2: 9
    }

输出：

Uncaught SyntaxError:Unexpected identifier

var、let 和 const 之间的区别

var	let	const
The scope of a var variable is functional scope.	The scope of a let variable is block scope.	The scope of a const variable is block scope.
It can be updated and re-declared into the scope.	It can be updated but cannot be re-declared into the scope.	It cannot be updated or re-declared into the scope.
It can be declared without initialization.	It can be declared without initialization.	It cannot be declared without initialization.
It can be accessed without initialization as its default value is “undefined”.	It cannot be accessed without initialization, as it returns an error.	It cannot be accessed without initialization, as it cannot be declared without initialization.

注意：有时，用户在使用var变量时会遇到问题，因为他们在特定块中更改它的值。因此，用户应该使用let和const关键字在 JavaScript 中声明变量。