Vue實現(xiàn)移除數(shù)組中特定元素的方法小結
一、介紹
1、事件參與角色介紹
角色：
1、記錄數(shù)組multipleSelection，負責記錄目前已勾選的記錄
2、表格變量currentDeviceList，顯示顯示當前表格的內(nèi)容
2、事件關聯(lián)
由于表格是帶篩選功能的，且記錄帶有記憶性，所以記錄數(shù)組multipleSelection里，可能攜帶了表格變量
currentDeviceList里沒有的元素，這就導致在進行全部勾選/取消時，不能對記錄數(shù)組multipleSelection一刀切。
3、事件發(fā)展
在全部取消時，應該是把記錄數(shù)組multipleSelection里，屬于當前表格內(nèi)容的部分進行剔除。
所以我進行了循環(huán)，去匹配每一個存在于記錄數(shù)組multipleSelection，然后進行剔除。
var removeArr = []
this.currentDeviceList.forEach(row => {
const removeIndex = this.multipleSelection.findIndex(item => item === row.deviceId)
if (removeIndex !== -1) {
removeArr.push(removeIndex)
}
})
removeArr.forEach(removeItem => {
this.multipleSelection.splice(removeItem, 1)
})
這段代碼乍一看似乎沒啥問題，removeArr記錄了要剔除的位置，比如[1, 3], 剔除1、3位置，但在剔除1位置后，splice會修改本身數(shù)組長度，原先的3位置的元素應該是退到2位置了，如果還剔除3位置的元素，按邏輯來說是不對的。
后續(xù)是加了降序排序，才解決了這個問題。
removeArr.sort((a, b) => b - a) // 進行降序排序，從后面開始移除，這樣位置變化也不會影響到multipleSelection
在寫本文的時候，我發(fā)現(xiàn)以下更簡潔的寫法，每次剔除前，直接獲取要剔除的位置即可，雖然可能剔除位置一直不變，但是元素的變化了的，所以也不會出現(xiàn)剔除錯誤的情況。
this.currentDeviceList.forEach(row => {
const removeIndex = this.multipleSelection.findIndex(item => item === row.deviceId)
if (removeIndex !== -1) {
this.multipleSelection.splice(removeIndex, 1)
}
})
但是來都來了，那就再看看別的方法吧。
二、單個去除
1、按標識方法一 filter
可以使用filter()方法來去除數(shù)組中的某個元素。filter()方法會返回一個新的數(shù)組，其中只包含滿足指定條件的元素?？梢酝ㄟ^在filter()方法的回調(diào)函數(shù)中將滿足條件的元素排除掉。
let arr = [1, 2, 3, 4, 5]; let elementToRemove = 3; let newArr = arr.filter(item => item !== elementToRemove); console.log(newArr); // 輸出 [1, 2, 4, 5]
2、按索引方法二 splice
可以使用splice()方法來去除數(shù)組中的某個元素。splice()方法會修改原有數(shù)組，在指定的位置刪除指定數(shù)量的元素。
let arr = [1, 2, 3, 4, 5]; let indexToRemove = 2; // 要刪除元素的索引 arr.splice(indexToRemove, 1); console.log(arr); // 輸出 [1, 2, 4, 5]
3、按索引方法三 slice
可以使用slice()方法將要刪除的元素之前和之后的元素分別存儲在新的數(shù)組中，從而得到去除指定元素后的數(shù)組。
let arr = [1, 2, 3, 4, 5]; let indexToRemove = 2; // 要刪除元素的索引 let newArr = arr.slice(0, indexToRemove).concat(arr.slice(indexToRemove + 1)); console.log(newArr); // 輸出 [1, 2, 4, 5]
三、批量去除
1、如果指定位置是有特定標識， filter
// 原始數(shù)組
var arr = [1, 2, 3, 4, 5];
// 要移除的元素列表
var removeList = [2, 4];
// 使用 filter() 函數(shù)過濾數(shù)組并返回新的數(shù)組
var newArr = arr.filter(function (item) {
return !removeList.includes(item); // 判斷當前元素是否在要移除的列表中
});
console.log(newArr); // 輸出結果為 [1, 3, 5]
2、如果指定位置有特定標識，reduce
const arr = [1, 2, 3, 'a', 'b', 'c']; // 原始數(shù)組
const removeItems = ['a', 'b']; // 要移除的元素列表
// 使用reduce()函數(shù)進行批量刪除操作
const resultArr = arr.reduce((accumulator, currentValue) => {
if (!removeItems.includes(currentValue)) {
accumulator.push(currentValue);
}
return accumulator;
}, []);
console.log(resultArr); // 輸出結果為[1, 2, 3, 'c']
3、索引+降序+splice（也是本文第一節(jié)的思路）
function removeElements(arr, positions) {
// 將要移除的位置按降序排列
const sortedPositions = [...positions].sort((a, b) => b - a);
for (let i = 0; i < sortedPositions.length; i++) {
arr.splice(sortedPositions[i], 1);
}
}
// 示例用法
const array = ['A', 'B', 'C', 'D', 'E'];
removeElements(array, [2, 4]);
console.log(array); // 輸出 ["A", "B", "D"]
四、小結
方法甚多，但無外乎都是標識、索引這兩塊，然后配合forEach、filter、reduce、for、map等循環(huán)函數(shù)，然后再加上splice等替換函數(shù)。
到此這篇關于Vue實現(xiàn)移除數(shù)組中特定元素的方法小結的文章就介紹到這了,更多相關Vue移除特定元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue3.x項目中,出現(xiàn)紅色波浪線問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue-cli中post請求發(fā)送Json格式數(shù)據(jù)方式
這篇文章主要介紹了Vue-cli中post請求發(fā)送Json格式數(shù)據(jù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue在mounted中window.onresize不生效問題及解決
這篇文章主要介紹了vue中在mounted中window.onresize不生效問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細介紹了Vuex實現(xiàn)簡單購物車，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
在當今前端開發(fā)的領域中,Vue 框架因其高效和靈活的特性備受開發(fā)者青睞,而 Vant 是一個輕量的移動端組件庫,為 Vue 應用的開發(fā)提供了豐富且便捷的功能組件,本文將就如何在 Vue 框架中通過 Vant 來實現(xiàn)日期選擇器的使用,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了Vue如何解決每次發(fā)版都要強刷清除瀏覽器緩存問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue2.0中組件傳值的幾種方式總結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家詳細介紹了如何通過Vue實現(xiàn)自定義視頻和圖片上傳的功能，文中的示例代碼簡潔易懂，感興趣的小伙伴可以跟隨小編一起學習一下2023-04-04
在Vue3.x中實現(xiàn)類似React.lazy效果的方法詳解
React 的 React.lazy 功能為組件懶加載提供了原生支持,允許開發(fā)者將組件渲染推遲到實際需要時再進行,雖然 Vue3.x 沒有一個直接對應的 lazy 函數(shù),但我們可以通過動態(tài)導入和 defineAsyncComponent 方法來實現(xiàn)類似的效果,需要的朋友可以參考下2024-03-03
本篇文章分步驟給大家介紹了vue3使用axios并封裝axios請求的詳細步驟，結合實例代碼給大家講解的非常詳細，需要的朋友參考下吧2023-06-06