今天要來介紹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
的範例:
{
"fruit":[
{"fruitName":"apple", "customer":"Rex"},
{"fruitName":"banana", "customer":"Vic"},
{"fruitName":"orange", "customer":"Dan"}
]
}
當想把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
的時候,可以使用的一個方法。
型別來說的話,是從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
,再轉換回來。
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
介紹就到這邊,明天見~
[1] MDN - JSON
[2] W3C - JavaScript JSON
[3] MDN - Working with JSON