更新于2018-04-19

var productItems = ["a", "b", "c", "d"];

var indexs = [1, 2, 3];

indexs.sort(function(a, b) { return b - a});

indexs.forEach(function(index) { productItems.splice(index, 1) })

  将索引集合按照倒序排列,然后splice从数组尾巴开始删除,这样就不会数组的变化就不会影响删除的实现

这里可以直接使用 https://github.com/liyang0612/del-array-value

-----------------------------分割线---------------------------------

昨天遇到一个这样的场景: 有一个不分页的商品列表,里面可能有上千条数据(而且可能是静态数据)甚至更多,这里有个删除功能,需要我们删除其中的一些商品。

这时我的第一反应就是,数据过多不能循环整个数组,只有获取到它们的索引,然后循环得到的索引,使用数组的splice()方法对它进行删除。并且我这样做了,但是发现了一个致命的bug。

bug的原因是这样的: 我先得到了一组索引(就是我所需要删除的商品的索引),然后循环了这组索引,在每次循环的时候我执行了splie()方法,但是由于splice方法执行后会改变数组,所以我的数组长度减少了一;但是我所获取到的索引没有变,从而导致我的第二次splice的时候就出现了bug。

这些我想了另外一个方法:执行一次splice索引应该也减去 “1” 才对,所以我写了这样一个算法;假设所有的索引都为 “n”,并且它们是以正序排列的,那么splice一次之后数组减去 “1”,相应的“n”也减去 “1”;splice第二次之后,“n-2”;第三次之后,“n-3”;

发现这个规律之后我想到的就是,先把所所需要删除元素的索引计算出来。下面是一个例子:

var productItems = ["a", "b", "c", "d"];

var indexs = [1, 2, 3];

//先计算能被正常删除的索引:

var newIndexs =   indexs.map(function(val, idx){    return val - idx;    })

/**因为splice是从第二次的时候出现bug的,
*所以我们第一个索引的位置是正确的,
*从第二次开始 “n-1”,也就是刚好对应索引数组的索引。**/ newIndexs.forEach(function(index){ productItems.splice(index, 1) }) productItems //最后得到 ["a"]

  

这一切都是建立在索引数组是正序排列的情况下,所以计算索引之前,先使用sort方法进行排序;

这样就实现了不循环整个数组,从而删除指定的某些元素。避免了由于数据过大造成的性能问题,毕竟每次删除都去循环几千条数据,这是很恐怖的!!!!

js 根据指定的多个索引,删除相应的数组元素。splice + sort的更多相关文章

  1. mongo 删除内嵌数组元素

    文档格式如下: { "_id" : ObjectId("56e2a92ccc6dd2271953e502"), "links": [ { & ...

  2. js怎么删除数组元素,有哪些删除元素方法

    JavaScript删除元素方法 1.根据索引删除数组元素 delete 数组[索引]   *注意delete 后面是空格 var arr1=["aa","bb" ...

  3. 删除指定表的所有索引,包括主键索引,唯一索引和普通索引 ,适用于sql server 2005,

    原文:删除指定表的所有索引,包括主键索引,唯一索引和普通索引 ,适用于sql server 2005, --删除指定表中所有索引 --用法:declare @tableName varchar(100 ...

  4. js删除数组元素

    一.清空数组 var ary = [1,2,3,4]; ary.splice(0,ary.length);//清空数组 console.log(ary); // 输出 [],空数组,即被清空了 二.删 ...

  5. js删除数组元素、清空数组的简单方法

    一.清空数组 ? 1 2 3 var ary = [1,2,3,4]; ary.splice(0,ary.length);//清空数组 console.log(ary); // 输出 [],空数组,即 ...

  6. js中数组元素的添加和删除

    js中数组元素常用添加方法是直接添加.push方法以及unshift方法 删除方法则是delete.pop.shift 集修改方法为一身的则是splice 1.添加: (1)直接添加通常都是这样 va ...

  7. JS数组方法汇总 array数组元素的添加和删除

    js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^ var arr = new Array(); arr[0] = "aaa"; arr[ ...

  8. vue.js中v-for的使用及索引获取

    1.v-for 直接上代码. 示例一: <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  9. 关于索引删除的策略IndexDeletionPolicy

    关于索引删除的策略IndexDeletionPolicy . public IndexWriter(Directory d, Analyzer a, boolean create)          ...

随机推荐

  1. 拒绝黑盒应用-Spring Boot 应用可视化监控

    图文简介 逻辑关系 效果演示 快速开始 1.Spring Boot 应用暴露监控指标[版本 1.5.7.RELEASE] 首先,添加依赖如下依赖: <dependency> <gro ...

  2. Redux的核心概念,实现代码与应用示例

    Redux是一种JavaScript的状态管理容器,是一个独立的状态管理库,可配合其它框架使用,比如React.引入Redux主要为了使JavaScript中数据管理的方便,易追踪,避免在大型的Jav ...

  3. 设计模式(八)Abstract Factory模式

    抽象工厂的工作是将“抽象零件”组装为“抽象产品”.在抽象工厂模式中将会出现抽象工厂,它会将抽象零件组装为抽象产品.也就是说,我们并不关心零件的具体实现,而是只关心接口.我们仅适用该接口将零件组装起来成 ...

  4. 解开HTTPS的神秘面纱

    在说HTTP前,一定要先介绍一下HTTP,这家伙应该不用过多说明了,大家每天都在用,每一次HTTP请求,都是一次TCP连接.遗憾的是,请求的内容在TCP报文中是明文传输的,任何人截取到请求都可以读取其 ...

  5. MIT线性代数:1.方程组的几何解析

  6. Apache Tomcat服务部署网站

    Tomcat是Apache软件基金会 (Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache.Sun 和其他一些公司及个人共同开发而成.由于有了S ...

  7. 深入理解java虚拟机系列初篇(一):为什么要学习JVM?

    前言 本来想着关于写JVM这个专栏,直接写知识点干货的,但是想着还是有必要开篇讲一下为什么要学习JVM,这样的话让一些学习者心里有点底的感觉比较好... 原因一:面试 不得不说,随着互联网门槛越来越高 ...

  8. jquery layui的巨坑

    jquery layui的巨坑 layui 模块不能写在ajax里 因为 layui只能执行一次 第二次会没效果 再执行需要刷新页面再执行

  9. egret Tiledmap编写障碍物的思路

    egret Tiledmap编写障碍物的思路 获取控制对象下一刻移动的坐标,将其转换成瓦片坐标,如果getTileGIDAt(根据瓦片坐标获取瓦片id)的值不为0,说明对象将要移动的位置有障碍物,不做 ...

  10. 201871010114-李岩松《面向对象程序设计(java)》第十周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...