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-Mozilla和IE中的一个函数直接量的问题
Jan 09 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
基于Vue的ajax公共方法(详解)
Jan 20 Javascript
js自定义trim函数实现删除两端空格功能
Feb 09 Javascript
async/await地狱该如何避免详解
May 10 Javascript
微信小程序功能之全屏滚动效果的实现代码
Nov 22 Javascript
基于Three.js实现360度全景图片
Dec 30 Javascript
详解解决小程序中webview页面多层history返回问题
Aug 20 Javascript
小程序自定义模板实现吸顶功能
Jan 08 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 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
JavaScript 指导方针
2007/04/05 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
jquery 回车事件实现代码
2011/08/23 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
2014/08/05 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
AngularJS基础学习笔记之简单介绍
2015/05/10 Javascript
JavaScript实现基于十进制的四舍五入实例
2015/07/17 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
使用JQuery实现智能表单验证功能
2016/03/08 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
bpython 功能强大的Python shell
2016/02/16 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
Sanic框架安装与简单入门示例
2018/07/16 Python
多版本python的pip 升级后, pip2 pip3 与python版本失配解决方法
2019/09/11 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
英国最大的海报商店:GB Posters
2018/03/20 全球购物
运动会通讯稿100字
2014/01/31 职场文书
中学校庆方案
2014/03/17 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
高中班主任培训心得体会
2016/01/07 职场文书
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL