Vue實(shí)現(xiàn)移除數(shù)組中特定元素的方法小結(jié)
一、介紹
1、事件參與角色介紹
角色：
1、記錄數(shù)組multipleSelection，負(fù)責(zé)記錄目前已勾選的記錄
2、表格變量currentDeviceList，顯示顯示當(dāng)前表格的內(nèi)容
2、事件關(guān)聯(lián)
由于表格是帶篩選功能的，且記錄帶有記憶性，所以記錄數(shù)組multipleSelection里，可能攜帶了表格變量
currentDeviceList里沒有的元素，這就導(dǎo)致在進(jìn)行全部勾選/取消時，不能對記錄數(shù)組multipleSelection一刀切。
3、事件發(fā)展
在全部取消時，應(yīng)該是把記錄數(shù)組multipleSelection里，屬于當(dāng)前表格內(nèi)容的部分進(jìn)行剔除。
所以我進(jìn)行了循環(huán)，去匹配每一個存在于記錄數(shù)組multipleSelection，然后進(jìn)行剔除。
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位置的元素應(yīng)該是退到2位置了，如果還剔除3位置的元素，按邏輯來說是不對的。
后續(xù)是加了降序排序，才解決了這個問題。
removeArr.sort((a, b) => b - a) // 進(jìn)行降序排序，從后面開始移除，這樣位置變化也不會影響到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、按標(biāo)識方法一 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、如果指定位置是有特定標(biāo)識， 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); // 判斷當(dāng)前元素是否在要移除的列表中
});
console.log(newArr); // 輸出結(jié)果為 [1, 3, 5]
2、如果指定位置有特定標(biāo)識，reduce
const arr = [1, 2, 3, 'a', 'b', 'c']; // 原始數(shù)組
const removeItems = ['a', 'b']; // 要移除的元素列表
// 使用reduce()函數(shù)進(jìn)行批量刪除操作
const resultArr = arr.reduce((accumulator, currentValue) => {
if (!removeItems.includes(currentValue)) {
accumulator.push(currentValue);
}
return accumulator;
}, []);
console.log(resultArr); // 輸出結(jié)果為[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"]
四、小結(jié)
方法甚多，但無外乎都是標(biāo)識、索引這兩塊，然后配合forEach、filter、reduce、for、map等循環(huán)函數(shù)，然后再加上splice等替換函數(shù)。
到此這篇關(guān)于Vue實(shí)現(xiàn)移除數(shù)組中特定元素的方法小結(jié)的文章就介紹到這了,更多相關(guān)Vue移除特定元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
前端架構(gòu)vue動態(tài)組件使用基礎(chǔ)教程
這篇文章主要為大家介紹了前端架構(gòu)vue動態(tài)組件使用的基礎(chǔ)教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-02-02
vue用h()函數(shù)創(chuàng)建Vnodes的實(shí)現(xiàn)
Vue提供了一個h()函數(shù)用于創(chuàng)建vnodes,本文就來介紹一下vue用h()函數(shù)創(chuàng)建Vnodes的實(shí)現(xiàn),具有一定的參考價值,感興趣的可以了解一下2024-01-01
vue 路由守衛(wèi)(導(dǎo)航守衛(wèi))及其具體使用
這篇文章主要介紹了vue 路由守衛(wèi)(導(dǎo)航守衛(wèi))及其具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
vue2.0如何動態(tài)綁定img的src屬性(三元運(yùn)算)
這篇文章主要介紹了vue2.0如何動態(tài)綁定img的src屬性(三元運(yùn)算)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了Vue中引入swiper報(bào)錯的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue中keep-alive 實(shí)現(xiàn)后退不刷新并保持滾動位置
這篇文章主要介紹了Vue中keep-alive 實(shí)現(xiàn)后退不刷新并保持滾動位置的相關(guān)知識，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
在React和Vue中使用Mock.js模擬接口的實(shí)現(xiàn)方法
本文將介紹如何在React和Vue項(xiàng)目中使用Mock.js來模擬接口攔截請求,幫助開發(fā)者在不依賴后端的情況下高效地進(jìn)行前端開發(fā),文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vue使用xe-utils函數(shù)庫的具體方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
uniapp+vue3路由跳轉(zhuǎn)傳參的實(shí)現(xiàn)
本文主要介紹了uniapp+vue3路由跳轉(zhuǎn)傳參的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11
vue在前端技術(shù)中使用越來越多，也成為了主流框架，今天咱花點(diǎn)時間學(xué)習(xí)下Vue與element-ui整合方式，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-04-04