vue去除数组指定位置元素的几种方法

 更新时间:2024年03月18日 09:27:01   作者:地霊殿__三無  
这篇文章主要介绍了vue剔除数组指定位置元素的几种方法,文中主要介绍了单个去除和批量去除这两种方法,并通过代码示例讲解的非常详细,需要的朋友可以参考下

一、记录背景

最近遇到一个表格的勾选问题,因为犯了比较隐晦的逻辑bug,所以特此记录一下,引以为戒。

1、事件参与角色介绍

角色: 
1、记录数组multipleSelection,负责记录目前已勾选的记录
2、表格变量currentDeviceList,显示显示当前表格的内容

2、事件关联

由于表格是带筛选功能的,且记录带有记忆性,所以记录数组multipleSelection里,可能携带了表格变量
currentDeviceList里没有的元素,这就导致在进行全部勾选/取消时,不能对记录数组multipleSelection一刀切。

3、事件发展

在全部取消时,应该是把记录数组multipleSelection里,属于当前表格内容的部分进行剔除。

所以我进行了循环,去匹配每一个存在于记录数组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会修改本身数组长度,原先的3位置的元素应该是退到2位置了,如果还剔除3位置的元素,按逻辑来说是不对的。

后续是加了降序排序,才解决了这个问题。

removeArr.sort((a, b) => b - a) 
// 进行降序排序,从后面开始移除,这样位置变化也不会影响到multipleSelection

在写本文的时候,我发现以下更简洁的写法,每次剔除前,直接获取要剔除的位置即可,虽然可能剔除位置一直不变,但是元素的变化了的,所以也不会出现剔除错误的情况。

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

但是来都来了,那就再看看别的方法吧。

二、单个去除

1、按标识方法一 filter

可以使用filter()方法来去除数组中的某个元素。filter()方法会返回一个新的数组,其中只包含满足指定条件的元素。可以通过在filter()方法的回调函数中将满足条件的元素排除掉。

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()方法来去除数组中的某个元素。splice()方法会修改原有数组,在指定的位置删除指定数量的元素。

let arr = [1, 2, 3, 4, 5];
let indexToRemove = 2; // 要删除元素的索引
arr.splice(indexToRemove, 1);
console.log(arr); // 输出 [1, 2, 4, 5]

3、按索引方法三 slice

可以使用slice()方法将要删除的元素之前和之后的元素分别存储在新的数组中,从而得到去除指定元素后的数组。

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

// 原始数组
var arr = [1, 2, 3, 4, 5];
// 要移除的元素列表
var removeList = [2, 4];
// 使用 filter() 函数过滤数组并返回新的数组
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']; // 原始数组
const removeItems = ['a', 'b']; // 要移除的元素列表
// 使用reduce()函数进行批量删除操作
const resultArr = arr.reduce((accumulator, currentValue) => {
    if (!removeItems.includes(currentValue)) {
        accumulator.push(currentValue);
    }
    return accumulator;
}, []);
console.log(resultArr); // 输出结果为[1, 2, 3, 'c']

3、索引+降序+splice(也是本文第一节的思路)

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等循环函数,然后再加上splice等替换函数。

以上就是vue剔除数组指定位置元素的几种方法的详细内容,更多关于vue剔除数组指定位置元素的资料请关注脚本之家其它相关文章!

相关文章

  • 手写Vue弹窗Modal的实现代码

    手写Vue弹窗Modal的实现代码

    这篇文章主要介绍了手写Vue弹窗Modal的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • vue3中使用highlight.js实现代码高亮显示的代码示例

    vue3中使用highlight.js实现代码高亮显示的代码示例

    代码高亮是在网页开发中常见的需求之一,它可以使代码在页面上以不同的颜色或样式进行突出显示提高可读性,这篇文章主要介绍了vue3中使用highlight.js实现代码高亮显示的相关资料,需要的朋友可以参考下
    2025-04-04
  • 前端(VUE)打包上线去除console.log解决方案

    前端(VUE)打包上线去除console.log解决方案

    这篇文章主要介绍了如何在前端项目中使用terser-webpack-plugin插件来删除代码中的console.log语句,以避免在正式环境中输出调试信息,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-02-02
  • 基于element-ui中el-select下拉框选项过多的优化方案

    基于element-ui中el-select下拉框选项过多的优化方案

    这篇文章主要介绍了基于element-ui中el-select下拉框选项过多的优化方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vite项目引入quasar的实现

    vite项目引入quasar的实现

    本文主要介绍了vite项目引入quasar的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-08-08
  • vue使用 better-scroll的参数和方法详解

    vue使用 better-scroll的参数和方法详解

    这篇文章主要介绍了vue使用 better-scroll的参数和方法详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • 解决创建vue项目后没有vue.config.js文件的问题

    解决创建vue项目后没有vue.config.js文件的问题

    这篇文章给大家主要介绍如何解决创建vue项目后没有webpack.config.js(vue.config.js)文件,文中有详细的解决方法,感兴趣的朋友可以参考阅读下
    2023-07-07
  • 基于Vue3+Node.js实现客服实时聊天功能

    基于Vue3+Node.js实现客服实时聊天功能

    想象一下淘宝客服的聊天窗口:你发消息,客服立刻就能看到并回复,这种即时通讯效果是如何实现的呢?本文我们使用 Vue3 作为前端框架,Node.js 作为后端,通过 WebSocket+ Socket.IO 协议实现实时通信,需要的朋友可以参考下
    2025-05-05
  • vue中使用require动态获取图片地址方式

    vue中使用require动态获取图片地址方式

    这篇文章主要介绍了vue中使用require动态获取图片地址方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • 为什么vue中不建议使用空字符串作为className

    为什么vue中不建议使用空字符串作为className

    本文主要介绍了为什么vue中不建议使用空字符串作为className,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论