网站首页 > 技术文章 正文
在JavaScript中var、let 和const是分别代表了三种不同变量声明方式,下面我们就来详细介绍一下他们之间有什么区别与联系。
作用域(Scope)
什么是作用域呢?作用域就是指在编程中一个变量能够使用的范围大小,有些变量可以在函数中使用,有些变量可以在全局使用,这就是它们的作用范围在起作用。而下面我们就来看看三种变量的作用范围有什么区别。
- var:表示函数作用域。也就是说通过var声明的变量可以在整个的函数体之内使用,如果将这个变量声明到了函数体外那么就是全局的作用域。
- let:表示块作用域。也就是说通过let声明的比那里只会在其所在的代码块中起作用,例如 { } 大括号内,出了这个大括号的范围之后就不起作用了。
- const:表示块作用域。其用法与let类似,const声明的变量在其所在的块内有效。
变量提升(Hoisting)
所谓的变量提示就是指在代码执行之前,JavaScript引擎会将变量的声明移动到作用域的顶部,这也就是说无论你在哪个地方声明的变量最终都会被提升到作用域的顶部。
- var:使用var声明的变量会被变量提升到函数或是作用域的顶部,但是不会初始化为undefined。
- let 和 const:使用let和const声明的变量也会被提升到块作用域的顶部,但是不会被初始化,所以如果在声明前进行访问就会出现ReferenceError的报错。
重复声明
重复声明,顾名思义就是在使用的作用范围内可以多次重复声明同一个变量。
- var:使用var声明的变量是允许在相同的作用域内多次声明的。
- let 和 const:而使用let或者是const声明的变量在相同的作用域内是不允许重复声明同一个变量的。
赋值
对于赋值操作大家应该不陌生,就是给变量指定一个使用的值。
- var 和 let:使用var和let声明的变量是可以进行后赋值的,也可以进行重新的赋值。也就是我们传统意义上理解的变量。
- const:而使用const声明的变量必须是在声明的时候就对其进行初始化操作,并且在后续的操作过程中都不能重新赋值,但是如果对于对象或者是数组来讲,对于其中元素的修改是被允许的。这就是我们理解的常量。
示例代码
// var 示例
function exampleVar() {
var x = 10;
if (true) {
var x = 20; // 同一个变量
console.log(x); // 20
}
console.log(x); // 20
}
// let 示例
function exampleLet() {
let y = 10;
if (true) {
let y = 20; // 块作用域,新的变量
console.log(y); // 20
}
console.log(y); // 10
}
// const 示例
function exampleConst() {
const z = 10;
// z = 20; // 错误:无法重新赋值
const obj = { a: 1 };
obj.a = 2; // 可以修改对象的属性
console.log(obj.a); // 2
}
exampleVar();
exampleLet();
exampleConst();
总结
在使用var进行变量赋值的之后一定要小心变量提升和全局变量污染赋值的问题。在现在编程过程中通常会推荐使用 let和const进行复制操作,尤其是在块级区域或者是函数中使用的时候。通过const进行常量或者是不可变变量赋值的时候,一定要注意对于对象属性,数组元素的修改是被允许的,不被允许的是对其引用的修改。
- 上一篇: 通过自定义 Vue 指令实现前端曝光埋点
- 下一篇: Three.JS教程4 threejs中的辅助类
猜你喜欢
- 2025-01-02 JavaScript字符串toString()方法教程
- 2025-01-02 vue3 - 内置组件Teleport的使用
- 2025-01-02 网页三维CAD中加载和保存STEP模型
- 2025-01-02 在.NET Web API中设置响应输出Json数据格式的两种常用方式
- 2025-01-02 剖析Selenium代码执行时元素查找失败的缘由
- 2025-01-02 H5的Canvas绘图——使用fabricjs绘制一个可多选的随机9宫格
- 2025-01-02 jscanify:支持 Node.js/浏览器/React 移动文档扫描仪
- 2025-01-02 js事件机制详解
- 2025-01-02 Java ArrayList用法详解附代码示例
- 2025-01-02 如何用枚举快速提高编程效率,数据元素快速对应,小枚举大作用
- 02-21走进git时代, 你该怎么玩?_gits
- 02-21GitHub是什么?它可不仅仅是云中的Git版本控制器
- 02-21Git常用操作总结_git基本用法
- 02-21为什么互联网巨头使用Git而放弃SVN?(含核心命令与原理)
- 02-21Git 高级用法,喜欢就拿去用_git基本用法
- 02-21Git常用命令和Git团队使用规范指南
- 02-21总结几个常用的Git命令的使用方法
- 02-21Git工作原理和常用指令_git原理详解
- 最近发表
- 标签列表
-
- cmd/c (57)
- c++中::是什么意思 (57)
- sqlset (59)
- ps可以打开pdf格式吗 (58)
- phprequire_once (61)
- localstorage.removeitem (74)
- routermode (59)
- vector线程安全吗 (70)
- & (66)
- java (73)
- org.redisson (64)
- log.warn (60)
- cannotinstantiatethetype (62)
- js数组插入 (83)
- resttemplateokhttp (59)
- gormwherein (64)
- linux删除一个文件夹 (65)
- mac安装java (72)
- reader.onload (61)
- outofmemoryerror是什么意思 (64)
- flask文件上传 (63)
- eacces (67)
- 查看mysql是否启动 (70)
- java是值传递还是引用传递 (58)
- 无效的列索引 (74)