Table of Contents

• JSON是什麽？
• JSON的方法
  • JSON.parse()
  • JSON.stringify()
• References

JSON是什麽？

JSON（Javascript Object Notation，物件表示法）是一種資料交換的格式，源自於Javascript。JSON被廣泛用在API以及設定檔案，特色是文件小且輕量，可透過這個格式的資料供自己或他人使用。

以目前看到的形式來說，可以建立一個副檔名為.json格式的檔案，或者在程式中使用JSON。如果在轉換成JSON的資料中使用過於複雜的函式、正則表達式，在轉成JSON資料的時候就會被忽略，除了這些，像是字串、數字、布林值等都可以被轉換為JSON。

JSON的方法

JSON.stringify()

可以透過這個方法，把Javascript的值轉成JSON格式的字串：

console.log(JSON.stringify("string"));//"string"
console.log(JSON.stringify(123));//123
console.log(JSON.stringify([]));//[]
console.log(JSON.stringify({}));//{}
console.log(JSON.stringify(function(){}));//undefined

現在來使用陣列中的資料，並把這個資料轉為JSON字串。

const data = [
  {
    stringProperty: "Hello, World!",
    numberProperty: 42,
    booleanProperty: true,
    functionProperty: function() { console.log('This is a function.'); },
    nullProperty: null
  }
]
console.log(JSON.stringify(data))

//[{"stringProperty":"Hello, World!","numberProperty":42,"booleanProperty":true,"nullProperty":null}]

會注意到這個方法將資料改成JSON需要的格式，但是輸出的內容卻很緊湊，這時可以在方法中的第三個參數，加上想要插入的文字隔開，提高可讀性。

console.log(JSON.stringify(data,'',' '))

// [
//   {
//    "stringProperty": "Hello, World!",
//    "numberProperty": 42,
//    "booleanProperty": true,
//    "nullProperty": null
//   }
//  ]

第二個參數則可用在字串化的物件上，主要有兩個：

1. 函式：分別接受key跟value為參數，可以加上條件判斷等方式，透過回傳的值決定保留的value。
2. 一組陣列：陣列會是內容為key的字串，等同於被篩選出的資料名單。

//函式

console.log(JSON.stringify(data,replacer,' '))

function replacer(key,value){
  if (value!==null){
    return value;
  }
}

//扣除函式跟value為null的屬性，僅回傳剩下符合條件的內容
// [
//   {
//    "stringProperty": "Hello, World!",
//    "numberProperty": 42,
//    "booleanProperty": true
//   }
//  ]


//陣列
console.log(JSON.stringify(data,["stringProperty","nullProperty"],' '))

//保留"stringProperty","nullProperty"的屬性
// [
//   {
//    "stringProperty": "Hello, World!",
//    "nullProperty": null
//   }
//  ]

JSON.parse()

這個方法可以把解析成JSON字串的資料，再轉換成JavaScript的物件或其他型別資料，而且也有replacer可以使用。如果是自行寫的JSON資料要轉回JavaScript物件，物件與陣列的最後一個屬性與元素後面不能有逗號,。

const data = [
  {
    stringProperty: "Hello, World!",
    numberProperty: 42,
    booleanProperty: true,
    functionProperty: function() { console.log('This is a function.'); },
    nullProperty: null
  }
]  

const dataStringify = JSON.stringify(data);
//這時資料會是：[{"stringProperty":"Hello, World!","numberProperty":42,"booleanProperty":true,"nullProperty":null}]

console.log(JSON.parse(dataStringify))
// [
//   {
//     stringProperty: 'Hello, World!',
//     numberProperty: 42,
//     booleanProperty: true,
//     nullProperty: null
//   }
// ]

References

Learn JSON in 10 Minutes
JavaScript 網頁前端工程入門：JSON 基本教學 By 彭彭

• MDN

1. JSON
2. JSON.stringify()
3. JSON.parse()