JavaScript深度迭代遍历未知对象

最新推荐文章于 2025-02-20 16:24:17 发布

瑝琦

最新推荐文章于 2025-02-20 16:24:17 发布

阅读量3.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签：迭代遍历深度遍历未知对象

本文链接：https://blog.youkuaiyun.com/KNIGH_YUN/article/details/86670611

JavaScript 专栏收录该内容

23 篇文章

订阅专栏

本文探讨了在JavaScript中遍历复杂嵌套对象的方法，包括使用递归来处理多级嵌套，并介绍了如何避免无限循环及如何通过递归深度限制来控制遍历范围。

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

文章出自个人博客https://knightyun.github.io/2019/01/27/js-iteration，转载请申明

面向对象编程的语言，都存在对对象的一些操作，其中就包括遍历未知对象的属性值。

通常情况

常见的遍历对象的方法：

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]);
            }
        }
    }
}