4.1 函数参数
JavaScript 中的函数参数允许将值传递给函数进行处理。这样可以让函数更加灵活和适应性强。在这个主题中，我们将讨论 JavaScript 中使用函数参数的基本方面，不包括默认参数和剩余参数。
参数在函数名后用圆括号指定。调用函数时，这些参数的值将传递到函数内部的相应变量。
例子：
在 greet() 函数中定义了两个参数：name 和 age。调用函数时，值 Alice 和 30 被传递给这些参数。
function greet(name, age) {
return `Hello, ${name}! You are ${age} years old.`;
}
console.log(greet('Alice', 30)); // "Hello, Alice! You are 30 years old."
处理未定义的参数
如果函数调用时没有传递参数，其值将是 undefined。如果对不支持 undefined 的参数执行操作，可能会导致错误。
例子：
在函数 greet() 中检查是否传入参数 name。如果没有，使用字符串 Guest。
function greet(name) {
if (name === undefined) {
return 'Hello, Guest!';
}
return `Hello, ${name}!`;
}
console.log(greet()); // "Hello, Guest!"
console.log(greet('Bob')); // "Hello, Bob!"
4.2 默认参数
默认参数 允许设置在函数调用时未传递参数或传递为 undefined 时将使用的值。这对于创建具有可选参数的函数特别有用。
语法：
function name (arg1 = value1, arg2 = value2) {
// function body
}
示例 1: 简单的具有默认参数的函数
在这个例子中，函数 greet() 具有默认值为 Guest 的参数 name。如果没有传入参数，将使用默认值。
function greet(name = 'Guest') {
return `Hello, ${name}!`;
}
console.log(greet('Alice')); // 结果: Hello, Alice!
console.log(greet()); // 结果: Hello, Guest!
示例 2: 含有表达式的默认参数
在这个例子中，参数 tax 默认计算为 price 的 20%，如果没有传递其他参数。
function calculatePrice(price, tax = price * 0.2) {
return price + tax;
}
console.log(calculatePrice(100)); // 结果: 120
console.log(calculatePrice(100, 15)); // 结果: 115
示例 3: 依赖于其他参数的默认参数
在这个例子中，默认参数允许创建具有预定义角色和状态的用户。
function createUser(name, role = 'user', isActive = true) {
return { name, role, isActive };
}
console.log(createUser('Alice')); // 结果: { name: 'Alice', role: 'user', isActive: true }
console.log(createUser('Bob', 'admin')); // 结果: { name: 'Bob', role: 'admin', isActive: true }
console.log(createUser('Charlie', 'moderator', false)); // 结果: { name: 'Charlie', role: 'moderator', isActive: false }
4.3 剩余参数
剩余参数 允许函数接受任意数量的参数，并将它们收集到一个数组中。这对于创建能够处理任意数量参数的函数特别有用。
语法：
function name (arg1, arg2, ...argArray) {
// function body
}
示例 1: 求和所有传入的参数
在这个例子中，函数 sumAll() 使用剩余参数来求和所有传入的参数。
function sumAll(...numbers) {
return numbers.reduce((sum, num) => sum + num, 0);
}
console.log(sumAll(1, 2, 3)); // 结果: 6
console.log(sumAll(4, 5, 6, 7, 8)); // 结果: 30
示例 2: 具有固定和剩余参数的函数
在这个例子中，函数 showItems() 接受固定参数 firstItem 和不确定数量的其余参数，这些参数被收集到数组 otherItems 中。
function showItems(firstItem, ...otherItems) {
console.log(`第一个元素: ${firstItem}`);
console.log(`其他元素: ${otherItems.join(', ')}`);
}
showItems('apple', 'banana', 'cherry', 'date');
// 结果:
// 第一个元素: apple
// 其他元素: banana, cherry, date
示例 3: 动态参数的函数
在这个例子中，函数 createMessage() 接受第一个参数 messageType，并将所有其他参数收集到数组 messages 中，以创建消息。
function createMessage(messageType, ...messages) {
return `[${messageType.toUpperCase()}]: ${messages.join(' ')}`;
}
console.log(createMessage('info', 'This', 'is', 'an', 'informational', 'message'));
// 结果: [INFO]: This is an informational message
console.log(createMessage('error', 'An', 'error', 'occurred'));
// 结果: [ERROR]: An error occurred
GO TO FULL VERSION