为什么这些属性是不可枚举的？

Question

我有一个简单的对象对象：

window.abilities = {
            migrate:{
                name:"Migrate",
                description:"Move your tribe to another area; generate all new resources. Takes one time unit.",
                image:"migrate.png",
                action:"Migrate",
                unlocked:true
            },
            eradicate:{
                name:"Eradicate species",
                description:"Remove a troublesome plant or animal",
                image:"migrate.png",
                action:"Eradicate",
                unlocked:false
            }
        }

我用的是...在...循环遍历此对象并生成UI元素：

for(ability in window.abilities){
    if(ability.unlocked){
        $("#abilities").append(genAbilityCard(ability.name,ability.image,ability.description,ability.action));
    }
}

但是，每个能力变量都是空的-它只有键，没有属性(名称、描述等)。这些属性似乎是不可枚举的--即使以这种方式创建的属性在默认情况下应该是可枚举的！

如何才能使这些属性隐式可枚举，而不使用Object.defineProperty或类似的笨重工具？

Answer 1

尝试使用for..of和Object.values (仅限ES6)进行迭代：

for (const ability of Object.values(window.abilities)){
    if (ability.unlocked){
        $("#abilities").append(genAbilityCard(ability.name,ability.image,ability.description,ability.action));
    }
}

Answer 2

如果你能够使用ES6和for... of循环，Alberto的答案是你最好的选择，也是最干净的选择。

如果你被限制在ES5上，你也可以使用for ... in。正如您已经发现的，for ... in只枚举键(属性名称)，而不是属性值，但是一旦知道属性名称，就很容易获得属性值：

var abilityName, ability;

for(abilityName in window.abilities){
    ability = window.abilities[abilityName];
    if(ability.unlocked){
        $("#abilities").append(genAbilityCard(ability.name,ability.image,ability.description,ability.action));
    }
}

获得属性名称的事实意味着您成功地枚举了属性。Javascript在for ... in的工作方式上有点奇怪。