JavaScript物件序列化為JSON

來了老弟發表於2022-06-13
JavaScript物件JSON

簡介

這篇文章介紹一下怎樣把JavaScript物件序列化為JSON。儘管JSON格式是建立在JavaScript物件的語法之上，然而它們並不相同，這意味著並不是所有的JavaScript物件都可以完全轉化為JSON。

程式碼示例

我們首先來定義一個簡單的JS物件，用來表示一個人的相關資訊，這個物件有下面的欄位：

  • name – a string;
  • age – a number;
  • birthDate – a date;
  • languages – an array of strings.
const jsObject = {
  name: "Todd",
  age: 20,
  birthDate: new Date(),
  languages: ["Chinese", "English"]
}

要把這個物件轉化為JSON字串，只需要呼叫JSON物件的stringify方法。注意，JSON是標準的內建物件，不需要在程式碼中引入。

console.log(JSON.stringify(jsObject));
// {"name":"Todd","age":20,"birthDate":"2022-06-06T05:54:49.460Z","languages":["Chinese","English"]}

序列化得到的是一種壓縮格式，在網路傳輸時開銷更小，因為它沒有不必要的字元。如果我們想要一種更易讀的形式輸出，可以藉助一些stringify方法支援的額外引數。

JSON.stringify(jsObject, null, 3)

這個方法可以接收三個引數，第二個引數是一個可選引數 replacer function，可以改變處理的過程，這裡我們用不到傳 null。

第三個引數也是可選引數，接收一個數字作為空白字元數插入到結果中，可以使結果可讀性更強。需要注意的是數值範圍在 1-10之間，大於10會預設取10。

    
console.log(JSON.stringify(jsObject, null, 3));
/*
{
   "name": "Todd",
   "age": 20,
   "birthDate": "2022-06-06T05:54:49.460Z",
   "languages": [
      "Chinese",
      "English"
   ]
}
*/

function 並不是合法的JSON值，意味著在序列化的過程中會被省略，如果在陣列中會轉為null

const objectWithFunction = {
  someProperty: "some value",
  func: () => console.log("test"),
  arrayOfFunctions: [
    () => console.log("test"), 
    () => console.log("test2")
  ]
}
 
console.log(JSON.stringify(objectWithFunction, null, 3));
/*
{
   "someProperty": "some value",
   "arrayOfFunctions": [
      null,
      null
   ]
}
*/

相關文章