ES9 提供的新特性：Rest/Spread 属性（Object Rest & Spread Properties）

在 ES6 中，Spread 操作符和 Rest 参数已经被引入了。在 ES9 中，这两个概念被推广为对象属性的特性。这就是所谓的“Rest/Spread 属性”，也叫做“对象 Rest 和 Spread 属性”。

Rest

Rest 属性可以用来获取一个对象中除了已知变量外的所有其它属性。类似于 Rest 参数，你可以使用 ... 访问 Rest 属性，在 ... 之后定义的变量将被分配为一个包含所有其它属性的新对象。

例如，我们有一个 user 对象，其中包含了 name 和 age 以及 email 属性。我们想要获取除 name 和 age 属性之外的所有其它属性：

const user = {
  name: 'Tom',
  age: 18,
  email: 'example@gmail.com',
  phone: '12345678910'
}

const { name, age, ...rest } = user

console.log(rest)
// 输出 { email: 'example@gmail.com', phone: '12345678910'}

在这个例子中，我们使用对象解构来从 user 对象中获取 name 和 age 属性。在 ...rest 中定义的变量包含了除 name 和 age 之外的所有属性。

Spread

Spread 属性可以用来合并两个或多个对象。类似于 Spread 操作符，你可以使用 ... 前缀来将一个对象的所有属性展开到一个新对象中。

例如，我们有两个对象 user 和 info，我们想要将这两个对象的属性合并到一个新对象中：

const user = {
  name: 'Tom',
  age: 18,
}

const info = {
  email: 'example@gmail.com',
  phone: '12345678910'
}

const all = { ...user, ...info }

console.log(all)
// 输出 { name: 'Tom', age: 18, email: 'example@gmail.com', phone: '12345678910'}

在这个例子中，我们使用 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