javascript函数在控制台和html页面中给出不同的结果答案

【问题标题】：javascript function giving different results in console and html pagejavascript函数在控制台和html页面中给出不同的结果
【发布时间】：2023-02-08 19:09:09
【问题描述】：

function removeRed(foodArray) {
  return foodArray.filter(function (food) {
    return food.color !== "red";
  });
}
document.write(
  removeRed([
    { name: "Apple", color: "red" },
    { name: "Egg", color: "white" },
    { name: "orange", color: "orange" },
  ])
);
console.log(
  removeRed([
    { name: "Apple", color: "red" },
    { name: "Egg", color: "white" },
    { name: "orange", color: "orange" },
  ])
);`

我在控制台日志中得到了想要的结果，但是 document.write 给出了输出-[object Object],[object Object]” 谁能给我解释一下这是怎么回事？your text

【问题讨论】：

HTML 无法解析对象。但是，您可以使用 JSON.stringify(object) 将对象转换为字符串

标签： javascript html function

【解决方案1】：

问题在于 document.write 方法。 document.write 方法将一个字符串写入当前文档。但是 removeRed 的返回值是一个对象数组，不是字符串。

在将返回的数组传递给 document.write 方法之前，您可以使用 JSON.stringify 方法将返回的数组转换为字符串。

document.write(JSON.stringify(removeRed([
    { name: "Apple", color: "red" },
    { name: "Egg", color: "white" },
    { name: "orange", color: "orange" },
  ])));

或者，您可以遍历数组并将每个对象打印到文档中。

function removeRed(foodArray) {
  let result = [];
  for (let i = 0; i < foodArray.length; i++) {
    if (foodArray[i].color !== "red") {
      result.push(foodArray[i]);
    }
  }
  return result;
}

console.log(
  removeRed([
    { name: "Apple", color: "red" },
    { name: "Egg", color: "white" },
    { name: "orange", color: "orange" },
  ])
);

【讨论】：