本文标题目录
简单概括
JSON.stringify() 从一个对象中解析出字符串
JSON.stringify({"a":"1","b":"2"})
// 结果是:"{"a":"1","b":"2"}"
JSON.parse()从一个字符串中解析出JSON对象
var str = '{"a":"1","b":"2"}';
JSON.parse(str);
// 结果是:Object{a:"1",b:"2"}
在使用JSON.parse()需要注意一点,由于此方法是将JSON字符串转换成对象,所以你的字符串必须符合JSON格式,即键值都必须使用
双引号
包裹:
let a = '["1","2"]';
let b = "['1','2']";
console.log(JSON.parse(a));// Array [1,2]
console.log(JSON.parse(b));// 报错
如图:
高级用法
JSON.parse()
JSON.parse()
可以接受第二个参数,它可以在返回之前转换对象值。比如这例子中,将返回对象的属性值大写:
const user = {
name: 'John',
email: 'john@awesome.com',
plan: 'Pro'
};
const userStr = JSON.stringify(user);
const newUserStr = JSON.parse(userStr, (key, value) => {
if (typeof value === 'string') {
return value.toUpperCase();
}
return value;
});
console.log(newUserStr); //{name: "JOHN", email: "JOHN@AWESOME.COM", plan: "PRO"}
注:尾随逗号在JSON 中无效,所以如果传递给它的字符串有尾随逗号,JSON.parse()将会抛出错误。
JSON.stringify()
JSON.stringify()
可以带两个额外的参数,第一个是替换函数,第二个间隔字符串,用作隔开返回字符串。
参数:
- value : 将要转为JSON字符串的javascript对象。
- replacer :该参数可以是多种类型,如果是一个函数,则它可以改变一个javascript对象在字符串化过程中的行为, 如果是一个包含 String 和 Number 对象的数组,则它将作为一个白名单.只有那些键存在域该白名单中的键值对才会被包含进最终生成的JSON字符串中.如果该参数值为null或者被省略,则所有的键值对都会被包含进最终生成的JSON字符串中。
- space :该参数可以是一个 String 或 Number 对象,作用是为了在输出的JSON字符串中插入空白符来增强可读性. 如果是Number对象, 则表示用多少个空格来作为空白符; 最大可为10,大于10的数值也取10.最小可为1,小于1的数值无效,则不会显示空白符. 如果是个 String对象, 则该字符串本身会作为空白符,字符串最长可为10个字符.超过的话会截取前十个字符. 如果该参数被省略 (或者为null), 则不会显示空白符
替换函数可以用来过滤值,因为任何返回 undefined
的值将不在返回的字符串中:
const user = {
id: 229,
name: 'John',
email: 'john@awesome.com'
};
function replacer(key, value) {
console.log(typeof value);
if (key === 'email') {
return undefined;
}
return value;
}
const userStr = JSON.stringify(user, replacer);
// "{"id":229,"name":"John"}"
传入一个间隔参数的示例:
const user = {
name: 'John',
email: 'john@awesome.com',
plan: 'Pro'
};
const userStr = JSON.stringify(user, null, '...');
// "{
// ..."name": "John",
// ..."email": "john@awesome.com",
// ..."plan": "Pro"
// }"
toJSON方法
如果一个被序列化的对象拥有 toJSON 方法,那么该 toJSON 方法就会覆盖该对象默认的序列化行为:不是那个对象被序列化,而是调用 toJSON 方法后的返回值会被序列化
var obj = {
foo: 'foo',
toJSON:function(){
return 'bar';
}
}
JSON.stringify(obj);//'"bar"'
JSON.stringify({x:obj});//'{"x":"bar"}'
利用toJSON方法,我们可以修改对象转换成JSON的默认行为。
用 JSON.stringify 来格式化对象
在实际使用中,我们可能会格式化一些复杂的对象,这些对象往往对象内嵌套对象。直接看起来并不那么直观,结合上面的的 replacer 和 space 参数,我们可以这样格式化复杂对象:
var censor = function(key,value){
if(typeof(value) == 'function'){
return Function.prototype.toString.call(value)
}
return value;
}
var foo = {bar:"1",baz:3,o:{name:'xiaoli',age:21,info:{sex:'男',getSex:function(){return 'sex';}}}};
console.log(JSON.stringify(foo,censor,4))
实际返回的字符串,记住是字符串,如下:
{
"bar": "1",
"baz": 3,
"o": {
"name": "xiaoli",
"age": 21,
"info": {
"sex": "男",
"getSex": "function (){return 'sex';}"
}
}
}
几种妙用
判断数组是否包含某对象,或者判断对象是否相等。
//判断数组是否包含某对象
let data = [
{name:'echo'},
{name:'听风是风'},
{name:'天子笑'},
],
val = {name:'天子笑'};
JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1;//true
//判断两数组/对象是否相等
let a = [1,2,3],
b = [1,2,3];
JSON.stringify(a) === JSON.stringify(b);//true
让localStorage/sessionStorage可以存储对象。
localStorage/sessionStorage默认只能存储字符串,而实际开发中,我们往往需要存储的数据多为对象类型,那么这里我们就可以在存储时利用json.stringify()将对象转为字符串,而在取缓存时,只需配合json.parse()转回对象即可。
//存
function setLocalStorage(key,val){
window.localStorage.setItem(key,JSON.stringify(val));
};
//取
function getLocalStorage(key){
let val = JSON.parse(window.localStorage.getItem(key));
return val;
};
//测试
setLocalStorage('demo',[1,2,3]);
let a = getLocalStorage('demo');//[1,2,3]
实现对象深拷贝
实际开发中,如果怕影响原数据,我们常深拷贝出一份数据做任意操作,其实使用JSON.stringify()与JSON.parse()来实现深拷贝是很不错的选择。
//深拷贝
function deepClone(data) {
let _data = JSON.stringify(data),
dataClone = JSON.parse(_data);
return dataClone;
};
//测试
let arr = [1,2,3],
_arr = deepClone(arr);
arr[0] = 2;
console.log(arr,_arr)//[2,2,3] [1,2,3]
说在最后。以上整理来自https://www.cnblogs.com/echolun/p/9631836.html、https://www.html.cn/archives/8735 两篇文章。
如果为你提供到了帮助,麻烦点个赞支持一下噢~