入门前端-《JavaScript 语言入门教程-JSON对象》

小鱼儿 2023-01-13 09:59 203阅读 0赞

### 文章目录 ###

*   *  JSON.stringify()
     *   *  参数对象的 toJSON() 方法
     *  JSON.parse()
     *   *  使用 reviver

## JSON.stringify() ##

基本用法  
JSON.stringify()方法用于将一个值转为 JSON 字符串。该字符串符合 JSON 格式，并且可以被JSON.parse()方法还原。

JSON.stringify('abc') // ""abc""
    JSON.stringify(1) // "1"
    JSON.stringify(false) // "false"
    JSON.stringify([]) // "[]"
    JSON.stringify({ }) // "{}"
    
    JSON.stringify([1, "false", false])
    // '[1,"false",false]'
    
    JSON.stringify({  name: "张三" })
    // '{"name":"张三"}'

### 参数对象的 toJSON() 方法 ###

如果参数对象有自定义的toJSON()方法，那么JSON.stringify()会使用这个方法的返回值作为参数，而忽略原对象的其他属性。

下面是一个普通的对象。

var user = { 
      firstName: '三',
      lastName: '张',
    
      get fullName(){ 
        return this.lastName + this.firstName;
      }
    };
    
    JSON.stringify(user)
    // "{"firstName":"三","lastName":"张","fullName":"张三"}"

现在，为这个对象加上toJSON()方法。

上面代码中，JSON.stringify()发现参数对象有toJSON()方法，就直接使用这个方法的返回值作为参数，而忽略原对象的其他参数。

Date对象就有一个自己的toJSON()方法。

var date = new Date('2015-01-01');
    date.toJSON() // "2015-01-01T00:00:00.000Z"
    JSON.stringify(date) // ""2015-01-01T00:00:00.000Z""

上面代码中，JSON.stringify()发现处理的是Date对象实例，就会调用这个实例对象的toJSON()方法，将该方法的返回值作为参数。

## JSON.parse() ##

JSON.parse()方法用于将 JSON 字符串转换成对应的值。

JSON.parse('{}') // {}
    JSON.parse('true') // true
    JSON.parse('"foo"') // "foo"
    JSON.parse('[1, 5, "false"]') // [1, 5, "false"]
    JSON.parse('null') // null
    
    var o = JSON.parse('{"name": "张三"}');
    o.name // 张三

如果传入的字符串不是有效的 JSON 格式，JSON.parse()方法将报错。

JSON.parse("'String'") // illegal single quotes
    // SyntaxError: Unexpected token ILLEGAL

为了处理解析错误，可以将JSON.parse()方法放在try…catch代码块中。

try { 
      JSON.parse("'String'");
    } catch(e) { 
      console.log('parsing error');
    }

### 使用 reviver ###

> 想象一下，我们从服务器上获得了一个字符串化的 meetup 对象。

它看起来像这样：

// title: (meetup title), date: (meetup date)
    let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}';

……现在我们需要对它进行`反序列（deserialize）`，把它转换回 `JavaScript 对象`。

让我们通过调用 `JSON.parse` 来完成：

let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}';
    
    let meetup = JSON.parse(str);
    
    alert( meetup.date.getDate() ); // Error!

啊！报错了！

`meetup.date` 的值是一个字符串，而不是 `Date`对象。`JSON.parse`怎么知道应该将字符串转换为`Date`呢？

让我们将`reviver`函数传递给`JSON.parse`作为第二个参数，该函数按照“原样”返回所有值，但是 `date` 会变成 `Date`：

let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}';
    
    let meetup = JSON.parse(str, function(key, value) { 
      if (key == 'date') return new Date(value);
      return value;
    });
    
    alert( meetup.date.getDate() ); // 30 现在正常运行了！

end