JavaScript基础知识:`var`、`let` 和 `const` 的区别是什么?

简介: JavaScript基础知识:`var`、`let` 和 `const` 的区别是什么?

在JavaScript中,varletconst都用于声明变量,但它们之间有一些重要的区别:

  1. 作用域:

    • var 声明的变量是函数作用域(function-scoped),在整个函数内部可见。
    • letconst 声明的变量是块级作用域(block-scoped),在声明的块(如if语句或循环)内部可见。

      function example() {
             
         if (true) {
             
             var x = 10;  // var 在整个函数内可见
             let y = 20;  // let 在 if 块内可见
             const z = 30; // const 在 if 块内可见
         }
         console.log(x); // 10
         console.log(y); // ReferenceError: y is not defined
         console.log(z); // ReferenceError: z is not defined
      }
      
  2. 变量提升:

    • var 存在变量提升(hoisting),即变量可以在声明之前被访问,但值为 undefined
    • letconst 也有提升,但不会被赋值,访问会报 ReferenceError

      console.log(a); // undefined
      var a = 5;
      
      console.log(b); // ReferenceError: b is not defined
      let b = 10;
      
  3. 重复声明:

    • 在同一作用域内,var 可以被重复声明。
    • letconst 不允许在同一作用域内重复声明相同的变量名。

      var x = 5;
      var x = 10; // 合法
      
      let y = 15;
      let y = 20; // SyntaxError: Identifier 'y' has already been declared
      
      const z = 25;
      const z = 30; // SyntaxError: Identifier 'z' has already been declared
      
  4. 全局对象属性:

    • 在全局作用域中使用 var 声明的变量会成为全局对象的属性(在浏览器中是 window 对象)。
    • letconst 声明的全局变量不会成为全局对象的属性。

      var globalVar = 42;
      console.log(window.globalVar); // 42
      
      let globalLet = 42;
      console.log(window.globalLet); // undefined
      
      const globalConst = 42;
      console.log(window.globalConst); // undefined
      
  5. 初始化和重新赋值:

    • var 可以在声明的同时初始化,也可以在之后重新赋值。
    • let 可以在声明的同时初始化,但不能在之后重新用 let 对相同的变量名进行声明。
    • const 必须在声明的同时初始化,并且不能在之后重新赋值。

      var a = 5;
      a = 10; // 合法
      
      let b = 15;
      b = 20; // 合法
      
      const c = 25;
      c = 30; // TypeError: Assignment to constant variable
      

总的来说,使用 letconst 更推荐,因为它们提供了更好的作用域规则,避免了一些 var 带来的问题。 const 用于声明常量,一旦初始化就不能被重新赋值。 let 用于声明可变的变量。

相关文章
|
18天前
|
设计模式 JavaScript 前端开发
js中new和object.creat区别
【10月更文挑战第29天】`new` 关键字和 `Object.create()` 方法在创建对象的方式、原型链继承、属性初始化以及适用场景等方面都存在差异。在实际开发中,需要根据具体的需求和设计模式来选择合适的方法来创建对象。
|
1月前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
76 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
1月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
16 2
|
1月前
|
JavaScript 前端开发
【JavaScript】let,const和var的区别
总的来说,随着ECMAScript 6(ES6)及后续版本的推广,`let`和 `const`因其增强的块级作用域和对变量行为的更严格控制,逐渐成为现代JavaScript编码实践中推荐使用的变量声明方式。而 `var`由于其历史遗留的局限性,正逐渐被边缘化,但在维护老代码或处理特定兼容性需求时仍需了解。
36 3
|
2月前
|
JavaScript 前端开发
JavaScript中单引号和双引号的效果的一点区别
JavaScript中单引号和双引号的效果的一点区别
|
1月前
|
JavaScript 前端开发 安全
JS中const有没有变量提升
JS中const有没有变量提升
15 0
|
2月前
|
JavaScript 前端开发
JS基础 if和switch区别
本文比较了JavaScript中的`if`语句和`switch`语句的区别,并通过示例代码展示了它们的用法,解释了何时使用`if`更合适以及`switch`语句的特点和应用场景。
19 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
97 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
130 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
82 4
下一篇
无影云桌面