ECMAScript 2021 (ES12) 中如何接收、解构函数参数
随着 ECMAScript 2021 (ES12) 的发布，JavaScript 语言迎来了一些新特性，其中包括了一个非常有用的特性，那就是函数参数的解构赋值。
解构赋值在 ECMAScript 6 (ES6) 中就已经加入了语言特性，并且在很多场合下得到了广泛的应用。在函数参数中也可以使用解构赋值语法，这样可以更加灵活地处理函数的输入参数。
使用解构赋值来处理函数参数可以增加代码的可读性，同时也可以更加准确地获取需要的参数值。在这篇文章中，我们将深入探讨 ECMAScript 2021 (ES12) 中如何使用解构赋值来接收和解析函数的参数。
接收函数参数
在 ECMAScript 2015 (ES6) 之前，JavaScript 函数只能通过“显式参数”。也就是说，调用函数时需要逐一传递参数，比如：
function sum(a, b, c) {
return a + b + c;
}
sum(1, 2, 3); // 6从 ECMAScript 2015 (ES6) 开始，我们可以使用解构赋值语法来处理函数参数：
function sum({ x, y, z }) {
return x + y + z;
}
sum({ x: 1, y: 2, z: 3 }); // 6可以看出，上面的代码将函数的参数使用对象的形式传递，并且针对对象的属性使用了解构赋值语法。函数体内部的变量 x、y、z 分别与传入的参数对象的属性 x、y、z 匹配。这样我们就可以灵活地传递这些属性，并且可以避免一些代码中常见的“位置传参”混淆问题。
解构嵌套对象
当函数的参数是一个嵌套的对象时，我们也可以使用解构嵌套的语法来处理函数参数，如下所示：
function greet({ greeting: { prefix, text }, name }) {
return `${prefix} ${text}, ${name}!`;
}
greet({ greeting: { prefix: "Hello", text: "world" }, name: "Alice" }); // "Hello world, Alice!"这里我们定义了一个 greet 函数，参数使用了一个嵌套的对象，其中 greeting 是一个对象，包含 prefix 和 text 两个属性。我们可以使用解构嵌套的语法来将这些属性一一解构出来。
解构赋值默认值
在 ECMAScript 2015 (ES6) 中，我们可以为函数的参数定义默认值，如下所示：
function greet(name, greeting = "Hello") {
return `${greeting}, ${name}!`;
}
greet("John"); // "Hello, John!"
greet("Alice", "Hi"); // "Hi, Alice!"在 ECMAScript 2021 (ES12) 中，我们可以使用解构赋值的语法为函数参数设置默认值，如下所示：
function greet({ name = "World", greeting = "Hello" } = {}) {
return `${greeting}, ${name}!`;
}
greet(); // "Hello, World!"
greet({ name: "John" }); // "Hello, John!"
greet({ name: "Alice", greeting: "Hi" }); // "Hi, Alice!"上面的代码中，我们使用了解构赋值为函数的参数设置默认值。在函数定义中使用 { name = "World", greeting = "Hello" } = {} 表示我们期望函数的参数是一个对象，该对象中包含 name 和 greeting 两个属性，如果参数中没有这些属性，那么就使用默认值。
总结
ECMAScript 2021 (ES12) 中，我们可以使用解构赋值语法来处理函数的参数。使用解构赋值来处理函数参数可以增加代码的可读性，同时也可以更加准确地获取需要的参数值。在这篇文章中，我们学习了如何使用解构赋值来接收和解析函数的参数，同时也介绍了解构嵌套对象和解构赋值默认值的相关内容。希望这些技巧可以帮助你更好地编写 JavaScript 代码。
示例代码：
-- -------------------- ---- ------- -- ------------ -------- ----- -- -- - -- - ------ - - - - -- - ----- -- -- -- -- -- - --- -- - -- -------------- -------- ------- --------- - ------- ---- -- ---- -- - ------ ---------- -------- ---------- - ------- --------- - ------- -------- ----- ------- -- ----- ------- --- -- ------ ------ ------- -- -------- -------- ------- ---- - -------- -------- - ------- - - --- - ------ ------------- ---------- - -------- -- ------- ------- ------- ----- ------ --- -- ------- ------ ------- ----- -------- --------- ---- --- -- ---- -------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cb77665ad90b6d0420b6c6