⚡

现代JavaScript模式Skill modern-javascript-patterns

这个技能用于掌握现代JavaScript（ES6+）核心特性，包括箭头函数、解构、异步操作、函数式编程模式等，帮助开发者编写高效、可维护的前端代码，适用于重构遗留系统、优化Web应用性能及提升代码质量。关键词：JavaScript开发，ES6+，前端优化，异步编程，代码重构，函数式编程，性能提升。

前端开发 0 次安装 0 次浏览 更新于 3/16/2026

name: 现代JavaScript模式 description: 掌握ES6+特性，包括异步/等待、解构、展开运算符、箭头函数、Promise、模块、迭代器、生成器，以及函数式编程模式，用于编写干净、高效的JavaScript代码。在重构遗留代码、实现现代模式或优化JavaScript应用时使用。

现代JavaScript模式

全面指南，用于掌握现代JavaScript（ES6+）特性、函数式编程模式以及编写干净、可维护和高性能代码的最佳实践。

何时使用此技能

  • 重构遗留JavaScript到现代语法
  • 实现函数式编程模式
  • 优化JavaScript性能
  • 编写可维护和可读的代码
  • 处理异步操作
  • 构建现代Web应用
  • 从回调迁移到Promise/async-await
  • 实现数据转换管道

ES6+核心特性

箭头函数

// 简洁语法
const add = (a, b) => a + b;
const double = x => x * 2;

// 词法'this'绑定
class Counter {
  constructor() {
    this.count = 0;
  }

  increment = () => {
    this.count++;  // 'this'指Counter实例
  };
}

参见详细模式: 箭头函数与语法

解构

// 对象解构
const { name, email } = user;
const { address: { city } } = user;  // 嵌套

// 数组解构
const [first, second, ...rest] = numbers;
[a, b] = [b, a];  // 交换变量

// 函数参数
function greet({ name, age = 18 }) {
  console.log(`Hello ${name}, you are ${age}`);
}

参见详细模式: 解构模式

展开和剩余运算符

// 展开运算符
const combined = [...arr1, ...arr2];
const settings = { ...defaults, ...userPrefs };

// 剩余参数
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

参见详细模式: 展开与剩余

异步JavaScript

Promise

// 创建Promise
const fetchUser = (id) => {
  return new Promise((resolve, reject) => {
    // 异步操作
    if (success) resolve(data);
    else reject(error);
  });
};

// Promise组合器
Promise.all([p1, p2, p3])      // 所有必须成功
Promise.allSettled([p1, p2])   // 等待所有完成
Promise.race([p1, p2])         // 第一个完成
Promise.any([p1, p2])          // 第一个成功

参见详细模式: Promise与异步

异步/等待

async function fetchUserData(id) {
  try {
    const user = await fetchUser(id);
    const posts = await fetchUserPosts(user.id);
    return { user, posts };
  } catch (error) {
    console.error('错误:', error);
    throw error;
  }
}

// 并行执行
const [user1, user2] = await Promise.all([
  fetchUser(1),
  fetchUser(2)
]);

参见详细模式: 异步/等待模式

函数式编程

数组方法

// 转换、过滤、归约
const names = users.map(u => u.name);
const active = users.filter(u => u.active);
const total = numbers.reduce((sum, n) => sum + n, 0);

// 高级方法
const user = users.find(u => u.id === 2);
const hasActive = users.some(u => u.active);
const allAdults = users.every(u => u.age >= 18);

参见详细模式: 函数式编程

高阶函数

// 柯里化
const multiply = a => b => a * b;
const double = multiply(2);

// 组合
const pipe = (...fns) => x =>
  fns.reduce((acc, fn) => fn(acc), x);

const processUser = pipe(
  trimName,
  lowercaseEmail,
  parseAge
);

参见详细模式: 高阶函数

现代语言特性

模板字面量

const greeting = `Hello, ${name}!`;

const html = `
  <div>
    <h1>${title}</h1>
    <p>${content}</p>
  </div>
`;

// 标记模板
const highlighted = highlight`Name: ${name}, Age: ${age}`;

可选链与空值合并

// 可选链
const city = user?.address?.city;
const result = obj.method?.();

// 空值合并
const value = input ?? 'default';
const name = user?.name ?? 'Anonymous';

参见详细模式: 现代运算符

类和模块

// 现代类语法
class User {
  #password;  // 私有字段
  static count = 0;

  constructor(name) {
    this.name = name;
  }

  get displayName() {
    return this.name.toUpperCase();
  }
}

// ES6模块
export const PI = 3.14159;
export default function multiply(a, b) {
  return a * b;
}

import multiply, { PI } from './math.js';

参见详细模式: 类与模块

迭代器与生成器

// 生成器函数
function* rangeGenerator(from, to) {
  for (let i = from; i <= to; i++) {
    yield i;
  }
}

// 异步生成器
async function* fetchPages(url) {
  let page = 1;
  while (true) {
    const data = await fetch(`${url}?page=${page}`);
    if (data.length === 0) break;
    yield data;
    page++;
  }
}

for await (const page of fetchPages('/api/users')) {
  console.log(page);
}

参见详细模式: 迭代器与生成器

性能优化

// 防抖
function debounce(fn, delay) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn(...args), delay);
  };
}

// 节流
function throttle(fn, limit) {
  let inThrottle;
  return (...args) => {
    if (!inThrottle) {
      fn(...args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

参见详细模式: 性能优化

最佳实践

  1. 默认使用const：仅在需要重新赋值时使用let
  2. 优先使用箭头函数：特别是回调函数
  3. 使用模板字面量：替代字符串拼接
  4. 解构对象和数组：代码更干净
  5. 使用异步/等待：替代Promise链
  6. 避免数据突变：使用展开运算符和数组方法
  7. 使用可选链：防止“无法读取未定义属性”错误
  8. 优先使用数组方法：替代传统循环
  9. 编写纯函数：易于测试和理解
  10. 使用模块：更好的代码组织

常见陷阱

  1. this绑定混淆：使用箭头函数或bind()
  2. 异步/等待无错误处理：始终使用try/catch
  3. 对象突变：使用展开运算符或Object.assign()
  4. 忘记await：异步函数返回Promise
  5. 未处理Promise拒绝：使用catch()或try/catch

资源