JSON

JSON的由來(lái)

在目前的開(kāi)發(fā)中，JSON是一種非常重要的數(shù)據(jù)格式，它并不是編程語(yǔ)言，而是一種可以在服務(wù)器和客戶端之間傳輸?shù)臄?shù)據(jù)格式。

JSON的全稱是JavaScript Object Notation（JavaScript對(duì)象符號(hào)）：

• JSON是由Douglas Crockford構(gòu)想和設(shè)計(jì)的一種輕量級(jí)資料交換格式，算是JavaScript的一個(gè)子集；
• 但是雖然JSON被提出來(lái)的時(shí)候是主要應(yīng)用JavaScript中，但是目前已經(jīng)獨(dú)立于編程語(yǔ)言，可以在各個(gè)編程語(yǔ)言中使用；
• 很多編程語(yǔ)言都實(shí)現(xiàn)了將JSON轉(zhuǎn)成對(duì)應(yīng)模型的方式；

其他的傳輸格式：

• XML：在早期的網(wǎng)絡(luò)傳輸中主要是使用XML來(lái)進(jìn)行數(shù)據(jù)交換的，但是這種格式在解析、傳輸?shù)雀鞣矫娑既跤贘SON，所以目前已經(jīng)很少在被使用了；
• Protobuf：另外一個(gè)在網(wǎng)絡(luò)傳輸中目前已經(jīng)越來(lái)越多使用的傳輸格式是protobuf，但是直到2021年的3.x版本才支持JavaScript，所以目前在前端使用的較少；

目前JSON被使用的場(chǎng)景也越來(lái)越多：

• 網(wǎng)絡(luò)數(shù)據(jù)的傳輸JSON數(shù)據(jù)；
• 項(xiàng)目的某些配置文件；
• 非關(guān)系型數(shù)據(jù)庫(kù)（NoSQL）將json作為存儲(chǔ)格式

JSON的基本用法

JSON的頂層支持三種類型的值：

• 簡(jiǎn)單值：數(shù)字（Number）、字符串（String，不支持單引號(hào)）、布爾類型（Boolean）、null類型；
• 對(duì)象值：由key、value組成，key是字符串類型，并且必須添加雙引號(hào)，值可以是簡(jiǎn)單值、對(duì)象值、數(shù)組值；
• 數(shù)組值：數(shù)組的值可以是簡(jiǎn)單值、對(duì)象值、數(shù)組值

對(duì)象形式的JSON，每個(gè)對(duì)象屬性也必須是字符串，加上雙引號(hào)。

JSON序列化方法

某些情況下我們希望將JavaScript中的復(fù)雜類型轉(zhuǎn)化成JSON格式的字符串，這樣方便對(duì)其進(jìn)行處理：

• 比如我們希望將一個(gè)對(duì)象保存到localStorage中；
• 但是如果我們直接存放一個(gè)對(duì)象，這個(gè)對(duì)象會(huì)被轉(zhuǎn)化成 [object Object] 格式的字符串，并不是我們想要的結(jié)果

在ES5中引用了JSON全局對(duì)象，該對(duì)象有兩個(gè)常用的方法：

• stringify方法：將JavaScript類型轉(zhuǎn)成對(duì)應(yīng)的JSON字符串；
• parse方法：解析JSON字符串，轉(zhuǎn)回對(duì)應(yīng)的JavaScript類型；

let obj = {
    name: "cy",
    age: 18
}
let newObj = JSON.stringify(obj)
console.log(newObj); //{"name":"cy","age":18}-JSON形式的字符串
newObj = JSON.parse(newObj)
console.log(newObj);//{ name: 'cy', age: 18 }

JSON.stringify的參數(shù)：

JSON.stringify的第一個(gè)參數(shù)傳入的是需要JSON序列化的對(duì)象，第二個(gè)參數(shù)傳入的是一個(gè)函數(shù)或者數(shù)組，如果傳入的是數(shù)組，那么僅僅會(huì)替換數(shù)組包含的屬性，如果傳入的是函數(shù)，那么可以選擇性的替換值。第三個(gè)參數(shù)可傳入數(shù)字或者字符串，傳入數(shù)字的值為多少，就表示JSON序列化后里面的屬性前面的空格為多少，如果傳入的是字符串，則表示屬性前面以該字符串開(kāi)頭。如下例：

const obj = {
    name: "why",
    age: 18,
    friends: {
        name: "kobe"
    },
    hobbies: ["籃球", "足球"],
    // toJSON: function() {
    //     return "123456"
    // }
}

// 需求: 將上面的對(duì)象轉(zhuǎn)成JSON字符串
// 1.直接轉(zhuǎn)化
const jsonString1 = JSON.stringify(obj)
console.log(jsonString1) //{"name":"why","age":18,"friends":{"name":"kobe"},"hobbies":["籃球","足球"]}

// 2.stringify第二個(gè)參數(shù)replacer
// 2.1. 傳入數(shù)組: 設(shè)定哪些是需要轉(zhuǎn)換
const jsonString2 = JSON.stringify(obj, ["name", "friends"])
console.log(jsonString2) //{"name":"why","friends":{"name":"kobe"}}

// 2.2. 傳入回調(diào)函數(shù):
const jsonString3 = JSON.stringify(obj, (key, value) => {
    if (key === "age") {
        return value + 1
    }
    return value
})
console.log(jsonString3) //{"name":"why","age":19,"friends":{"name":"kobe"},"hobbies":["籃球","足球"]}

// 3.stringify第三參數(shù) space
const jsonString4 = JSON.stringify(obj, null, "aaa")
console.log(jsonString4)
    // {
    //   aaa"name": "why",
    //   aaa"age": 18,
    //   aaa"friends": {
    //   aaaaaa"name": "kobe"
    //   aaa},
    //   aaa"hobbies": [
    //   aaaaaa"籃球",
    //   aaaaaa"足球"
    //   aaa]
    //   }

如果對(duì)象本身包含toJSON方法，那么會(huì)直接使用toJSON方法的結(jié)果。

數(shù)據(jù)存儲(chǔ)Storage

認(rèn)識(shí)Storage

WebStorage主要提供了一種機(jī)制，可以讓瀏覽器提供一種比cookie更直觀的key、value存儲(chǔ)方式：

• localStorage：本地存儲(chǔ)，提供的是一種永久性的存儲(chǔ)方法，在關(guān)閉掉網(wǎng)頁(yè)重新打開(kāi)時(shí)，存儲(chǔ)的內(nèi)容依然保留；
• sessionStorage：會(huì)話存儲(chǔ)，提供的是本次會(huì)話的存儲(chǔ)，在關(guān)閉掉會(huì)話時(shí)，存儲(chǔ)的內(nèi)容會(huì)被清除

localStorage和sessionStorage

那么它們有什么區(qū)別呢？

驗(yàn)證一：關(guān)閉網(wǎng)頁(yè)后重新打開(kāi)，localStorage會(huì)保留，而sessionStorage會(huì)被刪除；
驗(yàn)證二：在頁(yè)面內(nèi)實(shí)現(xiàn)跳轉(zhuǎn)，localStorage會(huì)保留，sessionStorage也會(huì)保留；
驗(yàn)證三：在頁(yè)面外實(shí)現(xiàn)跳轉(zhuǎn)（打開(kāi)新的網(wǎng)頁(yè)），localStorage會(huì)保留，sessionStorage不會(huì)被保留

Storage的常見(jiàn)方法和屬性

Storage有如下的屬性和方法：

屬性：

Storage.length：只讀屬性 返回一個(gè)整數(shù)，表示存儲(chǔ)在Storage對(duì)象中的數(shù)據(jù)項(xiàng)數(shù)量；

方法：

• Storage.key()：該方法接受一個(gè)數(shù)值n作為參數(shù)，返回存儲(chǔ)中的第n個(gè)key名稱；
• Storage.getItem()：該方法接受一個(gè)key作為參數(shù)，并且返回key對(duì)應(yīng)的value；
• Storage.setItem()：該方法接受一個(gè)key和value，并且將會(huì)把key和value添加到存儲(chǔ)中。如果key存儲(chǔ)，則更新其對(duì)應(yīng)的值；
• Storage.removeItem()：該方法接受一個(gè)key作為參數(shù)，并把該key從存儲(chǔ)中刪除；
• Storage.clear()：該方法的作用是清空存儲(chǔ)中的所有key；

// 1.setItem
localStorage.setItem("name", "cy")
localStorage.setItem("age", 18)

// 2.length
console.log(localStorage.length)//2
for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i)
    console.log(localStorage.getItem(key))
}
//18
//cy

// 3.key方法
console.log(localStorage.key(0))//age

// 4.getItem(key)
console.log(localStorage.getItem("age"))//18

// 5.removeItem
localStorage.removeItem("age")

// 6.clear方法
localStorage.clear()

以上就是一篇了解JSON與數(shù)據(jù)存儲(chǔ)基礎(chǔ)知識(shí)的詳細(xì)內(nèi)容，更多關(guān)于JSON與數(shù)據(jù)存儲(chǔ)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論