加入收藏 | 设为首页
我要投稿

小码哥的IT人生

首页 > JS > JavaScript基础

JavaScript 显示对象

JavaScript基础 2022-04-25 01:49:43小码哥的IT人生shichen

JavaScript 显示对象

如何显示 JavaScript 对象？

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

示例代码：

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
document.getElementById("demo").innerHTML = person;

完整实例：

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

运行结果：

Javascript 对象

显示 Javascript 对象将输出 [object Object]：

[object Object]

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

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

  1. 按名称显示对象属性
  2. 循环显示对象属性
  3. 使用 Object.values() 显示对象
  4. 使用 JSON.stringify() 显示对象

显示对象属性

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

示例代码：

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象</h1>
<p>显示对象属性：</p>
<p id="demo"></p>
<script>
const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
document.getElementById("demo").innerHTML = person.name + ", " + person.age + ", " + person.city;
</script>
</body>
</html>

运行结果：

Javascript 对象

显示对象属性：

Bill, 19, Seattle

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

在循环中显示对象

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

示例代码：

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
let txt = "";
for (let x in person) {
txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt;

完整实例：

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

运行结果：

Javascript 对象

显示对象属性：

Bill 19 Seattle

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

您必须在循环中使用 person[x]。

person.x 将不起作用（因为 x 是一个变量）。

使用 Object.values()

通过使用 Object.values()，任何 JavaScript 对象都可以被转换为数组：

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
const myArray = Object.values(person);

myArray 现在是 JavaScript 数组，可以显示了：

示例代码：

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
const myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象</h1>
<p>Object.values() 将对象转换为数组。</p>
<p id="demo"></p>
<script>
const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
document.getElementById("demo").innerHTML = Object.values(person);
</script>
</body>
</html>

运行结果：

Javascript 对象

Object.values() 将对象转换为数组。

Bill,19,Seattle

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

自 2016 年以来，所有主要浏览器都支持 Object.values()。

Chrome IE Firefox Safari Opera
54 (2016) 14 (2016) 47 (2016) 10 (2016) 41 (2016)

使用 JSON.stringify()

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

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
let myString = JSON.stringify(person);

myString 现在是 JavaScript 字符串，可以显示了：

示例代码：

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象</h1>
<p>以 JSON 格式显示属性：</p>
<p id="demo"></p>
<script>
const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
document.getElementById("demo").innerHTML = JSON.stringify(person);
</script>
</body>
</html>

运行结果：

Javascript 对象

以 JSON 格式显示属性：

{"name":"Bill","age":19,"city":"Seattle"}

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

结果将是一个遵循 JSON 标记法的字符串：

{"name":"Bill","age":19,"city":"Seattle"}

JSON.stringify() 包含在 JavaScript 中，所有主流浏览器都支持。

日期字符串化

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

示例代码：

const person = {
  name: "Bill",
  today: new Date()
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

完整实例：

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

运行结果：

Javascript 对象

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

{"name":"Bill","today":"2022-05-20T04:05:14.640Z"}

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

函数字符串化

JSON.stringify 不会对函数进行字符串化：

示例代码：

const person = {
  name: "Bill",
  age: function () {return 19;}
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象</h1>
<p>JSON.stringify 不会对函数进行字符串化：</p>
<p id="demo"></p>
<script>
const person = {
  name: "Bill",
  age: function () {return 19;}
};
document.getElementById("demo").innerHTML = JSON.stringify(person);
</script>
</body>
</html>

运行结果：

Javascript 对象

JSON.stringify 不会对函数进行字符串化：

{"name":"Bill"}

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

如果在字符串化之前将函数转换为字符串，这可以是“固定的”。

示例代码：

const person = {
  name: "Bill",
  age: function () {return 19;}
};
person.age = person.age.toString();
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 显示对象</h1>
<p>JSON.stringify will not stringify functions.</p>
<p>You have to convert functions to strings first:</p>
<p id="demo"></p>
<script>
const person = {
  name: "Bill",
  age: function () {return 19;}
};
person.age = person.age.toString();
document.getElementById("demo").innerHTML = JSON.stringify(person);
</script>
</body>
</html>

运行结果：

Javascript 显示对象

JSON.stringify will not stringify functions.

You have to convert functions to strings first:

{"name":"Bill","age":"function () {return 19;}"}

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

数组字符串化

也可以对 JavaScript 数组进行字符串化：

示例代码：

const arr = ["Bill", "Steve", "Elon", "David"];
let myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组</h1>
<p>JSON.stringify 可以对数组进行字符串化：</p>
<p id="demo"></p>
<script>
const arr = ["Bill", "Steve", "Elon", "David"];
document.getElementById("demo").innerHTML = JSON.stringify(arr);
</script>
</body>
</html>

运行结果：

Javascript 数组

JSON.stringify 可以对数组进行字符串化：

["Bill","Steve","Elon","David"]

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

结果将是一个遵循 JSON 标记法的字符串：

["Bill","Steve","Elon","David"]

相关阅读

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
 ICP备案号：苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024