ECMAScript 2021 (ES12) 中新的函数参数语法详解

ECMAScript 2021 (ES12) 中新的函数参数语法详解

在 ECMAScript 2021 中，我们可以看到许多新的语法和功能， 其中之一就是新增的函数参数语法。这些新的函数参数语法使编写 JavaScript 代码变得更加简单且方便，本文将为您详细介绍 ECMAScript 2021 中新增的函数参数语法，让您能够掌握相关技术并应用于实际开发当中。

1. 基本语法

在早期的 JavaScript 版本（ECMAScript 5 及以下版本）中，函数参数只能通过位置和参数名来引用。 但从 ECMAScript 6 开始，我们就能够使用箭头函数和默认参数值。 然而，在 ECMAScript2021 中，函数参数的语法已得到极大的增强，使用起来更加灵活。

下面是一个简单的示例，该函数采用早期的 JavaScript 函数参数语法：

function greet(name, message) {
  var name  = name || 'Guest';
  var message = message || 'Welcome to our website!';
  alert('Hello, ' + name + '. ' + message);
}

上面的代码表明了 name 以及 message 是两个函数参数。 但是，如果你不传入实参，则 name 和 message 都会重新默认值。

在 ECMAScript2021 中，有更便捷的方法来创建参数，那就是使用下面的语法：

function greet(name = 'Guest', message = 'Welcome to our website!') {
  alert('Hello, ' + name + '. ' + message);
}

如上例所示，现在您可以在函数参数的定义中分配默认值。 如果函数调用时没有传递参数，则该函数将使用为该参数定义的默认值。

1. 动态参数

除了使用默认值之外，在 ECMAScript2021 中，您还可以使用rest parameters语法来允许函数采用不限数量的参数， 这些参数将收集到一个数组中并传递给函数。

下面是一个简单的示例，该函数接受任意数量的数字，将这些数字相加并将结果打印到控制台上：

function sum(...numbers) {
  return numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // 输出 15

如上例所示，...numbers 表示函数可以采用任意数量的参数，并将这些参数收集到一个数组中，当做 numbers 参数被传递到函数中。

1. 命名参数

在 ECMAScript 及以下版本中，我们通常使用一个对象 options 来传递多个参数，如下例所示：

function print(options) {
  console.log(options.a); // 输出 'a'
  console.log(options.b); // 输出 'b'
  console.log(options.c); // 输出 'c'
}

print({a: 'a', b: 'b', c: 'c'});

在 ECMAScript2021 中，有一个新的语法允许我们使用命名参数方式调用函数。我们可以像下面这样来定义命名参数的方法：

function print({a, b, c}) {
  console.log(a); // 输出 'a'
  console.log(b); // 输出 'b'
  console.log(c); // 输出 'c'
}

print({a: 'a', b: 'b', c: 'c'});

在这个例子中，函数 print 期望输入一个对象，并提供了命名参数 a， b 和 c。 通过这种方法，我们在函数调用时就能够避免传递参数的顺序问题。

除此之外，我们还可以使用解构函数的方式来传递命名参数：

function print({a, b, c}) {
  console.log(a); // 输出 'a'
  console.log(b); // 输出 'b'
  console.log(c); // 输出 'c'
}

const options = {a: 'a', b: 'b', c: 'c'}
print({...options});

1. 小结

在这篇文章中，我们已经详细介绍了 ECMAScript2021 中新增的函数参数语法，包括默认参数值、不限数量的动态参数、命名参数。 这些特性大大增强了 JavaScript 中的函数参数，使得我们可以更容易地编写优雅、简洁的代码，并避免了许多传递参数时的问题。 希望这篇文章能够帮助您更好地掌握 ECMAScript2021 中的函数参数语法，并能够加以应用于实际开发当中。

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