在 JavaScript 中，我们经常需要传递必需的参数以及一些可选的参数给函数，同时使用 ES6 的 destructuring 可以使得这个过程变得更加简单、明了。本文将详细介绍 destructuring 在函数传参中的使用方法，包括使用场景、语法、实例代码以及注意事项等内容。
使用场景
在处理函数的参数列表时，需要经常考虑到以下问题：
- 必需参数和可选参数之间的区分
- 传入参数的顺序和类型
- 参数的默认值处理
这里使用 destructuring 可以让处理参数列表变得简单，对于这些问题可以得到如下解决方案：
- 使用 destructuring 可以将参数按照名称进行传递，可以很好的区分必需参数和可选参数。
- 使用解构的方式可以更容易的调整传递参数的顺序，而且可以保证传入参数的类型正确。
- 可以在解构对象时使用默认值来处理可能的参数缺失情况，从而使用传入参数的一个可选值。
语法
使用 destructuring 作为函数参数的语法如下：
function foo({ name, age = 10, gender = 'unknown' }) { // ... }
在这个语句中，花括号括起来的部分是一个 JavaScript 对象的解构，它可以包含一系列的属性。在这个例子中，我们传递给函数的参数是一个对象，其中包含了这些属性的值。
当上述代码被调用时，可以按照以下方式传递参数：
const person = { name: "Tom", age: 20 }; foo(person);
在这个例子中，我们传递给 foo 函数的参数是一个对象，其中包含了 name 和 age 属性，同时也缺少了 gender 属性。在函数内部，我们可以使用这些属性的值。
实例代码
为了更好的展示 destructuring 在函数参数传递中的用法，我们来看一个完整的实例。
function getUserInfo({ name, age = 20, gender = 'male' }) { console.log(`Name: ${name}, Age: ${age}, Gender: ${gender}`); }
在这个示例代码中，我们定义了一个名为 getUserInfo 的函数，它需要接收一个包含三个属性的对象作为参数分别为：name，age 和 gender。
其中，“gender”属性是一个可选项，如果没有传递这个属性，则默认为 "male"。
接下来我们来看一下这个函数在实际使用时是什么样子的。
const person1 = { name: "John", age: 25, gender: 'male' }; const person2 = { name: "Mary", gender: 'female' }; getUserInfo(person1); getUserInfo(person2);
在上面的示例代码当中，分别传递了 person1 和 person2 两个对象作为 getUserInfo() 函数的参数。
在 person1 参数当中，我们传递了 “name”、“age” 以及 “gender” 这三个属性及其值，它们都将被正常解构并成为函数内部的参数，最终输出了如下的结果：
Name: John, Age: 25, Gender: male
而在 person2 参数当中，我们省略了 age 属性，并将 gender 设置为 “female”，这时函数的解构过程就需要使用默认值来处理缺失的 age 属性，最终输出了如下的结果：
Name: Mary, Age: 20, Gender: female
注意事项
需要注意的是，在使用 destructuring 作为函数参数时，在传递参数之前一定要确保要传递的对象与解构对象具有相同的属性。
此外，在使用对象解构时，我们还可以将对象本身作为参数，如下：
function getDetail({ name, age }) { console.log(`Name: ${name}, Age: ${age}`); } const user = { name: "Jane", age: 18 }; getDetail(user);
在这种情况下，我们只能传递一个对象作为参数，这个对象当中只能包含必须的 name 和 age 属性，而不包含任何其他的属性。使用这种方式时，我们不需要在“解构对象”中使用任何默认值，因为在函数中我们可以通过操作传入的对象直接获取属性的值。
通过以上的介绍，我们可以看到 destructuring 在函数中作为参数的使用方法是非常强大、方便、灵活的，并且它通常可以更加清晰地定义函数参数的用途和行为。我们希望这篇文章可以帮助读者更好地掌握 ES6 destructuring 的知识和技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c3ce2a314edc2684df13e4
