在過去的幾天裡，我們學會了如何把資料打包進「陣列（Array）」清單與「物件（Object）」百寶箱中，但在實際開發中，資料絕對不會是一成不變的。

例如：使用者在購物車裡點擊「加入商品」，我們的陣列就必須立刻多出一筆資料，或者使用者勾選「只看1000元以下的商品」，我們的清單就必須立刻進行條件篩選。

今天，我們要介紹JavaScript內建最常用的幾個陣列與物件操作方法，不用死記複雜的演算法，只要呼叫這些內建指令，就能瞬間處理好海量資料。

陣列最常用操作方法

我們以一個初始價格清單const prices = [100,250,500]; 為例：

1.push()：在清單最後面「塞入新資料」

• 功能：當使用者又把新商品丟進購物車時，用這個方法把新數據推到陣列的末端。
• 結果：prices.push(800);之後，陣列會變成[100, 250, 500, 800]。

2.pop()：把清單最後一筆資料「拿掉」

• 功能：跟push相反，它會直接刪除並吐出陣列的最尾端資料。
• 結果：prices.pop();之後，陣列會退回[100, 250, 500]。

3.forEach()：每個東西都拿出來「巡視一遍」

• 功能：這是一種更精簡的迴圈寫法，它會自動把陣列裡面的每一筆資料，一件件輪流傳進去執行指定的動作，非常適合用來批量印出畫面。

4.filter()：把符合條件的資料「篩選出來」

• 功能：這是現代前端極度熱門的方法，它會過濾整個陣列，只把符合條件（結果為true）的資料保留下來，並組合成一個全新的乾淨陣列。

物件最常用操作方法

物件是由「鍵（Key）:值（Value）」組成的，有時候我們需要一口氣知道這個物件到底記錄了哪些特徵名字，這時候我們可以用 Object.keys() 語法：

• 功能：把物件裡所有的屬性名稱（Key）抽出來，整齊地打包成一個「陣列清單」。
• 範例：如果是英雄物件，它會吐出["name", "level", "hp"]。

實作範例

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <title>Day29 陣列與物件的常用操作方法</title>
</head>
<body>

    <h1 style="text-align: center;">請打開 Console 觀察海量資料的篩選與增減結果</h1>

    <script>
        // 1. 陣列動態增減 (push)
        console.log("1.資料動態新增");
        
        const cartPrices =[200, 450, 800];
        console.log("原本的購物車價格：", cartPrices);

        // 使用者點擊按鈕，加購了一件150元的商品
        cartPrices.push(150);
        console.log("新增後的購物車價格：", cartPrices); // 印出: [200,450,800,150]

        // 2. 陣列過濾篩選 (filter
        console.log("2.資料條件篩選");

        const products = [
            { name: "極簡風背包", price: 1200 },
            { name: "環保保溫瓶", price: 450 },
            { name: "抗風折疊傘", price: 390 },
            { name: "無線降噪耳機", price: 3500 }
        ];

        // 任務：篩選出價格「低於500元」的商品
        const cheapProducts = products.filter(function(item) {
            return item.price < 500; // 只要價格低於500就在新陣列留下
        });

        console.log("【篩選結果】低於500元的商品有：", cheapProducts);
        // 控制台會精準吐出包含「環保保溫瓶」與「抗風折疊傘」的2筆物件資料

        // 3. 物件特徵提取 (Object.keys)
        console.log("3.物件鍵值提取");

        const userProfile = {
            id: 9527,
            name: "陳小明",
            email: "xiaoming@example.com"
        };

        // 提取該會員物件的所有屬性名稱
        const keys = Object.keys(userProfile);
        console.log("該會員物件記錄了哪些特徵欄位：", keys); 
        // 印出: ["id", "name", "email"]
    </script>
</body>
</html>

程式介紹

將這段程式碼在瀏覽器中運行並打開控制台（Console），你會發現資料被轉換了：

• 動態擴充：透過cartPrices.push(150)，原本長度為3的陣列被即時塞入新元素，完美契合電商網頁購物車的加購邏輯。
• 智慧過濾：在filter()的運作中，JavaScript自動把四筆商品輪流抽出來檢查，不符合條件的背包（1200）和耳機（3500）被直接過濾淘汰，只有符合條件的保溫瓶和折疊傘被整齊地留存在cheapProducts這個新清單中。

總結

今天我們解鎖了JavaScript操作資料的頂層核心技能，有了push()、filter()以及Object.keys()等方法，不論未來後端伺服器丟給我們成千上萬筆多複雜的會員、商品或遊戲數據，我們都能在零點幾毫秒內將它們梳理、增減、並篩選完畢。