介紹

在后端和前端之間交換數(shù)據(jù)的最流行的格式之一是JSON，它用來(lái)表示JavaScript對(duì)象。它與常規(guī)JavaScript對(duì)象的外觀非常相似，但也有其獨(dú)特之處。它的讀音為“ jason”或“ jay-sun”，所以您可能會(huì)聽(tīng)到一些不同的發(fā)音。

JSON對(duì)其使用的編程語(yǔ)言沒(méi)有任何限制。您可以在這樣的組織中工作：有些后端服務(wù)是用Python編寫(xiě)的，有些后端是Java的，前端是JS的，它們都可以完美地交換JSON消息。

以JSON格式存儲(chǔ)數(shù)據(jù)

首先JSON是一個(gè)字符串。這允許在需要時(shí)進(jìn)行非常有效的數(shù)據(jù)壓縮。缺點(diǎn)是我們無(wú)法存儲(chǔ)循環(huán)數(shù)據(jù)結(jié)構(gòu)，例如，引用自身的對(duì)象。

（幾乎）所有內(nèi)容都應(yīng)使用引號(hào)引起來(lái)

與JavaScript不同，您只應(yīng)使用雙引號(hào)并將所有對(duì)象屬性包裝在其中。您不能使用單引號(hào)或反引號(hào)。

在JS中，我們有一個(gè)像這樣的對(duì)象

{  name: 'Jack',  isMarried: false,  age: 25, }

而在JSON中，它將變成

{  "name": "Jack",  "isMarried": false,  "age": 25 }

請(qǐng)注意：在JavaScript對(duì)象中，在逗號(hào)后出現(xiàn)逗號(hào)age: 25,是可以接受的，但在JSON中則是不允許的。

所有字段名稱都用雙引號(hào)引起來(lái)，但并非所有原始值都使用雙引號(hào)引起來(lái)。數(shù)字和布爾值不帶引號(hào)存儲(chǔ)。

對(duì)象存儲(chǔ)在花括號(hào)中

像在JS中一樣，花括號(hào)用于存儲(chǔ)對(duì)象。

請(qǐng)注意，如果服務(wù)器以JSON格式響應(yīng)，則期望它以對(duì)象響應(yīng)。您不能只列出這些字段。它們都需要用大括號(hào)括起來(lái)才能成為JSON對(duì)象。

數(shù)組存儲(chǔ)在方括號(hào)中

一切都與JS中完全一樣，我們將數(shù)組的名稱用雙引號(hào)引起來(lái)，并且數(shù)組本身在方括號(hào)中表示。

{

 "pets": ["Rex", "Sandy"]

}

再次注意，該行的末尾沒(méi)有逗號(hào)或分號(hào)。

所有JSON對(duì)象數(shù)據(jù)都存儲(chǔ)為"key": “value”（“鍵”：“值”）對(duì)

與JS中一樣，您只能將對(duì)添加key:value到對(duì)象。如果需要存儲(chǔ)多個(gè)不帶鍵的值，則需要一個(gè)數(shù)組。

將JavaScript對(duì)象轉(zhuǎn)換為JSON并返回

要將常規(guī)JS對(duì)象轉(zhuǎn)換為JSON字符串，您需要此JSON.stringify(obj)函數(shù)。無(wú)需安裝其他模塊即可使用。您向其傳遞一個(gè)對(duì)象，obj并獲得一個(gè)JSON對(duì)象作為輸出。

const user = {  name: 'Jack',  isMarried: false,  age: 25, } const userJSON = JSON.stringify(user); console.log(userJSON); // {"name": "Jack", "isMarried": false, "age": 25}

要從JSON轉(zhuǎn)換為常規(guī)對(duì)象，我們需要JSON.parse(s)函數(shù)。我們以JSON格式的字符串作為輸入，并返回一個(gè)普通的JS對(duì)象。

const jsonString = '{"name": "Jack", "isMarried": false, "age": 25}';

const parsedUser = JSON.parse(jsonString);

console.log(parsedUser); // {name: 'Jack', isMarried: false, age: 25}

Express.js和JSON

如果您不熟悉Express，我將在后續(xù)的文章為您講解：

如何創(chuàng)建Express服務(wù)器

快速中間件和外部訪問(wèn)

由于我們知道JSON對(duì)象是一個(gè)字符串，因此我們可以非常輕松地修改服務(wù)器并發(fā)送一些對(duì)象而不是Hello, Express.js。

假設(shè)我們需要將一個(gè)對(duì)象傳遞給前端

{  name: 'Hero',  isLearning: true,  level: 'apprentice', }

我們將通過(guò)幾種方式來(lái)做到這一點(diǎn)。在所有情況下，前端都會(huì)收到相同的內(nèi)容，您可以在瀏覽器中通過(guò)請(qǐng)求進(jìn)行驗(yàn)證。

普通字符串：

server.get('/', (req, res) => {

 return res.send('{"name": "Hero", "isLearning": true, "level": "apprentice"}');

})

對(duì)象轉(zhuǎn)換為JSON.stringify：

server.get('/', (req, res) => {

 const user = { name: 'Hero', isLearning: true, level: 'apprentice' };

對(duì)象轉(zhuǎn)換為res.json：

server.get('/', (req, res) => {  const user = { name: 'Hero', isLearning: true, level: 'apprentice' };  return res.json(user); })

我會(huì)重復(fù)一遍。在所有情況下，結(jié)果都是相同的。我們發(fā)送狀態(tài)為200和字符串的響應(yīng)，{"name": "Hero", "isLearning": true,"level": "apprentice"}收件人可以根據(jù)需要使用該字符串。

老實(shí)說(shuō)，res.send和res.json之間存在細(xì)微差別。如果使用，并且選擇，則會(huì)設(shè)置 一個(gè)特殊的標(biāo)頭Content-Type。text/htmlres.sendapplication/jsonres.json

res.json如果您有想要以JSON格式發(fā)送的對(duì)象，則使用此屬性。

第三個(gè)示例是最方便的示例，因?yàn)槲覀儾粓?zhí)行任何不必要的操作。我們將對(duì)象傳遞給，res.json并在內(nèi)部進(jìn)行到JSON字符串的轉(zhuǎn)換。JSON.stringify在這種情況下，不需要像示例2一樣對(duì)進(jìn)行額外的（顯式）調(diào)用。

最后給大家分享一個(gè)學(xué)習(xí)全棧JavaScript的網(wǎng)站：

https://js.coderslang.com/

比較生動(dòng)有趣的帶入性學(xué)習(xí)