javascript - ReactJS如何从数组数组更改为单个数组

Question

我的问题是我有那个数组：

 [
   {
      "_id":"5f32f3d98fe32813803d32e3",
      "StartdateFormatPL":"11.08.2020, 01:30:00",
      "EndDateFormatPL":"11.08.2020, 02:00:00",
      "Hours":[
         {
            "id":"f1dcc-33f8-b32a-3aaa-7bb1b0fcaa6f",
            "hour":"11.08.2020, 01:30:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"d8cfbd6-148a-8e0a-41d4-614d7fa6875",
            "hour":"11.08.2020, 01:35:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"2e71b4-dcb-fb01-1fa0-8eddc5cbd15",
            "hour":"11.08.2020, 01:40:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"cbe26f3-1af2-81a7-3c0b-8ec4be286f15",
            "hour":"11.08.2020, 01:45:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"2475ddf-e6ee-6df7-d22d-860e8a31053",
            "hour":"11.08.2020, 01:50:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"ad23bc-1506-26da-c272-cfca177565a",
            "hour":"11.08.2020, 01:55:00",
            "isBooked":false,
            "isConfirmed":false
         }
      ],
      "__v":0
   },
   {
      "_id":"5f32f60ecee0dd13987cf6a1",
      "StartdateFormatPL":"11.08.2020, 02:00:00",
      "EndDateFormatPL":"11.08.2020, 02:30:00",
      "Hours":[
         {
            "id":"e2bbb4-615e-7aad-0bfd-c7156c5426",
            "hour":"11.08.2020, 02:00:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"fdd2c8-67da-b517-7f85-8e2612f28",
            "hour":"11.08.2020, 02:05:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"5befec6-2a2d-13b2-324d-cd7e86a7626",
            "hour":"11.08.2020, 02:10:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"5d6cb20-80ad-3e38-a7e7-aa5feb88d37",
            "hour":"11.08.2020, 02:15:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"b2c78-358-6176-666-862bacec408",
            "hour":"11.08.2020, 02:20:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"ef3f5e-b60b-18a1-ac13-8542d48dc28f",
            "hour":"11.08.2020, 02:25:00",
            "isBooked":false,
            "isConfirmed":false
         }
      ],
      "__v":0
   }
]

这是我的 API 的响应。有两个单独的对象包含Hours Array. 简而言之，这是一个数组，我想知道如何将它转换为一个数组，将它们连接成一个数组。我正在使用 ReactJS，我将有很多数组，而不仅仅是两个，我想将它们连接成一个..

总结 [Array] = {... [Array1] ...} {... [Array2] ...] 并最终得到 Object of : [{ Array1 + Array2 ....}]

提前感谢您的帮助。

预期结果：

"Hours":[
             {
                "id":"f1dcc-33f8-b32a-3aaa-7bb1b0fcaa6f",
                "hour":"11.08.2020, 01:30:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"d8cfbd6-148a-8e0a-41d4-614d7fa6875",
                "hour":"11.08.2020, 01:35:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"2e71b4-dcb-fb01-1fa0-8eddc5cbd15",
                "hour":"11.08.2020, 01:40:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"cbe26f3-1af2-81a7-3c0b-8ec4be286f15",
                "hour":"11.08.2020, 01:45:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"2475ddf-e6ee-6df7-d22d-860e8a31053",
                "hour":"11.08.2020, 01:50:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"ad23bc-1506-26da-c272-cfca177565a",
                "hour":"11.08.2020, 01:55:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"e2bbb4-615e-7aad-0bfd-c7156c5426",
                "hour":"11.08.2020, 02:00:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"fdd2c8-67da-b517-7f85-8e2612f28",
                "hour":"11.08.2020, 02:05:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"5befec6-2a2d-13b2-324d-cd7e86a7626",
                "hour":"11.08.2020, 02:10:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"5d6cb20-80ad-3e38-a7e7-aa5feb88d37",
                "hour":"11.08.2020, 02:15:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"b2c78-358-6176-666-862bacec408",
                "hour":"11.08.2020, 02:20:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"ef3f5e-b60b-18a1-ac13-8542d48dc28f",
                "hour":"11.08.2020, 02:25:00",
                "isBooked":false,
                "isConfirmed":false
             }
          ],
          "__v":0
       }
    ]

标签： javascriptreactjs

Answer 1

data.flatMap(({ Hours }) => Hours);

将数据映射到Hours然后展平的数组。

平面图

该flatMap()方法首先使用映射函数映射每个元素，然后将结果展平为新数组。它与深度为 1的 amap()后跟 a相同，但通常非常有用，因为将两者合并到一个方法中效率更高。flat()flatMap()

const data = [
  {
    _id: "5f32f3d98fe32813803d32e3",
    StartdateFormatPL: "11.08.2020, 01:30:00",
    EndDateFormatPL: "11.08.2020, 02:00:00",
    Hours: [
      {
        id: "f1dcc-33f8-b32a-3aaa-7bb1b0fcaa6f",
        hour: "11.08.2020, 01:30:00",
        isBooked: false,
        isConfirmed: false
      },
      {
        id: "d8cfbd6-148a-8e0a-41d4-614d7fa6875",
        hour: "11.08.2020, 01:35:00",
        isBooked: false,
        isConfirmed: false
      },
      {
        id: "2e71b4-dcb-fb01-1fa0-8eddc5cbd15",
        hour: "11.08.2020, 01:40:00",
        isBooked: false,
        isConfirmed: false
      },
      {
        id: "cbe26f3-1af2-81a7-3c0b-8ec4be286f15",
        hour: "11.08.2020, 01:45:00",
        isBooked: false,
        isConfirmed: false
      },
      {
        id: "2475ddf-e6ee-6df7-d22d-860e8a31053",
        hour: "11.08.2020, 01:50:00",
        isBooked: false,
        isConfirmed: false
      },
      {
        id: "ad23bc-1506-26da-c272-cfca177565a",
        hour: "11.08.2020, 01:55:00",
        isBooked: false,
        isConfirmed: false
      }
    ],
    __v: 0
  },
  {
    _id: "5f32f60ecee0dd13987cf6a1",
    StartdateFormatPL: "11.08.2020, 02:00:00",
    EndDateFormatPL: "11.08.2020, 02:30:00",
    Hours: [
      {
        id: "e2bbb4-615e-7aad-0bfd-c7156c5426",
        hour: "11.08.2020, 02:00:00",
        isBooked: false,
        isConfirmed: false
      },
      {
        id: "fdd2c8-67da-b517-7f85-8e2612f28",
        hour: "11.08.2020, 02:05:00",
        isBooked: false,
        isConfirmed: false
      },
      {
        id: "5befec6-2a2d-13b2-324d-cd7e86a7626",
        hour: "11.08.2020, 02:10:00",
        isBooked: false,
        isConfirmed: false
      },
      {
        id: "5d6cb20-80ad-3e38-a7e7-aa5feb88d37",
        hour: "11.08.2020, 02:15:00",
        isBooked: false,
        isConfirmed: false
      },
      {
        id: "b2c78-358-6176-666-862bacec408",
        hour: "11.08.2020, 02:20:00",
        isBooked: false,
        isConfirmed: false
      },
      {
        id: "ef3f5e-b60b-18a1-ac13-8542d48dc28f",
        hour: "11.08.2020, 02:25:00",
        isBooked: false,
        isConfirmed: false
      }
    ],
    __v: 0
  }
];

const hours = data.flatMap(({ Hours }) => Hours);

console.log('hours', hours)