如何利用现代JavaScript特性大幅减少样板代码？

利用现代JavaScript特性（ES6+）减少样板代码的核心方法包括解构赋值、箭头函数、默认参数、扩展运算符及模块化与类语法，通过合理组合可显著提升代码简洁性与可读性。

解构赋值允许直接从对象或数组中提取值并映射到变量，避免冗长的中间步骤。

• 对象解构：直接提取对象属性，尤其适用于函数参数中的配置项。// 传统方式：需逐个访问属性function init(options) { const host = options.host; const port = options.port; // ...}// 解构赋值：直接映射function init({ host, port }) { /* ... */ }
• 数组解构：简化索引访问或变量交换。// 交换变量let a = 1, b = 2;[a, b] = [b, a]; // 无需临时变量// 忽略部分返回值const [first, , third] = [1, 2, 3]; // first=1, third=3

箭头函数通过更短的语法和固定的this绑定，减少回调函数的冗余代码。

• 简化回调：在map、filter、setTimeout等场景中替代传统函数。// 传统写法users.map(function(user) { return user.name; });// 箭头函数users.map(user => user.name);
• 单表达式隐式返回：省略return和大括号。const double = x => x * 2; // 直接返回结果
• 注意：箭头函数不适合需要动态this的场景（如对象方法）。

默认参数和扩展运算符（...）可替代手动条件判断和数组操作，提升灵活性。

• 默认参数：为函数参数设置默认值，避免防御性代码。// 传统方式：需手动检查undefinedfunction connect(url, timeout) { timeout = timeout || 5000; // ...}// 默认参数function connect(url, timeout = 5000) { /* ... */ }
• 扩展运算符：合并对象或收集参数。// 合并对象（浅拷贝）const defaults = { host: 'localhost' };const userOptions = { port: 8080 };const config = { ...defaults, ...userOptions }; // { host: 'localhost', port: 8080 }// 收集参数为数组function log(...messages) { messages.forEach(m => console.log(m));}log('Error', 'Warning'); // 输出两行

模块化与类语法使代码封装更清晰，减少全局变量依赖。

• 模块化：通过export/import管理依赖关系。// 导出函数（utils.js）export const validateEmail = email => /^[^s@]+@[^s@]+.[^s@]+$/.test(email);// 按需导入（main.js）import { validateEmail } from './utils';
• 类语法：替代原型继承，简化对象封装。class ApiClient { constructor(base) { this.base = base; } fetch(endpoint) { return fetch(`${this.base}/${endpoint}`); }}const client = new ApiClient('
  https://api.example.com'
  );

合理组合上述特性可使代码更贴近业务逻辑，而非实现细节。

• 示例：配置初始化与数据处理// 传统方式：冗长且易出错function initConfig(options) { const defaults = { timeout: 5000, retries: 3 }; const config = {}; config.timeout = options.timeout !== undefined ? options.timeout : defaults.timeout; config.retries = options.retries !== undefined ? options.retries : defaults.retries; return config;}// 现代写法：解构 + 默认参数 + 扩展运算符function initConfig({ timeout = 5000, retries = 3 } = {}) { return { timeout, retries };}// 或合并默认对象const mergeConfig = (userOptions = {}) => ({ ...{ timeout: 5000, retries: 3 }, ...userOptions });

通过解构赋值简化数据提取、箭头函数缩短回调、默认参数与扩展运算符减少冗余检查、模块化与类语法提升组织性，现代JavaScript特性可显著减少样板代码。关键点在于根据场景选择合适特性，并注重代码的“意图表达”而非底层实现，从而提升可读性与健壮性。