4

JavaScript 深度迭代遍历未知对象

 2 years ago
source link: https://knightyun.github.io/2019/01/27/js-iteration
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

JavaScript 深度迭代遍历未知对象

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

常见的遍历对象的方法：

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

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK