陣列數據操作 - daniel-qa/Vue GitHub Wiki

陣列數據操作

unshift

在陣列開頭新增元素。

let fruits = ["香蕉", "蘋果"];

// 使用 unshift 在陣列最前面新增一個元素 "橘子"
fruits.unshift("橘子");

console.log(fruits);
// 輸出結果：["橘子", "香蕉", "蘋果"]

p.s push(): 在陣列結尾新增元素。

get()

.get(key) 是 JavaScript 中 Map 結構的查詢方法，用來根據「鍵（key）」取出對應的「值（value）」。

就像字典一樣，你可以用一個 key 快速查出對應的資料。

const tchCntMap = new Map([
  ['habook', 3],
  ['tm01', 12],
]);

console.log(tchCntMap.get('habook')); // → 3
console.log(tchCntMap.get('tm01'));   // → 12
console.log(tchCntMap.get('abc'));    // → undefined (因為不存在)

filter() ,Smoe()

const sameIdItems = noticeForm.receiverList.filter((data) => data.id === item.id);

const hasDuplicateShowIDTag = sameIdItems.some((data) => data.showID_Tag === item.showID_Tag);

語法	用途	差別
`.filter()`	找出「全部符合條件的項目」，回傳一個陣列	篩選多筆
`.some()`	判斷「陣列裡有沒有至少一筆符合條件的」，回傳布林值 true/false	條件判斷

some() 的說明

// 由 ID 檢查
const isExist = column3Items.value.some((data) => data.id === item.id);

如果 isExist 為 true，代表已有相同 id 存在：

.some((column3) => ...) Array.prototype.some() 是 JS 陣列的一個方法。

它會遍歷陣列裡的每一個元素，只要有任一項目符合條件就會回傳 true。
全部不符合，才會回傳 false。
一旦找到符合條件的項目，就會立刻停止迴圈（效率高）。

join

const arr = ['a', 'b', 'c'];
const str = arr.join('-');  // 結果是 "a-b-c"

splice ( 拼接)

['area', 'school', 'geo']

如果 idx = 1（即 'school' 的位置），執行 newVal.splice(1, 1); 後，newVal 會變成：

['area', 'geo']

也就是把 'school' 這個值從陣列中移除。

slice

從陣列（或字串）中擷取一段子陣列（或子字串），不會改變原本的陣列（或字串,組成新陣列

const arr = [10, 20, 30, 40, 50];

// 取出索引 1 到 3（不含 3），即 [20, 30]
const subArr = arr.slice(1, 3);

console.log(subArr); // [20, 30]
console.log(arr);    // [10, 20, 30, 40, 50]（原陣列不變）

map

// 資料 map, 和抓出傳送名單
noticeHistory.value = response.map((item) => {
    const searchContent = [];

    //抓出傳送名單，組成新的陣列
    if (Array.isArray(item.search)) {
        item.search.forEach((s) => {
            // 根據你的規則，取 area 或 school 的對應欄位
            if (s.mode === 'area' && s.areaId) {
                searchContent.push({
                    mode: s.mode,
                    id: s.areaId,
                    name: s.areaName
                });
            } else if (s.mode === 'school' && s.school) {
                searchContent.push({
                    mode: s.mode,
                    id: s.school,
                    name: s.schoolName
                });
            }
        });
    }

    return {
        subject: item.subject,
        theme: item.theme,
        content: item.content,
        selType: selTypeMap[item.selType],
        msgType: msgTypeMap[item.msgType],
        searchContent, // ⬅ 這裡是你要的格式
        sendTime: new Date(item.sendTime).toLocaleString(),
    };
});

2 .比較直覺的

 // 發送名單 
 const sendList = ref([
     {
         mode: "",
         id: "",
         name: ""
     }
 ]);

const dataList = response;

// 抓出傳送名單
sendList.value = []; // 先清空
        
dataList.forEach(item => {
    if (Array.isArray(item.search)) {
        item.search.forEach(s => {
            if (s.mode === 'area' && s.areaId) {
                sendList.value.push({
                    mode: s.mode,
                    id: s.areaId,
                    name: s.areaName
                });
            } else if (s.mode === 'school' && s.school) {
                sendList.value.push({
                    mode: s.mode,
                    id: s.school,
                    name: s.schoolName
                });
            }
        });
    }
});