在 ES6 中，Spread 操作符和 Rest 参数已经被引入了。在 ES9 中，这两个概念被推广为对象属性的特性。这就是所谓的“Rest/Spread 属性”，也叫做“对象 Rest 和 Spread 属性”。
Rest
Rest 属性可以用来获取一个对象中除了已知变量外的所有其它属性。类似于 Rest 参数，你可以使用 ... 访问 Rest 属性，在 ... 之后定义的变量将被分配为一个包含所有其它属性的新对象。
例如，我们有一个 user 对象，其中包含了 name 和 age 以及 email 属性。我们想要获取除 name 和 age 属性之外的所有其它属性：
-- -------------------- ---- ------- ----- ---- - - ----- ------ ---- --- ------ -------------------- ------ ------------- - ----- - ----- ---- ------- - - ---- ----------------- -- -- - ------ -------------------- ------ --------------展开代码
在这个例子中，我们使用对象解构来从 user 对象中获取 name 和 age 属性。在 ...rest 中定义的变量包含了除 name 和 age 之外的所有属性。
Spread
Spread 属性可以用来合并两个或多个对象。类似于 Spread 操作符，你可以使用 ... 前缀来将一个对象的所有属性展开到一个新对象中。
例如，我们有两个对象 user 和 info，我们想要将这两个对象的属性合并到一个新对象中：
-- -------------------- ---- ------- ----- ---- - - ----- ------ ---- --- - ----- ---- - - ------ -------------------- ------ ------------- - ----- --- - - -------- ------- - ---------------- -- -- - ----- ------ ---- --- ------ -------------------- ------ --------------展开代码
在这个例子中，我们使用 Spread 操作符将 user 和 info 对象的所有属性展开到 all 对象中。
在 React 中的使用
Rest/Spread 属性也可以在 React 的开发中使用。它可以帮助你更方便地传递 props，将可重用的组件接口简化为更小的代码。
例如，假设我们有一个 props 对象，其中包含两个属性：
const props = { firstName: 'Tom', lastName: 'Smith', }
我们希望将这些属性传递给一个名为 UserInfo 的组件，这个组件需要一个 name 属性：
function UserInfo(props) { return <div>{props.name}</div> } const name = `${props.firstName} ${props.lastName}` <UserInfo name={name} />
我们可以使用对象 Rest 属性来简化这段代码：
function UserInfo({ firstName, lastName, ...props }) { const name = `${firstName} ${lastName}` return <div>{name}</div> } <UserInfo firstName="Tom" lastName="Smith" email="example@gmail.com" phone="12345678910" />
在这个例子中，我们可以轻松地将不需要传递给子组件的属性移除，并且不需要在 UserInfo 组件内部进行额外的处理。
总结
Rest/Spread 属性的推广使得我们能够更加方便地处理对象的属性。它在 React 的开发中也可以发挥重要作用，帮助我们更加高效地编写可重用组件。希望这篇文章对您学习和使用 Rest/Spread 属性有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a8dd95add4f0e0ff21afea
