JavaScript循环遍历对象时首条输出为undefined的问题咨询

1. 首行输出undefined的直接原因 #

你代码里的循环行document.getElementById("demo").innerHTML = document.write(required(key));存在两个逻辑错误：

• document.write()方法没有返回值，调用后会默认返回undefined，你将这个返回值赋值给了demo元素的innerHTML，就会在页面首行输出undefined
• 页面加载完成后调用document.write()会先清空原有文档内容再写入新内容，和innerHTML赋值混用会导致逻辑混乱

2. 其他异常说明 #

• 你注释中提到的「obj已经是JSON字符串」是错误认知：你用const obj = {...}定义的是标准JS对象，不是JSON字符串，所以调用JSON.parse(obj)时，入参类型不符合要求自然会报错终止
• 你调用JSON.stringify(obj)时没有接收返回值也没有使用它，自然不会对运行结果产生任何影响
• 你写的required函数存在变量引用错误：函数入参是k，但取值时用了外层循环的key变量，虽然因为var的变量提升特性暂时没出问题，但属于不规范写法，后续很容易引发逻辑异常

你可以选择只使用innerHTML拼接内容的写法，修改后代码如下：

const obj = {
  "accountId": "number",
  "prefix": "string",
  "firstName": "string",
  "middleName": "string", 
  "lastName": "string",
  "suffix": "", 
  "dateOfBirth": "string",
  "email": "string",
  "phone": "string", 
  "status": ""
};
const required = function(k) {
    // 修复变量引用错误，用入参k取值
    const v = obj[k];
    if (v == ''){
        return "<br>A required component " + k + " was missing from this message.";
    } else {
        return "<br>the value of " + k + " is " + v;
    }
    
}
// 先获取demo元素，避免循环中重复查询
const demoEle = document.getElementById("demo");
for (var key of Object.keys(obj)) {
    // 直接拼接内容，不使用document.write
    demoEle.innerHTML += required(key);
};

修改后就不会出现首行undefined的问题，其余输出结果和你预期一致。

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