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

àì夳堔傛蜴生んèń 2021-11-29 21:50 414阅读 0赞

所有现代浏览器都支持 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/][http_www.json.org]提供了一个json.js,这样ie8(兼容模式),ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法；你可以在[https://github.com/douglascrockford/JSON-js][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 )][jQuery.parseJSON_ json]，接受一个标准格式的 JSON 字符串，并返回解析后的 JavaScript （JSON）对象。当然如果有兴趣可以自己封装一个jQuery扩展，jQuery.stringifyJSON(obj)将JSON转为字符串。

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

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

### JSON.parse() ###

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

JavaScript 代码:

注：尾随逗号在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 代码:

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

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

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

JavaScript 代码:

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

转载于:https://www.cnblogs.com/amujoe/p/11077300.html

[http_www.json.org]: http://www.json.org/js.html
[https_github.com_douglascrockford_JSON-js]: https://github.com/douglascrockford/JSON-js
[jQuery.parseJSON_ json]: https://www.html.cn/jqapi-1.9/jQuery.parseJSON/
[https_www.html.cn_archives_8735]: https://www.html.cn/archives/8735