如何使用点标记法获取JavaScript对象中动态键的属性值

你当前的问题是：用变量作为键名时，点标记法无法获取对象里的对应值。languageData.currentLang.placeholderValue返回undefined，是因为JS里的点标记法只能识别字面量键名，它会把currentLang当成一个固定的属性名去查找，但你的languageData对象里并没有currentLang这个属性，自然返回undefined。

解决方法：使用方括号标记法 #

要通过变量动态访问对象属性，必须用方括号语法，把变量放在方括号内，语法格式为对象[变量名]。

修正后的完整代码 #

JavaScript代码

let languageData = {
  english: {
    placeholderValue: "username",
  },
  russian: {
    placeholderValue: "Имя пользователя",
  },
  french: {
    placeholderValue: "nom d'utilisateur",
  },
};

let inputTag = document.querySelector("#foreName");

document.querySelectorAll(".language_Btns button").forEach((button) => {
  button.addEventListener("click", () => {
    let currentLang = button.dataset.language;
    console.log(currentLang); // 输出点击按钮对应的语言标识
    console.log(languageData.english.placeholderValue); // 正常输出username
    // 用方括号语法动态获取对应语言的占位符值
    inputTag.setAttribute(
      "placeholder",
      languageData[currentLang].placeholderValue
    );
    console.log(languageData[currentLang].placeholderValue); // 现在能正常输出对应语言的占位符了
  });
});

HTML代码

<div class="language_Btns">
  <button data-language="english">English</button>
  <button data-language="russian">Russian</button>
  <button data-language="french">French</button>
</div>
<div>
  <label for="foreName"></label>
  <input type="text" id="foreName" placeholder="username" />
</div>

关键修改说明 #

• 把languageData.currentLang.placeholderValue替换为languageData[currentLang].placeholderValue，这样JS会把currentLang变量的值作为键名去查找对象属性
• 同时把硬编码的languageData.russian.placeholderValue也改成动态的languageData[currentLang].placeholderValue，实现点击不同按钮自动切换对应语言的输入框占位符

内容的提问来源于stack exchange，提问作者colin