var 、let 、const 的区别

在JS中,最初声明变量的关键字只有 var,但ES6引入了const let 从而引入了块作用域的概念,使JS的内容更为丰富,那么var const let这三者的区别是什么呢?

作用域

var 适用于需要全局或函数作用域的场景,而 let 和 const 更适合需要块级作用域的场景。 (var 声明的变量存在变量提升的问题,可能导致意外的行为;而 let 和 const 避免了这个问题,但 let 在暂时性死区内引用变量会导致错误,需要特别注意。)

var 的基本特性与用法

全局作用域与函数作用域:使用 var 声明的变量具有函数作用域或全局作用域,这意味着它们在声明它们的函数或全局执行上下文中是可访问的。如果在函数内部声明了一个 var 变量,那么它在函数外部是不可见的。

变量提升:var 声明的变量会被提升(hoisted)到其作用域的顶部,但变量的赋值不会提升。这意味着你可以在声明之前引用变量(得到 undefined),但不能在声明之前对变量进行赋值操作(会导致错误)。

js 复制代码
function test() {
  console.log(a) // undefined
  var a = 1
}

let 的引入与特点

块级作用域:let 是 ES6(ECMAScript 2015)中引入的,它声明的变量具有块级作用域,即它们只在其所在的块(由 {} 包围的代码块)内有效。这解决了 var 带来的某些作用域问题,如循环中的变量泄露等。

不存在变量提升导致的暂时性死区:虽然 let 声明的变量也会被提升,但它们不会被初始化。在变量被声明之前的区域被称为暂时性死区(Temporal Dead Zone),在这个区域内引用变量会导致 ReferenceError。

js 复制代码
function test() {
  console.log(a) // Uncaught ReferenceError: Cannot access 'a' before initialization
  let a = 1
}
 

const 的定义与限制

常量声明:const 也是 ES6 中引入的,用于声明常量。常量是指一旦声明,其值就不能被改变的变量。需要注意的是,const 声明的变量的值不能改变,但这并不意味着它指向的对象或数组的内容不能改变(对于对象或数组,const 保证的是引用不变)。

必须初始化:与 var 和 let 不同,const 声明的变量必须在声明时立即初始化,否则会导致语法错误。

js 复制代码
function test() {
 const a // Uncaught SyntaxError: Missing initializer in const declaration
}

可变性与不可变性:

var 和 let 声明的变量是可变的,而 constÏ 声明的变量是不可变的(但引用对象或数组的内容可以改变)。这使得 const 在声明不需要改变的值时非常有用,可以提高代码的可读性和可维护性。

js 复制代码
function(){
 var a = 1;
 let b = 1;
 const c = 1;
 
 a = 2; // 2
 b = 2; // 2
 c = 2; // Uncaught TypeError: Assignment to constant variable.
}
相关推荐
jktantan8 小时前
Vue keep-alive 切标签后滚动位置回顶?因为 onDeactivated 里读到的 scrollTop 是 0
前端·javascript·vue.js
总要学点什么8 小时前
第89篇:三维特效-螺旋圆效果——让螺旋臂卷起一圈圈外扩的涟漪
开发语言·javascript·ecmascript·webgl·cesium·空间分析·1024程序员节
2601_962885729 小时前
quotes 字段全解:涨跌幅、振幅、换手率的口径与单位
java·前端·spring
excel9 小时前
encodeURI 和 encodeURIComponent 有什么区别?
前端
前端精髓9 小时前
调用openrouter的免费API模型
java·前端·javascript
赛博守夜人9 小时前
AI安全攻防与治理之十四:AI 安全测试不能脱离传统安全,Web、API、移动端与模型攻击面的组合拳
前端·人工智能·安全
开开心心_Every9 小时前
快速隐藏程序工具自定义快捷键一键切换
java·开发语言·前端·spring·智能手机·word·intellij-idea
networknomad10 小时前
OpenReplay:自己搭的会话回放工具,给前端排错用的
前端·其他
缓慢更新11 小时前
AI 辅助生成单测:从接口定义到用例的流水线
java·服务器·前端·网络·数据库·人工智能
陈随易11 小时前
AI 运维服务器,安全又可靠的方法
前端·后端·程序员