JavaScript ES6+新特性指南：let/const、箭头函数与解构赋值

图 0：JavaScript ES6+ 三大核心特性核心能力分布图

// 缺陷 1：变量提升与未定义访问
console.log(status); // 输出: undefined，而不是抛出未定义异常
var status = "ready";

// 缺陷 2：块级作用域缺失导致循环计数器泄漏
for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // 3 次均输出 3，而非预期的 0, 1, 2
  }, 100);
}
console.log("外部访问 i:", i); // 输出: 外部访问 i: 3（变量污染至外部）

function handleConfig() {
  // 进入块级作用域，TDZ 开始
  // console.log(timeout); // 抛出 Uncaught ReferenceError: Cannot access 'timeout' before initialization
  
  let timeout = 5000; // TDZ 结束，变量完成初始化
  console.log(timeout); // 正常输出: 5000
}
handleConfig();

当使用 const 声明复合数据类型（对象、数组）时，保证的是该变量指向的堆内存地址不变，并不意味着对象内部的属性不可更改。如果需要冻结对象内部结构，应配合 Object.freeze() 使用。

const user = { name: "Alice", role: "developer" };

// 合法操作：修改对象属性
user.role = "architect";
user.age = 28;

// 非法操作：重新为 user 赋值新地址
// user = { name: "Bob" }; // 抛出 TypeError: Assignment to constant variable

图 1：var 变量提升与 let/const 暂时性死区生命周期对比图

// 1. 标准多参数与块级主体
const add = (a, b) => {
  return a + b;
};

// 2. 单参数简写：可省略小括号
const double = x => x * 2; // 单行表达式默认隐式 return

// 3. 无参数：必须保留空括号
const getRandom = () => Math.random();

// 4. 易错点：隐式返回对象字面量时，必须使用圆括号包裹，避免引擎误判为函数体花括号
const makeUser = (id, name) => ({ id, name, active: true });

const timerController = {
  seconds: 0,
  
  // 传统函数方案：容易发生 this 丢失
  startES5: function() {
    var self = this; // 历史遗留 hack：通过闭包暂存 this
    setTimeout(function() {
      // 此处的普通函数被顶层 window 或 timer 线程调用，this 指向 window 或 undefined
      self.seconds++;
      console.log("ES5 timer:", self.seconds);
    }, 500);
  },

  // 箭头函数方案：词法捕获外层 this
  startES6: function() {
    setTimeout(() => {
      // 箭头函数继承 startES6 执行上下文中的 this（即 timerController）
      this.seconds++;
      console.log("ES6 timer:", this.seconds);
    }, 500);
  }
};

图 2：传统函数与箭头函数 this 机制及边界对照图

// 1. 基础对应与解包
const coordinates = [120.15, 30.28, 15];
const [lng, lat, alt] = coordinates;
console.log(lng, lat); // 输出: 120.15 30.28

// 2. 跳过指定位置元素
const colors = ["red", "green", "blue"];
const [, secondaryColor] = colors;
console.log(secondaryColor); // 输出: green

// 3. 默认值兜底：仅当对应位置严格为 undefined 时生效
const [page = 1, pageSize = 20] = [2];
console.log(page, pageSize); // 输出: 2, 20

// 4. 剩余操作符 (...rest) 收集剩余元素（必须位于解构末尾）
const [head, ...tail] = [10, 20, 30, 40];
console.log(head); // 10
console.log(tail); // [20, 30, 40]

// 5. 不依赖中间变量交换数值
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 输出: 2 1

const serverResponse = {
  code: 200,
  msg: "success",
  data: {
    userId: "U1001",
    account: "admin",
    role: "super_admin"
  }
};

// 1. 基础解构与重命名别名（属性名: 目标变量名）
const { code: statusCode, msg } = serverResponse;
console.log(statusCode, msg); // 输出: 200 "success"

// 2. 重命名与默认值复合使用
const { retries: retryCount = 3 } = serverResponse;
console.log(retryCount); // 输出: 3 (因为 serverResponse.retries 为 undefined)

// 3. 嵌套深层解构
const { data: { userId, role } } = serverResponse;
console.log(userId, role); // 输出: "U1001" "super_admin"
// 注意：此时 data 本身并没有作为变量被声明

// 形参使用对象解构，并为整个配置对象提供空对象兜底 (= {})，防止未传参时解构报错
function createRequestClient({
  baseUrl = "https://api.example.com",
  timeout = 3000,
  headers = {}
} = {}) {
  return {
    endpoint: baseUrl,
    timeoutMs: timeout,
    headers: { ...headers, "X-Client-Ver": "1.0.0" }
  };
}

// 安全调用：无需按固定顺序传递参数，省略项均自动采用默认值
const clientA = createRequestClient({ timeout: 8000 });
const clientB = createRequestClient(); // 完全不传实参也不会抛出 Cannot destructure property 异常

图 3：数组与对象解构赋值的映射模型与求值逻辑

图 4：现代 JavaScript 核心特性工程决策流程图