iT邦幫忙

2022 iThome 鐵人賽

DAY 27
0
Modern Web

JavaScript 之路,往前邁進吧!系列 第 27

JS之路 Day27- JSON Methods(JSON 方法)

  • 分享至 

  • xImage
  •  

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

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

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

JSON

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

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

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

第二JSON 支持 objectarraystringnumberbooleannull,基本上除了undefined之外其他全包了。

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

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

JSON的範例:

{
"fruit":[
  {"fruitName":"apple", "customer":"Rex"},
  {"fruitName":"banana", "customer":"Vic"},
  {"fruitName":"orange", "customer":"Dan"}
]
}

JSON.parse()

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

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

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

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"。

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

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

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

陣列轉換出來還是陣列。

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

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

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

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

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,再轉換回來。

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


上一篇
JS之路 Day26 - Strict Mode(嚴格模式)
下一篇
JS之路 Day28 - Currying (柯里化)
系列文
JavaScript 之路,往前邁進吧!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言