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.
}
相关推荐
const_qiu7 小时前
第一章 1.1-1.2:基础模型调用与 TypeScript 入门 —— Java 开发者的视角
java·javascript·typescript
风骏时光牛马7 小时前
用户管理模块接口开发
前端
彭亚川Allen8 小时前
从零手搓 RAG 之检索全流程,给大模型接上自己的知识库
前端·后端·ai编程
IT_陈寒8 小时前
别让Java字符串拼接偷偷吃掉你的内存
前端·人工智能·后端
软件技术NINI8 小时前
圣罗兰彩妆html+css 4页
前端·css·html
2601_951615209 小时前
网站模板 网站网页模板下载
前端·网络·html
酷炫码神9 小时前
Day 1|HTML5:一个商城首页的骨架,从 DOCTYPE 到语义化
前端·html·html5
AI源码10 小时前
鲜花商城(HTML 版)
前端·html
hiahiahia12310 小时前
Message 和对话
服务器·前端·数据库
溪语流沙10 小时前
【Web全栈进阶】Composition API与组件通信:props深入、emit、插槽
前端·css·vue.js