在前端开发中，函数是我们最常用的工具之一。但是，有时候我们需要传递的参数比较复杂，这时候我们就需要一些技巧来简化我们的代码。ES6 的解构赋值和 Rest 操作就是这样的技巧。
解构赋值
解构赋值是 ES6 中一种新的语法，它允许我们从数组或对象中提取数据并赋值给变量。这个特性对于函数参数的传递非常有用。
数组解构赋值
我们可以使用数组解构赋值来实现函数参数的灵活传递。例如，我们有一个函数需要接收一个数组参数，这个数组包含三个元素，分别是 name、age 和 gender：
function printInfo(info) {
console.log(`Name: ${info[0]}, Age: ${info[1]}, Gender: ${info[2]}`);
}我们可以使用解构赋值来简化这个函数：
function printInfo([name, age, gender]) {
console.log(`Name: ${name}, Age: ${age}, Gender: ${gender}`);
}这样我们就不需要通过下标来获取对应的值了，而是直接将数组元素解构到对应的变量中。
对象解构赋值
我们也可以使用对象解构赋值来实现函数参数的灵活传递。例如，我们有一个函数需要接收一个对象参数，这个对象包含三个属性，分别是 name、age 和 gender：
function printInfo(info) {
console.log(`Name: ${info.name}, Age: ${info.age}, Gender: ${info.gender}`);
}我们可以使用解构赋值来简化这个函数：
function printInfo({ name, age, gender }) {
console.log(`Name: ${name}, Age: ${age}, Gender: ${gender}`);
}这样我们就不需要通过属性名来获取对应的值了，而是直接将对象属性解构到对应的变量中。
Rest 操作
Rest 操作是 ES6 中一种新的语法，它允许我们将剩余的参数收集到一个数组中。这个特性对于函数参数的传递非常有用。
我们可以使用 Rest 操作来实现函数参数的灵活传递。例如，我们有一个函数需要接收任意数量的参数：
function printArgs() {
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}我们可以使用 Rest 操作来简化这个函数：
function printArgs(...args) {
for (let i = 0; i < args.length; i++) {
console.log(args[i]);
}
}这样我们就不需要使用 arguments 对象来获取传递的参数了，而是直接将参数收集到一个数组中。
示例代码
下面是一个使用解构赋值和 Rest 操作来实现函数参数的灵活传递的示例代码：
-- -------------------- ---- -------
-------- ----------- ----- ---- ------ -- ----------- -
------------------ -------- ---- ------- ------- ------------
------------------------
--- ---- - - -- - - --------------- ---- -
-------------- ----------------
-
-
----- ------ - -
----- -------
---- ---
------- ------
--
----- ------- - ----------- ----------- -------------
----------------- ------------这个示例代码定义了一个 printInfo 函数，它接收一个对象参数和任意数量的剩余参数。我们首先使用解构赋值将对象属性解构到对应的变量中，然后使用 Rest 操作将剩余的参数收集到一个数组中。最后，我们调用这个函数并传递一个对象参数和一个数组参数，这样我们就可以灵活地传递参数了。
总结
ES6 的解构赋值和 Rest 操作可以帮助我们简化函数参数的传递，让我们的代码更加简洁和易读。如果你还没有使用过这些特性，建议你学习一下，它们会让你的代码更加优雅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d97c491886fbafa4706744