随着前端技术的不断发展，ES9 版本中加入了许多新特性，其中 Rest properties 就是其中一个重要的新特性之一。本篇文章将详细介绍 Rest properties 的概念、应用场景以及相关实现方法，并附上示例代码来帮助读者更好地理解该特性。
什么是 Rest properties？
Rest properties，中文意思为 “剩余属性”，是指使用“…”语法将对象的剩余属性收集到一个新的对象中。
下面是一个简单的示例：
const bike = { brand: 'BMW', color: 'red', type: 'motorcycle', cc: '900cc' };
const { brand, ...rest } = bike;
console.log(brand); // 'BMW'
console.log(rest); // { color: 'red', type: 'motorcycle', cc: '900cc' }在上面的代码中，我们通过解构赋值获取了 bike 对象中的 brand 属性，并将其余属性通过 rest 对象进行收集。
Rest properties 的应用场景
Rest properties 主要用于以下三种场景：
1. 用于解构赋值
如上面的示例代码中，通过 Rest properties 我们可以很方便地将一个对象中的部分属性解构赋值给其他变量，大大提高了代码的可读性和可维护性。
2. 用于函数参数
Rest properties 还可以用于函数参数中，其作用是将多个参数收集为一个数组，并在函数内使用。
function getSum(...values) {
return values.reduce((acc, val) => acc + val, 0);
}
console.log(getSum(1, 2, 3)); // 6在上面的代码中，我们使用了 Rest properties 将多个参数收集到了 values 数组中，然后使用 reduce 方法计算数组的和并返回。
3. 用于对象合并
Rest properties 还可以用于对象合并中，其作用是将多个对象的属性合并到一个新对象中。
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const obj3 = { e: 5, f: 6 };
const mergedObj = { ...obj1, ...obj2, ...obj3 };
console.log(mergedObj); // { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }在上面的代码中，我们使用 Rest properties 将 obj1、obj2 和 obj3 对象的属性合并到一个新对象 mergedObj 中，从而达到方便合并对象属性的目的。
如何使用 Rest properties
Rest properties 可以用于对象和数组的解构，我们可以在解构语句中使用“…”语法将剩余属性或元素收集到新的对象或数组中。
1. 对象解构
const obj = { a: 1, b: 2, c: 3, d: 4 };
const { a, b, ...rest } = obj;
console.log(rest); // { c: 3, d: 4 }在上面的代码中，我们使用 Rest properties 将 obj 对象的剩余属性收集到了 rest 对象中。
2. 数组解构
const arr = [1, 2, 3, 4, 5]; const [first, second, ...rest] = arr; console.log(rest); // [3, 4, 5]
在上面的代码中，我们使用 Rest properties 将 arr 数组的剩余元素收集到了 rest 数组中。
总结
通过本文的介绍，我们了解了 Rest properties 的基本概念、应用场景以及如何使用。Rest properties 是一种非常方便、实用的特性，在实际的开发中也经常被用到。
希望本文能对你在开发中使用 Rest properties 有所帮助，可以从一定程度上提高你的代码质量和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65953061eb4cecbf2d966d81