本文介绍如何从html元素中获取文本内容，并将其作为键名动态访问嵌套对象的属性，避免字符串拼接导致的无效引用问题。
本文介绍如何从html元素中获取文本内容，并将其作为键名动态访问嵌套对象的属性，避免字符串拼接导致的无效引用问题。
在JavaScript开发中，初学者常误以为将变量与字符串拼接（如 team1 + ".score"）能实现动态属性访问——但这样只会生成字符串 "kc.score"，而非实际读取 kc.score 的值。真正的动态访问需借助对象的方括号表示法（obj[key]），而非点号加字符串。
✅ 正确做法：用对象字面量封装数据，配合方括号访问
首先，调整数据结构：将各个队伍对象作为属性值，存入一个统一的对象容器中，键名为对应队伍标识符（如 "kc"）。这样就能通过运行时获取的字符串安全索引：
| kc | 30 |
// ✅ 正确定义数据：以 team ID 为 key 的对象映射
const teams = {
kc: { name: "kc", color: "red", score: 0 }
};
// ✅ 从DOM获取文本并动态访问
const team1 = document.getElementById("w1t1").textContent.trim(); // → "kc"
console.log(teams[team1].score); // → 0
⚠️ 注意事项
- 避免全局变量污染：原示例中 const kc = {...} 定义了全局变量，但 teams.kc 已包含完整数据，无需额外声明同名变量；
-
健壮性处理：实际应用中应检查元素是否存在、文本是否为空、键是否存在于 teams 中：
function getTeamScore() { const el = document.getElementById("w1t1"); if (!el) return undefined; const teamId = el.textContent.trim(); if (!teams[teamId]) { console.warn(`Team "${teamId}" not found in teams object`); return null; } return teams[teamId].score; } - 不推荐使用 eval() 或 with：虽然 eval(team1 + ".score") 在技术上可行，但存在严重安全风险和性能问题，绝对禁止在生产环境使用。
✅ 总结
动态访问对象属性的核心是：用字符串作键，通过 obj[key] 获取子对象，再链式访问其属性。这比字符串拼接+求值更安全、清晰且符合现代JS最佳实践。结构化数据（如 teams 映射对象）是实现该模式的前提，也是可维护代码的关键设计。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
