巧妙运用JS函数参数形式，让代码更优雅

函数是一段结合在一起执行特定任务的代码，函数一般使用参数与外部进行交互。要编写简洁高效的JS代码，必须掌握函数参数。在本文中，会使用一些有趣的例子来解释JS必须有效地处理函数参数的所有特性。JS函数可利用不同形式的参数来实现功能，包括基本类型、引用类型、默认参数、剩余参数和扩展运算符。本文将一一介绍这些参数类型，并结合实际场景演示如何正确使用它们。

JS函数参数形式详解

1. 基本类型参数

基本类型参数是最简单的参数类型，包括数字、字符串、布尔值等。基本类型参数在函数中传递时，其值会被复制一份，因此函数内部对参数的修改不会影响到函数外部的变量。

function sum(a, b) {
  a += 1;
  b += 1;
  return a + b;
}

let x = 1;
let y = 2;

const result = sum(x, y);

console.log(x); // 1
console.log(y); // 2
console.log(result); // 5

在这个例子中，函数sum接受两个基本类型参数a和b，并在函数内部对它们进行加1操作。但是，由于基本类型参数传递的是值的副本，因此函数内部对a和b的修改不会影响到函数外部的x和y变量。

2. 引用类型参数

引用类型参数是指对象、数组等引用类型的数据。引用类型参数在函数中传递时，其值不会被复制，而是直接传递引用。因此，函数内部对引用类型参数的修改会影响到函数外部的变量。

function changeObject(obj) {
  obj.name = 'John';
}

const person = {
  name: 'Jane',
};

changeObject(person);

console.log(person.name); // 'John'

在这个例子中，函数changeObject接受一个引用类型参数obj，并在函数内部修改了obj的name属性。由于引用类型参数传递的是引用，因此函数内部对obj的修改会影响到函数外部的person对象。

3. 默认参数

默认参数允许函数在调用时不传递参数，此时函数将使用默认值。默认参数可以提高函数的可读性和易用性。

function greet(name = 'World') {
  console.log(`Hello, ${name}!`);
}

greet(); // Hello, World!
greet('John'); // Hello, John!

在这个例子中，函数greet接受一个参数name，并为其指定了默认值'World'。因此，当调用greet()函数时，如果没有传递参数，函数将使用默认值'World'。

4. 剩余参数

剩余参数允许函数接受任意数量的参数。剩余参数必须是函数的最后一个参数，并且必须使用...运算符。剩余参数将所有剩余的参数收集到一个数组中。

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

const result = sumAll(1, 2, 3, 4, 5);

console.log(result); // 15

在这个例子中，函数sumAll接受一个剩余参数...numbers，并将所有剩余的参数收集到一个数组中。然后，函数使用for...of循环对数组中的每个数字进行累加，并返回累加后的结果。

5. 扩展运算符

扩展运算符(...)可以将数组或对象展开为函数的参数。这使得我们可以轻松地将数组或对象中的元素传递给函数。

const numbers = [1, 2, 3, 4, 5];

function sumAll(a, b, c, d, e) {
  return a + b + c + d + e;
}

const result = sumAll(...numbers);

console.log(result); // 15

在这个例子中，函数sumAll接受五个参数，我们可以使用扩展运算符将numbers数组展开为函数的参数。这样，函数就可以直接对数组中的每个元素进行求和。

6. 解构赋值

解构赋值允许我们将函数参数中的对象或数组分解成独立的变量。这使得我们可以更轻松地访问函数参数中的数据。

function greet({ name, age }) {
  console.log(`Hello, ${name}! You are ${age} years old.`);
}

const person = {
  name: 'John',
  age: 30,
};

greet(person); // Hello, John! You are 30 years old.

在这个例子中，函数greet接受一个对象参数，并使用解构赋值将对象中的name和age属性分解成独立的变量。然后，函数使用这些变量来打印出问候语。

巧妙运用JS函数参数形式，让代码更优雅

JS函数参数形式为我们提供了强大的工具，可以让我们编写出简洁高效的代码。通过掌握这些参数形式，我们可以提高函数的可读性、易用性和灵活性。在本文中，我们介绍了JS函数参数形式的六种类型：基本类型参数、引用类型参数、默认参数、剩余参数、扩展运算符和解构赋值。通过这些参数形式，我们可以轻松地处理各种类型的数据，并编写出更优雅的代码。