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

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

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

运行结果截图如下:

image.png

相关文章
|
2天前
|
前端开发 JavaScript 索引
JavaScript 数组常用高阶函数总结,包括插入,删除,更新,反转,排序等,如map、splice等
JavaScript数组的常用高阶函数,包括遍历、插入、删除、更新、反转和排序等操作,如map、splice、push、pop、reverse等。
|
18天前
|
JavaScript 前端开发
JavaScript遍历数组用splice方法删除元素,这样写可能有遗漏,你遇到过吗?
JavaScript遍历数组用splice方法删除元素,这样写可能有遗漏,你遇到过吗?
|
21天前
|
JavaScript 前端开发 索引
JavaScript 数组中splice()的用法
本文介绍了JavaScript数组方法splice()的三种用法:删除元素、插入元素和替换元素,通过具体代码示例展示了如何使用splice()方法进行数组的修改操作。
|
2月前
|
JavaScript 前端开发 UED
JavaScript代码技巧大分享,在数组中去重元素
本文介绍了一系列实用的JavaScript函数,包括将内容复制到剪贴板、获取鼠标选中内容、打乱数组顺序、颜色值转换(RGBA与十六进制)、计算平均值、判断奇偶数、数组去重、检查空对象、反转字符串、计算日期间隔、首字母大写、生成随机字符串和随机数等,帮助提升网站的用户体验和功能丰富性。
26 4
|
3月前
|
JavaScript
JS 数组去重(含简单数组去重【5种方法】、对象数组去重【2种方法】)
JS 数组去重(含简单数组去重【5种方法】、对象数组去重【2种方法】)
41 0
|
3月前
|
JavaScript 前端开发 C++
JavaScript 数组去重——普通数组去重 vs 对象数组去重
JavaScript 数组去重——普通数组去重 vs 对象数组去重
27 0
|
5月前
|
JavaScript 前端开发
JavaScript 数组的添加删除和排序
JavaScript 数组的添加删除和排序
|
5月前
|
前端开发 JavaScript 开发者
遍历指南:JavaScript 中的 for、for-in、for-of 和 forEach 循环详解
遍历指南:JavaScript 中的 for、for-in、for-of 和 forEach 循环详解
85 3
|
5月前
|
JavaScript 前端开发
JavaScript数组去重,大小排序的两种方法
JavaScript数组去重,大小排序的两种方法
|
JavaScript 前端开发 索引
[JavaScript] 从数组中删除特定元素
要使用 JavaScript 从数组中删除特定元素,可以使用splice、filter、indexOf等方法
165 0