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

我有对象的简单对象：为什么这些属性不能枚举？

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或类似的笨拙东西？通过使用for..of和Object.values

来源

2017-07-02 SPavel

可能的重复[如何循环或枚举JavaScript对象？]（https://stackoverflow.com/questions/684672/how-do-i-loop-through-or-enumerate-a-javascript-目的）。这是一个古老而且很好回答的问题，循环只能让你获得钥匙。 –

尝试迭代（ES6只）：

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

来源

2017-07-02 16:00:18

工作很好，谢谢！在所谓的现有工作答案中，我无法得到任何答案，但这解决了问题。 – SPavel

很高兴帮助！关于该解决方案的唯一警告是它仅限于> = ES6。如果你需要使用

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

如果您仅限于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的工作方式上有点奇怪。

来源

2017-07-02 16:09:12 PMV

我不知道什么会将我限制到ES5;阿尔贝托的代码工作，但感谢你进入更多的细节！ – SPavel

@SPavel它真的取决于你的目标平台/目标浏览器。例如，IE11不支持ES6的大部分功能，包括'for ... of'。有关哪些环境支持的更多详细信息，可以查看https://kangax.github.io/compat-table/es6/。 – PMV

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

回答

相关问题