JavaScript类push数组后调用方法显示undefined问题排查

嘿，我帮你排查出代码里导致undefined异常的几个关键问题，咱们逐一拆解：

1. 多处拼写错误 #

这是最容易忽略但影响极大的问题：

• 你把languages（编程语言）拼写成了laguages，不管是构造函数里初始化属性、push方法里操作数组，还是write方法里遍历，全写错了！这会导致代码找不到对应的属性，自然抛出undefined。
• 方法名wrtie应该是write，虽然你调用的时候也写错了（dev.wrtie()），暂时没触发方法找不到的错误，但这是明显的拼写失误。

2. 数据结构与遍历逻辑不匹配 #

你调用dev.push(["Java" , "Andorid", "JS","Node.JS"])时，传入的是一个纯数组，但在write方法里，你却试图访问el.name和el.languages——这说明你应该传入的是包含name和languages属性的对象，而不是数组。如果直接传数组，遍历的时候每个el都是字符串（比如"Java"），字符串根本没有name和languages属性，这就会出现undefined。

3. 未正确获取DOM元素 #

在write方法里，你直接使用了变量d，但这个变量从未被定义过！你需要先获取HTML中id为d的div元素，否则document.body.append(d)会因为d是undefined而报错。

修正后的完整代码 #

JavaScript代码 #

class Developer{
 constructor(a,b,c,d){
 this.name = a;
 this.surname = b;
 this.age = c;
 this.experience = d;
 this.languages = []; // 修正拼写错误
 }
 write(){ // 修正方法名拼写
 const d = document.getElementById('d'); // 获取页面上的目标div
 this.languages.forEach(el=>{
 const p = document.createElement("p");
 const lang = document.createElement("p");
 p.innerHTML = el.name;
 // 用join把数组转成逗号分隔的友好字符串
 lang.innerHTML = el.languages.join(', ');
 d.append(p, lang); // 把元素添加到目标div中
 })
 }
 push(x){
 this.languages.push(x); // 修正拼写错误
 }
}
let dev = new Developer("Anna" , "Sarsgyan" , 20, 21);
// 传入符合遍历逻辑的对象结构
dev.push({ 
 name: `${dev.name} ${dev.surname}'s Skills`, 
 languages: ["Java" , "Android", "JS","Node.JS"] 
});
dev.write(); // 修正方法名调用
console.log(dev);

HTML代码（仅修正拼写小问题） #

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Developer Skills</title>
</head>
<body>
 <div id="d">
 </div>
</body>
<script src="script.js"></script>
</html>

这样修改后，代码就能正常运行，把开发者的技能信息渲染到页面上啦。

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