网站首页 > 教程文章 正文
在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进行常量或者是不可变变量赋值的时候,一定要注意对于对象属性,数组元素的修改是被允许的,不被允许的是对其引用的修改。
猜你喜欢
- 2025-01-14 js中const,var,let三种区别
- 2025-01-14 var、let、const定义JavaScript变量常量
- 2025-01-14 JavaScript中let、const和var的使用介绍
- 2025-01-14 javascript中const/let/var的用法区别及使用场景
- 2025-01-14 一文了解let、const与var的区别
- 2025-01-14 Vue进阶(四十二):var、let、const三者的区别
- 2025-01-14 JS:定义变量的var、let有何操作?(360°无死角)
- 2025-01-14 JavaScript基础06——let和var两个关键字有啥不同
- 2025-01-14 JavaScript let 与var 区别及var弊端
- 最近发表
-
- esbuild:一款快 10-100 倍的 JS 打包 / 压缩工具
- ESM 内功心法:化解 require 中的夺命一击!
- webpack中exportsFields和mainFields的用法
- Rust cargo 命令行工具使用教程(rust指令怎么用)
- Axios CORS 问题处理(axios设置cors)
- Nodejs 第七十四章(微服务)(nodejs微服务是什么)
- 11个web前端开发人员必备的在线工具,功能强大,值得收藏
- 新一代Python包管理工具来了(python community包)
- 开发者提示工程实用指南(工程师开发使用中)
- 软件构建工具汇总与选择指南(软件构造工具)
- 标签列表
-
- location.href (44)
- document.ready (36)
- git checkout -b (34)
- 跃点数 (35)
- 阿里云镜像地址 (33)
- qt qmessagebox (36)
- md5 sha1 (32)
- mybatis plus page (35)
- semaphore 使用详解 (32)
- update from 语句 (32)
- vue @scroll (38)
- 堆栈区别 (33)
- 在线子域名爆破 (32)
- 什么是容器 (33)
- sha1 md5 (33)
- navicat导出数据 (34)
- 阿里云acp考试 (33)
- 阿里云 nacos (34)
- redhat官网下载镜像 (36)
- srs服务器 (33)
- pico开发者 (33)
- https的端口号 (34)
- vscode更改主题 (35)
- 阿里云资源池 (34)
- os.path.join (33)