ECMAScript 2016: 如何使用函数参数解构？
前言
如果你是一名有经验的 JavaScript 开发者，那么你一定已经听过 ECMAScript 2016（又称 ES7）的函数参数解构特性。这个特性可以让你轻松地从函数参数中解构出需要的值，而不用手动逐一赋值。这篇文章首先会讨论函数参数解构的基本使用方法，然后会介绍一些高级用例，最后会总结这个特性的优势和局限性。
基础
让我们来看看如何使用函数参数解构。假设我们有一个函数，它接收一个对象参数作为输入：
function greet(name, options) {
console.log(`Hello, ${name}!`);
console.log(`Options: ${JSON.stringify(options)}`);
}我们可以按照如下方式调用该函数：
greet('Alice', { age: 30, city: 'New York' });结果会输出：
Hello, Alice!
Options: {"age":30,"city":"New York"}接下来我们来利用参数解构来优化这个函数的参数列表。我们可以直接在函数定义时使用对象解构：
function greet({ name, options }) {
console.log(`Hello, ${name}!`);
console.log(`Options: ${JSON.stringify(options)}`);
}注意我们现在只有一个参数了，它也是一个对象。我们不用手动从参数对象中提取出 name 和 options 属性，而是直接在参数列表中使用对象解构。这使我们的代码更加简洁。
现在我们来调用 greet 函数：
greet({ name: 'Bob', options: { age: 40, city: 'San Francisco' } });输出结果为：
Hello, Bob!
Options: {"age":40,"city":"San Francisco"}高级用例
现在我们已经了解了函数参数解构的基础用法，下面我们来看看一些更为高级的用例。
重命名和默认值
有时候你可能需要为某个属性提供默认值（当它在输入对象中不存在时），或者将某个属性重命名为另一个名字。在这里可以使用解构语法来实现：
function greet({ name = 'World', options: { locale: lang } = {} }) {
console.log(`Hello, ${name}!`);
console.log(`Language: ${lang}`);
}我们对参数对象进行了两次解构。首先，我们为 name 属性提供了一个默认值 'World'。其次，我们在 options 属性上进行了解构，并将其 locale 属性重命名为 lang。
我们可以通过以下调用 greet 函数来测试代码：
greet({});
greet({ name: 'Alice', options: { locale: 'fr' } });分别输出：
Hello, World! Language: undefined Hello, Alice! Language: fr
需要注意的是，我们在 greet 函数中用了两个解构语句，更容易使代码难以阅读，因此需要谨慎使用。
Rest 参数
在函数参数中，我们也可以使用 rest 参数将所有的后续参数打包成一个数组，其语法与数组解构很相似：
function sum(a, b, ...args) {
let total = a + b;
for (let arg of args) {
total += arg;
}
return total;
}我们可以像这样测试这个函数：
console.log(sum(1, 2, 3, 4)); // 输出 10 console.log(sum(5, 6)); // 输出 11
总结
函数参数解构特性能让代码更加简洁，避免手动从参数中提取属性值的重复代码。使用解构语法能够轻松提取嵌套对象属性值，并为需要的属性提供默认值。但是，需要注意解构语句会使代码变得更加复杂，特别是在多重解构语句中。此外，在解构时，如果遗漏了某个必要的属性，或者给出了一个不存在的属性名，程序可能会在运行时出错。因此，在使用函数参数解构时，还需要保持谨慎和谨慎。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b4378048841e989404f42a