有時候我們需要在Vue中刪除一個特定的對象,這個對象可能存在于一個數組中。刪除數組中的一個對象可以采用多種方法,但其中最常用的方法是使用splice方法。
// splice方法 array.splice(index,numberOfItemsToDelete);
splice方法接受兩個參數:需要刪除的對象的索引和需要刪除的對象數。比如說,我們有如下的一個數組:
var items = [ { id: 1, name: 'John' }, { id: 2, name: 'Jane' }, { id: 3, name: 'Bob' } ];
現在我們需要刪除一個名字為Jane的對象,那么這個時候就需要銷毀該對象。要做到這一點,首先需要找到名字為Jane的對象的索引位置,代碼如下:
var index = items.findIndex(function(item){ return item.name === 'Jane'; });
接下來,我們可以使用splice方法來刪除該對象:
items.splice(index,1);
在上面的代碼中,1代表了需要刪除的對象數,由于我們只需要刪除一個對象,因此只需要傳遞1就可以了。
我們可以打印輸出所有的對象以便于驗證結果:
console.log(items);
控制臺輸出結果應該是這樣的:
[ { id: 1, name: 'John' }, { id: 3, name: 'Bob' } ]
你會發現,名字為丫丫的Jane已經從該數組中刪除了。
splice方法的一個缺點是需要知道需要刪除對象的索引位置。但是有時候當數據結構復雜時,每個對象的索引位置并不容易計算。這個時候,我們可以使用filter方法,只需要傳遞一個函數參數就可以了。這個函數用于判斷哪些對象保留,哪些對象應該被刪除。
如下是使用filter方法刪除名字為Jane的對象的腳本:
items = items.filter(function(item){ return item.name !== 'Jane'; });
在上述的代碼中,filter的函數參數需要返回boolean值,如果函數返回true,則表示該對象需要保留在數組中,否則就需要將該對象刪除。由于我們需要刪除名字為Jane的對象,因此在函數中可以使用 != 比較符代替 !==,這樣可以完成該數組的刪除操作。
這就是Vue中刪除數組對象的常用方法。使用這些方法,你可以輕松地刪除任何數組中的對象,并根據自己的需求進行修改。
下一篇vue 數組上移