javascript - 如何循环遍历 JavaScript 对象但不对特定键执行操作？

Question

假设我有 3 个这样的 JavaScript 对象:

var obj_parent = {
    main: $("#parent_main_1"),
    tab: $("#parent_tab_1"),
    story: {
        main:$("#story_main"),
        tab: $("#story_tab")
    },
    recipe: {
        main: $("#recipe_main"),
        tab: $("#recipe_tab")
    },
    car: {
        main: $("#car_main"),
        tab: $("#car_tab")
    },
    animal: {
        main: $("#animal_main"),
        tab: $("#animal_tab")
    }
};

我想遍历这个对象以隐藏食谱、汽车和动物对象的所有“主要”。我想使用一个循环，这样如果我需要添加另一个对象，我就不必更改代码。我这样做是为了让物体更舒服。我知道如果它是一个数组我可以这样做:

for ( var i = 3; i < obj_parent.length; i++) {
    obj_parent[i][0].hide();
}

这些对象中的每一个都是不同的，关键字也不相同，所以下一个对象可能是这样的:

var obj_parent2 = {
    main: $("#parent_main_1"),
    tab: $("#parent_tab_1"),
    earth: {
        main:$("#earth_main"),
        tab: $("#earth_tab")
    },
    moon: {
        main: $("#moon_main"),
        tab: $("#moon_tab")
    },
    computer: {
        main: $("#computer_main"),
        tab: $("#computer_tab")
    },
    building: {
        main: $("#building_main"),
        tab: $("#building_tab")
    }
};

我希望它是严格的 javascript，而不是 jQuery。我正在努力理解这种语言。任何帮助，将不胜感激。谢谢!

Answer 1

要迭代对象的属性，您可以使用 for .. in 循环 ( MDN Docs )。由于您希望解决方案适用于任何对象，因此您应该包括一些鸭子类型和防御性编程 - 您应该检查所需的属性/函数是否存在。

你可以这样输入:

for(var key in obj_parent){
    var prop = obj_parent[key];

    // Check if the prop is truty, if it has a property with name main 
    // and if this main sub-property has function hide to avoid uncaught errors.
    if(prop && prop.main && typeof(prop.main.hide) === 'function') {
        prop.main.hide();
    }
}

这是一个JsFiddle Demo