JavaScript 中动态访问对象属性的三种方法详解-js教程-PHP中文网

JavaScript 中动态访问对象属性的三种方法详解

本文介绍如何在 JavaScript 中通过动态变量名访问嵌套对象属性，重点讲解使用方括号语法结合字符串拼接（concat、+、模板字面量）实现 ve1、ve2…ve20 等命名属性的循环访问，并推荐最佳实践。

本文介绍如何在 javascript 中通过动态变量名访问嵌套对象属性，重点讲解使用方括号语法结合字符串拼接（concat、+、模板字面量）实现 `ve1`、`ve2`…`ve20` 等命名属性的循环访问，并推荐最佳实践。

在实际开发中，我们常遇到对象属性名遵循固定模式（如 ve1、ve2、ve3…）但数量不固定的情况。此时无法使用点号（.）语法直接访问，因为 obj.ve[i] 会被解析为 obj.ve 数组的第 i 项，而非属性名为 "ve" + i 的键。正确做法是采用方括号属性访问语法（Bracket Notation），配合动态生成的字符串键名。

以下是三种安全、兼容性良好的实现方式：

✅ 方法一：模板字面量（推荐）

function testingLyrics() {
  const musicItem = allMusic[indexNumb - 1];
  const lyrics = musicItem?.lyrics;

  if (!lyrics) return;

  for (let i = 1; i <blockquote><p>✨ 优势：语法简洁、可读性强、支持表达式插值；ES6+ 环境广泛支持；避免类型隐式转换风险。</p></blockquote><h3>✅ 方法二：字符串拼接（<code>+</code> 运算符）</h3><pre class="brush:php;toolbar:false;">if (allMusic[indexNumb - 1].lyrics['ve' + i].stamp) {
  /* Action */
}

⚠️ 注意：需确保 i 是数字或可转为字符串的值（如 i.toString()），否则可能产生意外结果（如 've' + null → 'venull'）。

Java Maven Code Review
审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

✅ 方法三：`String.prototype.concat()`

if (allMusic[indexNumb - 1].lyrics['ve'.concat(i)].stamp) {
  /* Action */
}

? 语义清晰，但相比模板字面量略显冗长，实用性较低。

? 关键注意事项

索引起始问题：原代码中 for (let i = 0; ...) 会导致首次尝试访问 ve0（不存在），应从 i = 1 开始；
健壮性增强：建议添加可选链操作符（?.）防止 lyrics 或 veX 为 undefined 时抛出错误；
性能提示：属性名拼接本身开销极小，无需过度优化；但若需高频访问，可预先提取 lyrics 引用减少重复路径查找；
设计反思：长期来看，将 ve1/ve2… 改为数组结构（如 lyrics: [{ ls: "..." }, { ls: "..." }]）更符合 JSON 规范与 JavaScript 惯例，便于遍历、增删和序列化。