介紹

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

JSON對其使用的編程語言沒有任何限制。您可以在這樣的組織中工作：有些后端服務是用Python編寫的，有些后端是Java的，前端是JS的，它們都可以完美地交換JSON消息。

以JSON格式存儲數據

首先JSON是一個字符串。這允許在需要時進行非常有效的數據壓縮。缺點是我們無法存儲循環(huán)數據結構，例如，引用自身的對象。

（幾乎）所有內容都應使用引號引起來

與JavaScript不同，您只應使用雙引號并將所有對象屬性包裝在其中。您不能使用單引號或反引號。

在JS中，我們有一個像這樣的對象

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

而在JSON中，它將變成

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

請注意：在JavaScript對象中，在逗號后出現逗號age: 25,是可以接受的，但在JSON中則是不允許的。

所有字段名稱都用雙引號引起來，但并非所有原始值都使用雙引號引起來。數字和布爾值不帶引號存儲。

對象存儲在花括號中

像在JS中一樣，花括號用于存儲對象。

請注意，如果服務器以JSON格式響應，則期望它以對象響應。您不能只列出這些字段。它們都需要用大括號括起來才能成為JSON對象。

數組存儲在方括號中

一切都與JS中完全一樣，我們將數組的名稱用雙引號引起來，并且數組本身在方括號中表示。

{

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

}

再次注意，該行的末尾沒有逗號或分號。

所有JSON對象數據都存儲為"key": “value”（“鍵”：“值”）對

與JS中一樣，您只能將對添加key:value到對象。如果需要存儲多個不帶鍵的值，則需要一個數組。

將JavaScript對象轉換為JSON并返回

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

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

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

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服務器

快速中間件和外部訪問

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

假設我們需要將一個對象傳遞給前端

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

我們將通過幾種方式來做到這一點。在所有情況下，前端都會收到相同的內容，您可以在瀏覽器中通過請求進行驗證。

普通字符串：

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

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

})

對象轉換為JSON.stringify：

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

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

對象轉換為res.json：

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

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

老實說，res.send和res.json之間存在細微差別。如果使用，并且選擇，則會設置 一個特殊的標頭Content-Type。text/htmlres.sendapplication/jsonres.json

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

第三個示例是最方便的示例，因為我們不執(zhí)行任何不必要的操作。我們將對象傳遞給，res.json并在內部進行到JSON字符串的轉換。JSON.stringify在這種情況下，不需要像示例2一樣對進行額外的（顯式）調用。

最后給大家分享一個學習全棧JavaScript的網站：

https://js.coderslang.com/

比較生動有趣的帶入性學習