JavaScript 中传递参数的方式

目录

• 1. 按值传递（Pass by Value）
• 1.1 概念
• 1.2 示例
• 1.3 特点
• 2. 按引用传递（Pass by Reference）
• 2.1 概念
• 2.2 示例
• 2.3 特点
• 3. 参数解构传递
• 3.1 解构赋值
• 3.2 特点
• 4. Rest 参数传递
• 4.1 概念
• 4.2 示例
• 4.3 特点
• 5. 回调函数传递
• 5.1 概念
• 5.2 示例
• 5.3 特点
• 6. 闭包传递
• 6.1 概念
• 6.2 示例
• 6.3 特点
• 7. 模板字符串传递
• 7.1 概念
• 7.2 示例
• 7.3 特点
• 8. 高阶函数传递
• 8.1 概念
• 8.2 示例
• 8.3 特点
• 9. 事件监听器中的参数传递
• 9.1 绑定事件时传递数据
• 9.2 示例
• 总结
• 参考文档

在 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'));

总结

参考文档

• MDN: Function Parameters
• MDN: Rest Parameters
• MDN: EventTarget.addEventListener

到此这篇关于JavaScript 中传递参数的方式的文章就介绍到这了,更多相关js传递参数内容请搜索科站长以前的文章或继续浏览下面的相关文章希望大家以后多多支持科站长！