美文网首页
一篇搞懂JSON

一篇搞懂JSON

作者: 花泽冒菜 | 来源:发表于2018-09-08 18:22 被阅读0次

概况

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版)》

相关文章

  • 一篇搞懂JSON

    概况 JSON,全称JavaScript Object Notation(JavaScript 对象表示法),是一...

  • iOS-解析JSON(二)

    上一篇介绍了JSON以及本地JSON的解析,这一篇主要介绍如何解析从网络上获取的JSON数据 打印结果 JSON数...

  • 一文搞懂 JSON Schema

    JSON Schema 是什么 json schema以一个json串来描述的json数据规范。可以用json s...

  • Restful API浅析 之设计原则与案例修正

    之前写Restful的服务器端API,写的不好,痛定思痛,决心好好搞懂Restful。在这一篇中我们首先搞懂Res...

  • AsyncTask 和 AsyncTaskLoader 的使用

    上一篇 JSON学习 中介绍了 JSON 对象的结构,如何解析 JSON 数据,但是我们的 JSON 数据是本地已...

  • 一篇搞懂Ajax

    概况 AJAX即“Asynchronous JavaScript and XML”(异步的JavaScript与X...

  • 一篇搞懂Context

    概述 Activity mActivity =new Activity()作为Android开发者,不知道你有没有...

  • 一篇搞懂redis

    01:什么是 Redis Redis 就是⼀个使⽤ C 语⾔开发的数据库,与传统数据库不同的是 Redis 的数据...

  • python对json的处理(转)

    转载一篇非常好的介绍python对json处理的blog 什么是json: JSON(JavaScript Obj...

  • 你真的会写单例模式吗

    作者:DeppWang、原文地址 人生在世,谁不面试。单例模式:一个搞懂不加分,不搞懂减分的知识点 又一篇一抓一大...

网友评论

      本文标题:一篇搞懂JSON

      本文链接:https://www.haomeiwen.com/subject/jwxlgftx.html