在写JS代码时,我们常常使用 splice 函数来删除数组中的元素,因为 splice 函数会直接对数组进行修改,从而不需再自己写一个算法来移动数组中的其他元素填补到被删除的位置。splice 功能十分强大,除了可以删除数组的元素之外,还可以删除的同时添加新的元素到删除的位置等等用法。在本篇文章中,我只介绍 splice 的删除数组元素的用法,和在 for 循环中使用 splice 时遇到过的坑,作为记录以免我下次忘记了这个坑。

在使用 splice 之前,必备条件是,要先有一个数组。。。

var arr = new Array(1, 2, 3, 4, 5); //初始化一个数组 [ 1, 2, 3, 4, 5 ]

看到这个数组,我觉得中间的数字3不好看,我要把它删掉。数字3是数组下标2的元素,而且我只需要删掉1个数字,于是。。。

var index = 2; //数字3在数组中的下标
var amount = 1; //从数组的位置index开始删除数字的个数 var num = arr.splice( index, amount); //从arr数组的下标2开始删除一个数字,并将被删除的数字赋值到num

 

哇,用 splice 来删除数组元素好简单啊,于是我开开心心地用到 for 循环里面。。。

var arr = new Array(1, 2, 3, 4, 5); //初始化数字集合
var delete_number = 3; //要被删除的数字 //遍历数组
for(var i=0; i<arr.length; i++){
if(arr[i] === delete_number){ //如果找到要被删除的数字所在的数组下标
var num = arr.splice( i, 1 ); //从i位置开始删除1个数字
console.log("成功删除 "+num); //输出被删除的数字
}
else{
console.log(arr[i]+" 未被删除"); //如果i下标的数组元素不是需要被删除的数字,就输出数字
}
}

  

哈哈,讨厌的数字3肯定被删掉了。不过还是要看一下调试信息。。。

看见没有,数字3果然被删掉了!!!哈哈哈哈,不过仔细一看,咦,4呢???????可爱的数字4没有被循环遍历到。。。

前面说过,splice 是直接操作并修改数组的,所以当找到数字3时在循环中的 i 下标是2,而当删除数字3后,数组下标 i 位置中保存的数字变为了数字4,然后到了下一个循环 i 下标为3时,数组下标 i 位置中保存的数字是5,所以跳过了数字4,于是调试信息中没有可爱的数字4.。。。原理就是这样子,是不是很绕。

题外话:因为我的疏忽,在一个for循环中加入了 splice 后,导致了我的H5游戏项目中的众多 NPC 中的某一个 NPC 并没有按预期地移动到相应的位置。最重要的是我还提交到了版本库,与 splice 同时提交了几百行代码,所以不能回退版本只能断点调试到深夜才找到这么小小错误。所以我写了这篇文章来记录一下在 for 循环中使用 splice 的坑。

说了这么多,怎么解决漏掉了数字4这个问题呢???很简单,在使用 splice 的下一句,改一下循环变量值即可。。。

if(arr[i] === delete_number){ //如果找到要被删除的数字所在的数组下标
var num = arr.splice( i, 1 ); //从i位置开始删除1个数字
console.log("成功删除 "+num); //输出被删除的数字 i = i-1; //解决方案
}

  

看完以上内容,是不是觉得特别简单而且小菜一碟,粗都嘛爹,等一下,我要确保你不会向我一样犯 splice 引起的低级错误,所以请看以下代码,比以上的稍微复杂一点点,如果你仅根据代码推出的答案跟结果一样,就能确保下次使用 splice 时会有意识避开问题了。。。

var arr = new Array(1, 2, 3, 4, 5); //初始化数字集合
var delete_number = 3; //要被删除的数字
var amount = 2; ////从数组的某位置开始删除数字的个数 var loop = arr.length; //循环次数 //遍历数组
for(var i=0; i < loop; i++){
if(arr[i] === delete_number){ //如果找到要被删除的数字所在的数组下标
var num = arr.splice( i, amount ); //从i位置开始删除1个数字 i = i - 1; //改变循环变量
loop = loop - amount; //改变循环次数 }
else{
console.log( arr[i] + ", ");
}
} //结果:1,2,5

  

---------------------
作者:咖啡学编程
来源:CSDN
原文:https://blog.csdn.net/a727911438/article/details/55224532
版权声明:本文为博主原创文章,转载请附上博文链接!

(转)JS的splice()方法在for循环中的使用问题的更多相关文章

  1. JS的splice()方法在for循环中使用可能会遇到的坑

    在写JS代码时,我们常常使用 splice 函数来删除数组中的元素,因为 splice 函数会直接对数组进行修改,从而不需再自己写一个算法来移动数组中的其他元素填补到被删除的位置.splice 功能十 ...

  2. JS对象 substring() 方法用于提取字符串中介于两个指定下标之间的字符。

    提取字符串substring() substring() 方法用于提取字符串中介于两个指定下标之间的字符. 语法: stringObject.substring(starPos,stopPos)  参 ...

  3. AngularJS例子 ng-repeat遍历输出 通过js的splice方法删除当前行

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. js的splice方法

    splice是js原生处理数组的方法,可以在不改变引用的情况下对数组处理 arrayObject.splice(index,howmany,item1,.....,itemX)参数 描述index 必 ...

  5. splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目

    删除位于 index 2 的元素,并添加一个新元素来替代被删除的元素: <script type="text/javascript"> var arr = new Ar ...

  6. JS中的splice方法

    JS中的splice方法 定义和用法 splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目. 注释:该方法会改变原始数组(集合). 语法 arrayObject.splice(ind ...

  7. 关于js中splice方法返回的结果

    一.前言 刚刚在使用splice()方法,发现这个方法返回的是删除后的数组元素,如果要获取删除指定元素后的数组,直接调用原来的数组即可!因为splice()会改变原来数组!之前对splice()方法一 ...

  8. js splice()方法

    splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目. 注释:该方法会改变原始数组. 实例 例子 1 在本例中,我们将创建一个新数组,并向其添加一个元素: <script ty ...

  9. 从js的repeat方法谈js字符串与数组的扩展方法

    js将字符串重复N次的repeat方法的8个版本 /* *@desc: 将一个字符串重复自身N次 */ //版本1:利用空数组的join方法 function repeat(target, n) { ...

随机推荐

  1. Jmeter-Json提取器、用户定义变量配置

    一.Jmeter用户定义的变量,一般用于配置全局变量 1.选择用户定义的变量菜单 2.配置需要的用户定义变量 这里我添加常用的localhost和port 3.如何使用 需要使用${...}进行引用 ...

  2. [转]C#对Excel报表进行操作(读写和基本操作)

    //1.添加引用-〉com-〉microsoft excel 11.0 //2.若出现错误:命名空间“Microsoft.Office”中不存在类型或命名空间名称“Interop”(是缺少程序集引用吗 ...

  3. ps使logo背景色透明

    方法一:魔法工具(对复杂的logo误差较大) 魔法工具--左键点击选区--delete--保存 方法二:拾色器 1.有的站上的素材图片不能直接用,需要先变成rgb图像,可这样操作:图像\模式,选择rg ...

  4. Go Hello World 实例

    ## Go Hello World 实例 package main import "fmt" func main() { /* This is my first sample pr ...

  5. thinkphp 数据分页

    通常在数据查询后都会对数据集进行分页操作,ThinkPHP也提供了分页类来对数据分页提供支持. 下面是数据分页的两种示例. 第一种:利用Page类和limit方法 $User = M('User'); ...

  6. Gym101981D - 2018ACM-ICPC南京现场赛D题 Country Meow

    2018ACM-ICPC南京现场赛D题-Country Meow Problem D. Country Meow Input file: standard input Output file: sta ...

  7. c++ 枚举简单举例

    #include <iostream> enum Enumeration{ VAL1, VAL2, VAL3=100, VAL4 }; int main() { using namespa ...

  8. DLL注入技术之劫持进程创建注入

    劫持进程创建注入原理是利用Windows系统中CreateProcess()这个API创建一个进程,并将第6个参数设为CREATE_SUSPENDED,进而创建一个挂起状态的进程,利用这个进程状态进行 ...

  9. java系列(1/4)基础阶段-MySQL(2/13)

    本单元目标 一.为什么要学习数据库 二.数据库的相关概念 DBMS.DB.SQL 三.数据库存储数据的特点 四.初始MySQL MySQL产品的介绍 MySQL产品的安装 ★ MySQL服务的启动和停 ...

  10. PAT_A1099#Build A Binary Search Tree

    Source: PAT A1099 Build A Binary Search Tree (30 分) Description: A Binary Search Tree (BST) is recur ...