浅谈JSON.stringify 函数与toJosn函数和Json.parse函数

本文详细介绍了JavaScript中的JSON.stringify和JSON.parse函数的使用方法,包括参数解释、执行顺序及示例代码,帮助读者理解如何将JavaScript对象转换为JSON字符串,以及如何将JSON字符串解析回JavaScript对象。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

JSON.stringify 函数 (JavaScript)

 

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

将 JavaScript 值转换为 JavaScript 对象表示法 (Json) 字符串。
value

必需。 要转换的 JavaScript 值(通常为对象或数组)。

replacer

可选。 用于转换结果的函数或数组。

如果 replacer 为函数,则 JSON.stringify 将调用该函数,并传入每个成员的键和值。 使用返回值而不是原始值。 如果此函数返回 undefined,则排除成员。 根对象的键是一个空字符串:""。

如果 replacer 是一个数组,则仅转换该数组中具有键值的成员。 成员的转换顺序与键在数组中的顺序一样。 当 value 参数也为数组时,将忽略 replacer 数组。

space

可选。 向返回值 JSON 文本添加缩进、空格和换行符以使其更易于读取。

如果省略 space,则将生成返回值文本,而没有任何额外空格。

如果 space 是一个数字,则返回值文本在每个级别缩进指定数目的空格。 如果 space 大于 10,则文本缩进 10 个空格。

如果 space 是一个非空字符串(例如“\t”),则返回值文本在每个级别中缩进字符串中的字符。

如果 space 是长度大于 10 个字符的字符串,则使用前 10 个字符。

如果 value 具有 toJSON 方法,则 JSON.stringify 函数将使用该方法的返回值。 如果 toJSON 方法的返回值为 undefined,则不转换成员。 这使对象能够确定自己的 JSON 表示形式。

将不会转换不具有 JSON 表示形式的值,例如 undefined。 在对象中,将丢弃这些值。 在数组中,会将这些值替换为 null。

执行顺序

在序列化过程中,如果 value 参数对应有 toJSON 方法,则 JSON.stringify 将首先调用 toJSON 方法。 如果该方法不存在,则使用原始值。 接下来,如果提供 replacer 参数,则该值(原始值或 toJSON 返回值)将替换为 replacer 参数的返回值。 最后,根据可选 space 参数向该值添加空格以生成最终的 JSON 文本。

此示例使用 JSON.stringify 将 contact 对象转换为 JSON 文本。 定义 memberfilter 数组以便只转换surname 和 phone 成员。 省略 firstname 成员。

var contact = new Object();
contact.firstname = "Jesper";
contact.surname = "Aaberg";
contact.phone = ["555-0100", "555-0120"];

var memberfilter = new Array();
memberfilter[0] = "surname";
memberfilter[1] = "phone";
var jsonText = JSON.stringify(contact, memberfilter, "\t");
document.write(jsonText);
// Output:
// { "surname": "Aaberg", "phone": [ "555-0100", "555-0120" ] }

toJSON 方法 (Date) (JavaScript)

语法:objectname.toJSON()

objectname

必需。 需要进行 JSON 序列化的对象。

toJSON 方法是 Date JavaScript 对象的内置成员。 它返回 UTC 时区的 ISO 格式日期字符串(由后缀 Z 表示)。

以下示例使用 toJSON 方法将大写的字符串成员值序列化。 在调用 JSON.stringify 时调用 toJSON 方法。

JavaScript
var contact = new Object();
contact.firstname = "Jesper";
contact.surname = "Aaberg";
contact.phone = ["555-0100", "555-0120"];

contact.toJSON = function(key)
 {
    var replacement = new Object();
    for (var val in this)
    {
        if (typeof (this[val]) === 'string')
            replacement[val] = this[val].toUpperCase();
        else
            replacement[val] = this[val]
    }
    return replacement;
};

var jsonText = JSON.stringify(contact);

/* The value of jsonText is:
'{"firstname":"JESPER","surname":"AABERG","phone":["555-0100","555-0120"]}'
*/

JSON.parse 函数 (JavaScript) 

将 JavaScript 对象表示法 (JSON) 字符串转换为对象

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

text
必需。 一个有效的 JSON 字符串。
reviver
可选。 一个转换结果的函数。 将为对象的每个成员调用此函数。 如果成员包含嵌套对象,则先于父对象转换嵌套对象。 对于每个成员,会发生以下情况:
如果 reviver 返回一个有效值,则成员值将替换为转换后的值。
如果 reviver 返回它接收的相同值,则不修改成员值。
如果 reviver 返回 null 或 undefined,则删除成员。

以下示例使用 JSON.parse 将 JSON 字符串转换成对象。

var jsontext = '{"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]}';
var contact = JSON.parse(jsontext);
document.write(contact.surname + ", " + contact.firstname);

// Output: Aaberg, Jesper

以下示例演示了如何使用 JSON.stringify 将数组转换成 JSON 字符串,然后使用 JSON.parse 将该字符串重新转换成数组。

var arr = ["a", "b", "c"];
var str = JSON.stringify(arr);
document.write(str);
document.write ("<br/>");

var newArr = JSON.parse(str);

while (newArr.length > 0) {
    document.write(newArr.pop() + "<br/>");
}


// Output:
// ["a","b","c"]
// c
// b
// a

 

转载于:https://www.cnblogs.com/ToNi/p/4250308.html

value.annex = value.invoice ? this.processPictures( value.invoice ) : [] //处理附件 this.formData.oaClaimDetailList[ this.index ].claimAmount = value.applyAmount.toString() //处理报销金额 this.formData.oaClaimDetailList[ this.index ].annex = JSON.parse( JSON.stringify( value.annex ) ) this.formData.oaClaimDetailList[ this.index ].remarks = '' this.formData.oaClaimDetailList[ this.index ].applyAmount = JSON.parse( JSON.stringify( value.applyAmount ) ) this.formData.oaClaimDetailList[ this.index ].applyTime = JSON.parse( JSON.stringify( value.applyTime ) ) this.formData.oaClaimDetailList[ this.index ].applyTimeSearch = JSON.parse( JSON.stringify( value.applyTimeSearch ) ) this.formData.oaClaimDetailList[ this.index ].businessId = JSON.parse( JSON.stringify( value.businessId ) ) this.formData.oaClaimDetailList[ this.index ].businessType = JSON.parse( JSON.stringify( value.businessType ) ) this.formData.oaClaimDetailList[ this.index ].claimId = JSON.parse( JSON.stringify( value.claimId ) ) this.formData.oaClaimDetailList[ this.index ].claimState = JSON.parse( JSON.stringify( value.claimState ) ) this.formData.oaClaimDetailList[ this.index ].createBy = JSON.parse( JSON.stringify( value.createBy ) ) this.formData.oaClaimDetailList[ this.index ].createTime = JSON.parse( JSON.stringify( value.createTime ) ) this.formData.oaClaimDetailList[ this.index ].deptId = JSON.parse( JSON.stringify( value.deptId ) ) this.formData.oaClaimDetailList[ this.index ].endTime = JSON.parse( JSON.stringify( value.endTime ) ) this.formData.oaClaimDetailList[ this.index ].flag = JSON.parse( JSON.stringify( value.flag ) ) this.formData.oaClaimDetailList[ this.index ].id = JSON.parse( JSON.stringify( value.id ) ) this.formData.oaClaimDetailList[ this.index ].invoice = JSON.parse( JSON.stringify( value.invoice ) ) this.formData.oaClaimDetailList[ this.index ].params = JSON.parse( JSON.stringify( value.params ) ) this.formData.oaClaimDetailList[ this.index ].processInstanceId = JSON.parse( JSON.stringify( value.processInstanceId ) ) this.formData.oaClaimDetailList[ this.index ].processName = JSON.parse( JSON.stringify( value.processName ) ) // this.formData.oaClaimDetailList[ this.index ].relatedClaim = JSON.parse( JSON.stringify( value.relatedClaim ) ) this.formData.oaClaimDetailList[ this.index ].relationId = JSON.parse( JSON.stringify( value.relationId ) ) this.formData.oaClaimDetailList[ this.index ].remark = JSON.parse( JSON.stringify( value.remark ) ) this.formData.oaClaimDetailList[ this.index ].searchValue = JSON.parse( JSON.stringify( value.searchValue ) ) this.formData.oaClaimDetailList[ this.index ].startTime = JSON.parse( JSON.stringify( value.startTime ) ) this.formData.oaClaimDetailList[ this.index ].state = JSON.parse( JSON.stringify( value.state ) ) this.formData.oaClaimDetailList[ this.index ].tenantId = JSON.parse( JSON.stringify( value.tenantId ) ) this.formData.oaClaimDetailList[ this.index ].updateBy = JSON.parse( JSON.stringify( value.updateBy ) ) this.formData.oaClaimDetailList[ this.index ].updateTime = JSON.parse( JSON.stringify( value.updateTime ) ) this.formData.oaClaimDetailList[ this.index ].userId = JSON.parse( JSON.stringify( value.userId ) ) 代码优化
最新发布
03-11
从你提供的代码片段来看,这段JavaScript代码的主要功能是对`this.formData.oaClaimDetailList[this.index]`对象的属性进行赋值操作,并且大量使用了深拷贝的方式来避免引用类型的直接赋值导致的问题。为了提高代码的可读性效率,我们可以对其进行一些优化: ### 1. 减少重复的 `JSON.parse(JSON.stringify())` 这种做法虽然可以实现深度复制的效果,但对于大多数情况来说过于繁琐低效,尤其是对于大型复杂的数据结构可能会造成性能瓶颈。 #### 改进建议: - 如果只是简单地复制基本数据类型(如字符串、数字等),可以直接赋值。 - 对于复杂的嵌套对象或数组,考虑引入专门用于深层克隆的对象工具函数库,例如Lodash的_.cloneDeep()方法;也可以编写自定义浅层/深层克隆函数。 ```javascript const cloneDeep = obj => { if (obj === null || typeof obj !== 'object') return obj; const result = Array.isArray(obj) ? [] : {}; for (let key in obj){ result[key] = cloneDeep(obj[key]); } return result; }; ``` 然后用这个简单的辅助函数替换掉所有的`JSON.parse(JSON.stringify(...))`。 ### 2. 使用解构赋值简化批量设置属性 通过ES6+语法特性中的**解构表达式**能够让我们更简洁优雅地完成这项任务。 ```javascript // 假设我们有一个包含所有需要更新字段的对象value const { applyAmount, invoice, ...rest } = value; // 更新附件信息 value.annex = value.invoice ? this.processPictures(value.invoice) : []; // 批量给formData中的指定位置元素添加新属性或者覆盖现有属性 Object.assign(this.formData.oaClaimDetailList[this.index], rest); // 特殊处理某些特定字段 this.formData.oaClaimDetailList[this.index].claimAmount = applyAmount.toString(); this.formData.oaClaimDetailList[this.index].annex = cloneDeep(value.annex); this.formData.oaClaimDetailList[this.index].applyAmount = +applyAmount; // 转换回数值型 ``` 这样做不仅减少了冗余代码行数,也使得逻辑更加清晰明了。 ### 总结一下改进后的版本: ```javascript function deepClone(obj) {/* 上述提到过的递归深拷贝算法 */} // 简化并优化后的代码段开始... { let targetItem = this.formData.oaClaimDetailList[this.index]; Object.keys(targetItem).forEach((key)=>{ if(key!=='annex'&&key!=='claimAmount'){ targetItem[key]=deepClone(value[key]) } }); // 单独处理特殊规则的两个字段 targetItem.claimAmount=String(value.applyAmount); targetItem.annex=value.invoice?this.processPictures(value.invoice):[]; } ``` 这样做的目的是让我们的程序变得更容易维护的同时保持较高的运行效率。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值