JSON.stringify() 、JSON. parse()方法详解

news2024/10/6 14:35:49

JSON.stringify()

用法:JSON.stringify(value, [replacer], [space])

第一个参数:

value: 必选,将要序列后成 JSON 字符串的值。

第二个参数:

replacer: 可选

  • 如果是一个函数,则在序列化过程中,属性进行转换或处理。如果函数返回值为undefined 或者 函数时,该属性就会被过滤掉;
  • 如果是一个数组,那么只包含在这个数组中的属性名才会被序列化
  • 如果该参数为 null 或者未提供,则对象所有的属性都会被序列化。
// 函数
const obj = { a: '1', b: 2, c: '3'};
const objStr = JSON.stringify(obj, (key, value) => {
 if(typeof value === 'string') return undefined;
  return value;
})
console.log(objStr);  // '{"b":2}'
// 数组
const obj = { a: '1', b: 2, c: '3'};
const objStr = JSON.stringify(obj, [ 'a', 'b'])
console.log(objStr); // '{"a":"1","b":2}'

第三个参数

space:可选,用于指定缩进的空白字符串,作用于美化输出

const obj = { a: '1', b: 2, c: '3'};
// 1. 如果该参数没有提供(或者为 null),将没有空格。
const objStr1 = JSON.stringify(obj, [ 'a', 'b'])
console.log(objStr1); 

// 2. 如果是数字,它代表多少个空格;上限为10,若小于1则表示没有空格
const objStr2 = JSON.stringify(obj, [ 'a', 'b'], 5)
console.log(objStr2); 
  
// 3. 如果是字符串,就在每行输出值的时候把这些字符串附加上去。最大长度也是10个字符
const objStr3 = JSON.stringify(obj, [ 'a', 'b'], 'uu')
console.log(objStr3); 
  
// 4. 如果是一些转义字符,比如“\t”,表示回车,那么它每行一个回车
const objStr4 = JSON.stringify(obj, [ 'a', 'b'], '\t')
console.log(objStr4); 

在这里插入图片描述

特性

1. toJSON() 方法

转换值如果有 toJSON() 方法,toJSON() 方法返回什么值,序列化结果就返回什么值,其余值会被忽略。

const obj = {
  a: 1,
  toJSON() {
    return '11'
  }
}
console.log(JSON.stringify(obj)) // "11"

2. 布尔值、数字、字符串的包装对象

布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值

console.log(JSON.stringify([new Number(1), new String("1"), new Boolean(true)])) 
// [1,"1",true]

3. 非数组对象

非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中。

4. undefined、任意的函数以及 symbol 值

  • 出现在对象属性值中: undefined、任意函数、Symbol 值在序列化过程中将会被忽略
  • 出现在数组中: undefined、任意函数、Symbol值会被转化为 null
  • 单独转换时: 会返回undefined
const obj = {
  a() {},
  b: undefined,
  c: 1,
  b: Symbol(1)
};
const strObj = JSON.stringify(obj);
console.log(strObj); // '{"c":1}'

const arr = [undefined, 1, function a(){}, Symbol(1) ];
const strArr = JSON.stringify(arr);
console.log(strArr); // '[null,1,null,null]'


const str1 = JSON.stringify(undefined);
console.log(str1) // undefined
const str2 = JSON.stringify(function a() {});
console.log(str2) // undefined
const str3 = JSON.stringify(Symbol(1));
console.log(str3) // undefined

5. 循环引用

对包含循环引用的对象(对象之间相互引用,形成无限循环)执行此方法,会抛出错误。

const obj1 = {a: '1'};
const obj2 = {obj : obj1};
obj1.c = obj2;
JSON.stringify(obj1) // 报错

在这里插入图片描述
6. Symbol

以 symbol 为属性键的属性都会被完全忽略掉,即便 replacer 参数中强制指定包含了它们。

const obj = {
  a: '1',
  [Symbol('b')]: true,
}
function replacer(key, value) {
  if (typeof key === "symbol") return value;
}
console.log(JSON.stringify(obj)) // {"a":"1"}

7. Date对象

Date对象上部署了toJSON方法(同 Date.toISOString()), 因此会被当做字符串处理。

console.log(JSON.stringify(new Date())); // "2022-11-21T07:05:24.919Z"

8. NaN Infinity null

NaN Infinity null 此三类数值序列化过程中会被当作null

const str = JSON.stringify([Number('123a'), +'123a', 1/0]
console.log(str);   // "[null,null,null]"

9. 可枚举属性

其他类型的对象,包括 Map/Set/WeakMap/WeakSet,仅会序列化可枚举的属性。

const obj = {};
Object.defineProperties(obj, {
  'a': {
    value: '1',
    enumerable: true,
  },
  'b': {
    value: '2',
    enumerable: false,
  }
})
console.log(JSON.stringify(obj)) // {"a":"1"}

JSON.parse()

用法:JSON.parse(text, [reviver])

第一个参数:

text: 必需,一个有效的 JSON 字符串。(不允许用逗号作为结尾)

第二个参数:

reviver:可选,转换结果的函数, 将为对象的每个成员调用此函数。函数的遍历顺序依照:从最内层开始,按照层级顺序,依次向外遍历

const objStr = '{"a":1,"b": {"c": 2}}';
const obj = JSON.parse(objStr, function(key, value) {
  console.log(key); // 'a' 'c' 'b' ''
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/23230.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

机器学习之K-Means聚类(python手写实现+使用Silhouette Coefficient来选取最优k值)

文章目录K-MeansSilhouette Coefficient(轮廓系数)代码实现参考K-Means K-Means聚类又叫K均值聚类,是一种线性时间复杂度的聚类方法,也是比较成熟的一种聚类算法。 具体计算步骤如上。 Silhouette Coefficient(轮廓…

以前编写好能够正常运行的 SAP UI5 代码,几个月后忽然不能运行了该怎么办?

以笔者本套教材为例,每一步骤的源代码都托管在本人 Github 仓库里,每次上传之前,都确保本地测试通过。 但笔者编写过程中发现,之前测试通过的代码,可能几个月之后再执行,就会遇到白屏现象,即应…

ffplay数据读取线程

从这张图开始,主要介绍ffplay的读取线程部分。 从图中可以看出,解码线程的主要工作内容是将资源包从待解码列队中取出,然后送进解码器,最后将解码出的数据帧放入帧队列中,等待SDL获取播放。 【学习地址】:F…

【开源电路】ST-LINK/V2、ST-LINK/V2-1、DAP-LINK烧录器(已验证)

【开源电路】ST-LINK/V2、ST-LINK/V2-1、DAP-LINK烧录器(已验证)PCBA实物图 最终的的PCB 3D效果图 效果图和PCBA实物图差异说明 由于设计之初只考虑当ST-LINK V2来用,主要是用来给STM8和stm32烧录程序。没有考虑到会将固件升级到ST-LINK…

可变电阻元件封装

实验目的 掌握原理图封装的绘制操作掌握原理图封装和PCB封装的联系掌握PCB封装的绘制探索逻辑元件的选择 实验原理 采用EDA软件进行电路原理图设计 实验仪器 电脑、Altium Designer软件、相关元器件 实验内容 制作可变电阻元件 1. 创建工作环境2. 管理元件库在左侧面板中打开…

2023年,pmp还值得去考试吗?

为什么不值得呢?PMP的中文翻译过来就是项目管理专业人士,专业人士才考的证难道会差吗?有了它,即使是项目管理小白也能变成PMP专业人士! 张嘴就冒那种别人听了就一脸懵但依然觉得你牛逼坏了的专业术语(笑&a…

站稳前沿消费趋势,IU酒店持续领跑轻中端品牌

站稳前沿消费趋势,IU凸显品牌影响魅力 在疫情点状散发的背景下,身处一线的酒店行业深受影响,在现今错综复杂的市场环境中,投资者如何谋求机遇?酒店业为何破局重生?另一方面,随着消费升级以及年轻一代消费群体的崛起…

【SpringCloud】02 搭建springcloud微服务项目

文章目录搭建springcloud微服务项目1. 微服务父工程2. 创建子模块-shop-common3. 创建子模块--shop-product4. 创建子模块--shop-order搭建springcloud微服务项目 技术栈: springcloud-alibabamybatis-plus 持久性框架mysql数据库5.7以上springboot来搭建每个微服务。 1. 微服…

艾美捷Immunochemistry MitoPT JC-1试剂盒

艾美捷Immunochemistry MitoPT JC-1测定利用荧光染料JC-1检测线粒体膜去极化。当积聚在带负电的极化线粒体中时,JC-1发出橙色荧光。当线粒体膜电位在凋亡或代谢应激的细胞中崩溃时,JC-1试剂分散在细胞中并发出绿色荧光。使用流式细胞仪、荧光平板读取器或…

【场景化解决方案】慧致造ERP,为企业提供生产全流程数字化管理

方案简介 慧致造ERP以钉钉为基座,借助钉钉待办、工作通知、OA审批、工作台组件、酷应用、定制工作台等开放能力,围绕制造业生产管理场景与钉钉深度融合,为中小制造业打造业财一体化的生产制造解决方案,企业用户只需一个平台&…

Linux企业运维之git的使用

文章目录前言一、git简介以及基础操作二、github或者在gitee上创建项目并且上传本地项目自动化创建(触发jenkins)前言 一、git简介以及基础操作 git 简单来说就是版本控制系统 但是相对于其他版本控制系统来说,它又具有一些优点:…

集群渲染和渲染农场是什么意思?跟云渲染有什么关系?

嗨咯,大家好,今天后台有同学问集群渲染什么意思?集群渲染怎么做? 集群渲染(cluster rendering)指的是一组计算机通过通信协议连接在一起的计算机群,它们能够将工作负载从一个超载的计算机迁移到…

20款免费项目管理系统推荐

通过本篇文章您将了解:1、国内外20款最佳项目管理软件;2、使用免费项目管理工具可能面临的风险。一、项目管理软件的重要性 根据 Capterra 的数据研究,项目管理软件即将成为人们最需要的软件。一个项目无论大小,都需要一款高效且…

基于PHP+MySQL游戏视频网站的设计与实现

游戏是茶前饭后一个很好的娱乐方式,但是由于当下网络的高速发展,游戏的模式和种类也丰富多彩,这就导致很多时候人们不能够很快的对游戏上手。 为了改变这一情况很多视频娱乐类网站都出现了游戏视频,但是大多数时候这种网站并不是一个专业的游戏视频网站,跟多的时候是各类电影和…

SpringMVC学习

SpringMVCSpring MVC概述:**什么是Spring MVC ?****什么是MVC?**第一个SpringMVC程序具体步骤:具体实现:第一个SpringMVC小程序的完善Spring MVC概述: 什么是Spring MVC ? 他是基于MVC开发模式的框架&am…

数学建模英文论文的写作方法和步骤

目录 一、语言技巧 二、论文结构 1.标题写作 2.摘要写作时态​编辑 2.2摘要写作语态 2.3摘要写作人称 2.4摘要写作注意事项 3.问题重述 4. 符号说明​编辑 三线表 ​5.模型假设(以三到七个合理假设为宜 ) 6.模型分析及建立模型 7.模型求解 8.模型检验 9.模型优…

电视剧里的代码真能运行吗?

大家好,欢迎来到 Crossin的编程教室 ! 前几天,后台老有小伙伴留言“爱心代码”。这不是Crossin很早之前发过的内容嘛,怎么最近突然又被人翻出来了?后来才知道,原来是一部有关程序员的青春偶像剧《点燃我,温…

022_SSS_Novel View Synthesis with Diffusion Models

Novel View Synthesis with Diffusion Models 1. Introduction 本文利用diffusion模型,在给定参考图的条件下,生成指定pose的图像,作者称为3DiM。并且可以在给定一张特定视角的图的条件下,生成其他所有视角的图。 本文的主要贡…

Treap 原理详解和实战

一 点睛 Treap 指 Tree heap,又叫作树堆,同时满足二叉搜索树和堆两种性质。二叉搜索树满足中序有序性,输入序列不同,创建的二叉搜索树也不同,在最坏的情况下(只有左子树或只有右子树)会退化为…

CMCT-FA修饰阿霉素纳米脂质体/ADR-HAS-MS单抗Hab18偶联阿霉素人血清白蛋白微球的制备方法

瑞禧生物这里整理的内容是CMCT-FA修饰阿霉素纳米脂质体/ADR-HAS-MS单抗Hab18偶联阿霉素人血清白蛋白微球的相关制备方法,来学习! MCT-FA修饰阿霉素纳米脂质体的研究: 利用1-乙基-3-(3-二甲基丙基)-碳二亚胺(EDC)介导 反应合成了叶酸偶联的羧甲…