為什么使用括號表示法和包含空格的鍵訪問 object 文字會導致未定義？

Question

正如標題中所說，我正在嘗試使用來自另一個 object 文字的值來訪問 object 文字的值。 當傳遞的值不包含空格時，這很好用，但包含空格的值將返回未定義。 代碼示例：

for (var s in Skills) {
  console.log("Skill: " + s)
  console.log("Skill Stat: " + SkillStats[s])
}

---

export const Stats = {
  STR: "Strength",
  DEX: "Dexterity",
  CON: "Constitution",
  INT: "Intelligence",
  WIS: "Wisdom",
  CHA: "Charisma"
}

export const Skills = {
  Acrobatics: "Acrobatics",
  AnimalHandling: "Animal Handling",
}

export const SkillStats = {
  [Skills.Acrobatics]: Stats.DEX,
  [Skills.AnimalHandling]: Stats.WIS,
}

Output：

我嘗試搜索標題的許多變體以尋找解決方案，但沒有成功。 我在 javascript 方面仍然相對缺乏經驗，所以如果這段代碼中有任何不正統的代碼，請見諒。 任何建議將不勝感激。

Answer 1

Skills 中s in Skills中的屬性名稱。 這決定了您要查找的屬性名稱： AnimalHandling （其中沒有空格）。

您正在查看的SkillStats object 的屬性定義為： [Skills.AnimalHandling]: Stats.WIS 。 這意味着屬性名稱是根據Skills.AnimalHandling的值計算的，即"Animal Handling" 。

它根本不匹配。

Answer 2

您枚舉Skills的屬性名稱，但訪問並記錄SkillStats上的屬性值。 看來你打算使用

const skill = Skills[s];
console.log("Skill Stat: " + SkillStats[skill]);

或者在一個 go 中：

console.log("Skill Stat: " + SkillStats[Skills[s]]);