S06L02 - 函数的参数和实参

html

理解 JavaScript 中的 Function 参数和 Arguments
目录

介绍 .......................................... 1
Function 参数 vs. Arguments ... 3
JavaScript 中的默认参数 ...... 7
处理未定义的参数 ........ 12
使用参数和 Arguments 的最佳实践 ....... 17
结论 ............................................. 22
附加资源 .......................... 24

介绍
在 JavaScript 编程领域，理解 Function 的参数和 Arguments 是基础。Functions 是 JavaScript 应用程序的构建块，使开发者能够编写可重用且高效的代码。本电子书深入探讨了 Function 参数和 Arguments 的复杂性，阐明了它们的角色、区别和最佳实践。无论你是初学者还是具有基础知识的开发者，本指南将增强你对这些概念在项目中的理解和应用。
参数和 Arguments 的重要性
Parameters 和 Arguments 对于定义 Function 如何操作和与数据交互至关重要。它们允许 Functions 接受输入、处理它并返回结果，使你的代码动态且多功能。掌握这些概念可以使代码库更具可读性、可维护性和高效性。
优缺点
优点:

可重用性: Functions 可以使用不同的输入进行重用。
模块化: 代码被组织成可管理的块。
可维护性: 更容易更新和调试。

缺点:

复杂性: 管理不当可能导致错误和未定义的行为。
开销: 过多的参数使用可能使 Functions 笨重。

何时及如何使用参数和 Arguments
每当 Function 需要基于不同的输入执行操作时，都应使用 Parameters 和 Arguments。它们在需要数据处理、用户输入处理和动态响应的场景中特别有用。
对比表: Parameters vs. Arguments


特性
Parameters
Arguments


定义
在 Function 签名中定义的变量。
在调用 Function 时传递的实际值。


使用上下文
在 Function 定义中使用。
在调用/调用 Function 时使用。


示例




		
		
			
			
Java
			
			function greet(name) {}
			
				
					
				
					1
				
						function greet(name) {}
					
				
			
		






		
		
			
			
Java
			
			greet("John");
			
				
					
				
					1
				
						greet("John");
					
				
			
		




灵活性
可以有默认值。
可以根据调用的数量和类型变化。


范围和大小对比表


特性
JavaScript
其他语言 (如 Java, C++)


参数灵活性
高度灵活，允许未定义的参数。
严格，通常要求准确的 Arguments 数量。


默认参数
支持使用默认值。
支持有限，通常需要方法重载。


Arguments 传递
基本类型按值传递，对象按引用传递。
根据类型，常见按值或按引用传递。


Function 参数 vs. Arguments
定义和区别
Parameters 是在 Function 定义中列出的变量，作为 Function 将要操作的值的占位符。另一方面，Arguments 是在调用 Function 时传递的实际值。
示例:




		
		
			
			
Java
			
			
function greet(name) { // 'name' 是一个参数
    console.log("Hello, " + name + "!");
}

greet("John"); // "John" 是一个 argument

			
				
					
				
					1
2
3
4
5
6
7
				
						 
function greet(name) { // 'name' 是一个参数
    console.log("Hello, " + name + "!");
}
 
greet("John"); // "John" 是一个 argument
 
					
				
			
		


在上述示例中，name 是 greet Function 中的一个参数，而 "John" 是在 Function 调用期间提供的参数。
可互换性
虽然在日常对话中 Parameters 和 Arguments 常常被互换使用，但它们在 Function 操作中扮演不同的角色。理解这一区别对于编写清晰有效的代码至关重要。
处理多个参数
Functions 可以接受多个参数，使其能够执行更复杂的操作。
示例:




		
		
			
			
Java
			
			
function introduce(name, topic, experience) {
    console.log(`This is ${name}, we are learning ${topic}, and it’s ${experience}.`);
}

introduce("John", "JavaScript", "fun");

			
				
					
				
					1
2
3
4
5
6
7
				
						 
function introduce(name, topic, experience) {
    console.log(`This is ${name}, we are learning ${topic}, and it’s ${experience}.`);
}
 
introduce("John", "JavaScript", "fun");
 
					
				
			
		


默认参数 vs. 未定义的参数
JavaScript 允许 Functions 拥有默认的参数值，确保即使某些 Arguments 未提供，Function 也能正常运行。
默认参数示例:




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

greet(); // 输出: Hello, Guest!
greet("John"); // 输出: Hello, John!

			
				
					
				
					1
2
3
4
5
6
7
8
				
						 
function greet(name = "Guest") {
    console.log("Hello, " + name + "!");
}
 
greet(); // 输出: Hello, Guest!
greet("John"); // 输出: Hello, John!
 
					
				
			
		


处理未定义的参数:
如果未提供 Arguments，没有默认值的 Parameters 将是 undefined，这可能导致意外的行为。
示例:




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

greet(); // 输出: Hello, undefined!

			
				
					
				
					1
2
3
4
5
6
7
				
						 
function greet(name) {
    console.log("Hello, " + name + "!");
}
 
greet(); // 输出: Hello, undefined!
 
					
				
			
		


JavaScript 中的默认参数
设置默认值
默认参数提供了一种方式，当调用 Function 时如果没有传递 Arguments，就用默认值初始化 Parameters。
示例:




		
		
			
			
Java
			
			
function greet(name = "Chand", topic = "JavaScript", experience = "fun") {
    console.log(`This is ${name}, we are learning ${topic}, and it’s ${experience}.`);
}

greet(); // 输出: This is Chand, we are learning JavaScript, and it’s fun.
greet("Ashley"); // 输出: This is Ashley, we are learning JavaScript, and it’s fun.

			
				
					
				
					1
2
3
4
5
6
7
8
				
						 
function greet(name = "Chand", topic = "JavaScript", experience = "fun") {
    console.log(`This is ${name}, we are learning ${topic}, and it’s ${experience}.`);
}
 
greet(); // 输出: This is Chand, we are learning JavaScript, and it’s fun.
greet("Ashley"); // 输出: This is Ashley, we are learning JavaScript, and it’s fun.
 
					
				
			
		


默认参数的好处

防止未定义的值: 确保 Parameters 有有意义的默认值。
增强功能性: 使 Functions 更加灵活和健壮。
简化 Function 调用: 减少每次传递所有 Arguments 的需要。

示例场景
考虑一个介绍用户的 Function。通过默认参数，Function 可以在缺少某些信息时提供默认值。
示例:




		
		
			
			
Java
			
			
function introduceUser(name = "Andy", topic = "React", experience = "great") {
    console.log(`This is ${name}, we are learning ${topic}, and it’s ${experience}.`);
}

introduceUser("John", "Vue"); // 输出: This is John, we are learning Vue, and it’s great.
introduceUser(); // 输出: This is Andy, we are learning React, and it’s great.

			
				
					
				
					1
2
3
4
5
6
7
8
				
						 
function introduceUser(name = "Andy", topic = "React", experience = "great") {
    console.log(`This is ${name}, we are learning ${topic}, and it’s ${experience}.`);
}
 
introduceUser("John", "Vue"); // 输出: This is John, we are learning Vue, and it’s great.
introduceUser(); // 输出: This is Andy, we are learning React, and it’s great.
 
					
				
			
		


带注释的代码实现




		
		
			
			
Java
			
			
// 带默认参数的 Function
function introduceUser(name = "Andy", topic = "React", experience = "great") {
    // 显示介绍信息
    console.log(`This is ${name}, we are learning ${topic}, and it’s ${experience}.`);
}

// 使用所有 Arguments 调用 Function
introduceUser("John", "Vue", "amazing");
// 输出: This is John, we are learning Vue, and it’s amazing.

// 缺少部分 Arguments 调用 Function
introduceUser("John", "Vue");
// 输出: This is John, we are learning Vue, and it’s great.

// 不传递任何 Arguments 调用 Function
introduceUser();
// 输出: This is Andy, we are learning React, and it’s great.

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
				
						 
// 带默认参数的 Function
function introduceUser(name = "Andy", topic = "React", experience = "great") {
    // 显示介绍信息
    console.log(`This is ${name}, we are learning ${topic}, and it’s ${experience}.`);
}
 
// 使用所有 Arguments 调用 Function
introduceUser("John", "Vue", "amazing");
// 输出: This is John, we are learning Vue, and it’s amazing.
 
// 缺少部分 Arguments 调用 Function
introduceUser("John", "Vue");
// 输出: This is John, we are learning Vue, and it’s great.
 
// 不传递任何 Arguments 调用 Function
introduceUser();
// 输出: This is Andy, we are learning React, and it’s great.
 
					
				
			
		


逐步解释

Function 定义:

introduceUser 定义了三个 Parameters: name, topic, 和 experience。
每个 Parameter 有一个默认值: "Andy", "React", 和 "great"。


Function 调用:

当所有 Arguments 提供时，Function 使用它们来构建消息。
如果某些 Arguments 缺失，Function 使用默认值。
如果没有提供任何 Arguments，所有 Parameters 都使用默认值。



处理未定义的参数
未定义值的问题
当调用 Function 时，如果没有提供所有必要的 Arguments，缺失的 Parameters 将是 undefined。如果处理不当，这可能导致运行时错误或意外的行为。
示例:




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

displayInfo("John"); // 输出: John is undefined years old.

			
				
					
				
					1
2
3
4
5
6
7
				
						 
function displayInfo(name, age) {
    console.log(`${name} is ${age} years old.`);
}
 
displayInfo("John"); // 输出: John is undefined years old.
 
					
				
			
		


保护 Functions 免受未定义 Parameters 的影响
为了防止 undefined Parameters 引发的问题，你可以使用默认参数、条件检查或 Parameter 解构。
使用默认参数
如前所述，默认参数提供了一种简便的方法来处理 undefined 值。
示例:




		
		
			
			
Java
			
			
function displayInfo(name = "Unknown", age = "N/A") {
    console.log(`${name} is ${age} years old.`);
}

displayInfo("John"); // 输出: John is N/A years old.
displayInfo(); // 输出: Unknown is N/A years old.

			
				
					
				
					1
2
3
4
5
6
7
8
				
						 
function displayInfo(name = "Unknown", age = "N/A") {
    console.log(`${name} is ${age} years old.`);
}
 
displayInfo("John"); // 输出: John is N/A years old.
displayInfo(); // 输出: Unknown is N/A years old.
 
					
				
			
		


在 Functions 内部进行条件检查
你也可以在 Function 主体内检查 Parameter 是否为 undefined，并赋予默认值。
示例:




		
		
			
			
Java
			
			
function displayInfo(name, age) {
    name = name || "Unknown";
    age = age || "N/A";
    console.log(`${name} is ${age} years old.`);
}

displayInfo("John"); // 输出: John is N/A years old.
displayInfo(); // 输出: Unknown is N/A years old.

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
				
						 
function displayInfo(name, age) {
    name = name || "Unknown";
    age = age || "N/A";
    console.log(`${name} is ${age} years old.`);
}
 
displayInfo("John"); // 输出: John is N/A years old.
displayInfo(); // 输出: Unknown is N/A years old.
 
					
				
			
		


带默认值的 Parameter 解构
对于接受对象作为参数的 Functions，使用带默认值的解构提供了一种简洁的方法。
示例:




		
		
			
			
Java
			
			
function displayInfo({ name = "Unknown", age = "N/A" } = {}) {
    console.log(`${name} is ${age} years old.`);
}

displayInfo({ name: "John" }); // 输出: John is N/A years old.
displayInfo(); // 输出: Unknown is N/A years old.

			
				
					
				
					1
2
3
4
5
6
7
8
				
						 
function displayInfo({ name = "Unknown", age = "N/A" } = {}) {
    console.log(`${name} is ${age} years old.`);
}
 
displayInfo({ name: "John" }); // 输出: John is N/A years old.
displayInfo(); // 输出: Unknown is N/A years old.
 
					
				
			
		


实际应用
在实际应用中，处理 undefined Parameters 至关重要，因为 Functions 可能会接收不同数量的数据。确保稳健的参数处理可以增强应用程序的可靠性和用户体验。
使用参数和 Arguments 的最佳实践
1. 使用有意义的 Parameter 名称
为 Parameters 选择描述性的名称，以使代码更具可读性和可维护性。
示例:




		
		
			
			
Java
			
			
function calculateTotal(price, quantity) { ... }

			
				
					
				
					1
2
3
				
						 
function calculateTotal(price, quantity) { ... }
 
					
				
			
		


2. 利用默认参数
使用默认参数以优雅地处理缺失的 Arguments 并提供回退值。
示例:




		
		
			
			
Java
			
			
function greet(name = "Guest") { ... }

			
				
					
				
					1
2
3
				
						 
function greet(name = "Guest") { ... }
 
					
				
			
		


3. 避免过多的 Parameters
限制 Parameters 的数量，以保持 Functions 简单和专注。如果一个 Function 需要许多 Parameters，考虑使用对象来分组相关数据。
示例:




		
		
			
			
Java
			
			
function createUser({ name, age, email }) { ... }

			
				
					
				
					1
2
3
				
						 
function createUser({ name, age, email }) { ... }
 
					
				
			
		


4. 验证 Parameters
确保 Parameters 满足预期的标准，如类型和数值范围，以防止错误并维护数据完整性。
示例:




		
		
			
			
Java
			
			
function setAge(age) {
    if (typeof age !== 'number' || age &lt; 0) {
        throw new Error("Invalid age provided.");
    }
    // 使用有效的 age
}

			
				
					
				
					1
2
3
4
5
6
7
8
				
						 
function setAge(age) {
    if (typeof age !== 'number' || age &lt; 0) {
        throw new Error("Invalid age provided.");
    }
    // 使用有效的 age
}
 
					
				
			
		


5. 文档化 Function Parameters
为 Functions 提供清晰的文档，说明每个 Parameter 的用途和预期值。
示例:




		
		
			
			
Java
			
			
/**
 * 计算总价格。
 * @param {number} price - 单个项目的价格。
 * @param {number} quantity - 项目的数量。
 * @returns {number} - 总价格。
 */
function calculateTotal(price, quantity) { ... }

			
				
					
				
					1
2
3
4
5
6
7
8
9
				
						 
/**
 * 计算总价格。
 * @param {number} price - 单个项目的价格。
 * @param {number} quantity - 项目的数量。
 * @returns {number} - 总价格。
 */
function calculateTotal(price, quantity) { ... }
 
					
				
			
		


6. 使用剩余参数处理可变的 Arguments
当 Function 需要接收不定数量的 Arguments 时，使用剩余参数高效地处理它们。
示例:




		
		
			
			
Java
			
			
function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

sum(1, 2, 3, 4); // 输出: 10

			
				
					
				
					1
2
3
4
5
6
7
				
						 
function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}
 
sum(1, 2, 3, 4); // 输出: 10
 
					
				
			
		


7. 保持 Parameter 顺序一致
确保 Function 调用中的 Parameters 顺序与定义中的顺序匹配，以防止意外的行为。
示例:




		
		
			
			
Java
			
			
function registerUser(username, email, password) { ... }

// 正确
registerUser("john_doe", "john@example.com", "securePassword");

// 错误
registerUser("securePassword", "john_doe", "john@example.com"); // 导致错误

			
				
					
				
					1
2
3
4
5
6
7
8
9
				
						 
function registerUser(username, email, password) { ... }
 
// 正确
registerUser("john_doe", "[email protected]", "securePassword");
 
// 错误
registerUser("securePassword", "john_doe", "[email protected]"); // 导致错误
 
					
				
			
		


8. 使用解构提高可读性
在 Function Parameters 中解构对象以提高代码的清晰度并减少复杂性。
示例:




		
		
			
			
Java
			
			
function displayUser({ name, email }) {
    console.log(`Name: ${name}, Email: ${email}`);
}

const user = { name: "John", email: "john@example.com" };
displayUser(user);

			
				
					
				
					1
2
3
4
5
6
7
8
				
						 
function displayUser({ name, email }) {
    console.log(`Name: ${name}, Email: ${email}`);
}
 
const user = { name: "John", email: "[email protected]" };
displayUser(user);
 
					
				
			
		


9. 实现 Parameter 验证库
对于较大的项目，考虑使用像 Joi 或 Yup 这样的库来验证 Function Parameters，确保一致性和可靠性。
使用 Joi 的示例:




		
		
			
			
Java
			
			
const Joi = require('joi');

const schema = Joi.object({
    name: Joi.string().min(3).required(),
    age: Joi.number().integer().min(0)
});

function createUser(data) {
    const { error, value } = schema.validate(data);
    if (error) {
        throw new Error(error.details[0].message);
    }
    // 使用经过验证的数据
}

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
				
						 
const Joi = require('joi');
 
const schema = Joi.object({
    name: Joi.string().min(3).required(),
    age: Joi.number().integer().min(0)
});
 
function createUser(data) {
    const { error, value } = schema.validate(data);
    if (error) {
        throw new Error(error.details[0].message);
    }
    // 使用经过验证的数据
}
 
					
				
			
		


10. 必要时重构
定期审查和重构 Functions 以优化 Parameter 的使用，提升性能和可维护性。
示例:
重构前:




		
		
			
			
Java
			
			
function updateProfile(name, email, phone, address, city, state, zip) { ... }

			
				
					
				
					1
2
3
				
						 
function updateProfile(name, email, phone, address, city, state, zip) { ... }
 
					
				
			
		


重构后:




		
		
			
			
Java
			
			
function updateProfile({ name, email, phone, address, city, state, zip }) { ... }

			
				
					
				
					1
2
3
				
						 
function updateProfile({ name, email, phone, address, city, state, zip }) { ... }
 
					
				
			
		


结论
掌握 Function 的参数和 Arguments 对于编写高效且可维护的 JavaScript 代码至关重要。通过理解 Parameters 和 Arguments 之间的区别，利用默认值，处理未定义的参数，并遵循最佳实践，开发者可以创建多功能且健壮的 Functions。本电子书涵盖了基础概念、实际应用和高级技术，助力你在 JavaScript 旅程中更上一层楼。采用这些策略提升你的编码能力，构建更具韧性的应用程序。
SEO 关键词: JavaScript function parameters, JavaScript arguments, default parameters, handling undefined parameters, function best practices, JavaScript programming, beginner JavaScript, JavaScript tutorial, function syntax, JavaScript coding tips
附加资源

MDN Web Docs: Functions
JavaScript Info: Functions
Eloquent JavaScript: Functions
You Don't Know JS: Scope & Closures
JavaScript Tutorial on W3Schools

本文由 AI 生成。
特性	JavaScript	其他语言 (如 Java, C++)
参数灵活性	高度灵活，允许未定义的参数。	严格，通常要求准确的 Arguments 数量。
默认参数	支持使用默认值。	支持有限，通常需要方法重载。
Arguments 传递	基本类型按值传递，对象按引用传递。	根据类型，常见按值或按引用传递。