JSON.stringify & JSON.parse 简析
以前用到JSON的场景也不少,但是没有仔细的研究过,这几天趁着一个需求用到了,就整理了一下相关用法。
一、 JSON.stringify()
1. 语法 JSON.stringify(value[, replacer [, space]])
2. 先说一下后面两个可选参数
space:是指定缩进用的空白字符串,用于美化输出,可以是数字或字符串。
const data = {
a: 'bang',
b: null,
c: {
x: 'xxx',
y: 'yyy',
z: 90
},
d: 9527
}
JSON.stringify(data, null, 4)
// {
// "a": "bang",
// "b": null,
// "c": {
// "x": "xxx",
// "y": "yyy",
// "z": 90
// },
// "d": 9527
// }
JSON.stringify(data, null, '-')
// {
// -"a": "bang",
// -"b": null,
// -"c": {
// --"x": "xxx",
// --"y": "yyy",
// --"z": 90
// -},
// -"d": 9527
// }
replacer:转化规则,可以是一个函数或数组。
// 1. 数组
const data = {
a: 'haha',
b: 123,
c: {
d: 8080,
e: null
}
};
JSON.stringify(data, ['b', 'd'])
// {"b":123}
JSON.stringify(data, ['a', 'c'])
// {"a":"haha","c":{}}
JSON.stringify(data, ['a', 'c', 'e'])
// {"a":"haha","c":{"e":null}}
// 2. 函数
const data = {
a: 'haha',
b: 123,
c: {
b: '123',
d: 8080,
e: null
}
};
function rep (key, value) {
if (key === 'b' && typeof value === 'number') return ++value;
return value;
}
JSON.stringify(data, rep)
// {"a":"haha","b":124,"c":{"b":"123","d":8080,"e":null}}
3. value
将要序列化成 一个 JSON 字符串的值。这里面有一些类型是不能够转化的,undefined/function/symbol
1). undefined
JSON.stringify遇到undefined时,是无法被返回的,但是null是可以的,所以我在这里的处理是把undefined 转化成null
这么做的理由是因为 undefined == null //true , 这样处理后的数据是不影响做模糊判断的。
2). function
同样是无法被返回的一种类型,我的处理是转成string类型存储,这么做产生的一个问题是 JSON.parse时需要再转成function
let data = {
name: undefined,
age: 18,
type: null,
fn: ()=>{
return 999;
}
};
let rep = (key, value) => {
if (value === undefined) {
return null;
}
if (typeof value === 'function') {
return Function.prototype.toString.call(value);
}
return value;
}
JSON.stringify(data, rep)
//{"name":null,"age":18,"type":null,"fn":"()=>{\n return 999;\n }"}
3). symbol
es6新增的一种数据类型,具体留到另一篇文章里说。这里还是说JSON的问题。
// 当value是Symbol 时,能被第二个参数指定,若不指定则无法返回
// 当key是Symbol 时,会被忽略,第二个参数无法指定
let data={name: 'aaa', symbol: Symbol()};
data[Symbol()] = 'bbb';
JSON.stringify(data,(key,value)=>{
console.log(key,value);
// name aaa
// symbol Symbol()
if (typeof value === 'symbol') return 'symbol'; //只有在这里指定才能返回结果
return value;
});
//{"name":"aaa","symbol":"symbol"}
如果value 为Symbol,可以通过第二个参数来转换;但是key为Symbol的话,遍历的时候是无法遍历到的,就无法返回,类似于不可枚举类型:
let data = Object.create(null, {
name: {
value: 'aaa',
enumerable: true
},
age: {
value: 18,
enumerable: false
}
});
let a = JSON.stringify(data, (key, value) => {
console.log(key, value);
//name aaa
return value;
})
console.log(a);
//{"name":"aaa"}
二、JSON.parse()
1. 语法: JSON.parse(text[, reviver])
2. 参数:reviver 转换器, 如果传入该参数(函数),可以用来修改解析生成的原始值,调用时机在parse函数返回之前。
let data = {
name: undefined,
age: 18,
type: null,
fn: () => {
return 999;
}
};
let rep = (key, value) => {
if (value === undefined) {
return null;
}
if (typeof value === 'function') {
return Function.prototype.toString.call(value);
}
return value;
}
let jsonS = JSON.stringify(data, rep);
//{"name":null,"age":18,"type":null,"fn":"()=>{\n return 999;\n }"}
let jsonR = JSON.parse(jsonS, (key, value)=>{
if (key) {
// return eval('('+value+')');
return new Function('return '+value)()
}
return value;
});
console.log(jsonR, jsonR.fn());
// { name: null, age: 18, type: null, fn: [Function] }
//
对于reviver 函数的处理用了eval 和 new Function 两种方式,因为eval的安全性问题,并不推荐使用,优先使用后一种方式。
三、toJSON
如果有toJSON,执行 .stringify时会先执行这个方法,再执行第二个参数
toJSON 是一个覆盖函数,要慎重使用。
let data = {
name: 'nan',
age: 18,
toJSON: function () {
console.log('to');
return this.name;
}
};
JSON.stringify(data, (key,value)=>{
console.log('rep');
return value;
});
// to
// rep
// "nan"
总结:若希望用到JSON,对象中尽量只存储基础数据类型,不要出现以上几种对于数据化不友好的类型。
*** MDN文档 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
JSON.stringify & JSON.parse 简析的更多相关文章
- JSON.stringify(),JSON.parse(),toJSON()使用方法总结
今天在看<你不知道的javascript-中>第四章‘强制类型转换’的时候,发现JSON.stringify(),JSON.parse(),toJSON()有很多细节,自己也就总结测试了一 ...
- JSON.stringify() / JSON.parse()
JSON.stringify() 这个方法可以把javascript对象转换成json字符串. JSON.parse() 这个方法可以把 json 字符串转换成 javascript对象. [下面来看 ...
- JSON.stringify(),JSON.parse(),toJSON()方法使用
JSON.stringify(),将value(Object,Array,String,Number...)序列化为JSON字符串 JSON.parse(), 将JSON数据解析为js原生值 ...
- JSON stringify and parse
来源 : http://javascript.ruanyifeng.com/stdlib/date.html //解析json也可以传入一个方法, 基本上和stringify差不多,不过是逆序的, 要 ...
- JSON.stringify(),JSON.parse(),eval(string)
JSON.stringify()用于从一个对象解析出字符串 : var obj = {"name":"week","age":" ...
- JSON.stringify,JSON.parse方法
var obj={name:'zhangsan',age:'18'};/** js对象--->JSON字符串* JSON.stringify(js对象) --转化为--> JSON字符串* ...
- 解决IE6 IE7 JSON.stringify JSON 未定义问题
在项目中引入json2.js 官方http://www.json.org/ 源码地址:https://github.com/douglascrockford/JSON-js $.ajax({ url: ...
- JSON.parse() 和 JSON.stringify()
JSON.parse()和JSON.stringify() 1.parse 用于从一个字符串中解析出json 对象.例如 var str='{"name":"cpf& ...
- JSON.parse()与JSON.stringify()高级用法
JSON.parse()与JSON.stringify是将JSON对象与字符串互相转换的方法,它们还有一些参数可以让我们在实际应用中更加方便,现在介绍一下它们的高级用法 JSON.parse() JS ...
随机推荐
- c# 第10节 表达式
本节内容: 1:表达式是什么 2:表达式实例 1:表达式是什么 2:表达式实例 3:运算符分类
- opencv旋转图像,90度标准旋转
摘自opencv 源代码 void rotate(InputArray _src, OutputArray _dst, int rotateMode) { CV_Assert(_src.dims() ...
- SQL必知必会02 过滤数据/条件查询
- (day46)DOM、BOM、事件
目录 一.BOM (一)定义 (二)window对象 (三)window的子对象 (1)navigator对象 (2)screen对象 (3)history对象 (4)location对象 (5)弹出 ...
- xgboost:
https://www.zybuluo.com/Dounm/note/1031900 GBDT算法详解 http://mlnote.com/2016/10/05/a-guide-to-xgboost- ...
- [LeetCode] 95. Unique Binary Search Trees II 独一无二的二叉搜索树之二
Given an integer n, generate all structurally unique BST's (binary search trees) that store values 1 ...
- SVN+vs2017
安装VirtualSvn Server https://www.visualsvn.com/ 安装visualsvn到VS2017 https://www.visualsvn.com/visualsv ...
- 团队作业第五次—项目冲刺-Day5
Day5 part1-SCRUM: 项目相关 作业相关 具体描述 所属班级 2019秋福大软件工程实践Z班 作业要求 团队作业第五次-项目冲刺 作业正文 hunter--冲刺集合 团队名称 hunte ...
- 微信小程序前端调用后台方法并获取返回值
wxml代码 <wxs src="../../wxs/string.wxs" module="tools" /> <!-- 调用tools.i ...
- Go Windows 环境安装及配置(一)
首先安装windows的包 go1.12.6.windows-amd64.msi cmd 查看下环境变量 go env set GOARCH=amd64 --架构 amd64/arm set GOBI ...