[JavaScript] JSON stringify and parse

JSON

# 目的

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

# 前言

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


# 筆記

JSON is?

  • JSON 就是 JavaScript Object Notation,JavaScript 物件表示法
  • JSON純文字 格式
  • JSON 具自我描述性、易於人理解、閱讀和編寫,同時也易於機器解析和生成
  • JSONXML (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!

【參考資料】