我如何 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的。