读书笔记(01) - JSON - JavaScript高级程序设计

mengbo 发布于2019-08-23 13:50 / 1696人阅读

摘要：用于把对象序列化字符串，在序列化对象时，所有函数及原型成员都会被有意忽略，不体现在结果中。对第步返回的每个值进行相应的序列化。参考文档高级程序设计作者以乐之名本文原创，有不当的地方欢迎指出。

JSON与JavaScript对象

JSON是一种表示结构化数据的存储格式，语法格式上与JavasScript对象有些类似。

TIPS: 与JavaScript对象的格式区别

不支持变量、函数或对象实例

字符串，属性名必须使用双引号

无需定义变量存储引用

// JSON对象
{
    "name": "KenTsang",
    "age": 27,
    "job": "Developer"
}

// js对象(该对象将作在后续例子引用)
let person = {
    name: "KenTsang",
    age: 27,
    job: "Developer"
}

ES5定义了一个全局对象JSON，IE8+以上支持，该对象提供来stringify和parse两个方法用于JSON数据解析和序列化。

stringify()

stringify用于把JavaScript对象序列化JSON字符串，

在序列化JavaScript对象时，所有函数及原型成员都会被有意忽略，不体现在结果中。此外，值为undefined的任何属性也都会被跳过。

JSON.stringify(
    value: Object, 
    replace: Array | function(key,value) {},
    space: number | string
)

该方法接受三个参数

参数：接收传入的js对象

参数：过滤器（数组/函数）

参数：字符串缩进（数值/字符串）

参数2 - 过滤器

TIPS1: 过滤器是一个数组时，序列化结果只包含数组中列出的属性

let result = JSON.stringify(person, ["name", "job"]);

// 输出结果
// {"name":"KenTsang","job":"Developer"}

TIPS2: 过滤器是一个函数时（替换函数）

var jsonStr = JSON.stringify(Person, function(key, value){
    if (key == "age") {
        return "secret";
    } else {
        return value;
    }
})

// 输出结果
// {"name":"KenTsang","age":"secret","job":"Developer"}

如果替换函数返回的是undefined，则该属性不会被包含在序列化结果中。

参数3 - 字符串缩进

用于控制序列化结果中的缩进和空白符，输出序列结果带缩进格式，方便预览查看。实际应用开发不多。

为数值时，表示每个级别缩进的空格数（最大10）

为字符串时，则作为缩进字符（替换默认的空格，最大10个字符）

let result = JSON.stringify(person, null, "--");

// 输出结果
/*
{
--"name": "KenTsang",
--"age": 27,
--"job": "Developer"
}
*/

toJSON()方法

应对更复杂的一些需求，我们可以通过toJSON()对某些对象进行自定义序列化的需求。

let person = {
    name: "KenTsang",
    age: 27,
    job: "Developer",
    toJSON: function() {
        return {
            "name": "KT",
            "age": "2*",
            "job": "DP"
        }
    }
};

let result = JSON.stringify(person);

// 输出结果
// {"name":"KT","age":"2*","job":"DP"}

TIPS: 序列化顺序

如果存着toJSON方法而且能通过它取得有效的值，则调用该方法。否则，返回对象本身。

如果提供了第二个参数，应用这个函数过滤器。传入函数过滤器的值是第(1)步的值。

对第(2)步返回的每个值进行相应的序列化。

如果提供了第三个参数，执行相应的格式化。

-- 摘自《JavaScript高级程序设计》--

parse()

parse用于把JSON字符串解析成JavaScript对象

JSON.parse(text: string, reviver: function(key, value) {})

该方法接受三个参数

参数：接收传入的json字符串

参数：还原函数

还原函数

返回undefined, 结果中删除相应的键

返回其它值，则将值插入到结果中

let Person = {
    name: "KenTsang",
    age: 27,
    job: "Developer",
    birth: new Date(1991, 3, 19)
};

var jsonStr = JSON.stringify(Person);
var jsObj = JSON.parse(jsonStr, function(key, value) {
    if (key == "birth") {
        return new Date(value);
    } else {
        return value);
    }
});

jsObj.birth.getFullYearh(); 

// 输出结果： 1991

例子中通过还原函数，重新实例一个Date对象，所以可以用到getFullYear()方法。

参考文档

《JavaScript高级程序设计》

作者：以乐之名
本文原创，有不当的地方欢迎指出。转载请指明出处。

云服务器 GPU云服务器高级程序设计-笔记读书笔记编程思想读书笔记大数据时代读书笔记

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

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

读书笔记(02) - 可维护性 - JavaScript高级程序设计

摘要：解耦优势代码复用，单元测试。常用比较误区可同时判断，可用来判断对象属性是否存在。使用作判断无法进行充分的类型检查。文件中应用常量参考文档高级程序设计作者以乐之名本文原创，有不当的地方欢迎指出。 showImg(https://segmentfault.com/img/bVburXw?w=500&h=400); 编写可维护性代码可维护的代码遵循原则：可理解性（方便他人理解）直观...

k00baa 2019-08-23 13:51 评论0 收藏0
002-读书笔记-JavaScript高级程序设计 在HTML中使用JavaScript

摘要：文件内部使用使用到的代码引入外部文件外部代码的地址标签的位置一般情况下，标签的位置放在标签中引入代码页面结构对于需要引入很多的中间，如果把放在头部，无疑会导致浏览器呈现页面出现延迟，就是导致页面出现空白。页面结构引入代码这篇笔记的内容对应的是《JavaScript高级程序设计(第三版)》中的第二章。 1.使用方式在HTML中使用 JavaScript 的方式有两种，第一种就是直接内...

banana_pi 2019-08-22 11:13 评论0 收藏0
001-读书笔记-JavaScript高级程序设计 JavaScript简介

摘要：由于计算机的国际化，组织的标准牵涉到很多其他国家，因此组织决定改名表明其国际性。规范由万维网联盟制定。级标准级标准是不存在的，级一般指的是最初支持的。这篇笔记的内容对应的是《JavaScript高级程序设计(第三版)》中的第一章。 1.ECMA 和 ECMA-262 ECMA 是欧洲计算机制造商协会的缩写，全程是 European Computer Manufacturers Ass...

masturbator 2019-08-21 17:18 评论0 收藏0
【读书笔记】JavaScriptの类型

摘要：函数类型检测是的子类型，其属性为参数个数，但是判断结果有内建函数原生函数常见的有，可能被当作构造函数来使用，创建出来的是封装了的基本类型值。构造函数可以不带关键字。建议使用和来进行显示强制转换。前言此篇小结来源与《你不知道的JavaScript》和《JavaScript高级程序设计》的结合？？或许是的，龟速总结中... 七种内置类型 null undefined boolean ...

cjie 2019-08-26 11:44 评论0 收藏0
《JavaScript高级程序设计》（第3版）读书笔记第1~2章

摘要：表示应该立即下载脚本，但不应妨碍页面中的其他操作可选。表示通过属性指定的代码的字符集。表示脚本可以延迟到文档完全被解析和显示之后再执行。实际上，服务器在传送文件时使用的类型通常是，但在中设置这个值却可能导致脚本被忽略。第1章 JavaScript 简介虽然JavaScript和ECMAScript通常被人们用来表达相同的含义，但JavaScript的含义比ECMA-262要多得多...

Corwien 2019-08-23 17:18 评论0 收藏0