JSON 笔记

Kahn 发布于2019-08-22 10:56 / 1228人阅读

摘要：全称为对象表示法，它利用与对象相似的表示方法来表示数据。但是要注意的是不能表示当中的一种特殊值。对象，与对象相似，表示无序的键值对。但是由于存在安全的风险，因此在开始有了一个新的全局对象对象用来处理。输出的字符串会受到该函数的返回值影响。

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, "	");

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 的好处

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

比 XML 轻量得多。

语法简单易懂。

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

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

参考

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

本文同步于我的个人博客 http://blog.acwong.org/2015/03/05/json-notes/

GPU云服务器云服务器兼容笔记印象笔记笔记云笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91487.html

JSON 读书笔记

摘要：解析器和库支持许多不同的编程语言。每个对象代表一条关于某人有姓和名的记录。使用解析器将转换为对象是更安全的做法。解析器只能识别文本，而不会编译脚本。在浏览器中，这提供了原生的支持，而且解析器的速度更快。注意的字符串连接的规则利用解析器 JSON JSON：JavaScript 对象表示法（JavaScript Object Notation）。 JSON 是存储和交换文本信息的语法。类...

lewinlee 2019-08-21 10:39 评论0 收藏0
JS笔记！Map 与其他数据结构的互相转换

摘要：与其他数据结构的互相转换仅作为一个学习笔记供往后翻阅转为数组转为数组最方便的方法，就是使用扩展运算符。对象转为转为转为要区分两种情况。转为转为，正常情况下，所有键名都是字符串。这往往是数组转为的逆操作。 Map 与其他数据结构的互相转换 PS：仅作为一个学习笔记供往后翻阅！（1）Map 转为数组Map 转为数组最方便的方法，就是使用扩展运算符（...）。 const myMap = ...

Jenny_Tong 2019-08-21 18:37 评论0 收藏0
JavaScript高级程序设计－摘要笔记－6

摘要：关于对象定义了全局对象。支持的浏览器有除了接受要序列化的对象外，还可以接受另外两个参数。如果是数值，则表示每个级别缩进的空格数，最大，超过的值自动转换成。字符串长度超过，结果中将只出现前个字符。会在结果字符串中插入换行符提高可读性。关于JSON 1. JSON 对象 es5 定义了全局对象 JSON。支持的浏览器有 IE8+ 、Firefox 3.5+ 、Safari 4+、Chro...

Batkid 2019-08-20 13:43 评论0 收藏0
JSON Web Token学习笔记

摘要：一什么是为什么使用是机制的一种替代方案。这种情况下使用就会有更加方便。的数据结构一般为三部分组成头部一般包含签名的算法和令牌的属性负载实际需要传递的数据一般不加密，因此不要把重要信息放在里面签名部分是对前两部分的签名，防止数据篡改。一、什么是JSON Web Token？ 1、为什么使用JSON Web Token JSON Web Token是cookie session机制的一种...

cangck_X 2019-08-16 18:26 评论0 收藏0
JSON学习笔记（一）

先学习阮大神的数据类型和Json格式一、js中解析JSON的方式 eval() JSON.parse var jsondata = {staff:[{name:小红,age:16},{name:小明,age:20},{name:小芳,age:18}]} var jsonobj = eval(( + jsondata + )) alert( jsonobj.staff[0].name); s...

Scott 2019-08-20 15:55 评论0 收藏0
工作笔记1:将JS数组转换成json

摘要：背景这几天调到后台组，搞后台开发，开发中碰到页面拼装到后台的如下所示多选的数据是数组的方式，手动将数组转换成串又嫌麻烦，后来发现这一神器，只需要一行代码，就能把数组转成。本文仅作为个人学习总结记录使用！能力有限，难免会有疏漏和错误，还望指出。共同进步。背景这几天调到后台组，搞web后台开发，开发中碰到页面拼装JSON到后台的CASE 如下所示:showImg(http://se...

ymyang 2019-08-21 12:15 评论0 收藏0