首页 > 编程语言 >JavaScript遍历数组用splice方法删除元素,这样写可能有遗漏,你遇到过吗?

JavaScript遍历数组用splice方法删除元素,这样写可能有遗漏,你遇到过吗?

时间:2023-04-08 10:32:17浏览次数:45  
标签:遍历 数组 删除 ++ JavaScript write splice document

在编写“圳品”信息系统中,有时需要对二维数组中的数据进行筛选并删除一些元素,比如删除二维数组中首个元素为0的行。

开始是用for循环访问数组+splice方法删除元素来做:

var a = new Array([0,0,0,0],
                  [1,1,1,1],
                  [0,2,2,2],
                  [0,3,3,3],
                  [4,4,4,4]);

var i;

document.write('<p><strong>2、用for循环访问数组删除首个元素值为0的行:</strong></p>');
for (i=0; i < a.length; i++)
{
	if (0==a[i][0])
	{
		document.write('<p>a['+ i +']=' + a[i] + '…… deleted!</p>');
		a.splice(i,1);
	}
}

运行时发现执行结果有时正常,有时会删除不干净,有遗漏。

检查分析后找到了原因:如果二维数组中连续有两行的首个元素为0的行,比如它们分别是第i行和第i+1行,那么用splice方法删除第i行后,第i+1行就会变成第i行,我们应该继续检查第i行,由于for循环每次循环会自动给循环变量i+1,所以下次循环时不再检查第i行,而是检查第i+1行,这样就造成了遗漏。

改进的办法是用while循环:

var a = new Array([0,0,0,0],
                  [1,1,1,1],
                  [0,2,2,2],
                  [0,3,3,3],
                  [4,4,4,4]);
var i;

document.write('<p><strong>2、用while循环访问数组删除首个元素值为0的行:</strong></p>');
i=0;
while(i < a.length)
{
	if (0==a[i][0])
	{
		document.write('<p>a['+ i +']=' + a[i] + '……删除!</p>');
		a.splice(i,1);
	}
	else
	{
		i++;
	}
}   

如果第i行检测到首个元素为0的行则删除,循环变量i不变,进行下一次循环;否则i++。

完整代码如下:

<!DOCTYPE html>
<html>
  <meta name="Author" content="PurpleEndurer">
  <title>“圳品”信息系统</title>
<body>

<script>

var a = new Array([0,0,0,0],
                  [1,1,1,1],
                  [0,2,2,2],
                  [0,3,3,3],
                  [4,4,4,4]);
var i;

document.write('<p style="font-size:16pt; color:purple;"><strong>JavaScript遍历数组用splice方法删除元素,这样写可能有遗漏,你遇到过吗?</strong> @Edge浏览器 by PurpleEndurer</p>');

document.write('<p style="color:blue;"><strong>一、用for循环访问数组+splice方法删除首个元素值为0的行可能有遗漏</strong></p>');
document.write('<p><strong>1、原始数组:</strong></p>');

for (i=0; i < a.length; i++)
{
	document.write((0==a[i][0]) ? ('<p style="color:red;">a['+ i +']=' + a[i] + '</p>')
	                                            : ('<p>a['+ i +']=' + a[i] + '</p>') );
}

document.write('<p><strong>2、用for循环访问数组删除首个元素值为0的行:</strong></p>');
for (i=0; i < a.length; i++)
{
	if (0==a[i][0])
	{
		document.write('<p>a['+ i +']=' + a[i] + '…… deleted!</p>');
		a.splice(i,1);
	}
}

document.write('<p><strong>3、处理后的数组:</strong></p>');
for (i=0; i < a.length; i++)
{
	document.write((0==a[i][0]) ? ('<p style="color:red;">a['+ i +']=' + a[i] + '……应删除但未删除</p>')
	                                            : ('<p>a['+ i +']=' + a[i] + '</p>') );
}

a = new Array([0,0,0,0],
              [1,1,1,1],
              [0,2,2,2],
              [0,3,3,3],
              [4,4,4,4]);

document.write('<p style="color:blue;"><strong>二、用while循环访问数组+splice方法删除首个元素值为0的行</strong></p>');
document.write('<p><strong>1、原始数组:</strong></p>');

for (i=0; i < a.length; i++)
{
	document.write((0==a[i][0]) ? ('<p style="color:red;">a['+ i +']=' + a[i] + '</p>')
	                                            : ('<p>a['+ i +']=' + a[i] + '</p>') );
}

document.write('<p><strong>2、用while循环访问数组删除首个元素值为0的行:</strong></p>');
i=0;
while(i < a.length)
{
	if (0==a[i][0])
	{
		document.write('<p>a['+ i +']=' + a[i] + '……删除!</p>');
		a.splice(i,1);
	}
	else
	{
		i++;
	}
}

document.write('<p><strong>3、处理后的数组:</strong></p>');
for (i=0; i < a.length; i++)
{
	document.write((0==a[i][0]) ? ('<p style="color:red;">a['+ i +']=' + a[i] + '……应删除但未删除</p>')
	                                            : ('<p>a['+ i +']=' + a[i] + '</p>') );
}           
</script>

</body>
</html> 

运行结果截图如下:

JavaScript遍历数组用splice方法删除元素,这样写可能有遗漏,你遇到过吗?_JavaScript


标签:遍历,数组,删除,++,JavaScript,write,splice,document
From: https://blog.51cto.com/endurer/6177471

相关文章

  • JavaScript的引入方式
    外部JS文件deno.jsalert('你好!JavaScript');JS引入方式.html<!--方式一:内部脚本--><!--标签不能自闭和--><script>alert('你好JS')</script><!--方式二:外部引入--><scriptsrc="demo.js"></script>......
  • 数组遍历方法: map、filter、forEach
    区别map叫映射,可以重新赋值,拼接用+号,值+另外的值得新值filter叫筛选数组,可以重新赋值,用><=号,比较筛选值forEach叫跟for循环一样,不可以重新赋值......
  • [Javascript] Improve performance of Array.reduce
    Comparetwocodesnippetconstpeople=[{id:1,name:'John',age:45},{id:2,name:"Op",age:32},{id:3,name:"Wade",age:39}]//option1constres=people.reduce((acc,curr)=>{return({......
  • JS遍历数组的几种方法
    在JavaScript中,遍历数组有多种方法,下面介绍几种经典方法。for循环用for循环遍历数组是最基础、最原始的方法。constarr=[1,2,3,4,5];for(leti=0;i<arr.length;i++){console.log(arr[i]);}forEach()forEach()是ES5中新增的方法,用来遍历数组,可......
  • salesforce学习笔记(3-1)- JavaScript Promise(LWC)
    在JS代码中,Promise到底有什么作用?首先,我们知道的是,Javascript是单线程的,什么意思呢?就是说JS在同一时间只能做一个操作,代码的执行是一行一行进行的:  这种执行方式带来的问题就是在我们打开某个画面的时候,画面可能会卡住转圈、加载中状态很久,用户体验感很差。Promise可用于......
  • javascript把本地sql数据库表转换为对象
    在做项目的时候,需要读取本地数据库,并且在页面上显示出来,原始数据读取出来的原始数据如下:varr=sqliteDB.exec(document.getElementById('txtSQL').value); console.info(r);  使用系统的转换方式console.log('Hereisarow:'+JSON.stringify(r));  可以看到其......
  • 106. 从中序与后序遍历序列构造二叉树 105. 从前序与中序遍历序列构造二叉树
    给定两个整数数组inorder和postorder,其中inorder是二叉树的中序遍历,postorder是同一棵树的后序遍历,请你构造并返回这颗二叉树。classSolution{public:TreeNode*buildTree(vector<int>&inorder,vector<int>&postorder){if(postorder.size()==0)......
  • 你不会还不知道JavaScript常用的8大设计模式?
    JavaScript常用的8大设计模式有工厂模式:工厂模式是一种创建对象的模式,可以通过一个共同的接口创建不同类型的对象,隐藏了对象的创建过程。单例模式:单例模式是一种只允许实例化一次的对象模式,可以通过一个全局访问点来访问它。建造者模式:建造者模式是一种创建复杂对象的模式,通......
  • js数据遍历几种方式
    在JavaScript中,有多种方式可以遍历数据集,下面列出了常用的几种:for循环for循环是一种常见的遍历数据集的方式,可以用于遍历数组、对象等数据类型。例如:constarr=[1,2,3];for(leti=0;i<arr.length;i++){console.log(arr[i]);}constobj={a:1,b:2,......
  • C# javascript中调用自定义函数function
    Default.aspx1<script>2//自定义函数3functionpageInit(){4letdata=[];5varsource_data=my_source_data2();//my_source_data2是一般程序Handler.ashx中,自定义的方法6varmy_data=source_data.split('###');......