函数参数

可用

4.1 函数参数

JavaScript 中的函数参数允许将值传递给函数进行处理。这样可以让函数更加灵活和适应性强。在这个主题中,我们将讨论 JavaScript 中使用函数参数的基本方面,不包括默认参数和剩余参数。

参数在函数名后用圆括号指定。调用函数时,这些参数的值将传递到函数内部的相应变量。

例子:

greet() 函数中定义了两个参数:nameage。调用函数时,值 Alice30 被传递给这些参数。

JavaScript
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

JavaScript
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。如果没有传入参数,将使用默认值。

JavaScript
function greet(name = 'Guest') {
  return `Hello, ${name}!`;
}

console.log(greet('Alice')); // 结果: Hello, Alice!
console.log(greet());        // 结果: Hello, Guest!

示例 2: 含有表达式的默认参数

在这个例子中,参数 tax 默认计算为 price 的 20%,如果没有传递其他参数。

JavaScript
function calculatePrice(price, tax = price * 0.2) {
  return price + tax;
}

console.log(calculatePrice(100));  // 结果: 120
console.log(calculatePrice(100, 15)); // 结果: 115

示例 3: 依赖于其他参数的默认参数

在这个例子中,默认参数允许创建具有预定义角色和状态的用户。

JavaScript
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() 使用剩余参数来求和所有传入的参数。

JavaScript
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 中。

JavaScript
function showItems(firstItem, ...otherItems) {
  console.log(`第一个元素: ${firstItem}`);
  console.log(`其他元素: ${otherItems.join(', ')}`);
}

showItems('apple', 'banana', 'cherry', 'date');

// 结果:
// 第一个元素: apple
// 其他元素: banana, cherry, date

示例 3: 动态参数的函数

在这个例子中,函数 createMessage() 接受第一个参数 messageType,并将所有其他参数收集到数组 messages 中,以创建消息。

JavaScript
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
1
任务
Frontend SELF ZH,  第 35 级课程 3
已锁定
含税价格
含税价格
1
任务
Frontend SELF ZH,  第 35 级课程 3
已锁定
第一个和其他
第一个和其他
评论
  • 受欢迎
你必须先登录才能发表评论
此页面还没有任何评论