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 操作cookies及正确使用cookies的属性
Oct 15 Javascript
prototype 中文参数乱码解决方案
Nov 09 Javascript
js常用排序实现代码
Dec 28 Javascript
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 Javascript
同步文本框内容JS代码实现
Aug 04 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
对Angular中单向数据流的深入理解
Mar 31 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 Javascript
JavaScript实现移动端拖动元素
Nov 24 Javascript
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
交互式可视化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 数组遍历foreach语法结构及实例
2016/06/13 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
php接口隔离原则实例分析
2019/11/11 PHP
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
22点关于jquery性能优化的建议
2014/05/28 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
2014/12/18 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
详解vue组件开发脚手架
2018/06/15 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
Python中的默认参数实例分析
2018/01/29 Python
python3.6使用pymysql连接Mysql数据库
2018/05/25 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
django foreignkey(外键)的实现
2019/07/29 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
数组越界问题
2015/10/21 面试题
计算机专业推荐信范文
2013/11/20 职场文书
后勤主管岗位职责
2014/03/01 职场文书
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript