ES2020 是 ECMAScript 标准的最新版本，其中增强型式匹配组合语法是一个很受欢迎的特性。它允许开发者通过一种简洁和优雅的方式来处理函数参数和对象属性，提高了代码的可读性和可维护性。
基础语法
在基础语法中，起始语法由一个左括号和一个右括号组成。中间是一系列的模式和分隔符，模式可以是任何能匹配给定数据类型的东西。下面是一个基础示例：
function calcTotalPrice({ price, tax = 0.2, discount: { amount = 0 } = {} } = {}) {
console.log(price, tax, amount);
}在上面的示例中，我们定义了一个 calcTotalPrice 函数，它的参数是一个对象，包括 price、tax 和 discount。在ES6中已经可以使用对象解构的方式进行赋值，而在ES2020中，我们使用形式匹配组合语法。
首先我们将整个对象放在了一对大括号中作为起始语法。接下来，我们使用了三个不同的模式和分隔符。第一个是仅包含一个属性名的对象解构模式，它用来获取 price。第二个是带默认值和别名的属性解构模式，它用来获取 tax，如果 tax 不存在，则默认值为 0.2。第三个是套嵌解构，用来获取 discount 对象中的 amount 属性，如果 discount 对象不存在，则默认值为空对象。
嵌套模式
ES2020 的增强型式匹配组合语法还支持使用嵌套模式，这意味着我们可以将模式组合成更复杂的模式。
// javascriptcn.com 代码示例
const user = {
name: 'John Doe',
email: 'john.doe@example.com',
phone: ['123-456-7890', '098-765-4321']
}
const {
name,
email,
phone: [primaryPhone, ...secondaryPhones]
} = user;
console.log(name, email, primaryPhone, secondaryPhones);在上面的代码中，我们定义一个名为 user 的对象，其中有三个属性，分别是 name、email 和 phone。然后我们使用对象解构来获取 name 和 email 的值。最后一个模式是我们放在左侧的 phone 属性，它由一个左方括号、一个具体的模式和两个省略号组成。这个具体模式中也有一对方括号，它表示 phone 属性是一个数组，我们只需要提取出数组的第一个元素，将其赋值给 primaryPhone，而后面的元素则被收集到了 secondaryPhones 数组中。
常见用途
将形式匹配组合语法应用于实际开发中的最常见场景之一是获取对象的部分属性。
// javascriptcn.com 代码示例
// 计算网格容器大小
const grid = {
container: {
width: 800,
height: 600
},
items: [
{ name: 'Item 1', width: 200, height: 100 },
{ name: 'Item 2', width: 300, height: 150 },
{ name: 'Item 3', width: 400, height: 200 },
]
};
const {
container: { width: containerWidth, height: containerHeight },
items: [firstItem, ...restItems]
} = grid;
console.log(containerWidth, containerHeight, firstItem, restItems);在上面的代码中，我们有一个名为 grid 的对象，它包含两个属性，一个是 container，另一个是 items。我们可以使用形式匹配组合语法来分别获取 container 对象的宽度和高度，以及 items 数组的第一个元素和剩余元素。
另一个常见的用途是简化函数参数的传递。
// 获取每个数组元素的平方和
function getArraySquareSum([first, ...rest]) {
if (!first) return 0;
return first ** 2 + getArraySquareSum(rest);
}
console.log(getArraySquareSum([1, 2, 3, 4, 5]));在上面的代码中，我们定义了一个名为 getArraySquareSum 的函数，它接收一个数组作为参数。我们可以使用形式匹配组合语法来获取数组中的第一个元素和剩余元素，并将其作为新的参数传递到递归函数中。这样就可以简化函数的实现，同时提高了代码的可读性。
总结
ES2020 的形式匹配组合语法提供了一种简洁和优雅的方式来处理函数参数和对象属性，它能够帮助我们编写出更加模块化、可读性更高的代码。在实际开发中，我们可以运用这个特性来提高代码的可读性和可维护性。
如果您还没有使用 ES2020 的形式匹配组合语法，建议您在今后的开发中加以运用，它不仅能够提高您的开发效率，同时也能够帮助您编写更加安全和优雅的代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653343f47d4982a6eb6c56a1