JS的 for in 循环遍历DOM节点时的巨坑 , 循环体自带异常的处理和思考

最新推荐文章于 2024-06-02 23:45:23 发布

那年的雪a

最新推荐文章于 2024-06-02 23:45:23 发布

阅读量958

点赞数

分类专栏：前端部分

本文链接：https://blog.youkuaiyun.com/qq_33949023/article/details/112253210

版权

前端部分专栏收录该内容

24 篇文章

订阅专栏

本文探讨了使用JavaScript中的for...in循环遍历DOM节点时遇到的问题及解决办法。作者发现这种循环方式会导致异常，影响代码执行，并给出了两种解决策略：使用try...catch捕获异常或改用普通for循环。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天踩了个坑 :

在JS中用for(i in arr)去遍历DOM节点时,循环体内自带异常;
分明数组长度是正确的,可遍历的次数>数组长度);
补充说明 : 仅对节点,进行了读取操作;
直接影响 , JS后续代码停止执行

解决方案 : try.catch掉,或者用普通for循环;

部分代码如下:

function itemTotal(){ // 订单项合计
	var items = document.getElementsByClassName("checkbox");	
	var priceTotal = 0; // 合计金额
	var numTotal = 0; // 合计数量

	alert("数组长度是 : "+items.length); // 2 没错	
	var index = 0; // 循环次数;
	for(i in items){ // 循环体自带异常 ;
		index++;
		
		try{
			numTotal += parseInt(items[i].parentNode.parentNode.children[4].children[1].value);
			priceTotal += parseInt(items[i].parentNode.parentNode.children[5].children[0].innerHTML);
			alert("叠加后金额为:"+priceTotal +"| 数量为:" + numTotal);
		}catch(err){
			alert("出错啦(截获不处理)!当前第几个元素出错:"+index); // 三次报错,分别为 :3.4.5
			alert(err.message); // items[i].parentNode is undefined --> items里最后还附带了其他元素,导致出错!
		}
	}
	
	alert("运行结束!");
	alert("叠加后金额为:"+priceTotal +"| 数量为:" + numTotal);

问题根源 : for in 遍历 , 会将item的子级属性也给遍历出来;

另一种解决方法思路 :

vararray = ["admin","manager","db"];
Array.prototype.name= "zhangshan";
     for(var i in array){
//如果不是该对象自身直接创建的属性，则跳过遍历;
         if(!array.hasOwnProperty(i)){
              continue;
          }
          alert(array[i]);
	}