JavaScript 中 let 和 var 的区别

JavaScript 中 let 和 var 的区别_第1张图片


首先,let 和 var 都是用于声明变量的关键字,在老版 JavaScript 中也许你会见到 var 方式来声明变量,而现如今几乎都是使用 let 进行声明,接下来看看这两个关键字之间的区别。

1、作用域

  • var

    var 声明的变量在函数内部有效,如果在函数内部使用 var 声明一个变量,那么该变量在整个函数内部都是可见的。

    function example() {
      var x = 10;
      if (true) {
        var y = 20;
        console.log(x); // 输出: 10
      }
      console.log(y); // 输出: 20
    }
    
  • let

    let 声明的变量在块级作用域内有效,如果在块级作用域内使用let声明一个变量,那么该变量只在该块级作用域内可见。

    function example() {
      let x = 10;
      if (true) {
        let y = 20;
        console.log(x); // 输出: 10
      }
      console.log(y); // 报错: ReferenceError: y is not defined
    }
    
  • 小结

    使用 var 声明的变量具有函数作用域,而使用 let 声明的变量具有块级作用域。

2、变量提升

  • var

    var声明的变量会在其作用域内的顶部被提升,即可以在声明之前使用变量。

    console.log(x); // 输出: undefined
    var x = 10;
    
  • let

    let声明的变量不会被提升,即在声明之前使用变量会导致引用错误。

    console.log(x); // 报错: ReferenceError: x is not defined
    let x = 10;
    
  • 小结

    使用 var 声明的变量存在变量提升,而使用 let 声明的变量不存在变量提升。

3、重复声明

  • var

    使用var重复声明同一个变量不会报错,而是会覆盖之前的值。

    var x = 10;
    var x = 20;
    console.log(x); // 输出: 20
    
  • let

    使用let重复声明同一个变量会导致语法错误。

    let x = 10;
    let x = 20; // 报错: SyntaxError: Identifier 'x' has already been declared
    
  • 小结

    使用 var 可以重复声明同一个变量,而使用 let 不允许在同一个作用域内重复声明同一个变量。

—END

你可能感兴趣的:(Web,平台,javascript,前端,开发语言)