ES2020-2025 现代特性

// ❌ 旧写法：层层 && 守卫
const street = user && user.address && user.address.street;
 
// ✅ 新写法：可选链
const street = user?.address?.street;

// 1. 属性访问
obj?.prop;
obj?.["prop"];
 
// 2. 函数调用
func?.(); // func 不存在时返回 undefined，不报错
arr?.[0]; // 安全访问数组
 
// 3. 嵌套
user?.posts?.[0]?.comments?.length;

// ❌ 旧写法
if (callback) {
  callback(data);
}
 
// ✅ 新写法
callback?.(data);

// ❌ 旧写法：用 ||，假值都被替换
const port = config.port || 3000; // ❌ port = 0 也会被替换成 3000
 
// ✅ 新写法：用 ??，只在 null / undefined 时取默认
const port = config.port ?? 3000; // ✅ port = 0 保留 0

// 1. Promise.allSettled —— 已在 §4.2 详解
// 2. globalThis —— 跨环境（浏览器 / Node / Worker）的统一全局对象
// 3. BigInt —— 超过 Number.MAX_SAFE_INTEGER 的整数
const big = 9007199254740993n; // 末尾加 n
big + 1n; // 9007199254740994n
 
// 4. 动态 import —— 已在 §4.3 详解
// 5. String.matchAll —— 全局正则匹配返回迭代器
const matches = "aaa".matchAll(/a/g);
[...matches]; // [['a'], ['a'], ['a']]

// 旧写法 → 新写法
a = a || b;
a ||= b;
a = a && b;
a &&= b;
a = a ?? b;
a ??= b;

// ❌ 旧写法
function init(options) {
  options = options || {};
  options.timeout = options.timeout ?? 5000;
}
 
// ✅ 新写法
function init(options) {
  options ??= {};
  options.timeout ??= 5000;
}

// ❌ 难读
const billion = 1000000000;
 
// ✅ 易读
const billion = 1_000_000_000;
 
// 适用于所有数字字面量
const hex = 0xff_ff_ff;
const binary = 0b1010_0001;
const float = 3.141_592_65;

// ❌ 旧写法：要写正则 + g 标志
"hello world hello".replace(/hello/g, "hi");
 
// ✅ 新写法
"hello world hello".replaceAll("hello", "hi");

class Counter {
  #count = 0; // # 开头 = 私有字段
 
  increment() {
    this.#count++;
  }
 
  get value() {
    return this.#count;
  }
}
 
const c = new Counter();
c.increment();
c.value; // 1
c.#count; // ❌ SyntaxError: Private field '#count' must be declared in an enclosing class

class Foo {
  #privateField = 1;
  #privateMethod() {
    return "private";
  }
  static #privateStatic = "static";
  get #computed() {
    return this.#privateField * 2;
  }
}

// ✅ ESM 模块顶层
const config = await fetch("/config.json").then((r) => r.json());
export default config;

// ❌ 旧写法：要防原型污染
if (Object.prototype.hasOwnProperty.call(obj, "key")) {
  /* ... */
}
 
// ❌ 反例：直接调 obj.hasOwnProperty 不安全（对象可能没有原型）
if (obj.hasOwnProperty("key")) {
  /* ... */
} // 如果 obj = Object.create(null) 会报错
 
// ✅ 新写法
if (Object.hasOwn(obj, "key")) {
  /* ... */
}

async function fetchUser(id) {
  try {
    return await fetch(`/api/user/${id}`);
  } catch (err) {
    // ❌ 旧写法：原始错误信息丢失
    throw new Error(`Failed to fetch user ${id}`);
 
    // ✅ 新写法：保留原始错误链
    throw new Error(`Failed to fetch user ${id}`, { cause: err });
  }
}
 
// 调用方
try {
  await fetchUser(123);
} catch (err) {
  console.error(err); // 主错误
  console.error(err.cause); // 原始 fetch 错误
}

const arr = [1, 2, 3, 4, 5];
 
// ❌ 旧写法
arr[arr.length - 1]; // 5
 
// ✅ 新写法
arr.at(-1); // 5
arr.at(-2); // 4

"hello".at(-1); // 'o'

class Service {
  static #config;
 
  static {
    // 类静态块：类定义时执行一次
    if (typeof window !== "undefined") {
      this.#config = { env: "browser" };
    } else {
      this.#config = { env: "node" };
    }
  }
 
  static getConfig() {
    return this.#config;
  }
}

const arr = [3, 1, 2];
 
// ❌ 老 API：直接修改原数组
arr.sort(); // arr 变成 [1, 2, 3]
arr.reverse(); // arr 变成 [3, 2, 1]
arr.splice(0, 1); // arr 变成 [2, 1]

// ❌ React 反例
const [items, setItems] = useState([3, 1, 2]);
 
function handleSort() {
  items.sort(); // 改了原数组，但引用没变
  setItems(items); // React 看引用相同，不渲染
}

const arr = [3, 1, 2];
 
// ✅ 新 API
const sorted = arr.toSorted(); // [1, 2, 3]，arr 仍是 [3, 1, 2]
const reversed = arr.toReversed(); // [2, 1, 3]，arr 仍是 [3, 1, 2]
const removed = arr.toSpliced(0, 1); // [1, 2]，arr 仍是 [3, 1, 2]
const replaced = arr.with(0, 99); // [99, 1, 2]，arr 仍是 [3, 1, 2]

// ✅ React 正例
const [items, setItems] = useState([3, 1, 2]);
 
function handleSort() {
  setItems(items.toSorted()); // 新数组，引用变了，React 渲染
}

const arr = [1, 2, 3, 4, 5];
 
// 找最后一个偶数
arr.findLast((n) => n % 2 === 0); // 4
arr.findLastIndex((n) => n % 2 === 0); // 3
 
// ❌ 老写法：先反转再找
[...arr].reverse().find((n) => n % 2 === 0);

// ❌ 旧写法：要把 resolver 函数赋值到外部变量
let resolveFn, rejectFn;
const promise = new Promise((resolve, reject) => {
  resolveFn = resolve;
  rejectFn = reject;
});
 
// 在另一个地方
resolveFn("done");
 
// ✅ 新写法
const { promise, resolve, reject } = Promise.withResolvers();
 
// 在另一个地方
resolve("done");

const users = [
  { name: "Alice", role: "admin" },
  { name: "Bob", role: "user" },
  { name: "Carol", role: "admin" },
];
 
// ❌ 旧写法：手写 reduce
const grouped = users.reduce((acc, user) => {
  acc[user.role] = acc[user.role] || [];
  acc[user.role].push(user);
  return acc;
}, {});
 
// ✅ 新写法
const grouped = Object.groupBy(users, (user) => user.role);
// {
//   admin: [{ name: 'Alice', ... }, { name: 'Carol', ... }],
//   user: [{ name: 'Bob', ... }],
// }

const a = new Set([1, 2, 3]);
const b = new Set([2, 3, 4]);
 
a.union(b); // {1, 2, 3, 4}
a.intersection(b); // {2, 3}
a.difference(b); // {1}
a.symmetricDifference(b); // {1, 4}
a.isSubsetOf(b); // false
a.isSupersetOf(b); // false
a.isDisjointFrom(b); // false

// ❌ 旧写法
async function load() {
  const result = [];
  for await (const item of fetchStream()) {
    result.push(item);
  }
  return result;
}
 
// ✅ 新写法
const result = await Array.fromAsync(fetchStream());

// 文件句柄会在作用域结束时自动 dispose
{
  using file = openFile("data.txt"); // 类似 RAII
  // ... 使用 file
} // 离开块作用域时自动调用 file[Symbol.dispose]()
 
// 异步版本
{
  await using db = await connectDB();
  // ... 使用 db
} // 自动调用 await db[Symbol.asyncDispose]()

function logged(originalMethod, context) {
  return function (...args) {
    console.log(`Calling ${context.name}`);
    return originalMethod.apply(this, args);
  };
}
 
class Service {
  @logged
  fetch() {
    // ...
  }
}

function* naturals() {
  let n = 1;
  while (true) yield n++;
}
 
const result = naturals()
  .filter((n) => n % 2 === 0)
  .take(3)
  .toArray();
// [2, 4, 6]

// ❌ 还不能用！只是提案
const record = #{ x: 1, y: 2 };
const tuple = #[1, 2, 3];
 
record === #{ x: 1, y: 2 }; // true（值相等）

// ❌ AI 常生成
const port = config.port || 3000; // port = 0 被替换
 
// ✅ 你应改为
const port = config.port ?? 3000; // port = 0 保留

// ❌ AI 生成
function handleSort() {
  items.sort();
  setItems(items); // 引用没变，不会渲染
}
 
// ✅ 你应改为
function handleSort() {
  setItems(items.toSorted());
}

class A {
  private x = 1; // TS 私有（编译期）
  #y = 2; // 真正私有（运行时）
}
 
// ❌ 同一个项目里随机选，没有原则
// ✅ 团队约定：要么全用 TS private，要么全用 #field

// ❌ 反例
const count = data.count || 10; // count = 0 → 被替换成 10
 
// ✅ 正例
const count = data.count ?? 10; // count = 0 → 保留 0

// ❌ 反例
user?.profile.name = "Alice"; // SyntaxError
 
// ✅ 正例
if (user?.profile) {
  user.profile.name = "Alice";
}

class A {
  #data = { x: 1 };
 
  // ❌ 反例：试图动态访问私有字段
  get(key) {
    return this.#[key]; // SyntaxError
  }
 
  // ✅ 正例：暴露 getter，内部走对象
  get(key) {
    return this.#data[key];
  }
}

// tsconfig.json
{
  "compilerOptions": {
    "experimentalDecorators": false, // 用新装饰器（默认）
    // 或
    "experimentalDecorators": true // 用老装饰器（NestJS 等）
  }
}

{
  "engines": {
    "node": ">=21.0.0"
  }
}

// ❌ 反例：拖慢启动
const config = await fetch("/config.json").then((r) => r.json());
export default config;
 
// ✅ 正例：导出 Promise 让使用方决定何时等
export const configPromise = fetch("/config.json").then((r) => r.json());
 
// 使用方
const config = await configPromise;