讀書筆記(01) - JSON - JavaScript高級程序設計

mengbo 發布于2019-08-23 13:50 / 1718人閱讀

摘要：用于把對象序列化字符串，在序列化對象時，所有函數及原型成員都會被有意忽略，不體現在結果中。對第步返回的每個值進行相應的序列化。參考文檔高級程序設計作者以樂之名本文原創，有不當的地方歡迎指出。

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云服務器云服務器高級程序設計-筆記讀書筆記編程思想讀書筆記大數據時代讀書筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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