适用于JavaScript和Node.js的JSON初學者教程

在本教程中，您将學習什麼是JSON以及如何在JavaScript和Node.js中使用它。

介紹

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

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

以JSON格式存儲資料

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

（幾乎）所有内容都應使用引号引起來

與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并傳回

要将正常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轉換為正常對象，我們需要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，我将在後續的文章為您講解：

如何建立Express伺服器

快速中間件和外部通路

由于我們知道JSON對象是一個字元串，是以我們可以非常輕松地修改伺服器并發送一些對象而不是Hello, Express.js。

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

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

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

普通字元串：

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

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

})

對象轉換為JSON.stringify：

 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);
})      

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

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

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

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

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

https://js.coderslang.com/

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