JavaScript物件序列化為JSON

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

簡介

這篇文章介紹一下怎樣把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
   ]
}
*/