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 继承使用分析
May 12 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
html页面显示年月日时分秒和星期几的两种方式
Aug 20 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
详解JQuery基础动画操作
Apr 12 jQuery
OpenLayers3实现对地图的基本操作
Sep 28 Javascript
Angular性能优化之第三方组件和懒加载技术
May 10 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环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
php中的比较运算符详解
2013/10/28 PHP
PHP中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
php新建文件的方法实例
2019/09/26 PHP
js option删除代码集合
2008/11/12 Javascript
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
jquery 回车事件实现代码
2011/08/23 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
2013/07/10 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
AngularJS实现tab选项卡的方法详解
2017/07/05 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
python&MongoDB爬取图书馆借阅记录
2016/02/05 Python
Python配置mysql的教程(推荐)
2017/10/13 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
什么是Python包的循环导入
2020/09/08 Python
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
人事主管岗位职责范本
2013/12/04 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
2015政治思想表现评语
2015/03/25 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
2015年节能减排工作总结
2015/05/14 职场文书
执行力心得体会范文
2016/01/11 职场文书
基于Android10渲染Surface的创建过程
2022/08/14 Java/Android