欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue去除數(shù)組指定位置元素的幾種方法

 更新時(shí)間：2024年03月18日 09:27:01   作者：地霊殿__三無(wú)  
這篇文章主要介紹了vue剔除數(shù)組指定位置元素的幾種方法,文中主要介紹了單個(gè)去除和批量去除這兩種方法,并通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下

一、記錄背景

最近遇到一個(gè)表格的勾選問(wèn)題，因?yàn)榉噶吮容^隱晦的邏輯bug，所以特此記錄一下，引以為戒。

1、事件參與角色介紹

角色： 
1、記錄數(shù)組multipleSelection，負(fù)責(zé)記錄目前已勾選的記錄
2、表格變量currentDeviceList，顯示顯示當(dāng)前表格的內(nèi)容

2、事件關(guān)聯(lián)

由于表格是帶篩選功能的，且記錄帶有記憶性，所以記錄數(shù)組multipleSelection里，可能攜帶了表格變量
currentDeviceList里沒(méi)有的元素，這就導(dǎo)致在進(jìn)行全部勾選/取消時(shí)，不能對(duì)記錄數(shù)組multipleSelection一刀切。

3、事件發(fā)展

在全部取消時(shí)，應(yīng)該是把記錄數(shù)組multipleSelection里，屬于當(dāng)前表格內(nèi)容的部分進(jìn)行剔除。

所以我進(jìn)行了循環(huán)，去匹配每一個(gè)存在于記錄數(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)
    })

這段代碼乍一看似乎沒(méi)啥問(wèn)題，removeArr記錄了要剔除的位置，比如[1, 3], 剔除1、3位置，但在剔除1位置后，splice會(huì)修改本身數(shù)組長(zhǎng)度，原先的3位置的元素應(yīng)該是退到2位置了，如果還剔除3位置的元素，按邏輯來(lái)說(shuō)是不對(duì)的。

后續(xù)是加了降序排序，才解決了這個(gè)問(wèn)題。

removeArr.sort((a, b) => b - a) 
// 進(jìn)行降序排序，從后面開(kāi)始移除，這樣位置變化也不會(huì)影響到multipleSelection

在寫(xiě)本文的時(shí)候，我發(fā)現(xiàn)以下更簡(jiǎn)潔的寫(xiě)法，每次剔除前，直接獲取要剔除的位置即可，雖然可能剔除位置一直不變，但是元素的變化了的，所以也不會(huì)出現(xiàn)剔除錯(cuò)誤的情況。

this.currentDeviceList.forEach(row => {
      const removeIndex = this.multipleSelection.findIndex(item => item === row.deviceId)
      if (removeIndex !== -1) {
        this.multipleSelection.splice(removeIndex, 1)
      }
    })

但是來(lái)都來(lái)了，那就再看看別的方法吧。

二、單個(gè)去除

1、按標(biāo)識(shí)方法一 filter

可以使用filter()方法來(lái)去除數(shù)組中的某個(gè)元素。filter()方法會(huì)返回一個(gè)新的數(shù)組，其中只包含滿(mǎn)足指定條件的元素?？梢酝ㄟ^(guò)在filter()方法的回調(diào)函數(shù)中將滿(mǎn)足條件的元素排除掉。

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()方法來(lái)去除數(shù)組中的某個(gè)元素。splice()方法會(huì)修改原有數(shù)組，在指定的位置刪除指定數(shù)量的元素。

let arr = [1, 2, 3, 4, 5];
let indexToRemove = 2; // 要?jiǎng)h除元素的索引
arr.splice(indexToRemove, 1);
console.log(arr); // 輸出 [1, 2, 4, 5]

3、按索引方法三 slice

可以使用slice()方法將要?jiǎng)h除的元素之前和之后的元素分別存儲(chǔ)在新的數(shù)組中，從而得到去除指定元素后的數(shù)組。

let arr = [1, 2, 3, 4, 5];
let indexToRemove = 2; // 要?jiǎng)h除元素的索引
let newArr = arr.slice(0, indexToRemove).concat(arr.slice(indexToRemove + 1));
console.log(newArr); // 輸出 [1, 2, 4, 5]

三、批量去除

1、如果指定位置是有特定標(biāo)識(shí)， filter

// 原始數(shù)組
var arr = [1, 2, 3, 4, 5];
// 要移除的元素列表
var removeList = [2, 4];
// 使用 filter() 函數(shù)過(guò)濾數(shù)組并返回新的數(shù)組
var newArr = arr.filter(function (item) {
    return !removeList.includes(item); // 判斷當(dāng)前元素是否在要移除的列表中
});
console.log(newArr); // 輸出結(jié)果為 [1, 3, 5]

2、如果指定位置有特定標(biāo)識(shí)，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é)

方法甚多，但無(wú)外乎都是標(biāo)識(shí)、索引這兩塊，然后配合forEach、filter、reduce、for、map等循環(huán)函數(shù)，然后再加上splice等替換函數(shù)。

以上就是vue剔除數(shù)組指定位置元素的幾種方法的詳細(xì)內(nèi)容，更多關(guān)于vue剔除數(shù)組指定位置元素的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論