本文讲解如何安全、规范地根据 HTML 元素的文本内容（如 "kc"）动态访问对应对象的嵌套属性（如 kc.score），避免使用 eval() 或字符串拼接导致的安全与维护问题。
本文讲解如何安全、规范地根据 html 元素的文本内容（如 `"kc"`）动态访问对应对象的嵌套属性（如 `kc.score`），避免使用 `eval()` 或字符串拼接导致的安全与维护问题。
在前端开发中，常需将 HTML 中的标识性文本（如团队代号、用户 ID）作为键名，去读取 JavaScript 中预定义的对象数据。但直接拼接字符串（如 "kc" + ".score"）只会生成字符串 "kc.score"，而非实际的属性值——这是初学者常见的误区。关键在于：不能用字符串表示“路径”，而应把数据组织成可索引的结构，并通过方括号语法 obj[key] 安全访问。
✅ 正确做法：用对象字面量构建映射表
首先，将原本独立声明的变量 kc 改为嵌套在主对象 teams 中的一个属性：
// ✅ 推荐：将所有团队数据统一管理在一个对象中
const teams = {
kc: { name: "kc", color: "red", score: 0 },
// 可继续添加其他团队，如：
// ab: { name: "ab", color: "blue", score: 15 }
};
注意：原代码中 name: kc 是错误的（kc 未定义或循环引用），应改为字符串 "kc" 或使用计算属性确保一致性。
接着，从 HTML 获取文本并作为键访问：
// ✅ 安全获取并访问
const team1 = document.getElementById("w1t1").textContent.trim(); // 建议加 trim() 防空格
const score = teams[team1]?.score; // 使用可选链操作符防止 undefined 报错
console.log(score); // 输出：0
⚠️ 为什么不推荐 eval() 或 with？
你可能看到过类似 eval(team1 + ".score") 的写法——这极其危险：
- eval() 会执行任意代码，若 HTML 内容被恶意篡改（如
kc; alert('xss') ），将导致 XSS 攻击； - with 已被严格模式禁用，且语义模糊、性能差、调试困难。
? 扩展：支持多级属性访问（如 kc.stats.total）
若需访问深层属性（如 kc.stats.points），可封装一个安全的路径访问函数：
function getNested(obj, path) {
return path.split('.').reduce((current, key) => current?.[key], obj);
}
// 使用示例
const kc = { stats: { points: 42 } };
const value = getNested(teams, "kc.stats.points"); // → 42
✅ 总结
| 方法 | 安全性 | 可维护性 | 推荐度 |
|---|---|---|---|
| 字符串拼接 + eval() | ❌ 极低（XSS 风险） | ❌ 差 | ⛔ 禁止 |
| 独立变量 + window[team1] | ❌ 不可靠（依赖全局） | ❌ 脆弱 | ⛔ 不推荐 |
| 对象映射 + 方括号访问 | ✅ 高（无执行风险） | ✅ 清晰、易扩展 | ✅ 强烈推荐 |
始终将动态键名视为数据索引，而非代码片段。结构化你的数据，让逻辑更健壮、更易测试、更安全。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
