【学习记录19】重新认识JSON

想当年，只知道json得用法就是parse() 方法和stringify() ，也没有详细的去阅读过相关资料和书籍，直到今天回头去阅读才发现，以前对于json只是了解了个皮毛。

let wenhui = {
  name: '温慧',
  age: 18,
  sex: '男',
  school: '家里蹲大学'
}

// 大家是不是和我也一样只会用下面的2种，如果你比我懂得多，那么恭喜你，你基础不错，为你点赞

//JSON.stringify
// 第一种
let str = JSON.stringify(wenhui)  
// str输出结果: '{"name":"温慧","age":18,"sex":"男","school":"家里蹲大学"}'

// 第二种

let str = JSON.stringify(wenhui, null, 2)    
// str输出结果字符串格式如下:  
{
  "name": "温慧",
  "age": 18,
  "sex": "男",
  "school": "家里蹲大学"
}

// JSON.parse
let wenhui = '{"name":"温慧","age":18,"sex":"男","school":"家里蹲大学"}'
let wenhuiObj = JSON.parse(wenhui)
// 最后的结果wenhuiObj是一个对象
wenhuiObj = {
  name: '温慧',
  age: 18,
  sex: '男',
  school: '家里蹲大学'
}

以上是我以前学到的，下面继续系统学习一下JSON，与大家共同进步。。。

JSON的官方描述：

1、JSON对象包含两个方法:用于解析JavaScript Object Notation (JSON) 的 parse() 方法，以及将对象/值转换为 JSON字符串的 stringify() 方法。除了这两个方法, JSON这个对象本身并没有其他作用，也不能被调用或者作为构造函数调用。

2、JavaScript Object Notation

JSON 是一种语法，用来序列化对象、数组、数值、字符串、布尔值和 null 。它基于 JavaScript 语法，但与之不同：JavaScript不是JSON，JSON也不是JavaScript。

JSON背景

JSON是JavaScript Object Notation的缩写，它是一种数据交换格式。

在JSON出现之前，大家一直用XML来传递数据。因为XML是一种纯文本格式，所以它适合在网络上交换数据。XML本身不算复杂，但是，加上DTD、XSD、XPath、XSLT等一大堆复杂的规范以后，任何正常的软件开发人员碰到XML都会感觉头大了，最后大家发现，即使你努力钻研几个月，也未必搞得清楚XML的规范。

终于，在2002年的一天，道格拉斯·克罗克福特（Douglas Crockford）同学为了拯救深陷水深火热同时又被某几个巨型软件企业长期愚弄的软件工程师，发明了JSON这种超轻量级的数据交换格式。

道格拉斯同学长期担任雅虎的高级架构师，自然钟情于JavaScript。他设计的JSON实际上是JavaScript的一个子集。在JSON中，一共就这么几种数据类型：

• number：和JavaScript的number完全一致；
• boolean：就是JavaScript的true或false；
• string：就是JavaScript的string；
• null：就是JavaScript的null；
• array：就是JavaScript的Array表示方式——[]；
• object：就是JavaScript的{ ... }表示方式。

以及上面的任意组合。

并且，JSON还定死了字符集必须是UTF-8，表示多语言就没有问题了。为了统一解析，JSON的字符串规定必须用双引号""，Object的键也必须用双引号""。

由于JSON非常简单，很快就风靡Web世界，并且成为ECMA标准。几乎所有编程语言都有解析JSON的库，而在JavaScript中，我们可以直接使用JSON，因为JavaScript内置了JSON的解析。

把任何JavaScript对象变成JSON，就是把这个对象序列化成一个JSON格式的字符串，这样才能够通过网络传递给其他计算机。

如果我们收到一个JSON格式的字符串，只需要把它反序列化成一个JavaScript对象，就可以在JavaScript中直接使用这个对象了。

摘抄自廖雪峰网站

 stringify()方法-序列化 

MDN描述： 

 语法

JSON.stringify(value[, replacer [, space]])

参数

value

将要序列化成 一个 JSON 字符串的值。

replacer 可选

如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。

space 可选

指定缩进用的空白字符串，用于美化输出（pretty-print）；如果参数是个数字，它代表有多少的空格；上限为10。该值若小于1，则意味着没有空格；如果该参数为字符串（当字符串长度超过10个字母，取其前10个字母），该字符串将被作为空格；如果该参数没有提供（或者为 null），将没有空格。

返回值

一个表示给定值的JSON字符串。

异常

• 当在循环引用时会抛出异常TypeError ("cyclic object value")（循环对象值）
• 当尝试去转换 BigInt 类型的值会抛出TypeError ("BigInt value can't be serialized in JSON")（BigInt值不能JSON序列化）.

描述

JSON.stringify()将值转换为相应的JSON格式：

• 转换值如果有 toJSON() 方法，该方法定义什么值将被序列化。
• 非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中。
• 布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。
• undefined、任意的函数以及 symbol 值，在序列化过程中会被忽略（出现在非数组对象的属性值中时）或者被转换成 null（出现在数组中时）。函数、undefined 被单独转换时，会返回 undefined，如JSON.stringify(function(){}) or JSON.stringify(undefined).
• 对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。
• 所有以 symbol 为属性键的属性都会被完全忽略掉，即便 replacer 参数中强制指定包含了它们。
• Date 日期调用了 toJSON() 将其转换为了 string 字符串（同Date.toISOString()），因此会被当做字符串处理。
• NaN 和 Infinity 格式的数值及 null 都会被当做 null。
• 其他类型的对象，包括 Map/Set/WeakMap/WeakSet，仅会序列化可枚举的属性。 

话不多说，直接上干货了。 

 一、让我们先把wenhui这个对象序列化成JSON格式的字符串（也是我们最常用的）

let wenhui = {
  name: '温慧',
  age: 18,
  sex: '男',
  school: '家里蹲大学'
}

JSON.stringify(wenhui)

// 输出结果：'{"name":"温慧","age":18,"sex":"男","school":"家里蹲大学"}'

二、 要输出得好看一些，可以加上参数，按缩进输出

let wenhui = {
  name: '温慧',
  age: 18,
  sex: '男',
  school: '家里蹲大学'
}

JSON.stringify(wenhui, null, '  ') // 第三个参数是2个空格，等同于JSON.stringify(xiaoming, null, 2)
// 输出结果：

{
  "name": "温慧",
  "age": 18,
  "sex": "男",
  "school": "家里蹲大学"
}

三、第二个参数用于控制如何筛选对象的键值，如果我们只想输出指定的属性，可以传入Arrar

let wenhui = {
  name: '温慧',
  age: 18,
  sex: '男',
  school: '家里蹲大学'
}

JSON.stringify(wenhui, ['name', 'sex'], 2)
// 输出结果
{
  "name": "温慧",
  "sex": "男"
}

 四、还可以传入一个函数，这样对象的每个键值对都会被函数先处理

let wenhui = {
  name: '温慧',
  age: 18,
  sex: '男',
  school: '家里蹲大学',
  book: ['Javascript', 'Java', 'Nodejs']
}

// 把所有属性值都变成大写
function convert(key, value) {
    if (typeof value === 'string') {
        return value.toUpperCase()
    }
    return value
}

JSON.stringify(wenhui, convert, 2)

// 输出结果：
{
  "name": "温慧",
  "age": 18,
  "sex": "男",
  "school": "家里蹲大学",
  "book": [
    "JAVASCRIPT",
    "JAVA",
    "NODEJS"
  ]
}

五、 可以给wenhui定义一个toJSON()的方法，直接返回一个自定义的序列化数据

let wenhui = {
  name: '温慧',
  age: 18,
  sex: '男',
  school: '家里蹲大学',
  book: ['Javascript', 'Java', 'Nodejs'],
  toJSON: function () {
    return {
      'Name': this.name,
      'Age': this.age
    }
  }
}

JSON.stringify(wenhui)
// 输出结果 '{"Name":"温慧","Age":18}'

JSON.parse()方法 - 反序列化

MDN描述： 

JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。提供可选的 reviver函数用以在返回之前对所得到的对象执行变换(操作)。

语法

JSON.parse(text[, reviver])

参数

text

要被解析成 JavaScript 值的字符串，关于JSON的语法格式,请参考：JSON。

reviver 可选

转换器, 如果传入该参数(函数)，可以用来修改解析生成的原始值，调用时机在 parse 函数返回之前。

返回值

Object 类型, 对应给定 JSON 文本的对象/值。

异常

若传入的字符串不符合 JSON 规范，则会抛出 SyntaxError 异常。

 一、拿到一个JSON格式的字符串，我们直接用JSON.parse()把它变成一个JavaScript对象

JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]
JSON.parse('{"name":"温慧","age":18}'); // Object {name: '温慧', age: 18}
JSON.parse('true'); // true
JSON.parse('123.45'); // 123.45

二、JSON.parse()还可以接收一个函数，用来转换解析出的属性

var obj = JSON.parse('{"name":"温慧","age":18}', function (key, value) {
    if (key === 'name') {
        return value + '同学'
    }
    return value;
})
console.log(JSON.stringify(obj)); 
//输出结果： {name: '温慧同学', age: 18}