現在有個需求：

後端給一個list過來，1-4，有就顯示，沒有前面四個card就空著，從第五個開始，有資料就迴圈出來，區別他們的kind欄位。

這裡想了很久怎麼寫，最後決定，洗資料.

就是從給給的資料，前面四個進行判斷，有就寫進固定的地方，沒有就為空。

後面的資料迴圈

再把陣列a+陣列b，進行map渲染card

前面四個資料，是查出來的單個數組物件，用find

4個後面其他的資料，是查出來所有的陣列，用filter

程式碼

const fourAheadData = [
  {
    title: "雲安全服務",
    subhead: "建立全方位的安全保障體系",
    iconType: "icon-cloud-safe",
    key: "security",
    params: {}
  },
  {
    title: "雲監控服務",
    subhead: "實現高效流程化的IT運維",
    iconType: "icon-cloud-watch",
    key: "Monitoring",
    params: {}
  },
  {
    title: "雲運維服務",
    subhead: "提供全方位的監控和分析",
    iconType: "icon-cloud-ops",
    key: "ops",
    params: {}
  },
  {
    title: "雲堡壘服務",
    subhead: "提供全方位的安全管控",
    iconType: "iconyunbaolei_huaban93-93",
    key: "Bastion",
    params: {}
  }
]

 fourAheadData[0].params = data.find(item => item.kind === 2)
    fourAheadData[1].params = data.find(item => item.kind === 4)
    fourAheadData[2].params = data.find(item => item.kind === 3)
    fourAheadData[3].params = data.find(item => item.kind === 5)

 const otherData = data.filter(item => item.kind === 6)
    (otherData || []).map(item => {
      const obj = {
        title: item.serviceName,
        subhead: "",
        iconType: "iconyunbaolei_huaban93-93",
        key: "",
        params: item
      }
      return fourAheadData.push(obj)
    })

    return fourAheadData

洗的資料打印出來是這樣的，然後迴圈輸出