JavaScript深度迭代遍历未知对象
栏目: JavaScript · 发布时间: 5年前
内容简介:面向对象编程的语言,都存在对对象的一些操作,其中就包括遍历未知对象的属性值。常见的遍历对象的方法:但是对象中又含有子对象,对象的属性又是另一个对象,或者更深层嵌套,上面方法就不适用了;
面向对象编程的语言,都存在对对象的一些操作,其中就包括遍历未知对象的属性值。
通常情况
常见的遍历对象的方法:
var o = { name: 'cloud', age: 20 } for (i in o) { console.log(i + ': ' + o[i]); } // name: cloud // age: 20
特殊情况
但是对象中又含有子对象,对象的属性又是另一个对象,或者更深层嵌套,上面方法就不适用了;
下面使用 递归 实现这个功能:
var o = { name: { firstName: 'cloud', lastName: 'huang' }, age: 20 } function myFn(obj) { for (i in obj) { console.log(i + ': ' + obj[i]); // 这里使用递归,属性类型为对象则进一步遍历 if (typeof(obj[i]) == 'object') { myFn(obj[i]); } } } myFn(o); // 输出: // name: [object Object] // firstName: cloud // lastName: huang // age: 20
这样的话不论对象有多复杂的结构都能全部遍历到位;
困境
但同时,这也是个问题,一些对象层次非常深甚至是死循环的情况就尴尬了,类似于子对象属性与父对象属性一样,尝试用上诉函数遍历一下浏览器的 window
对象就能体会了,你会后悔的;
所以为避免这种尴尬情况,设置一个 迭代深度值 吧,指定遍历到第几代:
var depth = 0; // depth为迭代深度值 function myFn(obj) { for (i in obj) { console.log(i + ': ' + obj[i]); depth++; if (depth < 10 && typeof(obj[i]) == 'object') { myFn(obj[i]); } } }
或者使用一种类似 懒加载 的形式:
function myFn(obj) { for (i in obj) { console.log(i + ': ' + obj[i]); if (typeof(obj[i]) == 'object') { // 判断用户是否要继续迭代 if (confirmFn('是否深入遍历?')) { myFn(obj[i]); } } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- JavaScript 遍历、枚举与迭代的骚操作(上篇)
- JavaScript 遍历、枚举与迭代的骚操作(下篇)
- Java中二叉树的PreOrder遍历——递归与迭代实例
- 设计模式——迭代器模式(遍历王者荣耀和英雄联盟英雄信息)
- 数组常见的遍历循环方法、数组的循环遍历的效率对比
- 迭代器萃取与反向迭代器
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
深入浅出Ext JS
何启伟、徐会生、康爱媛 / 人民邮电出版社 / 2010-5 / 69.00元
以用户为中心的时代,应用的界面外观变得越来越重要。然而,很多程序员都缺乏美术功底,要开发出界面美观的应用实属不易。Ext JS的出现,为广大程序员解决了这一难题。它有丰富多彩的界面和强大的功能,是开发具有炫丽外观的RIA应用的最佳选择。 本书是《深入浅出Ext JS》的升级版,涵盖了最新发布的Ext JS 3.2新特性,并对上一版的内容进行增补,充实了示例代码,同时补充了两个功能强大的实例。......一起来看看 《深入浅出Ext JS》 这本书的介绍吧!