javascript的var与let,const之间的区别详解


Posted in Javascript onFebruary 18, 2022

说到JavaScript中声明变量的几种方法也就是varletconst了,letconstes6中新增的命令。那么它们之间有什么区别呢?

我们先整体说一下三者的区别,在详细介绍,var、let、const的区别主要从以下几点分析:

  • 作为全局变量时的不同
  • 变量提升
  • 暂时性死区
  • 块级作用域
  • 重复声明
  • 修改声明的变量

作为全局变量时

ES5中,顶层对象的属性和全局变量是等价的,用var声明的变量既是全局变量,也是顶层变量的属性

但是ES6中用let声明的变量可以在全局访问到,但是并没有在顶层变量的属性上,const声明的常量同样也不会在顶层变量上

javascript的var与let,const之间的区别详解

变量提升

var声明的变量存在变量提升,及变量可以在声明之前调用,值为undefined

letconst不存在变量提升,即它们所声明的变量一定要在声明后使用,否则会报错

console.log(a)  // undefinedvar a = 1console.log(b)  // Cannot access 'b' before initializationlet b = 2console.log(c)  // Cannot access 'c' before initializationconst c = 3console.log(a)  // undefined
var a = 1

console.log(b)  // Cannot access 'b' before initialization
let b = 2

console.log(c)  // Cannot access 'c' before initialization
const c = 3

暂时性死区

var不存在暂时性死区

letconst存在暂时性死区,只有等到声明变量的那一行代码被执行后,才可以获取和使用该变量

其实这一点就是有上一点变量提升延伸而来的区别。因为var声明的变量存在变量提升,在声明之前使用该变量值为undefined,不会报错,所有没有暂时性死区。letconst在该作用域开始前后,变量或常量声明之前使用会报错,这一块区域也就被称为暂时性死区

例同上文:

console.log(a)  // undefined
var a = 1

console.log(b)  // Cannot access 'b' before initialization
let b = 2

console.log(c)  // Cannot access 'c' before initialization
const c = 3

块级作用域

var不存在块级作用域

letconst存在块级作用域

{    var a = 2}console.log(a)  // 2{    let b = 2}console.log(b)  // Uncaught ReferenceError: b is not defined{    const c = 2}console.log(c)  // Uncaught ReferenceError: c is not defined

重复声明

var在相同作用域下允许重复声明,后面声明的变量会覆盖前面的变量声明

letconst在相同作用域下不允许重复声明

var a = 10
var a = 20 // 20

let b = 10
let b = 20 // Identifier 'b' has already been declared

const c = 10
const c = 20 // Identifier 'c' has already been declared

修改声明的变量(常量与变量声明)

varlet声明的是变量,声明后的变量可被修改

const声明得失常量,只读。一旦声明,常量的值就不能改变。但是需要注意的是,对于引用数据类型,JavaScript中的变量或者常量存储的是该数据的存储地址,只要不直接修改该常量的引用,修改其指向的对象的属性是可以的。

var a = 10
a = 20
console.log(a)  // 20

let b = 10
b = 20
console.log(b)  // 20

const c = 10
c = 20 // Uncaught TypeError: Assignment to constant variable

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注三水点靠木的更多内容!

Javascript 相关文章推荐
JavaScript中获取元素索引的函数
Sep 10 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
Oct 29 Javascript
JS常见问题整理(持续更新)
Aug 06 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 Javascript
js实现图片无缝滚动特效
Mar 19 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
微信小程序动态增加按钮组件
Sep 14 Javascript
javascript 对象 与 prototype 原型用法实例分析
Nov 11 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 Javascript
交互式可视化js库gojs使用介绍及技巧
gojs实现蚂蚁线动画效果
uni-app 微信小程序授权登录的实现步骤
Feb 18 #Javascript
详解TypeScript的基础类型
Feb 18 #Javascript
详解jQuery的核心函数和事件处理
Feb 18 #jQuery
JavaScript事件的委托(代理)的用法示例详解
Feb 18 #Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 #Vue.js
You might like
php判断ip黑名单程序代码实例
2014/02/24 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
php5.6.x到php7.0.x特性小结
2019/08/17 PHP
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
基于Python __dict__与dir()的区别详解
2017/10/30 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
Python简单I/O操作示例
2019/03/18 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
Python TCP通信客户端服务端代码实例
2019/11/21 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
德国户外商店:eXXpozed
2020/07/25 全球购物
护理专科毕业推荐信
2013/11/10 职场文书
小学毕业典礼主持词
2014/03/27 职场文书
计算机网络专业求职信
2014/06/05 职场文书
大学生实习证明范本
2014/09/19 职场文书
2016党员入党决心书
2015/09/22 职场文书
MySQL Router的安装部署
2021/04/24 MySQL