JavaScript 传参的 6 种方式总结

前言

JavaScript 是一门具有高度灵活性的编程语言，其参数传递机制同样体现了这一特点。本文将深入探讨 JavaScript 中参数传递的各种方式，并辅以相关示例和详细解释，帮助读者全面理解这一核心概念。

1. 传递基本类型参数

在 JavaScript 中，基本数据类型（如字符串、数字、布尔值等）采用值传递机制。这意味着，当把基本类型的值作为参数传入函数时，函数内部获得的是该值的一个副本，而非原始值本身。对副本的修改不会影响原始变量。

以下代码展示了这一机制：

function updateName(name) {
  name = "John";
}

let myName = "Jane";
updateName(myName);
console.log(myName); // 输出 "Jane"

在上述示例中，定义了函数 updateName 接收参数 name。调用时传入变量 myName，函数内部创建名为 name 的局部变量副本，并将其赋值为 "John"。由于是值传递，外部变量 myName 的值保持为 "Jane" 不变。这种行为在某种程度上类似于浅拷贝的效果。

2. 传递对象类型参数

当传递对象作为函数参数时，JavaScript 传递的是该对象的引用（内存地址）。因此，如果在函数内部修改了对象的属性，这些修改会直接反映到原始对象上。

示例代码如下：

function updatePerson(person) {
  person.name = "John";
}

let myPerson = { name: "Jane" };
updatePerson(myPerson);
console.log(myPerson.name); // 输出 "John"

在此示例中，函数 updatePerson 接收参数 person。传入 myPerson 对象后，函数内部获得的是该对象的引用。因此，当在函数内修改 person.name 属性时，外部 myPerson 对象的 name 属性也会随之改变。

需要注意的是，如果在函数内部对参数变量重新赋值（即指向新对象），则不会影响到原始对象。例如：

function updatePerson(person) {
  person = { name: "John" };
}

let myPerson = { name: "Jane" };
updatePerson(myPerson);
console.log(myPerson.name); // 输出 "Jane"

在上述代码中，函数内部将 person 参数重新指向一个新对象 { name: "John" }。此时，person 指向新的内存地址，而外部的 myPerson 仍指向原始对象，因此 myPerson.name 的值保持为 "Jane" 不变。

3. 使用解构赋值传递参数

ES6 引入了解构赋值语法，允许在函数参数中直接解构对象或数组。这种方式可以方便地从复杂数据结构中提取特定值，并作为独立参数传递给函数逻辑。

示例如下：

function printPerson({ name, age }) {
  console.log(`${name} is ${age} years old.`);
}

let myPerson = { name: "Jane", age: 25 };
printPerson(myPerson);

在此示例中，函数 printPerson 接收一个对象参数，并通过解构语法直接提取 name 和 age 属性。调用时传入 myPerson 对象，函数内部会自动获取这两个属性的值并打印输出。

需要注意的是，如果传入的对象缺少被解构的属性（如 name 或 age），函数执行可能会出错或得到 undefined 值。因此，调用前应确保对象包含所需的属性，或提供默认值。

4. 使用展开运算符传递参数

ES6 中的展开运算符（...）允许将数组或对象中的元素展开为独立的参数列表。这使得处理不定长参数或批量传递数据变得非常简便。

示例代码如下：

function printNames(name1, name2, name3) {
  console.log(`${name1}, ${name2}, and ${name3} are friends.`);
}

let names = ["John", "Jane", "Jim"];
printNames(...names);

在此示例中，函数 printNames 定义接收三个独立参数。调用时，使用展开运算符将 names 数组展开，数组中的三个元素分别对应赋值给 name1、name2 和 name3 参数。

需要注意的是，如果数组中的元素数量少于函数定义的参数数量，未赋值的参数将为 undefined，可能导致函数逻辑异常。因此，应确保数组包含足够的元素以匹配参数需求。

5. 使用可选参数

JavaScript 支持可选参数，即在定义函数时指定默认值。如果调用函数时省略该参数，系统将使用默认值；否则使用传入的值。

示例如下：

function sayHello(name, greeting = "Hello") {
  console.log(`${greeting}, ${name}!`);
}

sayHello("John"); // 输出 "Hello, John!"
sayHello("Jane", "Hi"); // 输出 "Hi, Jane!"

在此示例中，函数 sayHello 接收 name 和 greeting 两个参数，其中 greeting 具有默认值 "Hello"。调用时若省略 greeting，则使用默认值 "Hello"；若传入 "Hi"，则使用传入值。

需要注意的是，可选参数必须定义在函数参数列表的末尾。如果可选参数后还有必需参数，会导致语法错误或逻辑混乱。

6. 使用剩余参数

JavaScript 支持剩余参数语法（...），允许函数接收任意数量的参数，并将它们收集到一个数组中。这是 ES6 引入的重要特性，极大地增强了函数处理不定长参数的能力。

示例代码如下：

function sum(...numbers) {
  let total = 0;
  for (let number of numbers) {
    total += number;
  }
  return total;
}

console.log(sum(1, 2, 3)); // 输出 6
console.log(sum(4, 5, 6, 7)); // 输出 22

在此示例中，函数 sum 使用剩余参数 numbers 接收任意数量的数值。调用时，所有传入的参数被收集到 numbers 数组中，函数内部遍历该数组计算总和并返回结果。

需要注意的是，剩余参数必须定义在函数参数列表的最后。在剩余参数之前可以存在其他普通参数，但剩余参数之后不能再定义其他参数。

总结

JavaScript 提供了灵活多样的参数传递机制，包括基本类型值传递、对象引用传递、解构赋值、展开运算符、可选参数和剩余参数。开发者应根据具体业务场景选择合适的传参方式。特别需要注意的是，传递对象类型参数时，函数内部可能修改原始对象，从而产生副作用。因此，在编写函数时，应避免意外修改传入的对象；如需修改，建议先创建对象的副本再进行操作。

到此这篇关于 JavaScript 传参的 6 种方式的文章就介绍到这了，更多相关 JS 传参方式内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！