JavaScript调用函数时出现Uncaught TypeError: Cannot read properties of undefined (reading 'username')错误的原因及解决

你的代码有两个核心问题导致了这个TypeError：

1. 错误使用点语法访问动态属性 #

你在函数里写了datamodel.role1.username，这里的role1会被JavaScript当成字面量属性名，而不是你传入的变量值。也就是说，它会去datamodel里找一个叫"role1"的属性，但你的datamodel里根本没有这个属性，所以datamodel.role1返回undefined，再去读取undefined的username自然就报错了。

要通过变量访问对象属性，必须用方括号语法：datamodel[role1]，这样JavaScript才会把role1当成变量，取它的值作为属性名。

2. 传入的参数格式无法直接用于属性访问 #

你传入的"administrator[0]"是一个完整的字符串，但datamodel里并没有名为"administrator[0]"的属性——administrator本身是一个数组，你需要先访问datamodel.administrator，再通过索引0获取数组里的元素，最后才能拿到username。直接把属性名和索引拼成一个字符串是无法被正确解析的。

两种可行的修复方案： #

方案一：拆分参数（更简洁推荐）

把角色名和索引分开传入函数，这样直接用方语法访问数组即可：

datamodel = {
 administrator: [
  { username: "abc@xyz.com", password: "abc@1234", },
  { username: "abcd@xyz.com", password: "xyz@1234", },
 ],
};
function getLoginData(roleName, index) {
 console.log(roleName, index);
 let name = datamodel[roleName][index].username;
 console.log(name); // 输出abc@xyz.com
}
getLoginData("administrator", 0);

方案二：解析传入的字符串参数（如果必须保持原参数格式）

如果一定要传入"administrator[0]"这种格式的字符串，可以用正则表达式拆分出角色名和索引：

datamodel = {
 administrator: [
  { username: "abc@xyz.com", password: "abc@1234", },
  { username: "abcd@xyz.com", password: "xyz@1234", },
 ],
};
function getLoginData(role1) {
 console.log(role1);
 // 用正则匹配出角色名和索引
 const matchResult = role1.match(/^(\w+)\[(\d+)\]$/);
 if (matchResult) {
   const roleName = matchResult[1];
   const index = parseInt(matchResult[2], 10);
   let name = datamodel[roleName][index].username;
   console.log(name); // 输出abc@xyz.com
 } else {
   console.error("参数格式错误，请传入类似 'administrator[0]' 的格式");
 }
}
getLoginData("administrator[0]");

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