2.4.2 可选参数、默认参数和不定个数参数 -TypeScript和Vue从入门到精通(一)

当前位置:　首页>> 技术小册>> TypeScript和Vue从入门到精通(一)

### 2.4.2 可选参数、默认参数和不定个数参数

在TypeScript中，函数参数的设计非常灵活，允许开发者通过可选参数、默认参数以及不定个数参数来增强函数的可用性和灵活性。这些特性不仅简化了函数的调用方式，还使得代码更加易于理解和维护。下面我们将逐一深入探讨这些概念。

#### 2.4.2.1 可选参数

可选参数是指在函数定义中，某些参数可以被省略不传，而函数依然能够正确执行。在TypeScript中，通过在参数名后添加问号（`?`）来标识该参数为可选。

**示例代码**：

```typescript
function greet(name?: string, greeting?: string) {
  if (name) {
    console.log(`${greeting || 'Hello'}, ${name}!`);
  } else {
    console.log(greeting || 'Hello, someone!');
  }
}

greet(); // 输出: Hello, someone!
greet('Alice'); // 输出: Hello, Alice!
greet('Bob', 'Hi'); // 输出: Hi, Bob!
```

在这个例子中，`greet`函数接受两个可选参数：`name`和`greeting`。如果调用时没有提供这些参数，它们将默认为`undefined`，然后函数内部通过逻辑判断来决定输出内容。

**注意**： TypeScript中，可选参数必须位于所有必选参数之后。如果违反了这一规则，TypeScript编译器会报错。

#### 2.4.2.2 默认参数

默认参数允许在函数定义时直接为参数指定默认值，如果在函数调用时没有提供该参数的值，则自动使用默认值。这与可选参数不同，因为即使不传递参数，函数也能正常工作，因为参数已经有了预设值。

**示例代码**：

```typescript
function multiply(a: number, b: number = 1) {
  return a * b;
}

console.log(multiply(5)); // 输出: 5，因为b的默认值是1
console.log(multiply(5, 2)); // 输出: 10
```

在这个例子中，`multiply`函数接受两个参数，其中`b`参数有一个默认值`1`。这意味着，如果调用`multiply`时只传递了一个参数，那么`b`就会自动使用`1`作为它的值。

**注意**： 与可选参数一样，具有默认值的参数也应该放在没有默认值的参数之后。此外，在函数体内，默认参数的表达式会立即被求值，这意味着它们可以使用之前已经声明的参数。

#### 2.4.2.3 不定个数参数

在JavaScript和TypeScript中，有时我们需要函数能够处理任意数量的参数。为了实现这一点，可以使用剩余参数（Rest Parameters）语法，即在参数名前加上三个点（`...`）。这样，函数就会将所有额外的参数收集到一个数组中。

**示例代码**：

```typescript
function sum(...numbers: number[]) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3)); // 输出: 6
console.log(sum(10, 20)); // 输出: 30
```

在这个例子中，`sum`函数通过剩余参数`...numbers`收集所有传递给它的数字参数，并将它们存储在`numbers`数组中。然后，使用`reduce`方法计算这些数字的总和。

**注意**： 剩余参数必须是函数的最后一个参数。此外，一个函数可以同时拥有可选参数、默认参数和剩余参数，但它们的顺序必须遵循：首先是必选参数，然后是可选参数和默认参数，最后是剩余参数。

#### 实战应用

了解了可选参数、默认参数和不定个数参数之后，我们可以将这些知识应用到实际开发中，以提升代码的可读性和灵活性。

**示例**： 假设你正在开发一个用于处理用户输入的表单验证函数，该函数需要验证多个字段，但并非所有字段都是必需的。

```typescript
function validateForm(
  email?: string,
  password?: string,
  confirmPassword?: string = password, // 注意：这里仅为示例，实际中不可直接引用未定义的变量
  ...extraFields: string[]
) {
  let errors: string[] = [];

if (email && !/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
    errors.push('Invalid email.');
  }

if (!password || password.length < 6) {
    errors.push('Password must be at least 6 characters long.');
  }

if (confirmPassword && password !== confirmPassword) {
    errors.push('Passwords do not match.');
  }

// 额外字段验证逻辑...

return errors;
}

// 使用示例
console.log(validateForm('test@example.com', 'password123', 'password123')); // 预期无错误
console.log(validateForm('', 'short', 'short')); // 预期有错误
```

**注意**： 示例中的`confirmPassword = password`仅为说明目的，实际上在函数参数中不能直接引用其他参数（因为此时它们可能还未被定义）。正确的做法是在函数体内进行逻辑判断。

### 结论

通过可选参数、默认参数和不定个数参数，TypeScript为开发者提供了强大的函数参数处理能力。这些特性使得函数更加灵活、易于使用，并且能够提高代码的可读性和可维护性。在实际开发中，根据需求合理使用这些特性，能够显著提升开发效率和代码质量。

该分类下的相关小册推荐：

TypeScript和Vue从入门到精通(二)

vuejs组件实例与底层原理精讲

Vue.js从入门到精通(三)

TypeScript和Vue从入门到精通(三)

移动端开发指南

Vue.js从入门到精通(二)

Vue原理与源码解析

TypeScript和Vue从入门到精通(四)

Vue面试指南

Vue源码完全解析

Vue.js从入门到精通(四)

VUE组件基础与实战