雙重map處理 - daniel-qa/Vue GitHub Wiki

雙重map處理

程式從後端拿到了一筆資料 unit.lists,裡面是學校清單,每個學校是一個物件

我們希望保留原本的資訊,再新增一個欄位 receiveType: 4,代表這是「學校ID類型」。

items.value = data.map((unit) => ({
    id: unit.id,
    name: unit.name,
    scCnt: unit.scCnt,
    tchCnt: unit.tchCnt,
    receiveType: 3, // 教育機構類型
    showID_Tag: false,
    geoPrefix: false,
    schools: (unit.lists || []).map((school) => ({
        ...school,
        receiveType: 4, // 固定加入 receiveType: 4
    })),
}));

...school 這邊是淺拷貝原本的學校物件,以避免直接修改原資料(養成好習慣)。

如果 unit.lists 為空或 undefined,還是會安全回傳空陣列。

.map((school) => ({ ... }))

這是在處理每一個學校的物件,把它轉換成一個「新物件」。

也就是你原本每筆 school 資料,加上新的欄位 receiveType: 4。

  • { ...school, receiveType: 4 }

這段是「展開運算子」(spread operator):

...school: 表示把 school 這個物件裡面所有的 key-value 都複製過來。

然後我們在後面加上 receiveType: 4,就是給這個新物件「加上一個固定欄位」。

📌 注意順序也很重要!

如果 school 裡面原本就有 receiveType,這個 4 會覆蓋它。

如果把 receiveType: 4 放在前面,然後再展開 ...school,那就會被原本的值蓋掉。(等於白寫了)