JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解

作者:木棉

时间:2026-10-30

浏览:280

本文详解JavaScript中遍历数组与对象的区别,重点介绍使用for-in循环递归遍历未知类型对象的方法。通过示例代码展示如何获取对象属性值及特定属性如Url的值,并说明该方法在处理不规则对象时的优势。

文章目录

JS遍历数组与对象的区别

直接来看具体实现代码。


<script>
 //----------------for用来遍历数组对象--
 var i,myArr = [1,2,3];
 for (var i = 0; i < myArr.length; i++) {
  console.log(i+":"+myArr[i]);
 };
 //---------for-in 用来遍历非数组对象
 var man ={hands:2,legs:2,heads:1};
 //为所有的对象添加clone方法,即给内置原型(object,Array,function)增加原型属性,该方法很强大,也很危险
 if(typeof Object.prototype.clone ==="undefined"){
  Object.prototype.clone = function(){}; 
 }
 //
 for(var i in man){
  if (man.hasOwnProperty(i)) { //filter,只输出man的私有属性
   console.log(i,":",man[i]);
  };
 }
 //输出结果为print hands:2,legs:2,heads:1
 for(var i in man) {//不使用过滤
  console.log(i,":",man[i]);
 } 
 //输出结果为
 //hands : 2 index.html:20
 //legs : 2 index.html:20
 //heads : 1 index.html:20
 //clone : function (){} 
 for(var i in man) {
  if(Object.prototype.hasOwnProperty.call(man,i)) { //过滤
   console.log(i,":",man[i]);
  }
 } //输出结果为print hands:2,legs:2,heads:1 </script>

接下来介绍JavaScript中递归遍历对象和数组的方法。

在前端开发中,有时需要遍历类型未知的对象,具体代码如下:

递归遍历对象的方法

//js遍历对象 function TraversalObject(obj) { for (var a in obj) { if (typeof (obj[a]) == "object") { TraversalObject(obj[a]); //递归遍历 } else { alert(a + "=" + obj[a]);//值就显示 } } }

遍历特定属性(如Url)

//遍历对象中所有Ur的值 function TraversalObject(obj) { for (var a in obj) {

if(a=="Url") alert(obj[a]);/ /显示URL的值 if (typeof (obj[a]) == "object") { TraversalObject(obj[a]); //递归遍历 } } }

这种遍历方式在处理结构不规则但需提取相同属性的对象时效果显著。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章