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

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 ...在。。。循环以迭代此对象并生成 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));
}
}