JS 實作 #10 | 刪除預算筆數資料處理;map()、splice()

上一節 JS 實作 #9 | 刪除預算按鈕的事件處理;Event Delegation 事件委派 Node.parentNode()Node.childNodes() 設定完刪除按鈕的事件處理,接下來實際處理 data object 裡的內容。

開始實作

1. 在 BUDGET CONTROLLER 裡新增一個公開方法 deleteItem(),用來處理資料刪除。

// BUDGET CONTROLLER
var budgetController = (function(){

    ...
    return {
        addItem: function(type, des, val){
            ...
        },
        **deleteItem: function(type,id) {

        },**
        calculateBudget: function() {
            ...
        },
        getBudget: function() {
            ...
        },

        testing: function(){
            console.log(data);
        }
    }

})();
// GLOBAL APP CONTROLLER
var controller = (function(budgetCtrl, UICtrl){

    var setupEventListeners = function() {
        ...
    };
    var updateBudget = function() {
        ...
    };

    var ctrlAddItem = function() {
        ...
    }

    var ctrlDeleteItem = function(event) {
        var itemID, splitID, type, ID;
        itemID = event.target.parentNode.parentNode.parentNode.parentNode.id;
        if (itemID) {
            
            splitID = itemID.split("-");
            type = splitID[0];
            ID = **parseInt(**splitID[1]**)**;

            // 1. delete the item from the data structure

            **budgetCtrl.deleteItem(type, ID);**

            // 2. delete the item from the UI
            // 3. update and show the new budget
        }
    }
    
    return {
       ...
    }
})(budgetController, UIController);

controller.init();

2. 使用 map() 來獲得一個全新的 array,其中的值是 DOM 中的 ID。接著比對此 array 中 DOM 中的 ID 相同位置 indexOf(),即可獲得原本資料 array 中的 index key 值。最後使用 splice() 刪除原本資料 array 中的對應資料即完成。

// BUDGET CONTROLLER
var budgetController = (function(){

    var Expense = function(id, description, value) {
        ...
    }

    var Income = function(id, description, value) {
        ...
    }

    var calculateTotal = function(type) {
        ...
    }

    var data = {
        allItems: {
            exp: [],
            inc: []
        },
        totals: {
            exp: 0,
            inc: 0
        },
        budget: 0,
        percentage: -1
    };

    return {
        addItem: function(type, des, val){
            ...
        },
        **deleteItem: function(type,id) {

            // DOM:inc-6 ; type = 'inc' ; id = 6
            // 若是使用 data.allItems[type][id] 會刪到 index 為 6 的資料,而不是 DOM inc-6
            // 假使資料 ids array 為 [1, 2, 4, 6, 8]
            // 則需獲得 index 為 3

            var ids, index;

            ids = data.allItems[type].map(function(current){
                return current.id;
            });

            index = ids.indexOf(id);

            // 刪除 array 用 slice
            if (index !== -1) {
                data.allItems[type].splice(index, 1);
            }

        },**
        calculateBudget: function() {
            
            ...
        },
        getBudget: function() {
            ...
        },

        testing: function(){
            console.log(data);
        }
    }

})();

map()

方法會建立一個新的陣列,其內容為原陣列的每一個元素經由回呼函式運算後所回傳的結果之集合。特別適合將原始的變數運算後重新組合一個新的陣列。

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

splice()

splice() 方法可以藉由刪除既有元素並/或加入新元素來改變一個陣列的內容。

回傳的將會是刪除的內容。且原陣列會被改變為欲刪除/新增的結果。

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

範例

let months = ['Jan', 'Feb', 'March', 'April', 'June'];
let newMonths = months.splice(1, 2);
// months 為 ["Jan", "April", "June"]
// newMonths 為 ["Feb", "March"]

//從索引 0 的位置開始,刪除 2 個元素並插入「parrot」、「anemone」和「blue」
var myFish = ['angel', 'clown', 'trumpet', 'sturgeon'];
var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue');

// myFish 為 ["parrot", "anemone", "blue", "trumpet", "sturgeon"] 
// removed 為 ["angel", "clown"]

Zeen is a next generation WordPress theme. It’s powerful, beautifully designed and comes with everything you need to engage your visitors and increase conversions.