为何JavaScript代码输出[object Object]而非预期内容？如何修复？

嘿，这问题我见过不少——你调用all.toString()的时候，数组里的每个对象都会默认执行自身的toString()方法，而JavaScript里普通对象的默认toString()就是返回[object Object]，所以整个数组转字符串后就变成一串这个了，完全不是你想要的属性信息。

给你几个实用的修复方案，按需选就行：

方案1：手动遍历拼接（最灵活，适合自定义展示格式） #

直接遍历数组里的每个对象，把你需要的origin、type、time、link属性拼接成清晰的字符串，还能加换行让页面显示更舒服：

function replace(){
  let displayText = '';
  all.forEach(foodItem => {
    displayText += `产地: ${foodItem.origin}, 类型: ${foodItem.type}, 耗时: ${foodItem.time}分钟, 链接: ${foodItem.link}<br>`;
  });
  document.getElementById("demo").innerHTML = displayText;
}

方案2：用JSON.stringify快速输出结构化内容（适合快速调试） #

如果只是想快速看到完整的数据结构，用JSON.stringify()最省事，它能把数组和对象转成可读性强的JSON格式，配合<pre>标签还能保留缩进：

function replace(){
  const structuredStr = JSON.stringify(all, null, 2); // 第三个参数2是缩进空格数，让格式更整齐
  document.getElementById("demo").innerHTML = `<pre>${structuredStr}</pre>`;
}

方案3：自定义对象的toString方法（适合复用场景） #

要是你以后还需要多次把这些对象转成字符串，可以给每个对象加自定义的toString()方法，这样再调用数组的toString()或者join()就会返回你想要的内容：

// 先给数组里的每个对象添加自定义toString
all.forEach(item => {
  item.toString = function() {
    return `${this.origin} | ${this.type} | ${this.time}分钟 | ${this.link}`;
  };
});

// 然后修改replace函数
function replace(){
  document.getElementById("demo").innerHTML = all.join('<br>');
}

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