ES6 let 和 const

一、基本概念与声明方式

1. let 声明

let 允许你声明一个块级作用域的局部变量,可以选择性地将其初始化为一个值。

javascript 复制代码
let x = 1;
if (true) {
  let x = 2;  // 不同的变量
  console.log(x);  // 2
}
console.log(x);  // 1

2. const 声明

const 声明创建一个块级作用域的常量,其值不能被重新赋值。

javascript 复制代码
const PI = 3.14159;
// PI = 3.14;  // TypeError: Assignment to constant variable

const obj = { name: 'John' };
obj.name = 'Jane';  // 合法,修改对象属性
// obj = {};  // 非法,不能重新赋值

二、关键特性详解

1. 块级作用域 (Block Scope)

letconst 引入了真正的块级作用域,不同于 var 的函数作用域。

javascript 复制代码
{
  let blockScoped = 'visible inside block';
  const alsoBlockScoped = 'same here';
}
console.log(blockScoped);  // ReferenceError
console.log(alsoBlockScoped);  // ReferenceError

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);  // 0, 1, 2
}

2. 暂时性死区 (Temporal Dead Zone, TDZ)

在声明前访问 letconst 变量会导致 ReferenceError,从进入作用域到声明完成之间的区域称为TDZ。

javascript 复制代码
console.log(aLetVar);  // ReferenceError
let aLetVar = 10;

// 对比var
console.log(aVar);  // undefined
var aVar = 10;

3. 无作用域提升 (No Hoisting)

虽然 letconst 声明在编译阶段被处理(类似"提升"),但在声明前不可访问。

javascript 复制代码
function test() {
  console.log(hoistedVar);  // undefined
  console.log(notHoistedLet);  // ReferenceError
  
  var hoistedVar = 1;
  let notHoistedLet = 2;
}

4. 禁止重复声明

在同一作用域内,letconst 不允许重复声明变量。

javascript 复制代码
let x = 1;
let x = 2;  // SyntaxError: Identifier 'x' has already been declared

var y = 1;
let y = 2;  // 同样报错

三、与 var 的详细对比

特性 var let const
作用域 函数作用域 块级作用域 块级作用域
提升 声明提升,初始化为undefined 存在TDZ,不可提前访问 存在TDZ,不可提前访问
全局声明时成为window属性
重复声明 允许 不允许 不允许
值可变性 可变 可变 不可重新赋值(对象内容可修改)

四、词法作用域 (Lexical Scope)

letconst 遵循词法作用域规则,作用域在代码编写时就已经确定。

javascript 复制代码
function outer() {
  let outerVar = 'outer';
  
  function inner() {
    console.log(outerVar);  // 可以访问外部变量
    let innerVar = 'inner';
  }
  
  inner();
  // console.log(innerVar);  // ReferenceError
}
outer();

五、实际应用场景

1. 循环中的变量绑定

javascript 复制代码
// var 的问题
for (var i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 0);  // 5,5,5,5,5
}

// let 的解决方案
for (let j = 0; j < 5; j++) {
  setTimeout(() => console.log(j), 0);  // 0,1,2,3,4
}

2. 常量声明

javascript 复制代码
// 配置常量
const API_ENDPOINT = 'https://api.example.com';
const MAX_RETRIES = 3;
const DEFAULT_TIMEOUT = 5000;

// 对象常量(内容可修改)
const USER_ROLES = {
  ADMIN: 'admin',
  USER: 'user',
  GUEST: 'guest'
};

3. 块级作用域实用案例

javascript 复制代码
// 条件性变量声明
if (userLoggedIn) {
  let authToken = getToken();
  // 仅在此块中使用token
}

// switch语句中的块作用域
switch (condition) {
  case 1: {
    let message = 'Case 1';
    console.log(message);
    break;
  }
  case 2: {
    let message = 'Case 2';  // 不冲突
    console.log(message);
    break;
  }
}

六、常见误区与最佳实践

1. const 并不意味着不可变

javascript 复制代码
const arr = [1, 2, 3];
arr.push(4);  // 合法
// arr = [1,2,3,4];  // 非法

const obj = { name: 'John' };
obj.name = 'Jane';  // 合法

如果需要完全不可变的对象,可以使用 Object.freeze()

javascript 复制代码
const frozenObj = Object.freeze({ name: 'John' });
frozenObj.name = 'Jane';  // 静默失败(严格模式下报错)

2. 优先使用 const,其次是 let

现代 JavaScript 开发推荐:

  1. 默认使用 const
  2. 只有当变量需要重新赋值时才使用 let
  3. 避免使用 var

3. 全局声明的影响

javascript 复制代码
var globalVar = 1;
let globalLet = 2;

console.log(window.globalVar);  // 1
console.log(window.globalLet);  // undefined

七、底层原理

1. 变量创建的三阶段

  1. 声明阶段:在作用域中注册变量
  2. 初始化阶段:分配内存并绑定作用域(TDZ结束)
  3. 赋值阶段:给变量赋值

var 在声明阶段即初始化(为undefined),而 let/const 将初始化和赋值分开。

2. 执行上下文的变化

javascript 复制代码
{
  // let x 的声明被"提升"但未初始化
  console.log(x);  // ReferenceError
  let x = 10;
  // 初始化完成
}

八、迁移建议

var 迁移到 let/const 时:

  1. 将函数内所有 var 改为 const
  2. 将需要重新赋值的变量改为 let
  3. 注意检查循环和闭包中的变量引用
  4. 使用 linter 工具帮助检测 var 的使用
javascript 复制代码
// 迁移前
function oldWay() {
  var a = 1;
  var b = 2;
  for (var i = 0; i < 10; i++) {
    // ...
  }
}

// 迁移后
function newWay() {
  const a = 1;
  let b = 2;
  for (let i = 0; i < 10; i++) {
    // ...
  }
}
相关推荐
foxhuli22916 分钟前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔1 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺1 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear1 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息1 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月1 小时前
1.vue权衡的艺术
前端·vue.js·开源
样子20181 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿1 小时前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘1 小时前
vue文本插值
javascript·vue.js·ecmascript
孤水寒月2 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html