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

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

您获得属性名称的事实意味着您正在成功枚举属性。 Javascript 在 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));
    }
}