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++) {
    // ...
  }
}
相关推荐
伍哥的传说6 分钟前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
lichenyang45312 分钟前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript
Trust yourself24327 分钟前
想把一个easyui的表格<th>改成下拉怎么做
前端·深度学习·easyui
三口吃掉你32 分钟前
Web服务器(Tomcat、项目部署)
服务器·前端·tomcat
Trust yourself24334 分钟前
在easyui中如何设置自带的弹窗,有输入框
前端·javascript·easyui
烛阴38 分钟前
Tile Pattern
前端·webgl
前端工作日常1 小时前
前端基建的幸存者偏差
前端·vue.js·前端框架
Electrolux1 小时前
你敢信,不会点算法没准你赛尔号都玩不明白
前端·后端·算法
a cool fish(无名)2 小时前
rust-参考与借用
java·前端·rust
Feather_742 小时前
从Taro的Dialog.open出发,学习远程控制组件之【事件驱动】
javascript·学习·taro