使用 map 函数了解 rest 和 spread 参数的用法答案

【问题标题】：Understand the usage of rest and spread parameters with the map function使用 map 函数了解 rest 和 spread 参数的用法
【发布时间】：2019-09-09 15:12:12
【问题描述】：

我想了解如何在 js 中正确使用 ... 运算符，尤其是 js 的 map 函数。

假设我们有以下数据：

const SHOP_DATA = [
    {
      id: 1,
      title: 'Hats',
      routeName: 'hats',
      items: [
        {
          id: 1,
          name: 'Brown Brim',
          imageUrl: 'https://i.ibb.co/ZYW3VTp/brown-brim.png',
          price: 25
        }]
    }
]

现在我想将值作为道具发送到另一个组件：

SHOP_DATA.map(({ id, ...otherProps }) => (
          <CollectionPreview key={id} {...otherProps} />

如果我理解正确，第一个 ... 是一个休息运算符，这意味着我们将值汇集到一个新数组中。第二个 ... 是扩展运算符，这意味着我们正在从数组中扩展这些值

然后我们需要在 ColectionPreview 中再次使用 ... 运算符将它们展开。

const CollectionPreview = ({ id, ...otherProps }) => {

不懂数据流，为什么我们刚才做的就相当于做：

SHOP_DATA.map(({ id, title , items }) => (
          <CollectionPreview key={id} title = {title} items = {items} />

【问题讨论】：

标签： reactjs rest dictionary spread

【解决方案1】：

SHOP_DATA.map(({ id, ...otherProps })

在这里，您将解构每个SHOP_DATA 的对象属性，并使用对象的剩余运算符 初始化一个名为otherProps 的对象，其中所有对象属性减去之前指定的属性（ “id”在这种情况下）：

otherProps = {
    title: 'Hats',
    routeName: 'hats',
    items: [
        {
            id: 1,
            name: 'Brown Brim',
            imageUrl: 'https://i.ibb.co/ZYW3VTp/brown-brim.png',
            price: 25,
        },
    ],
};

<CollectionPreview key={id} {...otherProps} />

这里你使用 JSX 扩展运算符，这与对象扩展运算符有点不同，它将对象的所有属性传播到以属性名称命名它们的组件 props，结果：

<CollectionPreview key={id} title="Hats" routeName="hats" items={[{ id: 1, name: "Brown Brim", etc.. }]} />

const CollectionPreview = ({ id, ...otherProps }) => {

在组件声明中，您不必强制使用 object rest 运算符，如果您知道您的 props 名称，您可以像这样单独使用它们：

const CollectionPreview = ({ id, title, routeName, items }) => {

【讨论】：

【解决方案2】：

为此，您还需要熟悉解构。

如果你有一个对象：

const human = { name: 'John', age: 20, sex: 'Male'}

你可以像这样取出物体的道具：

const {name, age, sex} = human

现在，name -> 'John, age -> 20, sex -> 'Male'

如果你这样做了

const {name, ...rest} = human
name -> 'John'
rest -> { age: 20, sex: 'Male'}

现在让我们转到您的代码：

SHOP_DATA.map(({ id, ...otherProps })

在这里，您正在映射数组并动态解构对象。

id -> id 
otherProps -> { 
              title: 'Hats',
              routeName: 'hats',
              items: [
                      {
                        id: 1,
                        name: 'Brown Brim',
                        imageUrl: 'https://i.ibb.co/ZYW3VTp/brown-brim.png',
                        price: 25
                     }]
              }

因此

 <CollectionPreview key={id} {...otherProps} />

会变成

 <CollectionPreview key={id} title={title} routerName={routeName} items={items} />

希望这对您有所帮助。

【讨论】：