什么是ES6新特性_如何用现代语法写javascript【教程】_技术教程

ES6是JavaScript的实质性升级，彻底改变代码组织、数据处理、作用域管理与异步思维；let/const替代var解决作用域与提升问题，箭头函数固化this绑定，解构赋值结合默认值安全提取嵌套数据，Promise与async/await终结回调地狱。

ES6（ECMAScript 2015）不是“新特性集合”，而是 JavaScript 语言一次实质性升级——它改变了你组织代码、处理数据、管理作用域甚至思考异步的方式。不升级语法，就等于用 ES5 写现代应用，徒增冗余和出错风险。

let/const 替代 var：作用域问题不能靠经验补救

var 的函数作用域和变量提升（hoisting）常导致意外交互，比如循环中绑定事件时所有回调共享同一个 i 值。而 let 和 const 是块级作用域，且不被提升（只存在“暂时性死区”）。

实操建议：

默认用 const 声明所有变量；只有明确需要重新赋值时才用 let
绝不用 var —— 即使在简单脚本里，它带来的隐式行为比显式报错更难调试
注意：对象或数组用 const 声明后，其内部属性仍可修改，只是引用不可变

箭头函数：this 绑定不再是玄学

传统函数的 this 取决于调用方式，箭头函数则继承外层作用域的 this，彻底解决回调中 this 指向丢失的问题。

但要注意适用边界：

不能用作构造函数（无 prototype，调用会报 TypeError: xxx is not a constructor）
没有自己的 arguments 对象，需改用剩余参数 ...args
对象方法中慎用：若写成 obj = { fn: () => console.log(this) }，this 指向外层而非 obj

const timer = {
  count: 0,
  start() {
    // ✅ 正确：普通函数，this 指向 timer
    setInterval(() => {
      this.count++; // 箭头函数捕获外层 this
      console.log(this.count);
    }, 1000);
  }
};

解构赋值 + 默认值：别再手写 if (obj && obj.a)

解构不是语法糖，是结构化提取数据的底层能力。配合默认值，能自然处理嵌套缺失字段。

常见错误：

对 null 或 undefined 解构会直接报 TypeError: Cannot destructure property 'x' of 'y' as it is undefined
深层解构如 const { user: { name } } = data; 要求 data.user 存在，否则崩溃

安全写法：

const data = { user: null };
// ✅ 安全：提供默认空对象
const { user = {} } = data;
const { name = 'Anonymous' } = user;

Promise + async/await：回调地狱不是必须忍受的代价

用 new Promise() 手动封装异步逻辑已过时。现代写法是：优先使用 async/await，配合 try/catch 处理错误；底层 API 返回 Promise 即可（如 fetch()、setTimeout 封装）。

关键细节：

await 只能在 async 函数内使用，顶层 await 仅限 ES2025+ 模块环境
Promise.all([]) 空数组会立即 resolve；Promise.allSettled([]) 同理，但返回全 fulfilled/rejected 结果
并发控制别硬写 for await，用 Promise.allSettled() 或第三方库如 p-limit

async function loadUsers() {
  try {
    const res = await fetch('/api/users');
    const users = await res.json();
    return users.filter(u => u.active);
  } catch (err) {
    console.error('Failed to load users:', err.message);
    return [];
  }
}

真正卡住人的从来不是“记不住语法”，而是没意识到某些写法会让错误延迟暴露（比如 var 提升）、或让调试路径变长（比如嵌套回调中 this 错位）。ES6 特性不是锦上添花，而是把语言从“能跑”拉到“可维护”的必要工具。