JavaScript 显示对象

如何显示 JavaScript 对象?

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

实例

复制代码
<!DOCTYPE html>
<html>

<body>
    
    <p id="demo"></p>

    <script>
        const person = {
            name: "Bill",
            age: 19,
            city: "Seattle"
        };

        document.getElementById("demo").innerHTML = person;
    </script>

</body>

</html>
//[object Object]

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

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

显示对象属性

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

实例

复制代码
<!DOCTYPE html>
<html lang="en">

<body>
    <p id="demo"></p>
    <script>
        const person={
            nama:"DianDian",
            age:20,
            city:"ShenZhen"
        }
        document.getElementById("demo").innerHTML = person.nama+" ,"+person.age+" ,"+person.city;
    </script>

</body>

</html>
//DianDian ,20 ,ShenZhen

在循环中显示对象

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

实例

复制代码
<!DOCTYPE html>
<html lang="en">

<body>
    <p id="demo"></p>
    <script>
        const person={
            nama:"DianDian",
            age:20,
            city:"ShenZhen"
        };
        let txt ="";
        for(let x in person){
            txt+=person[x]+" ";
        };
        document.getElementById("demo").innerHTML = txt;
    </script>

</body>

</html>
//DianDian 20 ShenZhen

必须在循环中使用 person[x]。person.x 将不起作用(因为 x 是一个变量)。

使用 Object.values()

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

复制代码
<!DOCTYPE html>
<html lang="en">

  <body>
    <p id="demo"></p>
    <script>
      const person = {
        name: "Bill",
        age: 19,
        city: "Seattle"
      };

      const myArray = Object.values(person);
      document.getElementById("demo").innerHTML = myArray;
    </script>

  </body>

</html>
//Bill,19,Seattle

使用 JSON.stringify()

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

复制代码
<!DOCTYPE html>
<html>

<body>


    <p id="demo"></p>

    <script>
        const person = {
            name: "Bill",
            age: 19,
            city: "Seattle"
        };

        document.getElementById("demo").innerHTML = JSON.stringify(person);
    </script>

</body>

</html>
//{"name":"Bill","age":19,"city":"Seattle"}

日期字符串化

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

实例

复制代码
</html>
<!DOCTYPE html>
<html>

<body>

    <p id="demo"></p>

    <script>
        var person = {
            name: "Bill",
            today: new Date()
        };

        document.getElementById("demo").innerHTML = JSON.stringify(person);
    </script>

</body>

</html>
//{"name":"Bill","today":"2024-08-26T03:09:50.156Z"}

函数字符串化

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

实例

复制代码
<!DOCTYPE html>
<html>

<body>
  
    <p id="demo"></p>

    <script>
        const person = {
            name: "Bill",
            age: function () { return 19; }
        };

        document.getElementById("demo").innerHTML = JSON.stringify(person);
    </script>

</body>

</html>
//{"name":"Bill"}

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

实例

复制代码
<!DOCTYPE html>
<html>

<body>

    <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>
//{"name":"Bill","age":"function () {return 19;}"}

数组字符串化

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

实例

复制代码
<!DOCTYPE html>
<html>

<body>


    <p id="demo"></p>

    <script>
        const arr = ["Bill", "Steve", "Elon", "David"];
        document.getElementById("demo").innerHTML = JSON.stringify(arr);
    </script>

</body>

</html>
//["Bill","Steve","Elon","David"]
相关推荐
半梦半醒*2 小时前
zabbix安装
linux·运维·前端·网络·zabbix
大怪v2 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
西陵2 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
南尘NCA86662 小时前
企业微信防封防投诉拦截系统:从痛点解决到技术实现
java·网络·企业微信
Panda__Panda3 小时前
docker项目打包演示项目(数字排序服务)
运维·javascript·python·docker·容器·c#
程序猿费益洲3 小时前
Docker 网络详解:(三)四大网络模式
网络·docker·容器
10年前端老司机4 小时前
Promise 常见面试题(持续更新中)
前端·javascript
Mr_Meng_De4 小时前
网络安全认证培训机构的痛点
网络
AORO20255 小时前
2025全新三防平板科普:5G-A+卫星通信+国产化
网络·5g·智能手机·电脑·制造·信息与通信
深圳南柯电子5 小时前
车载通信设备EMC整改:高频问题与AI辅助诊断方案|深圳南柯电子
网络·人工智能·互联网·实验室·emc