如何通过HTML文本拼接访问JavaScript对象属性？

你遇到的问题是因为直接拼接字符串得到的是文本"kc.score"，而不是对kc对象属性的引用。JavaScript不会自动把字符串转换成变量/对象的访问路径，这里可以用方括号属性访问语法来解决，推荐下面两种更规范的方式：

方法一：用容器对象管理所有团队数据（推荐） #

把所有团队对象放到一个统一的容器里，这样可以通过字符串键名来访问对应的对象：

// 先把kc对象放到teams容器中
const teams = {
  kc: {name: "kc", color: "red", score: 0}
};

// 获取team1的值
let team1 = document.getElementById("w1t1").textContent;

function test(){
  // 用方括号访问容器里的对象，再取score属性
  const score = teams[team1].score;
  console.log(score); // 输出0
}

方法二：访问全局对象（不推荐） #

如果你的kc对象是全局变量（挂载在window上），可以直接通过window[team1]获取对象：

const kc = {name: "kc", color: "red", score: 0}; // 全局变量
let team1 = document.getElementById("w1t1").textContent;

function test(){
  const score = window[team1].score;
  console.log(score); // 输出0
}

这种方法不推荐，因为全局变量容易造成命名冲突，代码维护性差。

为什么之前的代码不行？ #

你之前的代码team1 + ".score"只是把两个字符串拼接成了"kc.score"，这只是一段文本，JavaScript不会把它解析成kc.score这个属性访问表达式，必须用方括号语法才能通过字符串来动态访问对象的属性或容器里的对象。

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