《JavaScript 中如何传递和接收参数？有哪些方法及适用场景？》
在 JavaScript 开发中，参数传递是函数交互的核心机制，当我们需要处理用户输入、配置化功能或模块化开发时，如何灵活运用参数方法直接影响代码的可维护性和扩展性，本文将系统梳理 9 种主流参数使用方法，并附上实战案例和选择建议。
基础参数传递方法
普通函数参数（Positional Parameters）
function sum(a, b) {
return a + b;
}
sum(3, 5); // 8
特点：按顺序传递，默认值需在定义时指定（ES6+）
误区：实参数量不足时剩余参数会形成 arguments 对象
可选参数（Optional Parameters）
function logInfo(message, level = 'INFO') {
console.log(`[${level}] ${message}`);
}
logInfo('Error'); // [INFO] Error
适用场景：配置化日志输出、默认行为设置
副作用参数（Side Effects Parameters）
function updateUI(data, DOMElement) {
DOMElement.textContent = data;
}
updateUI('Hello', document.getElementById('output'));
特点：显式指定参数影响外部状态，适合 UI 组件
高级参数机制
4. 事件处理参数（Event Arguments）
button.addEventListener('click', (e) => {
const target = e.target;
if (target.matches('.btn')) {
const value = e.target.dataset.value;
console.log(value);
}
});
关键点：通过 event 对象传递上下文信息（如 event.target）
URL 参数解析（URL Query String）
const urlParams = new URLSearchParams(window.location.search);
const filter = urlParams.get('category');
适用场景：动态路由参数、表单提交后端参数传递
存储参数（Storage APIs）
// localStorage
localStorage.setItem('user', JSON.stringify({ id: 123 }));
// sessionStorage
sessionStorage.setItem('tempData', 'value');
特点：持久化存储，适合跨页面参数传递
7. 模块化参数（ES6 Modules）
```javascript
// src/config.js
export const API_KEY = 'abc123';
// src/app.js
import { API_KEY } from './config';
console.log(API_KEY);
优势：严格模块边界，提升大型项目可维护性
Promise 参数（异步上下文）
fetch('/api/data')
.then(response => response.json())
.then(data => {
const { param1, param2 } = data;
processParameters(param1, param2);
});
适用场景：前后端分离架构中的参数传递
原型链参数（Object Prototypes）
function Person(name) {
this.name = name;
}
Person.prototype.getDetails = function() {
return { name: this.name, age: this.age };
};
特点：通过原型继承传递上下文参数
三、参数选择决策树
1. 简单场景 → 普通函数参数
2. 配置需求 → 可选参数 + URL 参数
3. 大型项目 → 模块化 + 地方存储
4. 异步交互 → Promise + Context API
5. UI 组件 → 副作用参数 + 事件委托
四、常见误区与解决方案
1. 闭包参数陷阱：
```javascript
function createCounter() {
let count = 0;
return {
increment: function() { count++; },
decrement: function() { count--; }
};
}
const counter = createCounter();
counter.increment(); // 1
counter.decrement(); // 0
console.log(counter.count); // 报错：count is not defined
解决方案：使用立即执行函数（IIFE）或箭头函数
可选参数默认值问题：function calculate(a, b = a * 2) {
return a + b;
}
calculate(3); // 9（正确）
calculate(3, null); // 3（预期3+0）
解决方案：使用默认值函数（ES2020+）
function calculate(a, b = () => a * 2) {
return a + b();
}
前沿参数实践
Context API（React 框架）
const themeContext = createContext({
theme: 'light',
toggleTheme: () => {}
});
适用场景：跨组件状态传递
Optional Chaining（ES2020+）
const user = { name: 'Alice', age: 25 };
console.log(user?.address?.street); // 避免属性不存在报错
选择参数方法时应考虑：
系统规模（小型项目 vs 企业级应用）
状态持久化需求
异步交互场景
组件化架构
可维护性要求
建议新手从普通参数和可选参数入手,随着项目复杂度增加逐步引入模块化、Context API 等高级机制，定期重构参数传递方式，保持代码简洁性和可测试性。
（全文约 1500 字，包含 12 个代码示例和 5 个决策建议）