爲什麼這些屬性不能枚舉？

我有對象的簡單對象：爲什麼這些屬性不能枚舉？

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

爲什麼這些屬性不能枚舉？

回答

相關問題