我如何 map 这个结果？

Question

这不是考试问题或任何东西，我正在做一个个人项目，但对这个问题有真正的大脑迷雾。 我希望能得到社区的帮助：）

我有一个数组...

const result1 = [
{ "time":"17 : 30","bays":[{"number":"bay-3","availability":false},{"number":"bay-2","availability":false},{"number":"bay-1","availability":false}]},

{"time":"18 : 00","bays":[{"number":"bay-3","availability":false},{"number":"bay-2","availability":false},{"number":"bay-1","availability":false}]},

{"time":"18 : 30","bays":[{"number":"bay-3","availability":false},{"number":"bay-2","availability":false},{"number":"bay-1","availability":false}]}];

但是我怎样才能以一种干净的 esnext 方式 map 从 result1 到 result2 的数据？

const result2 = [
{ "number":"bay-1”,”times”:[{“time":"17 : 30","availability":false},{"time":"18 : 00","availability":false},{"time":"18 : 30","availability":false}]},

{"number":"bay-2”,”times”:[{“time":"17 : 30","availability":false},{"time":"18 : 00","availability":false},{"time":"18 : 30","availability":false}]},

{"number":"bay-3””,”times”:[{“time":"17 : 30","availability":false},{"time":"18 : 00","availability":false},{"time":"18 : 30","availability":false}]}];

Answer 1

对于此任务，我们首先要创建一个新数组，其中包含我们将按其组织的新值，在本例中为number属性。 我们可以通过从其中一个嵌套对象Array(result1[0].bays.length).fill().map()中检索bays属性的长度来做到这一点。 一个更简单的方法是在同一个bays属性上使用map() ，如下所示： result1[0].bays.map() 。

在此之后，我们可以按照result2所需的格式重建 object，并将这些新对象映射回我们正在创建的新数组。 要添加number属性，我们可以像{number}一样简单地将它添加到 return object 中，对于新的times属性，我们需要使用map()遍历原始result1数组，并在下面检索匹配的 object bays属性的number属性值与我们在顶级数组中迭代的值相匹配。 为此，我们只想保留availability属性，因为我们已经在上层 object 中设置了时间属性。

result1[0].bays.map(({number}) => ({number, times: result1.map(({time, bays}) => ({time, availability: bays.find(bay => bay.number === number).availability})) }))

最后，我们只需要对返回的 object 进行排序，以便result1按托架编号排序。 这将为您提供所需的结果：

result1[0].bays.map(({number}) => ({number, times: result1.map(({time, bays}) => ({time, availability: bays.find(bay => bay.number === number).availability})) }))
  .sort((a,b) => a.number.split('-').reverse()[0] - b.number.split('-').reverse()[0])

/* -> [
        {
          number: "bay-1",
          times: [
            { time: "17 : 30", availability: false },
            { time: "18 : 00", availability: false },
            { time: "18 : 30", availability: false }
          ]
        },
        {
          number: "bay-2",
          times: [
            { time: "17 : 30", availability: false },
            { time: "18 : 00", availability: false },
            { time: "18 : 30", availability: false }
          ]
        },
        {
          number: "bay-3",
          times: [
            { time: "17 : 30", availability: false },
            { time: "18 : 00", availability: false },
            { time: "18 : 30", availability: false }
          ]
        }
      ]
*/

我们还可以创建一个 function 对您的数组执行相同的计算并返回一个按number属性排列的新数组：

 const result1 = [ { time: "17: 30", bays: [{ number: "bay-3", availability: false }, { number: "bay-2", availability: false }, { number: "bay-1", availability: false }] }, { time: "18: 00", bays: [{ number: "bay-3", availability: false }, { number: "bay-2", availability: false }, { number: "bay-1", availability: false }] }, { time: "18: 30", bays: [{ number: "bay-3", availability: false }, { number: "bay-2", availability: false }, { number: "bay-1", availability: false }] } ]; const organizeByNumber = arr => arr[0].bays.map(({number}) => ({number, times: arr.map(({time, bays}) => ({time, availability: bays.find(bay => bay.number === number).availability})) })).sort((a,b) => a.number.split('-').reverse()[0] - b.number.split('-').reverse()[0]); const result2 = organizeByNumber(result1); console.log(result2);

Answer 2

您可以将您的阵列缩减为 Object 键入托架编号，然后转换回列表。

 const result1 = [ { "time": "17: 30", "bays": [ {"number": "bay-10", "availability": false}, {"number": "bay-2", "availability": false}, {"number": "bay-1", "availability": false} ] }, { "time": "18: 00", "bays": [ {"number": "bay-10", "availability": false}, {"number": "bay-2", "availability": true}, {"number": "bay-1", "availability": false} ] }, { "time": "18: 30", "bays": [ {"number": "bay-10", "availability": true}, {"number": "bay-2", "availability": false}, {"number": "bay-1", "availability": false} ] }]; const result2 = Object.entries( result1.reduce((acc, {bays, time}) => { bays.forEach(({number, availability}) => { acc[number] = (acc[number] || []).concat({ "availability": availability, "time": time }); }); return acc; }, {} )).reduce((acc, [bayNumber, times]) => { return acc.concat({"number": bayNumber, "times": times}); }, []).sort((a, b) => a.number.localeCompare(b.number, undefined, {numeric: true, sensitivity: 'base'})); console.log(result2);

*我更改了结果 1 中的一些值，以result1间隔的数字排序是正确的，并且可用性被适当地映射，因为原始样本对于所有间隔和时间都是false的。