在 JavaScript 中，参数传递的方式可以分为基本类型的传值和复杂类型的引用传递。根据使用场景和需求，不同的参数传递方式可能会有所差异。以下是系统且结构化的总结。

1. 按值传递（Pass by Value）

1.1 概念

基本类型（如 number, string, boolean, null, undefined, symbol, bigint）的值在传递时，函数内部会复制一份值副本。修改函数内部的参数值不会影响原始变量。

1.2 示例

function modifyValue(val) {

val = 10; // 修改的是副本

}

let num = 5;

modifyValue(num);

console.log(num); // 输出：5

1.3 特点

原变量的值保持不变。使用的内存较小。

2. 按引用传递（Pass by Reference）

2.1 概念

对象类型（如 Object, Array, Function）在传递时，会将其引用传递到函数。函数内部对参数的修改会直接影响原始变量。

2.2 示例

function modifyObject(obj) {

obj.name = 'Modified'; // 修改的是引用

}

let person = { name: 'Original' };

modifyObject(person);

console.log(person.name); // 输出：Modified

2.3 特点

函数参数直接指向内存中的同一对象。适合操作复杂数据结构，但容易产生副作用。

3. 参数解构传递

3.1 解构赋值

参数可以通过解构方式单独传递，适用于对象和数组。

对象解构

function printName({ firstName, lastName }) {

console.log(`First Name: ${firstName}, Last Name: ${lastName}`);

}

let user = { firstName: 'John', lastName: 'Doe' };

printName(user);

数组解构

function printCoordinates([x, y]) {

console.log(`X: ${x}, Y: ${y}`);

}

let coordinates = [10, 20];

printCoordinates(coordinates);

3.2 特点

提高代码可读性。只传递需要的部分数据。

4. Rest 参数传递

4.1 概念

rest 参数允许将不确定数量的参数收集到一个数组中。

4.2 示例

function sum(...nums) {

return nums.reduce((acc, cur) => acc + cur, 0);

}

console.log(sum(1, 2, 3, 4)); // 输出：10

4.3 特点

用于可变参数函数。替代传统的 arguments 对象。

5. 回调函数传递

5.1 概念

通过函数作为参数进行传递，可以动态决定执行逻辑。

5.2 示例

function processArray(arr, callback) {

return arr.map(callback);

}

let result = processArray([1, 2, 3], num => num * 2);

console.log(result); // 输出：[2, 4, 6]

5.3 特点

适合处理异步操作或动态逻辑。提高代码复用性。

6. 闭包传递

6.1 概念

在闭包环境中，变量通过词法作用域被捕获并传递。

6.2 示例

function createMultiplier(factor) {

return function (num) {

return num * factor;

};

}

let double = createMultiplier(2);

console.log(double(5)); // 输出：10

6.3 特点

保持上下文环境的数据。避免全局变量污染。

7. 模板字符串传递

7.1 概念

参数可以通过模板字符串内嵌动态传递。

7.2 示例

function greet(name) {

console.log(`Hello, ${name}!`);

}

greet('Alice'); // 输出：Hello, Alice!

7.3 特点

易于拼接字符串和动态内容。

8. 高阶函数传递

8.1 概念

将一个函数作为参数传递给另一个函数，并在后者中使用或返回。

8.2 示例

function higherOrderFunction(fn) {

console.log(fn());

}

higherOrderFunction(() => 'I am a function'); // 输出：I am a function

8.3 特点

用于函数式编程。提高代码灵活性。

9. 事件监听器中的参数传递

9.1 绑定事件时传递数据

通过闭包或绑定方式向事件回调函数中传递参数。

9.2 示例

使用闭包传参：

let button = document.querySelector('button');

button.addEventListener('click', () => handleClick('Button clicked'));

function handleClick(message) {

console.log(message);

}

使用 bind 方法：

button.addEventListener('click', handleClick.bind(null, 'Button clicked'));

总结

方式特点适用场景按值传递副本独立，修改不影响原值。基本类型变量传递。按引用传递直接操作原对象，修改影响原值。复杂数据类型操作。参数解构传递提高代码可读性，只提取需要的数据。对象或数组参数较大时。Rest 参数传递收集不定数量参数为数组。需要动态处理多个参数时。回调函数传递函数动态传递逻辑。异步操作、动态逻辑控制。闭包传递捕获上下文变量传递。数据需要保留上下文时。模板字符串传递动态拼接数据。动态文本或字符串的操作。高阶函数传递提供动态行为，提升代码灵活性。函数式编程或逻辑分离场景。事件监听器传参通过闭包或绑定方法将参数传递到事件回调中。DOM 事件处理时。

参考文档

MDN: Function ParametersMDN: Rest ParametersMDN: EventTarget.addEventListener