JavaScript 显示对象

于 2024-08-26 11:19:44 发布
阅读量263 收藏 2
点赞数 5
分类专栏： js 文章标签： javascript 网络 udp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78133614/article/details/141559385
版权

如何显示 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"]
软件技术NINI
关注
  • 5
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 日期对象
Likeyou113的博客
03-15 3315
我们今天就来学习一下JavaScript 日期对象，我们这个日期对象主要可以用于获取到当前时间，或者未来某天时间，还有时间戳计算。 下面就跟我来学习吧。 一、日期对象Date Date对象：这个Date是一个内建对象，在JS中使用Date对象来表示一个时间。 我们可以用Date() 创建一个Date对象，如果时间使用构造函数创建一个Date对象,则会封装为当前代码执行的时间。 案例： 如果我们想要创建一个指定的时间函数，我们则需要在构造函数中传递一个表示时间的字符串作为参数使用。
JavaScript内置对象
m0_45659764的博客
04-16 3422
1.内置对象 JavaScript中的对象分为三种：自定义对象、内置对象、浏览器对象 前面两种对象是JS基础内容，属于ECMAScript；第三个浏览器对象属于JS独有的 内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是额最基本而必要的功能（属性和方法） 内置对象最大的优点就是帮助我们快速开发 JavaScript提供了多个内置对象：Math、DATE、Array、String等 2. 查文档 2.1 MDN MDN：https://developer..
javascript 如何显示对象的所有数据
u013931502的博客
01-22 1793
javascript 如何显示对象的所有数据 直接用console.log(Obj)就可以了，在浏览器开发工具的console中查看对象属性值。或者使用JSON.stringify(Obj)也行。 第一种，alert，也bai是最原始的 用for循环逐一读取duobj的数据然后alert或者展示到页面zhi的dom元素内。dao 第二种，控制台输zhuan出 console.log(obj)，然后按f12打开调试面板然后切换到控制台标签查看，但是ie下不能查看到具体的值。 第三种，添加监视 按F12打开调试
javascript history对象详解
11-22 2417
javascript history对象详解
JavaScript Date 对象
weixin_53903290的博客
03-21 2455
概念：Date 对象是 JavaScript 原生的时间库。它以1970年1月1日00:00:00 作为时间的零点，可以表示的时间范围是前后各1亿天（单位为毫 秒）。 一.Date对象的用法 1.普通函数用法：Date 对象可以作为普通函数直接调用，返回一个代表当前时间的字符串。 例：Date();(获取当前时间） 2.构造函数用法：Date 还可以当作构造函数使用。对它使用 new 命令，会返回一个 Date 对象的实例。如果不加参数，则显示当前时间. 例：var date=new Date()
JavaScript Date对象的方法
m0_61031325的博客
04-07 1477
这里简单的介绍一下JavaScript Date（时间）对象。时间对象是一个我们经常要用到的对象，无论是做时间输出、时间判断等操作时都与这个对象离不开。它是一个内置对象。默认情况下，JavaScript 将使用浏览器的时区并将日期显示为全文本字符串。JavaScript 从0到11计算月份。一月是0，十二月是11。创建 Date 对象时，可以使用许多方法对其进行操作。日期方法允许您使用本地时间或 UTC（通用或 GMT）时间来获取和设置日期对象的年、月、日、小时、分钟、秒和毫秒。 默认情况下，JavaS.
javascript new对象的过程
m0_47531829的博客
03-27 3495
最近在看曾探老师写的 JavaScript设计模式与开发实践这本书，其中讲到new过程的时候，给了一个这样的例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" conten
JavaScript 对象初探--创建对象
热门推荐
Mr_Bobcp的博客
01-22 1万+
目录JavaScript对象概念JavaScript类型一、js中的对象二、自定义对象属性和方法创建对象方式一、对象字面量二、内置构造函数三、工厂模式四、自定义构造函数的方法五、原型模式六、组合使用构造函数模式和原型模式七、动态原型模式八、寄生模式九、稳妥构造函数模式 JavaScript对象概念 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。 在 JavaScript 中，对象是拥有属性和方法的数据。 JavaScript类型 一、js中的对象 内置对象：JS提供的 宿主对象
JavaScript 之面向对象
msn131420的博客
03-03 4274
JavaScript 面向对象 一、面向对象编程介绍 1.1 两大编程思想 面向过程 面向对象 1.2 面向过程编程 POP(Process-oriented programming) 面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。 举个栗子：将大象装进冰箱，面向过程做法。 面向过程，就是按照我们分析好了的步骤，按照步骤解决问题。 1.3 面向对象编程 OOP (Object Oriented .
JavaScript 内置对象解读
Evankaka的专栏
10-27 3828
JavaScript 是面向对象的编程语言 (OOP)。OOP 语言使我们有能力自定义对象和变量类型。（事实上，只是基于对象的，并不完全具备面向对象的语言的三大特性[封装、继承、多态]）。面向对象编程 在高级 JavaScript 的部分会讲解如何创建自己的对象。现在，我们开始学习内建的 JavaScript 对象，以及如何使用它们。对象只是一种特殊的数据。
Javascript window对象详解
10-25
尽管在某些浏览器的控制台中会看到Window和window显示不同的引用，但实际上它们都是指向同一个window对象。这是因为JavaScript在执行时会忽略变量和属性的大小写差异。 window对象还具有特殊性，即它不是window对象...
JAVASCRIPT对象及属性
10-31
JAVASCRIPT对象及属性 JAVASCRIPT对象及属性是指在JavaScript语言中定义的对象和属性，这些对象和属性都是JavaScript语言的核心组成部分，它们可以帮助开发者更好地控制和操作网页的行为。 1. window对象 window...
javascript 时间对象的练习
10-30
JavaScript 时间对象是JavaScript语言中用于处理日期和时间的一个内置对象。它允许我们创建日期对象、获取系统当前的日期和时间、设置指定的日期和时间，以及进行时间的格式化和转换等操作。时间对象在使用之前需要...
javascript window对象属性整理
10-29
在JavaScript中，window对象是所有浏览器窗口和标签页的顶层对象，它代表了浏览器窗口，提供了一系列的属性和方法来控制浏览器窗口和文档。JavaScript开发者会经常使用window对象的属性和方法来实现各种交互效果，如...
JavaScript 面向对象代码实践
10-29
在Sites的原型方法中，通过一个循环来遍历sites数组，并且调用数组中每个Site对象的show方法，将结果显示出来。 最后，JavaScript代码通过new关键字创建了几个Site实例，并将它们作为参数传给Sites构造函数，创建了...
vue ref和reactive区别
最新发布
灰海
08-25 338
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
vue开发引入第三方插件的方式及其区别
你们瞎搞
08-22 373
npm。
2024前端面试题-js篇
FormAda的博客
08-22 872
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
【js】各类前端输入校验方法
galaxyJING的博客
08-21 372
【代码】【js】各类前端输入校验方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值