在 ES9 中，JavaScript 引入了 Rest/Spread Property 语法，大幅度改善了函数解构的效率和灵活性。本文将详细介绍这一新特性以及如何运用它来提升我们的前端开发效率。
Rest Property
Rest Property（剩余参数）语法允许我们将不确定个数的参数表示为一个数组。在函数解构中，我们可以使用 Rest Property 语法来传递任意数量的参数并组成一个数组。下面是一个简单的例子：
function calculateSum(...args) {
return args.reduce((total, value) => total + value);
}
console.log(calculateSum(1, 2, 3, 4)); // 10在上面的代码中，我们声明了一个 calculateSum 函数，使用 Rest Property 语法获取了任意数量的参数。接着，我们使用数组的 reduce 方法将所有参数相加并返回它们的总和。
Spread Property
Spread Property（扩展参数）语法可以在数组或对象的地方，使用 _ 语法将数组或对象展开成各自独立的值。在函数解构中，我们可以使用 Spread Property 语法来展开数组并作为参数传递给函数。下面是一个简单的例子：
function calculateProduct(a, b, c, d) {
return a * b * c * d;
}
const values = [1, 2, 3, 4];
console.log(calculateProduct(...values)); // 24在上面的代码中，我们声明了一个 calculateProduct 函数，使用 Spread Property 语法获取了四个参数。接着，我们将一个数组 values 作为参数传递给函数。千万不要忘记使用 _ 语法。
解构函数
函数解构是一个将函数的参数信息组织成对象或数组的过程。Rest/Spread Property 语法使函数解构变得更加高效且便捷。下面是一个复杂的例子，可以帮助你快速了解如何使用 Rest/Spread Property 来解构函数：
// javascriptcn.com 代码示例
function filterUsersByAge(age, ...users) {
return users.filter(user => user.age === age);
}
const users = [
{ name: 'Amy', age: 21 },
{ name: 'Bob', age: 22 },
{ name: 'Cathy', age: 21 },
{ name: 'David', age: 23 },
{ name: 'Emma', age: 22 },
];
console.log(filterUsersByAge(21, ...users)); // [Object { name: 'Amy', age: 21 }, Object { name: 'Cathy', age: 21 }]在上面的代码中，我们声明了一个 filterUsersByAge 函数，在第一个参数位置声明了一个 age 参数，在第二个位置使用 Rest Property 语法声明 users 参数。接着，我们使用 Spread Property 语法将一个数组 users 展开，并将其作为参数传递给函数。函数使用 filter 方法从 users 数组中筛选出年龄为 age 的用户，并返回结果数组。
总结
在本文中，我们介绍了 Rest/Spread Property 语法，并教你如何在函数解构中使用这些语法。通过使用这一新特性，我们可以显著提高函数解构的效率和灵活性，提高前端开发效率。我们希望这篇文章对你有所帮助，并鼓励你探索更多 JavaScript 中的新技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fa9c83f6b2d6eab3181660