vue去除數(shù)組指定位置元素的幾種方法
一、記錄背景
最近遇到一個表格的勾選問題，因為犯了比較隱晦的邏輯bug，所以特此記錄一下，引以為戒。
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剔除數(shù)組指定位置元素的幾種方法的詳細內(nèi)容，更多關于vue剔除數(shù)組指定位置元素的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了手寫Vue彈窗Modal的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
vue3中使用highlight.js實現(xiàn)代碼高亮顯示的代碼示例
代碼高亮是在網(wǎng)頁開發(fā)中常見的需求之一,它可以使代碼在頁面上以不同的顏色或樣式進行突出顯示提高可讀性,這篇文章主要介紹了vue3中使用highlight.js實現(xiàn)代碼高亮顯示的相關資料,需要的朋友可以參考下2025-04-04
這篇文章主要介紹了如何在前端項目中使用terser-webpack-plugin插件來刪除代碼中的console.log語句,以避免在正式環(huán)境中輸出調(diào)試信息,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-02-02
基于element-ui中el-select下拉框選項過多的優(yōu)化方案
這篇文章主要介紹了基于element-ui中el-select下拉框選項過多的優(yōu)化方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
本文主要介紹了vite項目引入quasar的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-08-08
vue使用 better-scroll的參數(shù)和方法詳解
這篇文章主要介紹了vue使用 better-scroll的參數(shù)和方法詳解,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
解決創(chuàng)建vue項目后沒有vue.config.js文件的問題
這篇文章給大家主要介紹如何解決創(chuàng)建vue項目后沒有webpack.config.js(vue.config.js)文件，文中有詳細的解決方法，感興趣的朋友可以參考閱讀下2023-07-07
基于Vue3+Node.js實現(xiàn)客服實時聊天功能
想象一下淘寶客服的聊天窗口：你發(fā)消息,客服立刻就能看到并回復,這種即時通訊效果是如何實現(xiàn)的呢？本文我們使用 Vue3 作為前端框架,Node.js 作為后端,通過 WebSocket+ Socket.IO 協(xié)議實現(xiàn)實時通信,需要的朋友可以參考下2025-05-05
這篇文章主要介紹了vue中使用require動態(tài)獲取圖片地址方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
本文主要介紹了為什么vue中不建議使用空字符串作為className，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09