一篇搞懂JSON

概况

JSON，全称JavaScript Object Notation（JavaScript 对象表示法），是一种超轻量级数据交换格式，可用于多种程序语言，使用UTF-8字符编码格式，是JavaScript语法的子集。

数据类型

JSON格式支持的数据类型可以分为三类：

• 简单值（不包括undefined）：number、Boolean、string（使用双引号）、null
• 对象：键使用双引号、属性值可以是简单值、对象、数组
• 数组

JSON与JS对象互相转换

JSON是JS的一个全局对象，有两个方法：stringify()和parse()。

• JSON.stringify()：将JS对象序列化成一个JSON格式的字符串；
• JSON.parse()：将JSON反序列化成一个JS对象。

序列化 JS --> JSON

方法：JSON.stringify(object, function(key, value), ' ')，输出一个字符串，默认不包含空格或缩进，object中值为undefined的属性会被忽略。

var xiaoming = {
  name: '小明',
  age: 14,
  gender: true,
  height: 1.65,
  grade: null,
  'middle-school': '\"W3C\" Middle School',
  skills: ['JavaScript', 'Java', 'Python', 'Lisp']
};
JSON.stringify(xiaoming);  
// 输出结果：
"{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"middle-school":"\"W3C\" Middle School","skills":["JavaScript","Java","Python","Lisp"]}"

• 参数1（必选）：要序列化的对象；可以在对象中定义toJSON方法（原生Date对象自带toJSON()方法），指定如何序列化

var xiaoming = {
  name: '小明',
  age: 14,
  gender: true,
  height: 1.65,
  grade: null,
  'middle-school': '\"W3C\" Middle School',
  skills: ['JavaScript', 'Java', 'Python', 'Lisp'],
  toJSON: function () {  // 只输出name和age
    return { 
      'Name': this.name,
      'Age': this.age
    };
  }
};
JSON.stringify(xiaoming);  // "{"Name":"小明","Age":14}"

• 参数2（可选）：过滤器：
  （1）可以是包含对象的键的数组

JSON.stringify(xiaoming, ['name', 'skills'], '  ');
// 输出结果：
"{
  "name": "小明",
  "skills": [
    "JavaScript",
    "Java",
    "Python",
    "Lisp"
  ]
}"

（2）也可以是一个函数，参数为key, value（第一次调用key为空字符串value为目标对象），用于格式化输出的数据（例如转换大小写）

function convert(key, value) {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value;
}
JSON.stringify(xiaoming, convert, '  ');
{
  "name": "小明",
  "age": 14,
  "gender": true,
  "height": 1.65,
  "grade": null,
  "middle-school": "\"W3C\" MIDDLE SCHOOL",
  "skills": [
    "JAVASCRIPT",
    "JAVA",
    "PYTHON",
    "LISP"
  ]
}

（3）也可以是null

JSON.stringify(xiaoming, null, '  ');
// 输出结果：
"{
  "name": "小明",
  "age": 14,
  "gender": true,
  "height": 1.65,
  "grade": null,
  "middle-school": "\"W3C\" Middle School",
   "skills": [
    "JavaScript",
    "Java",
    "Python",
    "Lisp"
  ]
}"

• 参数3（可选）：指明缩进的格式，如果为数字则表示缩进几个空格（最多10），如果是其他符号则表示用这个符号表示缩进，如' '、'-'

JSON.stringify(xiaoming, ['name', 'skills'], '--');
// 输出结果：
"{
--"name": "小明",
--"skills": [
----"JavaScript",
----"Java",
----"Python",
----"Lisp"
--]
}"

注意执行顺序：目标对象的toJSON()方法、参数2、序列化、格式化（参数3）

反序列化 JSON --> JS

方法：JSON.parse(string, function(key, value));

• 参数1（必选）：用于解析的JSON格式的字符串

JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]
JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14}
JSON.parse('true'); // true
JSON.parse('123.45'); // 123.45

• 参数2（可选）：函数，用于转换解析出的属性，返回undefined则删除相应属性

var obj = JSON.parse("{"name":"小明","age":14}", function (key, value) {
  if (key === 'name') {
    return value + '同学';
  }
  return value;
});
JSON.stringify(obj); // Object {name: '小明同学', age: 14}

拓展

早期使用js中的一个函数eval()来解析JSON数据，但eval()的参数为语句，而JSON属于JS语法的子集，可能执行一些恶意代码，所以有风险。ES5中定义了全局对象JSON，专门用来解析JSON。

---

Reference：

1.https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499490767fe5a0e31e17e44b69dcd1196f7ec6fc6000
2.《JavaScript高级程序设计（第3版）》