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 事件处理时。