为什么for in、for of循环中打印对象会显示[object Object]而非完整内容？

核心原因 #

你遇到的输出差异和循环本身没有任何关系，问题出在两次打印对象用的方式不一样：

• 循环内你用了模板字符串（${x}） 包裹对象，JS会自动调用对象的toString()方法做强制类型转换，普通对象默认的toString()返回值就是固定的[object Object]，所以打印出来的就是这个字符串。你哪怕不在循环里执行console.log(${arr[0]})，输出结果也完全一样。
• 循环外你是直接把对象作为参数传给console.log，浏览器/Node的控制台会专门对对象做格式化解析，直接展示它的所有属性和值，所以能看到完整内容。

循环内打印完整对象的解决方案 #

方案1：直接传对象给console.log #

不需要套模板字符串，控制台会自动格式化输出：

for(let x of arr) {
  console.log(x);
}

方案2：用JSON序列化转成字符串 #

如果你确实需要把对象转成字符串使用，可以调用JSON.stringify()处理：

for(let x of arr) {
  console.log(`${JSON.stringify(x)}`);
  // 输出格式为 {"abc":"123"} 类的字符串
}

补充遍历对象的注意点 #

普通对象默认没有实现迭代器，不能直接用for...of遍历，for...in遍历的是对象的可枚举属性名，需要手动取对应的值：

// for...in遍历普通对象示例
for(let key in obj) {
  console.log(obj[key]); // 输出每个属性对应的对象值
}

// for...of遍历普通对象需要搭配Object.entries
for(let [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

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