為什么這些屬性無法枚舉？

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
            }
        }

我正在使用for ... in ...循環迭代此對象並生成UI元素：

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

但是，每個異能變量都是空的-它僅具有鍵，而沒有屬性（名稱，描述等）。 這些屬性似乎是無數的-盡管默認情況下以這種方式創建的屬性應該是可枚舉的！

如何在不使用Object.defineProperty或類似笨拙的東西的情況下隱式枚舉這些屬性？

Answer 1

如果您能夠使用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));
    }
}

您獲得屬性名稱的事實意味着您已成功枚舉屬性。 Java語言for ... in如何工作有點奇怪。

Answer 2

嘗試使用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));
    }
}