ES7 中的可选参数-JavaScript中文网-JavaScript教程资源分享门户

在 ES7 中，我们可以为函数的参数设置可选参数。这意味着我们可以定义一个函数，其中某些参数是可选的，而不是必须的。这使得我们可以更加灵活地使用函数，并且可以避免在调用函数时出现错误。

可选参数的语法

为了定义可选参数，我们需要在函数参数的名称后面加上一个问号（?）。例如：

function greet(name?: string) {
  console.log(`Hello, ${name}!`);
}

greet(); // 输出：Hello, undefined!
greet('Alice'); // 输出：Hello, Alice!

在上面的示例中，我们定义了一个 greet 函数，它接受一个可选的字符串类型的参数 name。我们可以看到，在调用函数时，我们可以传递一个字符串作为参数，也可以不传递任何参数。如果我们不传递参数，则 name 的值为 undefined。

我们还可以为可选参数设置默认值。这意味着如果我们不传递参数，则参数将使用默认值。例如：

function greet(name: string = 'World') {
  console.log(`Hello, ${name}!`);
}

greet(); // 输出：Hello, World!
greet('Alice'); // 输出：Hello, Alice!

在上面的示例中，我们定义了一个 greet 函数，它接受一个可选的字符串类型的参数 name，并将其默认值设置为 'World'。如果我们不传递任何参数，则 name 的值将是默认值 'World'。

在使用可选参数时，有一些注意事项需要注意：

可选参数必须在必需参数之后。例如，下面的示例是错误的：

function greet(name?: string, message: string) {
  console.log(`${name}: ${message}`);
}

在函数体中使用可选参数时，需要进行非空检查。例如：

function greet(name?: string) {
  if (name) {
    console.log(`Hello, ${name}!`);
  } else {
    console.log(`Hello, World!`);
  }
}

如果使用了默认值，则可选参数的类型将自动推断为默认值的类型。例如：

function greet(name = 'World') {
  console.log(`Hello, ${name}!`);
}

greet(); // 输出：Hello, World!
greet(42); // 错误：类型“number”的参数不能赋给类型“string”的参数。

通过使用可选参数，我们可以使函数更加灵活，避免在调用函数时出现错误。但是，在使用可选参数时，我们需要遵循一些注意事项，并进行非空检查。希望本文对你有所帮助！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6759537736908a98ca6d5d55