JS中var、let、const的区别

简介: JS中var、let、const的区别

在我很早之前,我还在用着var,直到接触到了let与const,我才知道var造成的影响很多,我果断的抛弃了var,哈哈

让我为大家介绍一下它们的区别吧!

1.块级作用域

块作用域由 { }包括,let和const具有块级作用域,var不存在块级作用域

{
        // var没有块级作用域
        var a = 10
        // let有块级作用域
        let b = 20
        // const有块级作用域
        const c = 30
    }
    console.log(a) //打印10
    console.log(b) //报错,b is not defined
    console.log(c) //报错,c is not defined ,因为let已经报错,后面没打印出来

块级作用域解决了ES5中的两个问题:

内层变量可能覆盖外层变量

var a = 5
    function fun() {
      //变量提升导致,没有块级作用域
        console.log(a) //undefined
        {
            var a = 10
        }
    }
    fun()

用来计数的循环变量泄露为全局变量

for(var i = 0;i < 5;i++){
        console.log(i) //0 1 2 3 4
    }
    console.log(i) //5

2.变量提升

var存在变量提升,let和const不存在变量提升,即在变量只能在声明之后使用,否则会报错

// var变量提升
    console.log(a) //undefined
    var a = 10
// let与const没有变量提升
    console.log(a) //报错
    let a = 10 
    console.log(b)//报错
    const b = 10

3.重复声明

var声明变量时,可以重复声明变量,后声明的同名变量会覆盖之前声明的变量。const和let不允许重复声明变量。

var a = 10
    console.log(a) //10
    var a = 20
    console.log(a) //20
let a = 10
    let a = 20
    console.log(a) //报错
const a = 10
    const a = 20
    console.log(a) //报错

4.暂时性死区

在使用let、const命令声明变量之前,该变量都是不可用的。这在语法上,称为暂时性死区。使用var声明的变量不存在暂时性死区

因为var的作用域为全局作用域,存在变量提升,let与const没有变量提升,而且let与const有块作用域

代码同变量提升模块

5.初始值设置

在变量声明时,var 和 let 可以不用设置初始值。而const声明变量必须设置初始值。

var a
    console.log(a) //undefined
    let b
    console.log(b) //undefined
    const c
    console.log(c) //报错 在const声明中缺少初始化式

感谢大家的阅读,如有什么不对的地方,可以向我指出,感谢大家!

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