Pourquoi ces propriétés ne sont-elles pas énumérables?

Question

J'ai un simple objet d'objets:

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

J'utilise un ... dans ... boucle pour itérer sur cet objet et générer des éléments d'interface utilisateur:

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

Cependant, chaque La variable de capacité est vide - elle n'a que la clé et non les propriétés (nom, description, etc.). Ces propriétés semblent être insignifiantes - même si les propriétés créées de cette façon devraient être énumérables par défaut!

Comment est-ce que je peux implicitement rendre ces propriétés implicites, sans utiliser Object.defineProperty ou quelque chose d'aussi compliqué que cela?

Answer 1

Essayez itérer en utilisant for..of et Object.values (ES6 seulement):

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

Answer 2

Si vous êtes en mesure d'utiliser ES6 et la boucle for... of, la réponse de Alberto est votre meilleur pari, et l'option la plus propre. Si vous êtes limité à ES5, vous pouvez également utiliser for ... in. Comme vous l'avez trouvé, for ... in énumère uniquement les touches (les noms de propriété), et non pas les valeurs de propriété, mais il est facile d'obtenir la valeur de la propriété une fois que vous connaissez le nom de la propriété:

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

Le fait que vous obtenez les noms de propriété signifie que vous Énumérer avec succès les propriétés. Javascript est juste un peu bizarre dans la façon dont fonctionne for ... in.