在这个对象解构中，“...rest”代表什么？

小能豆

在这个对象解构中，“...rest”代表什么？

javascript

我正在阅读有关 react 中的未知 prop 警告，特别是因为我正在使用 react-bootstrap 包并且在那里偶然发现了它们。

我读到过：‘为了解决这个问题，复合组件应该‘消耗’任何用于复合组件而不用于子组件的道具’，在这里：

https://gist.github.com/jimfb/d99e0678e9da715ccf6454961ef04d1b

并给出了一个示例，说明如何使用扩展运算符从 props 中提取变量，并将剩余的 props 放入变量中。

示例代码：

function MyDiv(props) {
  const { layout, ...rest } = props
  if (layout === 'horizontal') {
    return <div {...rest} style={getHorizontalStyle()} />
  } else {
    return <div {...rest} style={getVerticalStyle()} />
  }
}

问题在于：在给出的示例中，我不明白此代码中的“…rest”代表什么。我知道“…”=spread 语法，但“rest”这个词从何而来，又代表什么？

阅读 47

2024-06-16

共1个答案

小能豆

这是对象剩余语法，它根据所有未明确解构的属性创建一个对象。

const obj = { a: 1, b: 2, c: 3};

const { a, ...everythingElse } = obj;

console.log(a);

console.log(everythingElse);

它相当于数组剩余语法：

const arr = [1, 2, 3];

const [a, ...rest] = arr;

console.log(a);
console.log(rest);

2024-06-16