[JavaScript] JSON stringify and parse

發表於 | 分類於 | 0 comments |

JSON

# 目的

　　紀錄一下最近常用的 JSON 和 method。

# 前言

　　JSON 是一個蠻常用到的 純文字 格式表示法；本篇就來筆記一下 JSON 與 JS 中兩個好用的方法(stringify() 和 parse())。

# 筆記

JSON is？

  • JSON 就是 JavaScript Object Notation，JavaScript 物件表示法
  • JSON 為 純文字 格式
  • JSON 具自我描述性、易於人理解、閱讀和編寫，同時也易於機器解析和生成
  • JSON 較 XML (eXtensible Markup Language) 小、快且更易解析

JSON 格式

　　JSON 字串可以包含 物件 (Object) 和 陣列 (Array)

Tips: 物件與陣列可互相包含，如：{"array": [{"object": "object"}]}

物件 (Object)

  • 物件以 { 開始，} 作結
  • 物件中格式為 name: value，以 : 分隔
  • name 必須以 "" 括起來 (單引號或雙引號皆可)
  • 若多個物件，則使用 , 分隔
1
2
3
4
{ 
  "name1": value1, 
  "name2": value2
}

陣列 (Array)

  • 物件以 [ 開始，] 作結
  • 若多個物件，則使用 , 分隔
1
2
3
4
[ 
  value1, 
  value2
]

物件 (Object) + 陣列 (Array) 範例

1
2
3
4
5
6
7
8
9
10
11
{ 
  "name": "OAwan", 
  "sex" : "Male",
  "age" : 27,
  "married" : false,
  "skills"  : [
    "RubyOnRails",
    "JavaScript",
    "Scss"
  ]
}

JavaScript 處理 JSON

將物件序列化成 JSON 字串 - stringify()

　　可以使用 JSON.stringify(obj, fn, indent) 將物件序列化

  • obj　欲作序列化的物件
  • fn　為 function 時，物件中將被序列化的屬性都會經過此 function 轉換和處理；若是 Array 時，表示指定特定屬性
  • indent　此參數控制序列化後字串的縮排(最多 10 個空格)
1
2
3
4
5
6
7
8
9
10
11
12
// 宣告一個 user object
let user = {
  "name": "OAwan", 
  "sex" : "Male",
  "age" : 27,
  "married" : false,
  "skills"  : [
    "RubyOnRails",
    "JavaScript",
    "Scss"
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 第二個參數為 function 時，將處理 married 屬性
console.log(
  JSON.stringify(user, (key, value) => {
     if (key === 'married') 
       return (value === true ? '已婚' : '未婚');
  }, 2);
);
/* 輸出：
{
  "name":"OAwan",
  "sex":"Male",
  "age":"27",
  "married":"未婚",
  "skills":[
    "RubyOnRails",
    "JavaScript",
    "Scss"
  ]
}
*/
1
2
3
4
5
6
7
8
9
10
11
// 第二個參數為 Array 時，指定將被序列化的屬性
console.log(
  JSON.stringify(user, ["name", "sex"], 2);
);
/* 輸出：
{
  "name":"OAwan",
  "sex":"Male"
}
*/

將 JSON 字串解析成 JavaScript 物件 - parse()

　　透過 JSON.parse(obj, fn) 方法將 JSON 字串解析成 JavaScript 物件，以便透過 JavaScript 操作。

  • obj　欲解析的 JSON 字串
  • fn　透過 function 處理後 return 屬性值，若 return undefined 則不包括此屬性
1
2
3
4
5
6
7
8
9
10
11
12
// 宣告一個 JSON 字串
let userJSON = `{
  "name":"OAwan",
  "sex":"Male",
  "age":"27",
  "married":"未婚",
  "skills":[
    "RubyOnRails",
    "JavaScript",
    "Scss"
  ]
}`;
1
2
3
4
5
6
7
8
9
10
11
// 透過 JSON.parse() 解析 JSON 字串
let user = JSON.parse(userJSON);
// 取得物件值
console.log(
  user.name + ', ' + user.skills[1]
);
/* 輸出：
OAwan, JavaScript
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 設置第二個參數來處理解析
let user = JSON.parse(userJSON, (key, value) => {
    if (key === 'married')
      return (value === '已婚' ? true : false);
});
// 取得物件值
console.log(
  user
);
/* 輸出：
Object {name: "OAwan", sex: "Male", age: 27, married: false, skills: ["RubyOnRails", "JavaScript", "Scss"]}
*/

　
That’s it, DONE!

【參考資料】