IT虾米网

JSON 笔记

shasha 2022年05月14日 编程语言 167 0

JSON 全称为 JavaScript Object Notation(JavaScript对象表示法),它利用与 JavaScript 对象相似的表示方法来表示数据。虽然 JSON 脱胎于 JavaScript,但是 JSON 并不属于 JavaScript 的一部分,很多的语言都可以解析和序列化 JSON。

JSON 语法

JSON 可以表示以下三种类型的值:

  • 简单值

  • 对象

  • 数组

简单值包括字符串、数值、布尔值和 null。但是要注意的是 JSON 不能表示 JavaScript 当中的一种特殊值 undefinde

对象,与 JavaScript对象相似,表示无序的键值对。键值对中的值可以是简单值,也可以是对象或数组。

数组,与 JavaScript数组相似,表示一组有序的值,数组的值可以是简单值,也可以是对象或数组。

举个例子:

{ 
    "name": "acwong", 
    "age": 23, 
    "address": { 
        "province": "GuangDong", 
        "city": "GuangZhou" 
    }, 
    "friends": ["bc", "cc", "dc"], 
    "blog": "http://acwong.org" 
}

需要注意的是,也是与 JavaScript对象表示方法的不同之处,JSON 字符串当中对象的属性必须加上双引号

// 正确示范 
{ 
    "name": "acwong" 
} 
 
// 错误示范 
{ 
    name: "acwong" 
} 
// 单引号也是错误的 
{ 
    'name': 'acwong' 
}

JavaScript 与 JSON

JSON 对象

在 JSON 诞生之初 JavaScript 处理 JSON 的方式基本就靠 eval() 函数。

eval() 函数可以解析 JSON 然后返回 JavaScript 数组。但是由于 eval() 存在安全的风险,因此在 EMCAScript 5 开始有了一个新的全局对象 JSON对象用来处理 JSON。

序列化 JSON

JavaScript 使用 JSON对象的 stringify() 方法来序列化 JSON。

var person = { 
    name: "acwong", 
    age: 23, 
    address: { 
        province: "GuangDong", 
        city: "GuangZhou" 
    }, 
    friends: ["bc", "cc", "dc"], 
    blog: "http://acwong.org" 
}; 
 
var jsonText = JSON.stringify(person); 
 
console.log(jsonText); 
// {"name":"acwong","age":23,"address":{"province":"GuangDong","city":"GuangZhou"},"friends":["bc","cc","dc"],"blog":"http://acwong.org"}

JSON.stringify() 方法在默认情况下输出的 JSON字符串不包含空格字符和缩进。

如果 JavaScript对象当中包含不被 JSON 支持的类型(如:undefined,函数)会自动被 stringigy() 方法忽略。

var person = { 
    name: "acwong", 
    blog: undefined, 
    todo: function() { 
        return "sleep"; 
    } 
}; 
 
var jsonText = JSON.stringify(person); 
 
console.log(jsonText); 
// {"name":"acwong"}

JSON.stringify() 方法包含三个参数,第一个参数就是要序列化的 JavaScript对象。第二个参数完成过滤输出结果功能。第三个参数控制输出字符串的缩进

过滤输出结果

第二个参数完成过滤输出结果功能。

当传入的第二个参数为数组时,输出的 JSON字符串只会保留包含在该数组里面的属性值。

var person = { 
    name: "acwong", 
    age: 23, 
    address: { 
        province: "GuangDong", 
        city: "GuangZhou" 
    }, 
    friends: ["bc", "cc", "dc"], 
    blog: "http://acwong.org" 
}; 
 
var jsonText = JSON.stringify(person, ["name","blog"]); 
 
console.log(jsonText); 
// {"name":"acwong","blog":"http://acwong.org"}

当传入的第二个参数为函数,该函数包含两个参数,分别是 JavaScript对象的属性名和属性值。输出的 JSON字符串会受到该函数的返回值影响。

// 省略 person对象 
var jsonText = JSON.stringify(person, function(key, value) { 
    if (key === "name") { 
        return "ac"; 
    } else if (key === "age") { 
        value++; 
        return value; 
    } else { 
        return value; 
    } 
}); 
 
console.log(jsonText); 
// {"name":"ac","age":24,"address":{"province":"GuangDong","city":"GuangZhou"},"friends":["bc","cc","dc"],"blog":"http://acwong.org"} 

控制缩进

第三个参数控制输出字符串的缩进

当第三个参数传入一个数值的时候,表示输出字符串缩进的空格数。

// 省略 person对象 
var jsonText = JSON.stringify(person, null, 2); 
 
console.log(jsonText);
// 输出 
{ 
  "name": "acwong", 
  "age": 23, 
  "address": { 
    "province": "GuangDong", 
    "city": "GuangZhou" 
  }, 
  "friends": [ 
    "bc", 
    "cc", 
    "dc" 
  ], 
  "blog": "http://acwong.org" 
}

当第三个参数传入一个字符串时,输出结果会以该字符串作为缩进符号。

// 省略 person对象 
 
// 使用 * 号缩进 
var jsonText = JSON.stringify(person, null, "*"); 
 
console.log(jsonText);
// 输出 
 { 
*"name": "acwong", 
*"age": 23, 
*"address": { 
**"province": "GuangDong", 
**"city": "GuangZhou" 
*}, 
*"friends": [ 
**"bc", 
**"cc", 
**"dc" 
*], 
*"blog": "http://acwong.org" 
}
// 省略 person对象 
 
// 使用制表符(Tab)缩进 
var jsonText = JSON.stringify(person, null, "\t"); 
 
console.log(jsonText);
// 输出 
 { 
    "name": "acwong", 
    "age": 23, 
    "address": { 
        "province": "GuangDong", 
        "city": "GuangZhou" 
    }, 
    "friends": [ 
        "bc", 
        "cc", 
        "dc" 
    ], 
    "blog": "http://acwong.org" 
}

自定义序列化

如果上述的方法都不能满足要求,还可以在要序列化的 JavaScript对象当中加入 toJSON() 函数,可以返回任何想返回的值。

var person = { 
    name: "acwong", 
    age: 23, 
    address: { 
        province: "GuangDong", 
        city: "GuangZhou" 
    }, 
    friends: ["bc", "cc", "dc"], 
    blog: "http://acwong.org", 
    toJSON: function() { 
        this.name = "ac"; 
        return "yoyo " + this.name; 
    } 
}; 
 
var jsonText = JSON.stringify(person); 
 
console.log(jsonText); 
//  "yoyo ac"

解析 JSON

JavaScript 使用 JSON对象的 parse() 方法来解析 JSON。

var jsonText = '{"name":"acwong","age":23,"address":{"province":"GuangDong","city":"GuangZhou"},"friends":["bc","cc","dc"],"blog":"http://acwong.org"}'; 
 
var person = JSON.parse(jsonText); 
 
console.log(person);

图片描述

JSON.parse() 同样可以传入一个函数作为参数,对键值对进行操作。

var jsonText = '{"name":"acwong","age":23,"blog":"http://acwong.org"}'; 
 
var person = JSON.parse(jsonText); 
 
console.log(person);

图片描述

JSON 的好处

  1. 与 XML 一样可以表示复杂的数据结构。

  2. 比 XML 轻量得多。

  3. 语法简单易懂。

  4. 由于其轻量级,在传输的时候占用的资源相对较少。

感谢您的阅读,有不足之处请为我指出。

参考

JavaScript高级程序设计(第3版)

本文同步于我的个人博客 CSDN


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

(译) JSON-RPC 2.0 规范(中文版)