今天要來介紹JSON的兩個靜態方法：

  • JSON.parse()
  • JSON.stringify()

會從什麼是JSON開始介紹起，直接開始吧。

JSON

JSON的全名是JavaScript Object Notation，它是一種輕量型的數據交換格式，就是可以用來儲存跟方便傳遞的一種格式，跟物件的樣子很像，但其實不太一樣，會有著JSON的出現，主要還是單純物件的話，還不夠簡單跟容易閱讀。

跟使用物件的格式有一些差別。

第一JSON它只能用雙引號，不能用單引號，不論是key還是value，物件沒有這種限制，可以用單引號，甚至key不要加引號也沒有關係。

第二JSON 支持 object、array、string、number、boolean 和 null，基本上除了undefined之外其他全包了。

不過雖然支持，但是大部分的JavaScript都不是JSON，主要原因還是上面第一點，不論是key還是value都需要雙引號。

簡單說，JSON 是用來表示在JavaScript物件的一種格式，比單純的物件格式更好閱讀，有更高的相容性。

JSON的範例：

1
2
3
4
5
6
7
{
"fruit":[
  {"fruitName":"apple", "customer":"Rex"},
  {"fruitName":"banana", "customer":"Vic"},
  {"fruitName":"orange", "customer":"Dan"}
]
}

JSON.parse()

當想把JSON轉換成物件的時候，可以使用的一個方法。

可以用型別的方式去想像，從string轉換成object。

1
2
3
4
5
6
7
let one = "[1,1,1,1,1,1]";

console.log(typeof one); // string

one = JSON.parse(one);

console.log(typeof one); // object

JSON.stringify()

當想把物件轉換成JSON的時候，可以使用的一個方法。

型別來說的話，是從object轉換成string。

1
2
3
4
5
6
7
8
9
10
11
12
13
let fruit = {
  name: "apple",
  color: "red",
  delicious: true,
  customer: ["vic", "tom", "while"],
  price: "1000",
};

console.log(typeof fruit); // object

fruit = JSON.stringify(fruit);

console.log(typeof fruit); // string

但是有一些特別的地方。
不是總是能轉換成string，只能確定object會轉換成string，其他假如像是數字或是布林，那經過JSON.stringify()也不會發生改變。

用 10 來轉換的話，數字還是數字，不會變成”10”。

1
console.log(JSON.stringify(10)); // 10

字串的話轉換還是字串，只是單引號會變成雙引號。

1
console.log(JSON.stringify("apple")); // "apple"

陣列轉換出來還是陣列。

1
console.log(JSON.stringify([1, 1, 1])); // [1,1,1]

布林值轉換出來還是布林值。

1
console.log(JSON.stringify(false)); // false

但以上這些去觀察它們的型別會發現通通都還是string。

1
2
3
4
console.log(typeof JSON.stringify(10)); // string
console.log(typeof JSON.stringify("apple")); // string
console.log(typeof JSON.stringify([1, 1, 1])); // string
console.log(typeof JSON.stringify(false)); // string

JSON.parse() + JSON.stringify()

可以把一個物件，把它轉換成JSON，再轉換回來。

1
2
3
4
5
6
let programmer = {
  name: "vic",
  age: 23,
};

let programmer2 = JSON.parse(JSON.stringify(programer));

這舉動看似毫無意義，但其實非常有用。

利用這個方式，可以達到物件的深拷貝。

拷貝的意思是複製一個東西出去，拷貝出來的那個東西，不會影響到原來的東西。

正常來說物件因為是傳址的緣故，所以如果只是單純的 A = B 這種賦值，是沒辦法達到拷貝的效果，這樣改 B 就會改到 A。

物件想要獲得拷貝的效果，有幾種方式可以達成。

一種是使用 Object.assign的方式，
也可以使用 spread operator的方式去進行物件的拷貝。

但這種方式其實也只能保持，物件的複製一層的效果，要是再更改到裡面的層，會發現說還是會有改 B 就改到 A 的現象，所以會把這兩種方式稱之為淺拷貝，有拷貝的效果，但是只有表層有。

而JSON.parse() + JSON.stringify()卻是深拷貝，用了這個方式，就可以達成說物件複製後完全不會改變到原來的物件，這也是我唯一知道的深拷貝方式。

最後

前面有提到說，今天介紹的這兩個方法都是屬於靜態方法，那會有動態方法嗎？

其實在JSON之中，就只有動態方法的存在，不只是方法，JSON的所有屬性跟方法都是靜態的。

關於要如何區分，可以這樣理解，動態方法是需要要先創建實例才能使用，而靜態方式就直接使用就可以，像是Math，我們可以直接從JavaScript去做取用，不用再new出一個實例。

而動態方式就像是date還需要先new Date之後，才能去使用它底下的方法。

在JSON中的所有方法通通都是靜態的，代表說都可以直接取用，同時也沒有辦法。

因為JSON不是一個構造函式，所以也沒辦法使用new，那麼今天對JSON Methods介紹就到這邊，明天見～

reference

[1] MDN - JSON
[2] W3C - JavaScript JSON
[3] MDN - Working with JSON