所有现代浏览器都支持 JSON 对象,有两个非常有用的方法来处理 JSON 格式的内容:

  • JSON.parse(string) :接受一个 JSON 字符串并将其转换成一个 JavaScript 对象。
  • JSON.stringify(obj) :接受一个 JavaScript 对象并将其转换为一个 JSON 字符串。

比如我有两个变量,我要将a转换成字符串,将b转换成JSON对象:

js 代码:
    var a={"name":"tom","sex":"男","age":"24"};
var b='{"name":"Mike","sex":"女","age":"29"}';

在Firefox,chrome,opera,safari,ie9,ie8等高级浏览器直接可以用JSON对象的stringify()和parse()方法。

JSON.stringify(obj)将JSON转为字符串。

JSON.parse(string)将字符串转为JSON格式;

上面的转换可以这么写:

js 代码:
    var a={"name":"tom","sex":"男","age":"24"};

    var b='{"name":"Mike","sex":"女","age":"29"}';

    var aToStr=JSON.stringify(a);

    var bToObj=JSON.parse(b);

    console.log(typeof(aToStr)); ?//string

    console.log(typeof(bToObj));//object

尽管这些方法通常用在对象上,但它们也可以在数组上使用:

JavaScript 代码:
    const myArr = ['bacon', 'letuce', 'tomatoes'];

    const myArrStr = JSON.stringify(myArr);

    console.log(myArrStr);
// "["bacon","letuce","tomatoes"]" console.log(JSON.parse(myArrStr));
// ["bacon","letuce","tomatoes"]

ie8(兼容模式),ie7和ie6没有JSON对象,不过http://www.json.org/提供了一个json.js,这样ie8(兼容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法;你可以在https://github.com/douglascrockford/JSON-js上获取到这个js,一般现在用json2.js。

ie8(兼容模式),ie7和ie6可以使用eval()将字符串转为JSON对象,

js 代码:
    var c='{"name":"Mike","sex":"女","age":"29"}';
var cToObj=eval("("+c+")");
console.log(typeof(cToObj));
    var c='[{"name":"Mike","sex":"女","age":"29"}]';
var cToObj=eval(c);
console.log(typeof(cToObj));

jQuery中也有将字符串转为JSON格式的方法jQuery.parseJSON( json ),接受一个标准格式的 JSON 字符串,并返回解析后的 JavaScript (JSON)对象。当然如果有兴趣可以自己封装一个jQuery扩展,jQuery.stringifyJSON(obj)将JSON转为字符串。

JSON.parse() 和 JSON.stringify() 的高级用法,可以将返回值过滤,转换等。请查看:https://www.html.cn/archives/8735

这里介绍一下,我主要介绍一下 JSON.parse() 和 JSON.stringify() 的高级用法,可以在实际应用中给我们带来一些方便。

JSON.parse()

JSON.parse() 可以接受第二个参数,它可以在返回之前转换对象值。比如这例子中,将返回对象的属性值大写:

JavaScript 代码:
    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 的值将不在返回的字符串中:

JavaScript 代码:
    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"}"

传入一个间隔参数的示例:

JavaScript 代码:
    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 方法后的返回值会被序列化

JavaScript 代码:
    var obj = {
foo: 'foo',
toJSON:function(){
return 'bar';
}
}
JSON.stringify(obj);//'"bar"'
JSON.stringify({x:obj});//'{"x":"bar"}'

利用toJSON方法,我们可以修改对象转换成JSON的默认行为。

用 JSON.stringify 来格式化对象

在实际使用中,我们可能会格式化一些复杂的对象,这些对象往往对象内嵌套对象。直接看起来并不那么直观,结合上面的的 replacer 和 space 参数,我们可以这样格式化复杂对象:

JavaScript 代码:
    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))

实际返回的字符串,记住是字符串,如下:

JavaScript 代码:
    {
"bar": "1",
"baz": 3,
"o": {
"name": "xiaoli",
"age": 21,
"info": {
"sex": "男",
"getSex": "function (){return 'sex';}"
}
}
}

JSON对象和字符串之间的相互转换 – JSON.parse() 和 JSON.stringify()的更多相关文章

  1. JSON对象与字符串之间的相互转换

    <html> <head> <meta name="viewport" content="width=device-width" ...

  2. Json数组操作小记 及 JSON对象和字符串之间的相互转换

    [{"productid":"1","sortindex":"2"},{"productid":&q ...

  3. JSON对象与字符串之间的相互转换 - CSDN博客

    原文:JSON对象与字符串之间的相互转换 - CSDN博客 <html> <head> <meta name="viewport" content=& ...

  4. JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)

    在Firefox,chrome,opera,safari,ie9,ie8等高级浏览器直接可以用JSON对象的stringify()和parse()方法. JSON.stringify(obj)将JSO ...

  5. 小tips:JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)

    在Firefox,chrome,opera,safari,ie9,ie8等高级浏览器直接可以用JSON对象的stringify()和parse()方法. JSON.stringify(obj)将JSO ...

  6. JSON对象和字符串之间的相互转换

    比如我有两个变量,我要将a转换成字符串,将b转换成JSON对象: var a={"name":"tom","sex":"男&quo ...

  7. 解析JSON对象与字符串之间的相互转换

    在开发的过程中,如果对于少量参数的前后台传递,可以直接采用ajax的data函数,按json格式传递,后台Request即可,但有的时候,需要传递多个参数,这样后台 接受的时候Request多个很麻烦 ...

  8. JS 中 JSON 对象与字符串之间的相互转换

    在开发的过程中,如果对于少量参数的前后台传递,可以直接采用ajax的data函数,按json格式传递,后台Request即可,但有的时候,需要传递多个参数,这样后台 接受的时候Request多个很麻烦 ...

  9. FastJson对于JSON格式字符串、JSON对象及JavaBean之间的相互转换

    fastJson对于json格式字符串的解析主要用到了一下三个类: JSON:fastJson的解析器,用于JSON格式字符串与JSON对象及javaBean之间的转换. JSONObject:fas ...

随机推荐

  1. Pregel Master

  2. vue 外卖app(3) 利用slot分发内容

    1. 增加一个HeaderTop.vue <template> <header class="header"> <slot name="le ...

  3. 保护Laravel .env文件,防止直接访问

    web服务器: Apache 服务器系统: Ubuntu 14.04 如果不是vhost的形式部署在服务器上,可能是可以通过 http://www.example.com/.env 查看到larave ...

  4. storm集群的安装

    storm图解 storm的基本概念 Topologies:拓扑,也俗称一个任务 Spoults:拓扑的消息源 Bolts:拓扑的处理逻辑单元 tuple:消息元组,在Spoults和Bolts传递数 ...

  5. Delphi里面弹出对话框的方法

    1.procedure   ShowMessage(const   Msg:   string); 单元:Dialogsor   QDialogs 例子:showmessage( 'hello '); ...

  6. bzoj 2257 (JSOI 2009) 瓶子与燃料

    Description jyy就一直想着尽快回地球,可惜他飞船的燃料不够了. 有一天他又去向火星人要燃料,这次火星人答应了,要jyy用飞船上的瓶子来换.jyy 的飞船上共有 N个瓶子(1<=N& ...

  7. 几道noip2018提高组初赛的题

    以下做法来均自llj @Nicodafagood 一.单项选择题 7. 在一条长度为 1 的线段上随机取两个点,则以这两个点为端点的线段的期望 长度是( ).A. 1 / 2B. 1 / 3C. 2 ...

  8. mac 安装配置使用 mongoldb

    mac 安装配置使用 mongoldb 安装和配置 brew install mongos brew install mongo # 密码就是用户的密码 # 配置数据文件 //如果不配置会出现错误62 ...

  9. [00]APUE:GCC / GDB / Makefile

    http://blog.csdn.net/haoel/article/category/9197 http://blog.csdn.net/haoel/article/details/2886  生成 ...

  10. Array类型中的检测数组,转换方法,栈方法,队列方法

    我的新博客==> http://www.suanliutudousi.com/2017/08/24/array%E7%B1%BB%E5%9E%8B%E4%B8%AD%E7%9A%84%E6%A3 ...