<JavaScript> 重組資料：flatMap與map的差異

@RaphaelLoquellano

前幾日收到要做圖表的需求，看了一下後端傳來的資料無法直接餵給圖表套件使用，所以這邊要當套件和後端的橋樑將資料重組，接下來請看下方需求實例

需求

原始資料

[
    {
        "interval": "100", // 獎金
        "rewardsCount": {
            "100 POINTS": "2", // 活動名稱：次數
            "300 CASH": "6",
            "400 CASH": "1",
            "200 POINTS": "6"
        }
    },
    {
        "interval": "5",
        "rewardsCount": {
            "10 CASH": "3",
            "30 CASH": "1"
        }
    },
    {
        "interval": "1000",
        "rewardsCount": {}
    },
    {
        "interval": "10",
        "rewardsCount": {
            "10 CASH": "3",
            "30 CASH": "4"
        }
    }
]

希望重組資料結果為，只要這些獎勵的名字

[
    "100 POINTS",
    "300 CASH",
    "400 CASH",
    "200 POINTS",
    "10 CASH",
    "30 CASH"
]

解法

說明

• 用Object.keys取得rewardsCount內的key列表

• 用flatMap解開下一層

• 使用new Set確保資料不會重複

• 使用... 將陣列展開

const getRewardName = [...new Set(rewardGroup.flatMap(item => Object.keys(item.rewardsCount)))];

最終結果，直接取得全部獎項的名字

[
    "100 POINTS",
    "300 CASH",
    "400 CASH",
    "200 POINTS",
    "10 CASH",
    "30 CASH"
]

參考

• Object.keys
• flatMap
• new Set
• ... 展開運算符（spread operator）

其他

假設使用map而非flatMap

const getRewardName = [...new Set(rewardGroup.map(item => Object.keys(item.rewardsCount)))];

結果會是，Object.keys確實將每個物件的key取出return []

[
    [
        "100 POINTS",
        "300 CASH",
        "400 CASH",
        "200 POINTS"
    ],
    [
        "10 CASH",
        "30 CASH"
    ],
    [],
    [
        "10 CASH",
        "30 CASH"
    ]
]

但這個結果並不是我需要的，所以我使用flatMap，而有了這個例子就能很清楚了解flatMap與map的差異了

結語

以上就是今天重組資料的Code分享，下次有想到什麼再跟大家分享XD 有疑問或是想了解什麼都可以留言，我如果有空會回覆～