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

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

相关文章
|
4天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
17 3
|
1天前
|
JavaScript 前端开发
js的let、const、var的区别以及应用案例
【4月更文挑战第27天】ES6 中,`let` 和 `const` 是新增的变量声明关键字,与 `var` 存在显著差异。`let` 允许重新赋值,而 `const` 不可,且两者都具有块级作用域。`var` 拥有函数级作用域,并可在函数内任意位置访问。`let` 和 `const` 声明时必须初始化,而 `var` 不需。根据需求选择使用:局部作用域用 `let`/`const`,全局或函数范围用 `var`,不可变值用 `const`。
7 2
|
3天前
|
JavaScript 前端开发 Oracle
java和JavaScript的区别
java和JavaScript的区别
6 3
|
5天前
|
JavaScript 前端开发
js开发:请解释同步和异步编程的区别。
同步编程按顺序执行,易阻塞;异步编程不阻塞,提高效率。同步适合简单操作,异步适合并发场景。示例展示了JavaScript中同步和异步函数的使用。
15 0
|
9天前
|
算法
Swiper库和Glide.js库的性能有何区别
Swiper和Glide.js是两个流行的响应式轮播图库。Swiper功能强大且灵活,支持多方向滑动,拥有丰富的配置和切换效果,适合复杂需求,其高性能得益于优化的算法和惰性加载。Glide.js则轻量级、快速,专注于基础功能,适合简洁需求。两者各有侧重,选择应基于项目具体需求和性能考虑。
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0
|
2月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
77 0
|
5天前
|
JavaScript 前端开发 测试技术
学习JavaScript
【4月更文挑战第23天】学习JavaScript
11 1
|
13天前
|
JavaScript 前端开发 应用服务中间件
node.js之第一天学习
node.js之第一天学习
|
1月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!