如何使用 document.write() 将对象写入文档答案

【问题标题】：How To Write Object To Document with document.write()如何使用 document.write() 将对象写入文档
【发布时间】：2017-09-04 11:35:19
【问题描述】：

我有一个简单的应用程序，可以计算数组中的重复数字。用户通过提示输入数字（即 2、1、2、2）。

当我想通过 document.write() 函数输出结果（这是一个对象）时，我得到： [对象对象]

当我通过控制台输出它时，我得到了我期望的结果：对象 {2:3, 1:1}

下面是html和js，Plunkr可以找到here

我希望将对象的结果写在页面上...

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--    JAVASCRIPT AND JQUERY STUFF -->
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous">

</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">

</script>
<script src="number-list.js"></script>
</head>
<body>
<h1>Enter numbers when prompted!</h1>
<p>Here are the numbers entered on the left and frequency of occurence on the right.</p>
</body>
</html>

JAVASCRIPT

$(document).ready(function(){
var n = prompt("Enter your numbers").split(",");
console.log(n);
var counts = {};
n.forEach(function(x){ 
counts[x] = (counts[x] || 0) +1; 
});
console.log(counts);
document.write(
"<h1>Enter numbers when prompted!</h1>" +
"<p>You entered following numbers:</p>" + n + "<br/>" +
"<p>The occurence is as follows:</p>" + counts);
});

【问题讨论】：

你不能。因为 HTML 本身不能解析对象。您可以将其序列化为字符串。
我尝试使用 String(counts) 但它不起作用。然而 JSON.stringify(counts) 做到了。非常感谢你们。
string(counts) （该功能是否存在？）是错误的。 JSON.stringify 是正确的。用小提琴看我的遮阳篷。
好吧，可能不是:)...是的..我按照你的方式做了，效果很好..谢谢

标签： javascript html arrays object

【解决方案1】：

你不能。 HTML 无法解析 objects。但是，您可以将 object 转换为 string

$(document).ready(function(){
var n = prompt("Enter your numbers").split(",");
console.log(n);
var counts = {};
n.forEach(function(x){ 
counts[x] = (counts[x] || 0) +1; 
});
console.log(counts);
document.write(
"<h1>Enter numbers when prompted!</h1>" +
"<p>You entered following numbers:</p>" + JSON.stringify(n) + "<br/>" +
"<p>The occurence is as follows:</p>" + JSON.stringify(counts));
});

<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous">

</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">

</script>
<script src="number-list.js"></script>
<body>
<h1>Enter numbers when prompted!</h1>
<p>Here are the numbers entered on the left and frequency of occurence on the right.</p>

<div id="content"></div>

【讨论】：

【解决方案2】：

使用JSON.stringify(counts) 序列化您的对象，您可以在 HTML 中打印它

document.write(
"<h1>Enter numbers when prompted!</h1>" +
"<p>You entered following numbers:</p>" + n + "<br/>" +
"<p>The occurence is as follows:</p>" + JSON.stringify(counts));
});

【讨论】：

【解决方案3】：

您可以使用JSON.stringify(counts)将对象转换为字符串

$(document).ready(function(){
  var n = prompt("Enter your numbers").split(",");
  console.log(n);
  var counts = {};
  n.forEach(function(x){ 
    counts[x] = (counts[x] || 0) +1; 
  });
  console.log(counts);
  document.write(
  "<h1>Enter numbers when prompted!</h1>" +
  "<p>You entered following numbers:</p>" + n + "<br/>" +
  "<p>The occurence is as follows:</p>" + counts);
});

【讨论】：