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

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

2 个答案: