JavaScript输出对象到HTML DOM出现undefined原因及展示方案咨询

问题成因 #

• 核心原因是你声明了temp变量但没有给初始值，JS中未初始化的变量默认值为undefined
• 第一次执行temp += obj[idx] + " " + "<br>"时，等价于temp = undefined + "John <br>"，undefined会被隐式转为字符串"undefined"拼接，所以最终输出就出现了undefinedJohn的异常内容
• 额外优化点：用for...in遍历普通对象时，建议添加hasOwnProperty判断，避免遍历到对象原型链上的额外属性

修复方案 #

你只需要把temp变量初始化为空字符串即可，修改后的完整代码如下：

<!DOCTYPE html>
<html>
<body>

<h2>Store and retrieve data from local storage.</h2>

<p id="demo"></p>

<script>
var myObj, myJSON, text, obj, temp = ''; // 给temp初始化空字符串，解决undefined问题

var idx = 0;

// 存储数据
myObj = { name: "John", age: 31, city: "New York" };
myJSON = JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);

// 读取数据
text = localStorage.getItem("testJSON");
obj = JSON.parse(text);
document.getElementById("demo").innerHTML += Object.values(obj)+`<br>`;
document.getElementById("demo").innerHTML += JSON.stringify(obj)+`<br><br>`;
console.log(obj);
for (idx in obj) {
    if(obj.hasOwnProperty(idx)){ // 可选，过滤原型链上的非自有属性
        console.log(obj[idx]);
        console.log(idx);
        temp += `${idx}: ${obj[idx]} <br>`; // 补充键名展示，内容更清晰
    }
};

document.getElementById("demo").innerHTML += temp;
</script>

</body>
</html>

HTML中展示对象、数组、JSON的其他方案 #

• 格式化JSON展示：使用JSON.stringify的第二、第三参数做格式化缩进，配合<pre>标签保留换行和空格，展示效果更易读，示例：

// 第三个参数2代表每一层级缩进2个空格
const formattedJson = JSON.stringify(obj, null, 2);
document.getElementById('demo').innerHTML += `<pre>${formattedJson}</pre>`;

• 调试用快速打印：如果是开发调试场景，可直接用console.dir(obj)在浏览器控制台查看包含完整原型链的对象结构，比DOM展示的信息更全面
• 结构化渲染：如果需要正式展示给用户，可配合列表标签渲染键值对，示例：

const ul = document.createElement('ul');
for(const [key, value] of Object.entries(obj)){
    const li = document.createElement('li');
    li.textContent = `${key}: ${value}`;
    ul.appendChild(li);
}
document.getElementById('demo').appendChild(ul);

• 嵌套对象渲染：如果是有多层嵌套的复杂对象/数组，可以写递归遍历函数，逐层添加缩进效果，完整展示所有层级的内容。

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