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

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

相关文章
|
3天前
|
前端开发 JavaScript
前端 JS 经典:i,i++,++i区别
前端 JS 经典:i,i++,++i区别
8 0
|
3天前
|
前端开发 JavaScript
前端 JS 经典:let、const、var 区别
前端 JS 经典:let、const、var 区别
6 0
|
3天前
|
缓存 JavaScript 前端开发
JavaScript:get和post的区别,2024年最新3-6岁儿童学习与发展指南心得体会
JavaScript:get和post的区别,2024年最新3-6岁儿童学习与发展指南心得体会
|
3天前
|
XML 前端开发 JavaScript
jQuery与javascript的区别+案例 锋芒毕露
jQuery与javascript的区别+案例 锋芒毕露
|
4天前
|
JavaScript 前端开发
探索JavaScript中的let、const和var:区别与使用场景
探索JavaScript中的let、const和var:区别与使用场景
|
2天前
|
存储 JavaScript 前端开发
从零开始学习Vue.js
Vue.js 是一种流行的前端框架,它使用简单,灵活且易于上手。如果你是一个前端开发者,并想要学习 Vue.js,本文将为您提供一个从零开始的指南。我们将探讨 Vue.js 的基础知识和常用功能,以及如何构建一个简单的 Vue.js 应用程序。
|
4天前
|
设计模式 存储 前端开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发
|
6天前
|
XML Web App开发 前端开发
字节FE:JavaScript学习路线图
字节FE:JavaScript学习路线图
10 0
|
6天前
|
存储 移动开发 JavaScript
学习javascript,前端知识精讲,助力你轻松掌握
学习javascript,前端知识精讲,助力你轻松掌握
|
6天前
|
JavaScript 前端开发 测试技术
学习JavaScript
【4月更文挑战第23天】学习JavaScript
15 1