JavaScript - 函数参数

欢迎，有抱负的程序员们！今天，我们将深入探索JavaScript函数参数的精彩世界。作为你友好的计算机老师邻居，我在这里引导你了解这个重要的话题。所以，拿起你最喜欢的饮料，舒服地坐好，让我们一起踏上这个编程冒险之旅！

JavaScript - Function Parameters

函数参数和实参

让我们从基础开始。在JavaScript中，函数就像执行特定任务的小机器。有时，这些机器需要输入才能正确执行任务。这就是参数的用武之地！

参数是什么？

参数是函数声明中列出的变量。它们作为将要传递给函数的值的占位符。

让我们看一个简单的例子：

function greet(name) {
console.log("Hello, " + name + "!");
}

greet("Alice");

在这个例子中，name 是参数。当我们用 greet("Alice") 调用函数时，"Alice" 是实参。然后函数使用这个实参来个性化问候。

多个参数

函数可以有多个参数。让我们扩展我们的问候函数：

function greet(name, time) {
console.log("Good " + time + ", " + name + "!");
}

greet("Bob", "morning");

在这里，我们有两个参数：name 和 time。调用函数时，我们按照参数定义的顺序提供两个实参。

默认参数

有时，你可能想要为参数设置一个默认值。这在你希望函数在没有提供实参的情况下也能工作时很有用：

function greet(name = "friend") {
console.log("Hello, " + name + "!");
}

greet(); // 输出：Hello, friend!
greet("Charlie"); // 输出：Hello, Charlie!

在这种情况下，如果 name 没有提供实参，它默认为 "friend"。

Arguments 对象

现在，让我们谈谈一些更高级的内容：arguments 对象。这是一个在所有函数内可用的局部变量。它包含一个类似数组的对象，包含了传递给函数的实参。

function sumAll() {
let total = 0;
for (let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}

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

这个函数可以接受任何数量的实参并将它们全部相加。很酷吧？

按值传递实参

在JavaScript中，当你将原始数据类型（如数字、字符串或布尔值）传递给函数时，它们是按值传递的。这意味着函数接收的是值的副本，而不是原始变量。

function changeValue(x) {
x = 5;
console.log("函数内部： " + x);
}

let num = 10;
console.log("调用函数前： " + num);
changeValue(num);
console.log("调用函数后： " + num);

输出：

调用函数前： 10
函数内部： 5
调用函数后： 10

如你所见，函数内部改变 x 并不会影响原始的 num 变量。

按引用传递实参

另一方面，对象是按引用传递的。这意味着如果你在函数内部改变了对象，原始对象也会被改变。

function changeName(person) {
person.name = "Jane";
console.log("函数内部： " + person.name);
}

let myPerson = {name: "John"};
console.log("调用函数前： " + myPerson.name);
changeName(myPerson);
console.log("调用函数后： " + myPerson.name);

输出：

调用函数前： John
函数内部： Jane
调用函数后： Jane

在这里，函数内部改变 name 属性会影响原始的 myPerson 对象。

一句话提醒

这种行为既强大又危险。它允许你有效地修改复杂的数据结构，但如果不够小心，也可能导致意外的副作用。始终注意你是在处理原始数据类型还是对象！

一切结合

让我们用一个有趣的例子来总结，这个例子结合了我们学到的几个概念：

function createSuperHero(name, power = "flying", weaknesses) {
let hero = {
name: name,
power: power,
weaknesses: []
};

for (let i = 2; i < arguments.length; i++) {
hero.weaknesses.push(arguments[i]);
}

return hero;
}

let myHero = createSuperHero("Captain Awesome", "super strength", "kryptonite", "public speaking");
console.log(myHero);

这个函数创建一个超级英雄对象。它使用默认参数、arguments 对象，并且处理原始数据类型和对象。尝试运行它，看看你会得到什么！

结论

恭喜你！你刚刚通过掌握函数参数提升了你的JavaScript技能。记住，熟能生巧，所以不要害怕在你的代码中尝试这些概念。

下面是我们覆盖的方法的快速参考表：

方法	描述
基本参数	`function name(param1, param2) {...}`
默认参数	`function name(param = defaultValue) {...}`
Arguments 对象	`arguments[i]` 来访问实参
按值传递	适用于原始数据类型（数字、字符串、布尔值）
按引用传递	适用于对象和数组

快乐编码，愿你的函数永远无bug！

Credits: Image by storyset