如何循环遍历 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

在@victorbahtev 的帮助下，我最终完成了this

function testing(obj){
    var i = 0;
    for(var key in obj){
        var prop = obj[key];
        if(prop && prop.main &&typeof(prop.main.hide) === 'function') {
            if (i !== 0) 
                prop.main.hide();
            else
                i++;
        }
    }
}

我在他的代码中添加的是计数器，然后在循环中的 if 语句中，我让它检查计数器并跳过第一个弹出带有 main 属性的计数器。

Answer 2

要遍历对象的属性，您可以使用 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

Answer 3

如果您正在学习，那么 for...in 就是您要寻找的。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

但是，就我个人而言，我鄙视非实用程序代码中的任何类型的循环。作为程序的读者，我必须在每个 for 循环处停下来，弄清楚作者为什么要循环。 （找到一些东西？过滤到结果的子集？访问每个结果并导致一些操作？提取一些数据？）。更好的是使用 underscorejs (http://underscorejs.org)。这些动作中的每一个都是明确的。 （_.find、_.filter、_.each、_.map、_.pluck 等）

_.each(obj_parent, function(key, value){  /* do something */ })