JSON.parse()与JSON.stringify()高级用法

时间 2020-06-09

标签 json.parse json parse json.stringify stringify 高级用法栏目 JSON 繁體版

原文原文链接

JSON.parse()与JSON.stringify是将JSON对象与字符串互相转换的方法，它们还有一些参数能够让咱们在实际应用中更加方便，如今介绍一下它们的高级用法css

JSON.parse()json

JSON.parse(jsonString, (key, value) => {}) 能够接受两个参数，第一个就是咱们已经熟悉的json字符串，第二个是一个回调函数，咱们能够对返回的每个value作处理，而后返回对应的value数组

const testJSON = { name: 'test', value: 7, }; const jsonStr = JSON.stringify(testJSON); JSON.parse(jsonStr, (key, value) => { if (typeof value === 'string') { return value.toUpperCase(); } return value; }); // {
       name: 'TEST', value: 7, }

JSON.stringify()函数

JSON.stringify(jsonObject, replace, space) 能够接受三个参数，第一个是json对象，第二个在转成字符串前处理属性值，第三个在字符串中插入空白符加强可读性spa

replace： 传入的参数能够是一个数组，也能够是一个回调函数，做用都是用于处理属性值；当是一个数组时，只有在数组中存在的属性，才会出如今最终转成的字符串中；当是一个回调函数时，能够处理每个属性值，而后返回通过处理的值，若返回值是undefined ，则该属性值会被忽略，将不会出如今最终的字符串中。prototype

（注意：当relace为数组，过滤属性时，嵌套属性一样会被过滤掉） code

const testJSON = { name: 'test', cities: { shanghai: 1, }, }; JSON.stringify(testJSON, ['name']); // "{"name": 'test'}"
 JSON.stringify(testJSON, ['name', 'cities']); // "{"name": 'test', "cities": {}}"
 JSON.stringify(testJSON, ['name', 'cities', 'shanghai']); // "{"name": 'test', "cities": {"shanghai": 1}}"
 JSON.stringify(testJSON, (key, value) => { if (key === 'cities') { return  'cities'; } return value; }); // "{"name": 'test', "cities": 'cities'}"
 JSON.stringify(testJSON, (key, value) => { if (key === 'shanghai') { return 9; } return value; }); // "{"name": 'test', "cities": {"shanghai": 9}}"

space: 传入的参数能够是String或Number的值，若是是String值，则该字符串会做为空白符，字符串最长可为10个字符，若是超过了10个字符，那么会截取前10个字符，如果undefined或null，则会被忽略，不会显示空白符；若是是Number的值，表示会有多少个空格做为空白符，最大数值为10，超过10也会被当作10来处理，最小为1，小于1则无效，不会显示空格对象

const testJSON = { name: 'test', city: 'shanghai', }; JSON.stringify(testJSON, undefined, ' '); // "{
       "name": 'test', "city": 'shanghai', }" JSON.stringify(testJSON, undefined, ' '); // "{ "name": 'test', "city": 'shanghai', }" JSON.stringify(testJSON, undefined, '\t'); // "{ "name": 'test', "city": 'shanghai', }" JSON.stringify(testJSON, undefined, '...'); // "{ ..."name": 'test', ..."city": 'shanghai', }" JSON.stringify(testJSON, undefined, 7); // "{ "name": 'test', "city": 'shanghai',   // 缩进7个空格
     }"

toJSON方法blog

若是一个被序列化的json对象拥有toJSON方法，那么真正被序列化的值是toJSON方法返回的值，而不是自己的对象ci

const testJSON = { name: 'test', toJSON: () => { return { toJson: 'testJson' }, }, }; JSON.stringify(testJSON); // "{"toJson": 'testJson'}"

JSON.stringify()序列化复杂的json对象

有的json对象中包含函数，那么序列化是会忽略掉函数，当咱们想保留函数时，能够经过replace（回调函数）来处理

const testJSON = { name: 'test', getName: () => { return 'test'; }, }; JSON.stringify(kTextJson, (key, value) => { if (typeof value === 'function') { return Function.prototype.toString.call(value); } return value; }, '\t')); // {
      "name": "test", "getName": "function getName() {\n    return 'test';\n  }" }

参考文章：https://www.css88.com/archives/8735