JavaScript 对象原型

如何显示JavaScript对象？

显示JavaScript对象将输出[object Object]。

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 对象</h2>
<p>显示JavaScript对象将输出[object Object]:</p>
<p id="demo"></p>
<script>
const person = {
  name: "John",
  age: 30,
  city: "New York"
};
document.getElementById("demo").innerHTML = person;
</script>
</body>
</html>

运行一下

显示JavaScript对象的一些常见解决方案有：

按名称显示对象属性
在循环中显示对象属性
使用Object.values（）显示对象
使用JSON.stringify（）显示对象

显示对象属性

对象的属性可以显示为字符串：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 对象</h2>
<p>显示对象属性:</p>
<p id="demo"></p>
<script>
const person = {
  name: "John",
  age: 30,
  city: "New York"
};
document.getElementById("demo").innerHTML = person.name + ", " + person.age + ", " + person.city;
</script>
</body>
</html>

运行一下

在循环中显示对象

对象的属性可以在循环中收集：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 对象</h2>
<p>显示对象属性:</p>
<p id="demo"></p>
<script>
const person = {
  name: "John",
  age: 30,
  city: "New York"
};
let txt = "";
for (let x in person) {
  txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>

运行一下

提示：必须在循环中使用person[x]。person.x将不起作用（因为x是一个变量）。

使用Object.values()

可以使用object.values() 将任何JavaScript对象转换为数组：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 对象</h2>
<p>Object.values() 讲对象转换为数组.</p>
<p id="demo"></p>
<script>
const person = {
  name: "John",
  age: 30,
  city: "New York"
};
document.getElementById("demo").innerHTML = Object.values(person);
</script>
</body>
</html>

运行一下

使用JSON.stringify()

任何JavaScript对象都可以通过JavaScript函数JSON.stringify() 进行字符串化（转换为字符串）：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 对象</h2>
<p>以 JSON 格式显示对象:</p>
<p id="demo"></p>
<script>
const person = {
  name: "John",
  age: 30,
  city: "New York"
};
document.getElementById("demo").innerHTML = JSON.stringify(person);
</script>
</body>
</html>

运行一下

结果将是一个遵循JSON格式的字符串：

{"name":"John","age":50,"city":"New York"}

JSON.stringify（）包含在JavaScript中，并且在所有主流浏览器中都受支持。

Stringify Dates

JSON.stringify将日期转换为字符串：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>JSON.stringify将日期转换为字符串:</p>
<p id="demo"></p>
<script>
var person = {
  name: "John",
  today: new Date()
};
document.getElementById("demo").innerHTML = JSON.stringify(person);
</script>
</body>
</html>

运行一下

Stringify Functions

JSON.stringify 不能转换函数:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 对象</h2>
<p>JSON.stringify 不能转换函数:</p>
<p id="demo"></p>
<script>
const person = {
  name: "John",
  age: function () {return 30;}
};
document.getElementById("demo").innerHTML = JSON.stringify(person);
</script>
</body>
</html>

运行一下

解决方法是，在字符串化之前将函数转换为字符串。

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 对象</h2>
<p>JSON.stringify 不能转换函数:</p>
<p>你可以先把它转换为string:</p>
<p id="demo"></p>
<script>
const person = {
  name: "John",
  age: function () {return 30;}
};
person.age = person.age.toString();
document.getElementById("demo").innerHTML = JSON.stringify(person);
</script>
</body>
</html>

运行一下

Stringify Arrays

stringify可以转换 JavaScript 数组:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 数组</h2>
<p>JSON.stringify 可以转换 arrays:</p>
<p id="demo"></p>
<script>
const arr = ["John", "Peter", "Sally", "Jane"];
document.getElementById("demo").innerHTML = JSON.stringify(arr);
</script>
</body>
</html>

运行一下

JavaScript 对象原型

显示对象属性

在循环中显示对象

使用Object.values()

使用JSON.stringify()

Stringify Dates

Stringify Functions

Stringify Arrays

分类导航