JavaScript开发Skill javascript

---

name: javascript description: 编写现代 JavaScript，使用 ES6+、异步模式和 Node.js。用于 JS 开发、异步调试或优化。

JavaScript 开发

编写现代、干净的 JavaScript 和 TypeScript。

何时使用

• 编写 JavaScript/TypeScript 代码
• 异步调试和优化
• Node.js 开发
• 浏览器兼容性问题
• 模块系统问题

现代 JavaScript 模式

异步/等待

// 优先使用 async/await 而非 promise 链
async function fetchData() {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return await response.json();
  } catch (error) {
    console.error("Fetch failed:", error);
    throw error;
  }
}

// 并行执行
const [users, posts] = await Promise.all([fetchUsers(), fetchPosts()]);

// 多 promise 的错误处理
const results = await Promise.allSettled([task1(), task2(), task3()]);
const succeeded = results.filter((r) => r.status === "fulfilled");

解构和展开

// 对象解构带默认值
const { name, age = 0, ...rest } = user;

// 数组方法
const active = users.filter((u) => u.active).map((u) => u.name);

// 对象展开用于不可变更新
const updated = { ...user, name: "New Name" };

类和模块

// ES 模块
export class UserService {
  #privateField; // 私有字段

  constructor(config) {
    this.#privateField = config.secret;
  }

  async getUser(id) {
    return await this.#fetch(`/users/${id}`);
  }
}

// 命名和默认导出
export { UserService };
export default UserService;

TypeScript 模式

// 接口优于类型用于对象
interface User {
  id: string;
  name: string;
  email?: string;
}

// 泛型
function first<T>(arr: T[]): T | undefined {
  return arr[0];
}

// 实用类型
type CreateUser = Omit<User, "id">;
type ReadonlyUser = Readonly<User>;

Node.js 模式

// Node.js 中的 ESM
import { readFile } from "fs/promises";
import { fileURLToPath } from "url";

const __dirname = fileURLToPath(new URL(".", import.meta.url));

// 大文件的流处理
import { createReadStream, createWriteStream } from "fs";
import { pipeline } from "stream/promises";

await pipeline(
  createReadStream("input"),
  transform,
  createWriteStream("output"),
);

常见陷阱

• this 绑定（使用箭头函数或 .bind()）
• 浮动 promise（总是 await 或处理）
• == vs ===（总是使用 ===）
• 数组突变（map/filter 返回新数组，sort 会突变）

示例

输入： “修复异步问题” 操作： 检查未处理的 promise、竞态条件、正确的错误处理

输入： “转换为 TypeScript” 操作： 添加类型、接口、修复类型错误、配置 tsconfig