一文详解JSON.parse和JSON.stringify的用法

作者:Sfh_11 时间:2024-04-16 08:45:09 

前言

平时我们在接收后端返回的json对象通常是一个字符串类型的object,所以一般我们要对这个object进行类型转化后,我们才能使用object里面的数据,而这其中涉及到两个必不可少的方法就是JSON.parse和JSON.stringify

JSON.parse()

JSON.parse()方法将JSON格式字符串转换为js对象(属性名没有双引号)

解析前要保证数据是标准的JSON格式,否则会解析出错

const user = '{"name": "Jack","gender": "男","age": 18,"major":"computer"}'
console.log(JSON.parse(user));
//user = { name:"Jack", gender:"男", age:18, major:"computer"}

输出结果:

一文详解JSON.parse和JSON.stringify的用法

const users = '[{"id":101,"name":"计算机科学"},{"id":102,"name":"软件工程"}]'
console.log(JSON.parse(users));
// 结果 users= [ {id:101,name:"计算机科学"}, {id:102,name:"软件工程"} ]

一文详解JSON.parse和JSON.stringify的用法

JSON.stringify()
const user = {"name": "Jack","gender": "男","age": 18,"major":"computer"}
console.log(user);

一文详解JSON.parse和JSON.stringify的用法

console.log()没有输出我们想要的结果。它输出了[Object],因为从对象到字符串的默认转换是“[Object]”。因此,我们使用JSON.stringify()先将对象转换为字符串

console.log(JSON.stringify(user));

一文详解JSON.parse和JSON.stringify的用法

但是,stringify()其实还可以传入其他的参数从而方便我们查找数据,让我们接着往下看

第二个参数(数组)

假如存在这样一个场景,一个学生拥有很多个手机号码,我们想迅速定位到该学生的某个手机号,我们可以在stringify()第二个位置以数组的形式加参数来进行查找

const user = {"name": "Jack",
       "gender": "男",
       "age": 18,
       "major":"computer",
       "phonenumber":123,
       "phonenumber1":456,
       "phonenumber2":789,
       "phonenumber3":321,
       "phonenumber4":654,
       "phonenumber5":987
       }
       console.log(JSON.stringify(user,['phonenumber3']));

输出结果:

一文详解JSON.parse和JSON.stringify的用法

第三个参数(数字)

第三个参数控制最终字符串里的间距。如果参数是一个数字,则字符串化中的每个级别,都将缩进这个空格字符数。即不传这个参数一行显示,加了分行显示。

const user = {"name": "Jack",
       "gender": "男",
       "age": 18,
       "major":"computer",
       "phonenumber":123,
       "phonenumber1":456,
       "phonenumber2":789,
       "phonenumber3":321,
       "phonenumber4":654,
       "phonenumber5":987
       }
console.log(user);
console.log(JSON.stringify(user,null,2));

输出结果:

一文详解JSON.parse和JSON.stringify的用法

第三个参数(字符串)

如果第三个参数是字符串,则用它来代替上面显示的空格字符。我这里传入**

const user = {"name": "Jack",
       "gender": "男",
       "age": 18,
       "major":"computer",
       "phonenumber":123,
       "phonenumber1":456,
       "phonenumber2":789,
       "phonenumber3":321,
       "phonenumber4":654,
       "phonenumber5":987
       }
console.log(JSON.stringify(user,null,'**'));

输出结果:

一文详解JSON.parse和JSON.stringify的用法

toJSON函数

我们有一个名为toJSON的类函数,它的属性是可以作为任何对象的一部分。JSON.stringify返回这个函数的结果并对其进行字符串化,而不是将全部对象转换为字符串。

const user = {
       firstName : "Prateek",
       lastName : "Singh",
       age : 26,
       toJSON(){
           return {
               fullName: `${this.firstName}${this.lastName}`
           }
       }
   }
console.log(JSON.stringify(user));

输出结果:

一文详解JSON.parse和JSON.stringify的用法

可以看到,它不是输出全部对象,而是只有toJSON函数的结果。

此外,JS还有一个功能函数是parseInt,注意不要将它和JSON.parse( )混淆了,parseInt函数的功能是可解析一个字符串,返回一个整数。假如有一个字符串类型的数字,经过转化后就会变成一个数字类型的数字,如果是字母类型的字符串则返回NaN。
小技巧:直接加+也可以起到parseInt的作用。

参考的文章:https://baijiahao.baidu.com/s?id=1662484165706074595&wfr=spider&for=pc

来源:https://blog.csdn.net/weixin_48956280/article/details/122044293

标签:json.stringify,json.parse
0
投稿

猜你喜欢

  • Jupyter notebook运行Spark+Scala教程

    2023-04-18 08:48:56
  • 将python文件打包成EXE应用程序的方法

    2022-07-09 16:01:12
  • Golang解析yaml文件操作指南

    2024-05-09 14:51:59
  • Python函数返回值实例分析

    2022-06-23 06:59:07
  • 推荐:怎么用javascript进行拖拽

    2007-09-21 20:14:00
  • 分享十个Python超级好用提高工作效率的自动化脚本

    2021-06-26 17:17:16
  • 解决pytorch-yolov3 train 报错的问题

    2023-11-26 04:14:29
  • SQLSERVER ISNULL 函数与判断值是否为空的sql语句

    2024-01-13 02:58:14
  • laravel实现中文和英语互相切换的例子

    2024-04-29 14:06:55
  • pandas中的DataFrame数据遍历解读

    2023-12-03 21:57:34
  • Go语言实现ssh&scp的方法详解

    2024-04-29 13:05:31
  • python3应用windows api对后台程序窗口及桌面截图并保存的方法

    2023-10-23 12:29:19
  • Vue如何引入远程JS文件

    2023-07-02 16:34:13
  • asp利用XmlHttp和Adodb.Stream采集图片

    2007-12-06 18:42:00
  • Go语言context上下文管理的使用

    2023-06-16 03:55:26
  • python写入并获取剪切板内容的实例

    2023-08-03 10:44:04
  • python datetime时间格式的相互转换问题

    2023-12-22 01:04:29
  • 好的Python培训机构应该具备哪些条件

    2022-06-22 14:52:57
  • 网页在IE6中不能打印之谜

    2008-12-12 13:08:00
  • python3 tkinter实现点击一个按钮跳出另一个窗口的方法

    2023-10-27 01:19:11
  • asp之家 网络编程 m.aspxhome.com