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声明中缺少初始化式

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

相关文章
|
1月前
|
JavaScript 前端开发
【JavaScript】let,const和var的区别
总的来说,随着ECMAScript 6(ES6)及后续版本的推广,`let`和 `const`因其增强的块级作用域和对变量行为的更严格控制,逐渐成为现代JavaScript编码实践中推荐使用的变量声明方式。而 `var`由于其历史遗留的局限性,正逐渐被边缘化,但在维护老代码或处理特定兼容性需求时仍需了解。
32 3
|
1月前
|
JavaScript 前端开发 安全
JS中const有没有变量提升
JS中const有没有变量提升
14 0
|
2月前
|
JavaScript 前端开发
JavaScript let 和 const
JavaScript let 和 const
19 3
|
3月前
|
JavaScript 前端开发
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
95 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
122 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的宠物交易平台附带文章源码部署视频讲解等
73 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
92 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
84 3