var 、let 、const 的区别

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

作用域

var 适用于需要全局或函数作用域的场景,而 letconst 更适合需要块级作用域的场景。 (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 保证的是引用不变)。

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

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

可变性与不可变性:

varlet 声明的变量是可变的,而 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.
}
相关推荐
开心工作室_kaic44 分钟前
ssm010基于ssm的新能源汽车在线租赁管理系统(论文+源码)_kaic
java·前端·spring boot·后端·汽车
Python私教1 小时前
Flutter颜色和主题
开发语言·javascript·flutter
大力水手~2 小时前
css之loading旋转加载
前端·javascript·css
Nguhyb2 小时前
-XSS-
前端·xss
前端郭德纲2 小时前
深入浅出ES6 Promise
前端·javascript·es6
就爱敲代码2 小时前
ES6 运算符的扩展
前端·ecmascript·es6
天天进步20153 小时前
Lodash:现代 JavaScript 开发的瑞士军刀
开发语言·javascript·ecmascript
王哲晓3 小时前
第六章 Vue计算属性之computed
前端·javascript·vue.js
假装我不帅3 小时前
js实现类似与jquery的find方法
开发语言·javascript·jquery
究极无敌暴龙战神X3 小时前
CSS复习2
前端·javascript·css