【重溫基礎】16.JSON對象介紹

0x584a 發(fā)布于2019-08-23 14:48 / 2960人閱讀

摘要：系列目錄復習資料資料整理個人整理重溫基礎篇重溫基礎對象介紹本章節(jié)復習的是中的關于對象相關知識。概念概念有三點全稱對象表示法。對象沒有分號，而對象有。序列化對象時，所有函數(shù)及原型成員都會被忽略，不體現(xiàn)在結(jié)果上。

本文是 重溫基礎 系列文章的第十六篇。
今日感受：靜。

系列目錄：

【復習資料】ES6/ES7/ES8/ES9資料整理(個人整理)

【重溫基礎】1-14篇

【重溫基礎】15.JS對象介紹

本章節(jié)復習的是JS中的關于JSON對象相關知識。

前置知識：
JSON是一種按照JavaScript對象語法的數(shù)據(jù)格式。

1.概念

概念有三點：

JSON全稱JavaScript 對象表示法（JavaScript Object Notation）。     
JSON 是存儲和交換文本信息的語法。類似 XML。   
JSON 比 XML 更小、更快，更易解析。   
———— 摘自 W3school JSON教程

JSON 使用 JavaScript 語法來描述數(shù)據(jù)對象，但是 JSON 仍然獨立于語言和平臺。JSON 解析器和 JSON 庫支持許多不同的編程語言。

2.語法

JSON在使用過程中可作為一個對象或者字符串存在，當作為對象時，用于獲取JSON中的數(shù)據(jù)，而作為字符串時常用于網(wǎng)絡數(shù)據(jù)傳輸。

JSON語法規(guī)則：

數(shù)據(jù)在名稱/值對中

數(shù)據(jù)由逗號分隔

花括號保存對象

方括號保存數(shù)組

通常，JSON數(shù)據(jù)書寫格式是名稱/鍵值：

"name" : "pingan"

而JSON的值可以是：

數(shù)字（整數(shù)或浮點數(shù)）

字符串（在雙引號中）

邏輯值（true 或 false）

數(shù)組（在方括號中）

對象（在花括號中）

null

JSON常常有三種類型：
三種類型：簡單之，對象和數(shù)組。
必須注意：JSON字符串必須是雙引號，單引號會語法錯誤。

2.1 簡單值

簡單值可以是字符串:

"hello leo!"

也可以是數(shù)字,邏輯值：

2.2 對象類型

內(nèi)容放在花括號內(nèi)，是多個鍵值對。
JSON對象與 js 對象的三個區(qū)別：

JSON對象必須加雙引號，而 js 對象屬性名可以不加雙引號。

JSON對象沒有變量聲明，而 js 對象有。

JSON對象沒有分號，而 js 對象有。

// js 對象
var obj = {
    name : "pingan",
    age  : "25",
};
// json 對象
{
    "name" : "pingan",
    "age"  : "25",
    "box"  : [
        "a","b","c"
    ]
}

2.3 數(shù)組類型

內(nèi)容放在方括號內(nèi)。
JSON數(shù)組也沒有分號和變量，常常可以把JSON數(shù)組和對象結(jié)合使用，構(gòu)成更復雜的數(shù)據(jù)集合。

[
    {
        "name" : "leo",
        "age"  : 25,
        "box"  : ["a","b","c"]
    },
    {
        "name" : "pingan",
        "age"  : 25,
        "box"  : ["a","b","c"]
    }
]

3. 使用

JSON最常見的用法就是，從服務端獲取JSON數(shù)據(jù)，再將JSON數(shù)據(jù)轉(zhuǎn)成JavaScrip對象使用。
JSON對象有兩個方法：

JSON.stringify()：序列化操作，將JavaScript對象轉(zhuǎn)換成JSON字符串。

JSON.prase()：反序列化操作，將JSON字符串解析成JavaScript值。

3.1 序列化操作

序列化操作常常使用JSON.stringify()。
簡單例子:

let leo =  {
    name : "leo",
    age  : 25,
    box  : ["a","b","c"]
}
let pingan = JSON.stringify(leo);
console.log(pingan); // "{"name":"leo","age":25,"box":["a","b","c"]}"

注意：

默認情況下，JSON.stringify()輸出的JSON字符串不包含任何空格字符或縮進，因此結(jié)果就像上面那樣。

序列化JavaScript對象時，所有函數(shù)及原型成員都會被忽略，不體現(xiàn)在結(jié)果上。

值為undefined的任何屬性都會被跳過。

因此，最終的值都是有效的JSON數(shù)據(jù)類型的實例屬性。

3.2 反序列化操作

序列化操作常常使用JSON.parse()。
簡單例子：

let copyPingan = JSON.parse(pingan);
copyPingan; // {name: "leo", age: 25, box: Array(3)}

如果傳入JSON.parse()的字符串不是有效的JSON，則會拋出錯誤。
注意：
雖然pingan和copyPingan屬性相同，但兩者獨立，沒有任何關系。

4.序列化選項

JSON.stringify()除了要傳入序列化對象作為參數(shù)，還可以接收其他兩個參數(shù)，用來指定序列化JavaScript對象的方式：

過濾器：可以是個數(shù)組，也可以是個函數(shù)。

選項：表示是否在JSON字符串中保留縮進。

多帶帶或組合使用兩者，可以更加全面深入的控制JSON的序列化。

4.1 過濾器

若過濾器的參數(shù)是數(shù)組，則JSON.stringify()返回的結(jié)果將只包含數(shù)組中的屬性：

var leo =  {
    name : "leo",
    age  : 25,
    box  : ["a","b","c"]
}
var pingan = JSON.stringify(leo,["name","age"]);
console.log(pingan); // "{"name":"leo","age":25}"

若過濾器的參數(shù)是函數(shù)，則情況就不一樣了，傳入的函數(shù)需有兩個參數(shù)（屬性名和屬性值）：

var leo =  {
    "name" : "leo",
    "age"  : 25,
    "box"  : ["a","b","c"]
}
var pingan = JSON.stringify(leo,function(key, value){
    switch(key){
        case "name":
            return "我叫" + value
        case "age":
            return value + "歲"
        default:
            return value
    }
});
console.log(pingan); // "{"name":"我叫l(wèi)eo","age":"25歲","box":["a","b","c"]}"

注意：使用switch的時候，必須指定default否則會返回undefined。

4.2 選項

JSON.stringify()第三個參數(shù)是個選項，控制結(jié)果中的縮進和空白符。

若選項只有一個值，則表示每個級別縮進的空格數(shù)，最大值為10，超過10則只會是10。

var leo =  {
    "name" : "leo",
    "age"  : 25,
    "box"  : ["a","b","c"]
}
var pingan = JSON.stringify(leo, null, 4);
console.log(pingan);
/*
"{
    "name": "leo",
    "age": 25,
    "box": [
        "a",
        "b",
        "c"
    ]
}"
*/

5.解析選項

JSON.parse()可以接收一個函數(shù)作為參數(shù)，對每個鍵值對調(diào)用，為了跟JSON.stringify()的過濾函數(shù)區(qū)別，這個函數(shù)成為還原函數(shù)。

若還原函數(shù)返回undefined，則表示要從結(jié)果中刪除對應的鍵。

若還原函數(shù)返回其他值，則將該值插入結(jié)果中。

還原函數(shù)接收兩個參數(shù)：屬性名和屬性值。

舉例，在日期字符串轉(zhuǎn)換為Date對象中，經(jīng)常要用到還原函數(shù)：

var leo =  {
    "name" : "leo",
    "age"  : 25,
    "date" : new Date(1993, 9, 9)
}
var pingan = JSON.stringify(leo);
var copy = JSON.parse(pingan,function (key, value){
    // return key == "date" ? new Date(value) : value;
    if(key == "date"){
        return new Date(value);
    }else{
        return value; 
    }
})
console.log(copy);
// "{"name":"leo","age":25,"date":"1993-10-08T16:00:00.000Z"}"

參考文章：

W3school JSON教程

《JavaScrip高級程序設計》

本部分內(nèi)容到這結(jié)束

Author	王平安
E-mail	pingan8787@qq.com
博客	www.pingan8787.com
微信	pingan8787
每日文章推薦	https://github.com/pingan8787...
JS小冊	js.pingan8787.com

歡迎關注微信公眾號【前端自習課】每天早晨，與您一起學習一篇優(yōu)秀的前端技術(shù)博文 .

云服務器 GPU云服務器對象屬性介紹 self對象介紹 java面向?qū)ο蠡A 自我介紹

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/101166.html

【重溫基礎】19.閉包

摘要：系列目錄復習資料資料整理個人整理重溫基礎篇重溫基礎對象介紹重溫基礎對象介紹重溫基礎介紹重溫基礎相等性判斷本章節(jié)復習的是中的關于閉包，這個小哥哥呀，看看。這里隨著閉包函數(shù)的結(jié)束，執(zhí)行環(huán)境銷毀，變量回收。本文是重溫基礎系列文章的第十九篇。今日感受：將混亂的事情找出之間的聯(lián)系，也是種能力。系列目錄：【復習資料】ES6/ES7/ES8/ES9資料整理(個人整理) 【重溫基礎】...

nanfeiyan 2019-08-23 14:56 評論0 收藏0
【重溫基礎】18.相等性判斷

摘要：通常在轉(zhuǎn)換不同數(shù)據(jù)類型時，相等和不相等會遵循以下規(guī)則若有一個操作數(shù)是布爾值，則比較前會將布爾值轉(zhuǎn)換為數(shù)值轉(zhuǎn)為，轉(zhuǎn)為。本文是重溫基礎系列文章的第十八篇。今日感受：優(yōu)化自己的代碼，也是很愉快的事情。系列目錄：【復習資料】ES6/ES7/ES8/ES9資料整理(個人整理) 【重溫基礎】1-14篇【重溫基礎】15.JS對象介紹【重溫基礎】16.JSON對象介紹【重溫基礎...

趙春朋 2019-08-23 14:54 評論0 收藏0
【重溫基礎】22.內(nèi)存管理

摘要：內(nèi)存泄露內(nèi)存泄露概念在計算機科學中，內(nèi)存泄漏指由于疏忽或錯誤造成程序未能釋放已經(jīng)不再使用的內(nèi)存。判斷內(nèi)存泄漏，以字段為準。本文是重溫基礎系列文章的第二十二篇。今日感受：優(yōu)化學習方法。系列目錄：【復習資料】ES6/ES7/ES8/ES9資料整理(個人整理) 【重溫基礎】1-14篇【重溫基礎】15.JS對象介紹【重溫基礎】16.JSON對象介紹【重溫基礎】1...

Pandaaa 2019-08-23 15:14 評論0 收藏0
【重溫基礎】21.高階函數(shù)

摘要：歡迎您的支持系列目錄復習資料資料整理個人整理重溫基礎篇重溫基礎對象介紹重溫基礎對象介紹重溫基礎介紹重溫基礎相等性判斷重溫基礎閉包重溫基礎事件本章節(jié)復習的是中的高階函數(shù)，可以提高我們的開發(fā)效率。本文是重溫基礎系列文章的第二十一篇。今日感受：想家。本人自己整理的【Cute-JavaScript】資料，包含：【ES6/ES7/ES8/ES9】，【JavaScript基礎...

wua_wua2012 2019-08-23 15:05 評論0 收藏0
【重溫基礎】20.事件

摘要：本文是重溫基礎系列文章的第二十篇。事件捕獲為截獲事件提供機會，然后實際的目標接收到事件，最后事件冒泡，對事件作出響應。事件處理事件處理，即響應某個事件。包括導致事件的元素事件類型等其他信息。本文是重溫基礎系列文章的第二十篇。這是第三個基礎系列的第一篇，歡迎持續(xù)關注呀！重溫基礎系列的【初級】和【中級】的文章，已經(jīng)統(tǒng)一整理到我的【Cute-JavaScript】的Java...

Blackjun 2019-08-26 13:28 評論0 收藏0