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

更新时间：2022年01月03日 11:33:00 作者：庸人°

这篇文章主要为大家介绍了 javascript的var与let,const之间的区别，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

作为全局变量时

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

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

请添加图片描述

变量提升

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

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

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不存在暂时性死区

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

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

例同上文：

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不存在块级作用域

let和const存在块级作用域

{    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在相同作用域下允许重复声明，后面声明的变量会覆盖前面的变量声明

let、const在相同作用域下不允许重复声明

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

修改声明的变量（常量与变量声明）

var和let声明的是变量，声明后的变量可被修改

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

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

您可能感兴趣的文章:

JS array数组检测方式解析
这篇文章主要介绍了JS array数组检测方式解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-05-05
AngularJS+Bootstrap实现多文件上传与管理
这篇文章主要为大家详细介绍了AngularJS+Bootstrap实现多文件上传与管理，对上传文件进行加载与删除操作,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
js最简单的双向绑定实例讲解
下面小编就为大家分享一篇js最简单的双向绑定实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-01-01
Javascript中Fetch请求Coze API并流式展示请求结果
文章介绍了如何使用Fetch API处理CozeAPI返回的流式响应,并在前端进行实时展示,文章提供了处理流式响应的步骤和示例代码,包括使用fetch发起POST请求、读取响应体流、逐步处理数据块以及更新UI,感兴趣的朋友一起看看吧
2025-02-02
用于table内容排序
用于table内容排序...
2006-07-07
JSP中使用JavaScript动态插入删除输入框实现代码
这篇文章主要介绍了JSP中如何使用JavaScript动态插入删除输入框,需要的朋友可以参考下
2014-06-06
ElementUI中Tree组件使用案例讲解
这篇文章主要介绍了ElementUI中Tree组件使用案例讲解,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-12-12
big.js快速上手指南(最全最详细)
big.js是一个用于任意精度十进制算术的小型、快速的JavaScript库,它适用于所有浏览器,并且支持ECMAScript 3,这篇文章主要介绍了big.js快速上手指南的相关资料,需要的朋友可以参考下
2025-07-07
js实现3D旋转效果
这篇文章主要为大家详细介绍了js实现3D旋转效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08
JSON.stringify()方法讲解
今天小编就为大家分享一篇关于JSON.stringify()方法讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01