ES6+现代JavaScript特性基础：let/const与箭头函数用法

一、变量声明革新：从 var 到 let 与 const

在ES6发布之前，JavaScript仅提供var一种变量声明方式。var的设计存在两大致命缺陷：函数级作用域导致的变量泄露，以及变量提升（Hoisting）带来的状态不可控。为了解决这些问题，ES6正式引入了具备块级作用域的let与const。

与传统的var不同，let用于声明后续可变的数据，而const用于声明常量绑定。两者的核心改善在于：彻底遵循代码块{ ... }的边界限制，不再将变量挂载到全局window对象上，并且在声明生效前禁止一切提前读取行为。

二、深入理解块级作用域与暂时性死区（TDZ）

在理解let和const时，最容易产生误解的概念是暂时性死区（Temporal Dead Zone，简称 TDZ）。很多人误以为let和const不会被提升，但从ECMAScript规范的底层实现来看，JavaScript引擎在执行代码块前，依然会进行词法分析并将变量注册至当前作用域的环境记录中。

关键的差异在于初始化时机：var在提升时会被隐式初始化为undefined；而let和const虽然在词法环境创建时已被识别，但在代码执行流正式解析到具体的声明语句之前，该变量均处于未初始化状态。任何在此区间尝试读取该变量的操作，都会抛出ReferenceError。

下面通过具体代码直观对比var与let在实际运行中的不同表现：

// 示例 1：作用域隔离与经典闭包陷阱修复
// 使用 var 时，i 会泄露为全局/函数变量，循环结束后其值均为 3
for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log('var i:', i); // 输出三次 "var i: 3"
  }, 10);
}

// 使用 let 时，每次循环迭代都会创建一个全新的独立块级作用域
for (let j = 0; j < 3; j++) {
  setTimeout(function() {
    console.log('let j:', j); // 依次输出 "let j: 0", "let j: 1", "let j: 2"
  }, 10);
}

三、箭头函数（Arrow Function）语法与简写规则

在现代JavaScript代码中，箭头函数（=>）几乎成为了编写回调函数与管道处理的标准语法。相比于传统的function关键字，箭头函数不仅写法轻量，而且能够使逻辑表达更为紧凑。

箭头函数的简写遵循以下三条核心规则：

• 参数括号省略：当且仅当参数数量恰好为 1 个时，参数外侧的圆括号()可以省略；无参数或多个参数时必须保留圆括号。
• 单行隐式返回：当函数体只有一条表达式时，可以同时省略大括号{}与return关键字，该表达式的计算结果会自动返回。
• 直接返回对象字面量：若单行表达式需要返回一个纯对象{}，必须使用圆括号将对象包裹({ key: value })，以防JavaScript引擎将其错误解析为函数体的代码块大括号。

// 完整传统函数语法
const doubleFunc = function(n) {
  return n * 2;
};

// 简写规则 1 & 2：单参数且单行返回，省略参数括号与 return
const double = n => n * 2;

// 简写规则 3：隐式返回对象字面量，外层必须包裹小括号
const createUserData = (id, username) => ({
  id,
  username,
  createdAt: Date.now()
});

// 数组数据处理场景下的优雅结合
const scores = [58, 72, 95, 88];
const passedScores = scores
  .filter(score => score >= 60)
  .map(score => `得分: ${score}`);
console.log(passedScores); // ["得分: 72", "得分: 95", "得分: 88"]

四、箭头函数的底层机制：词法 this 与特性限制

很多人只把箭头函数当作“更短的函数语法”，这往往会导致难以排查的运行时Bug。箭头函数最本质的改变在于彻底移除了动态的 this 绑定机制，转而采用词法作用域（Lexical this）。

在普通函数中，this的值取决于该函数被调用的方式（作为对象方法调用、直接函数调用，或通过call/apply/bind指定）。而在箭头函数中，它自身根本没有 this 机制，函数内部使用的this完全继承自声明该箭头函数时所处的外层词法执行上下文。

正是由于词法this的特性，箭头函数彻底解决了经典异步回调中“this丢失”的问题。过去我们需要使用var self = this;或者显式.bind(this)，而现在可以直接使用箭头函数：

// 示例 2：定时器回调中的 this 对比
const timerModule = {
  name: 'TaskRunner',
  count: 0,
  start() {
    // 箭头函数继承 start() 执行时的 this（即 timerModule 对象）
    setTimeout(() => {
      this.count++;
      console.log(`${this.name} 完成计数: ${this.count}`);
    }, 100);
  }
};
timerModule.start(); // 正常输出: "TaskRunner 完成计数: 1"

五、现代 JavaScript 特性选型决策与最佳实践

掌握了let、const以及箭头函数的底层规则之后，在日常业务开发中如何进行高效且规范的技术选型？我们可以遵循以下确定性决策路径：

总结清单

1. 优先使用 const：始终将const作为变量声明的默认选项。这能够让代码的意图非常明确——绑定的引用不会变更，大大降低不可预期的状态篡改。
2. 需要重新赋值时使用 let：仅当确需重赋值（如计数累加、状态重置、循环迭代）时才声明为let。变量的作用范围应收紧在最小必要代码块中。
3. 箭头函数负责逻辑流与内联回调：在map、filter、Promise链式调用以及事件节流/防抖闭包中，无条件优先使用箭头函数，避免this漂移。
4. 普通函数保留面向对象与动态绑定：在构造函数、对象方法、需动态提取触发源this的DOM事件处理器中，继续保留标准函数声明。