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

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

相关文章
|
8月前
|
JavaScript 前端开发 安全
【JavaScript】深入理解 let、var 和 const
掌握这些关键字的使用可以提高代码的可读性和可维护性,避免潜在的变量提升和作用域问题。希望本文能帮助您更好地理解和应用 JavaScript 中的变量声明方式,编写出更高质量的代码。
181 20
|
9月前
|
JavaScript 前端开发 容器
this、self、window、top 在 JavaScript 中的区别深入研究
在 JavaScript 开发中,`this`、`self`、`window` 和 `top` 是四个常用的概念。`this` 指向当前执行上下文的对象,其值取决于函数调用方式;`self` 在全局作用域中等同于 `window`,常用于 Web Workers;`window` 代表浏览器窗口,是全局变量的容器;`top` 指向最顶层窗口,用于判断是否在框架中。理解这些概念有助于编写健壮的代码。
245 1
this、self、window、top 在 JavaScript 中的区别深入研究
|
7月前
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
7月前
|
供应链 JavaScript 前端开发
通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
array.every()可以用来数据验证、权限检查、一致性检查等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
11月前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
175 1
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
250 2
|
11月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
169 1
JavaScript中的原型 保姆级文章一文搞懂
|
11月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
105 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
364 5

热门文章

最新文章