11-3 JSON.parse() JSON.stringify()

Original: https://course.andys.pro/Javascript-Intro/11-3-jsonparse-jsonstringify/

講義

1. JSON 的兩大核心方法

• JSON.parse()：將「文檔」轉為「物件」
  • 當我們從伺服器取得一串文字格式的 JSON 資料後，必須使用此方法將其轉換為 JavaScript 可以操作的物件（Object）或陣列（Array）。
  • 範例：var obj = JSON.parse('{"name":"Andy"}');
• JSON.stringify()：將「物件」轉為「文檔」
  • 當我們要將資料傳送到後端伺服器，或儲存到 LocalStorage 時，必須先將物件轉換為字串。
  • 範例：var str = JSON.stringify({name: "Andy"});
  • 排版技巧：JSON.stringify(obj, null, 4)，最後一個參數代表縮排空格數，可以讓輸出的字串更易於閱讀。

2. 注意事項：字串與布林值

在 JSON 文字中，有沒有雙引號差別很大：

• "true" 轉換後會變成 字串。
• true (沒有引號) 轉換後會變成 布林值。

3. 實戰技巧：利用 JSON 進行「深複製」 (Deep Copy)

這是開發者最常用的縮寫技巧。如果要複製一個結構非常複雜的物件（多層嵌套），可以使用以下公式：

var newObj = JSON.parse(JSON.stringify(oldObj));

• 原理：先將整包資料「文字化」（變成基本型別），再重新「物件化」。這樣產生的新物件會擁有完全獨立的記憶體地址，修改 newObj 絕對不會影響到 oldObj。

4. 小結

• parse：解碼（文字 ➝ 物件）。
• stringify：編碼（物件 ➝ 文字）。
• 透過這兩個方法，我們可以輕鬆解決物件導向中「傳址」造成的干擾問題。

影片逐字稿 (AI 生成)

我們接下來繼續來看十一之三編輯JSON檔那其實剛剛我們用手動還有迴圈的方法來做深度複製其實用JSON就可以更快速而且方便做到這件事情好的 首先我們來看JSON parse的語法和JSON stringify的語法那JSON呢 我前面有提到就是你要編輯JSON檔有時候你要從JSON的文字檔把它變成是在JS裡面的Object的型態就是物件然後呢 你要把物件再把它變文檔所以我們這邊我覺得我們可以寫一下JSON parse是要怎麼樣呢要把文看一下這裡JSON parse我們可以把它想像成把文檔這是把它變成物好 Stringify是把物變成文好好 那我們接下來看下去吧欸 怎麼跑到八隻好 還想嗯 再嗯 再誰一直可以想嗎好的JSON parse就是把JSON的自創然後轉換成數值和物件首先呢裡面呢 你看JSON的格式我一直在講它是一個自創是一串東西所以呢 它是true負負或者是像這樣自創那你會看到它這邊蠻有趣的事情是因為JSON它的引號都是用雙引號OK那所以我們外面用單引號把它刮起來然後我要把這個文檔你可以把它想成JSON是一串文字喔只是它寫起來像是J像是J那個什麼Object的就是寫樣子看起來很像Object的一串文字然後你要把它Parse從這段文字裡面去把它轉出來才會變成是一個物件好好那我們這邊我們把它往這邊先Clear掉好的那我們這邊看到的事情是假如我今天這個是這樣子對不對它看起來是一個Object可是實際上它是一個文字那當我們用JSON.Parse來對這個文字這個字串來做事情的時候它會給我一個那個物件的Object空的那假如裡面是什麼呢裡面是Name還記得喔要記得要加雙引號來做它的Key然後裡面比如說Name是比如說像這樣它就會給我一個物件OK所以你可以做什麼事情你可以LetAndy等於JSON.Parse這時候Andy是一個物件OK嗎可是你如果今天沒有做JSON.Parse你今天直接對這個你直接這樣子那Andy這個時候是一串字串只是看起來很像是看起來很像是物件可是它實際上是一個字串那這個就是JSONOKJSON其實是一個文字文字畫的格式這樣來存這一串資料OK所以我們拿到JSON以後我們都要把它Parse出來我們在JS才來使用它所以它是Text好的這邊我們要來講說Parse它還可以做什麼事情我們可以再加入一些東西比如說像後面逗號了以後前面這段是文字嘛它這邊是Reviver這個是一個Function然後它有K和VKeyAndValue寫一下嗯OK好的那這邊大家還記得Type of嗎如果說今天這個裡面的東西是一個數字的話它的形態如果是數字我們就把它乘以2所以當我JSON parts這一串文字來的時候欸這個Function發現我今天Parse其中的一個Value是的形態是Number所以它ReturnV乘以2就把這個東西乘以2了假如它比如說像這個它是一個自傳形態它就是Stream嘛所以If就不會跑進來這裡就不會跑嘛對不對所以它就會跑到Else它就會回傳原本這個東西VOK嗎那你如果Return比如說你發現它是呃數字你也可以做一件事情是說你今天希望你拿到的數字就是回傳標是數字你可以把它怎樣你可以把它Stream然後把這個數字V放在中間你就把原本是數字發現它的數字發現它的形態是數字的情況下我可以把它的形態轉換成自傳然後再傳回去那這樣你拿到這裡面所有的值都會是自傳那原本如果是5你可以把它轉換成呃自傳的5這樣那這邊它是把發現說欸如果你是呃如果你是數字的話那我把它乘以2就會變這樣好的接下來我們要講Streamify的方法那Streamify的方法是說欸我原本有一個物件啊那我想要把它變成一個JSON我想要把它壓成就是自傳化那所以我今天把一個空的object它就變成一個自傳我把tru放進去它就變那個tru的一個裡面有tru內容的自傳我把foo放進去它就變一個裡面有foo內容的自傳OK這原本就是自傳嘛結果你把它丟進去它變成什麼它變成一個單引號裡面有一個雙引號的fooOK那可是你看這邊是單引號裡面直接是true代表說這個true是booling所以這邊要很小心喔就是有可能會有這種東西喔我應該是不會考你啦所以可是就是大家注意喔就是json點Streamify當我先傳一個true進去的時候它會得到什麼得到一個字算是true對不對可是我如果是一個這兩個是不同的東西喔這兩個是不同的東西喔這個文字畫裡面的true是一個自傳可是這個旁邊沒有用雙引號刮起來這個其實是一個booling的true喔可以接受嗎就是這個true和這個true他們會查一個如果json的文字裡面有一個雙引號代表它是自傳可是如果它沒有雙引號代表它是一個booling的true然後只是strinify變成json而已所以這邊在做的事情是把原本js的一些物件我可以把它壓成文件然後我再來做傳輸的動作所以我先把它壓成文件所以都要壓成就是自傳先把它strinifystrinifystrin就是自傳就是自傳要先把它文字畫變自傳了以後再來做事情好 那我們現在先來做這個後面這個strinifyx的冒號好了所以我這邊有一個json譬如說譬如說 letterstrin就是直接講strinjson然後呢這裡面是什麼jsonstrinify然後我把我的有一個物件然後這個物件是x然後它冒號裡面有一個值是5然後我把這個物件strinify了以後呢我看一下這個strinjson是什麼這strinjson就是一個字串然後這個是壓成字串的以後它的json格式strinify以後變這樣OK好 如果前面那邊我們這樣子看是沒有問題的話那我們來看就是strinify這個 function它還有哪些更複雜的用法它中間呢這邊後面這邊是可以省略就是它有一個replacer和space好的 我壓成文字那我這個文字的編排是不是可以呃不同的排法好 第二個replacer呢它就是所有要把物件序序列化就是把它變成strinify把它自創化的時候的屬性會經過這個 function轉化和處理那我們這邊不太細講這些東西所以我們在這個replacer的時候我們就放norOK那我們到最後這邊呢我們放數字比如說這邊是註字為什麼呢這邊是有幾格空格好 那我們把這段code拿來玩玩看就是它現在在這裡strinifyA我們這裡先清掉好strinifyA是2然後它就會得到一個字串裡面是A然後有一個2這樣子好 那我今天可以怎麼樣呢我們現在做變化就是我不要有任何 functionNu然後我想要有一個space有沒有大家有沒有發現它就變成是有空白的那在這邊呢假如我是四個space大家有發現嗎這邊就變成是有四個空白OK所以這邊你可以去控制你要塞幾個空白給它OK那你塞越多你就越浪費空間因為你就塞了很多龍資料好的再來我們要來看Jason怎麼來做生複製那剛剛的生複製是怎麼做呢剛剛的生複製是我在一個物件裡面我還要進去那個物件把每一個key的值都讀出來然後到另外一個物件比如說它有A我就把它前面那個東西的A拿出來然後塞給它然後而且我還要確保它是就是strin或是bullying或是number我才可以這樣複製嘛假如它今天很煩的它是什麼object in object in object in object或是object in string in object或是object in object in string就像我們剛剛前面那個超superhero的example哇它好多層啊那我要複製我要怎麼深度複製啊我是不是要每一個東西都一直進去進去進去進去然後把每一個東西再一個一個取單純的值記得單純的值嗎這邊複製剛才十一之二淺塵複製這個基本類型假如它不是基本類型的話我一定要基本類型我才可以我才可以讓它生複製啊我要一層一層的把它抓出來你看我要把它抓到基本類型這是基本類型這是基本類型我要抓到它的基本類型才把它放進去抓到基本類型放進去哇這太難太複雜了尤其我們的資料又有可能更更複雜嘛比如像這個object in object對不對這裡面the namename裡面又有first time textobject in object煩死了怎麼可能做這種事情呢那我們今天學到了兩招就我可以先把它壓成文字對不對我先把Jason壓成文字把A這個東西它原本是一個物件我把它壓成文字化了以後變JasonA那把它壓成文字文字是什麼文字是基本類型對不對我把它壓成文字基本類型以後我再把它抓出來再把它給B那所以這個時候文字文字化在JasonParse然後又變物件再給B的時候這個時候我去改B裡面的內容就不會改到A的內容或是我這邊改A的內容就不會改到B的內容了就不會改到B的內容了OK這邊它原本有一個是什麼嗯Last nameFirst name是Chall BradOK然後它是一個A對不對那我這邊呢我把它文字化變JsonA我們這邊還是可以看到JsonAJsonA有沒有把它文字化是變成一個字串了然後我再把它抓出來比如說我JsonA然後我是去Json.parse然後它就會變成一個物件嘛物件裡面有Name然後Name沒有First and Last好再把它塞到B這個時候我去改A的值A的Name的First我把A都改掉囉我把A改掉了A現在是什麼A現在是A現在的Name變許Bred對不對雖然Bred不是First name好啦反正許Bred就是我已經把A的值是被改了A的First name改成是許了那這時候B咧這時候B不會被改喔因為它是已經文字化用Json已經重新再取了所以這是用Json的深度複製就會就是其實是比較比較方便的用法好的在本章我們學會了怎麼用Json然後來了解到說以前用XML要傳輸資料又浪費空間又難唸然後又不知道到底就是速度很慢那Json其實比較像是JS的物件所以就覺得Json比較好用嘛那大家也都是這樣覺得所以大家後來都是轉到用Json來用了那我們又理解到說淺層複製只有基本類型才可以直接把值複製過去如果說是物件和字串的話和樹列的話我們直接複製它其實是在記憶體是同一塊的所以我們必須要生成複製可是我們要生成複製的時候我們要一直到一個就是Array或是Object裡面去找到它最基本的類型很困難要找到這樣複製會很麻煩所以後來我們用什麼我們用我們學會了Json Parse和Json Stringer法我們就可以用這種方法來更方便的來深度複製OK這是第十一章

影片逐字稿largev2

我們接下來繼續來看11-3 編輯JSON檔其實剛剛我們用手動還有回圈的方法來做深度複製其實用JSON就可以更快速而且方便的做到這件事情好的,首先我們來看JSON parse的語法和JSON stringify的語法那JSON呢,我前面有提到,就是你要編輯JSON檔有時候你要從JSON的文字檔,把它變成是在JS裡面的object的型態,就是物件然後呢,你要把物件再把它變成文檔所以我們這邊,我覺得我們可以寫一下JSON parse是要怎麼樣呢?要把文JSON parse我們可以把它想像成,把文檔把它變成物stringify是把物變成文好,那我們接下來看下去吧怎麼跑到8隻好的,JSON parse就是把JSON的字串,轉換成數值和物件首先呢,裡面呢,你看,JSON的格式,我一直在講,它是一個字串,是一串東西所以呢,它是true或是像這樣字串那你會看到它這邊蠻有趣的事情是,因為JSON它的引號都是用雙引號OK,所以我們外面用單引號把它挖起來然後我要把這個文檔,你可以把它想成JSON是一串文字只是它寫起來像是object的樣子,看起來很像object的一串文字然後你要把它parse,從這段文字裡面去把它轉出來,才會變成是一個物件好,那我們這邊把它這邊先clear掉好的,那我們這邊看到的事情是,假如我今天這個是這樣子,對不對它看起來是一個object,可是實際上它是一個文字那當我們用JSON.parse,來對這個字串來做事情的時候它會給我一個物件的object,空的那假如裡面是什麼呢,裡面是name,還記得喔,要記得,要加雙引號來做它的key然後裡面比如說name是,比如說像這樣它就會給我一個物件所以你可以做什麼事情,你可以let Andy等於JSON.parse這時候Andy是一個物件,OK嗎可是你如果今天沒有做JSON.parse,你今天直接對這個,你直接這樣子那Andy這個時候是一串字串,只是看起來很像是物件,可是它實際上是一個字串那這個就是JSON,JSON其實是一個文字化的格式來存這一串資料OK,所以我們拿到JSON以後,我們都要把它parse出來我們在JSON才來使用它就它這個text好的,這邊我們要來講說,parse它還可以做什麼事情,我們可以再加入一些東西比如說像後面,逗號了以後,前面這段是文字碼,那這邊是reviver這個是一個function,然後它有K和V,key and value寫一下好的那這邊大家還記得typeof嗎如果說今天這個裡面的東西是一個數字的話,它的型態如果是數字,我們就把它乘以2所以當我JSON parse這一串文字來的時候,這個function發現我今天parse的其中一個value的型態是number所以它return v乘以2就把這個東西乘以2了假如它比如說像這個,它是一個自串型態,它就是string嘛所以if就不會跑進來這裡,就不會跑嘛,對不對所以它就會跑到else,它就會回傳原本這個東西vOK嗎那你如果return,比如說你發現它是數字你也可以做一件事情是說你今天希望你拿到的數字,就是回傳標的數字,你可以把它怎樣你可以把它string,然後把這個數字v放在中間你就把原本是數字,發現它的型態是數字的情況下我可以把它的型態轉換成自串,然後再傳回去那這樣你拿到這裡面的所有的值都會是自串那原本如果是5,你可以把它轉換成自串的5那這邊它是發現說,如果你是數字的話,那我把它乘以2,就會變這樣好的,接下來我們要講stringify的方法那stringify的方法是說,我原本有一個物件啊那我想要把它變成一個json,我想要把它壓成自串化那所以我今天把一個空的object,它就變一個自串我把true放進去,它就變一個裡面有true內容的自串我把負放進去,它就變一個裡面有負內容的自串這原本就是自串嘛,結果你把它丟進去以後它變什麼它變一個單引號裡面有一個雙引號的負那可是你看這邊是單引號裡面直接是true代表說這個true是boolean值所以這邊要很小心喔,有可能會有這種東西喔我應該是不會考你啦,可是大家注意喔,就是json.stringify當我先傳一個true進去的時候,它會得到什麼得到一個自串是true對不對,可是我如果是一個這兩個是不同的東西喔,這個文字化裡面的true是一個自串可是這個旁邊沒有用雙引號刮起來,這個其實是一個boolean的true喔可以接受嗎就是這個true和這個true,它們會差一個如果json的文字裡面有一個雙引號,代表它是自串可是如果它沒有雙引號,代表它是一個boolean的true然後只是stringify變成json而已所以這邊在做的事情是把原本js的一些物件我可以把它壓成文件,然後我再來做傳輸的動作所以我要先把它壓成文件,所以都要壓成就是自串先把它stringify,string就是自串,要先把它文字化變成自串了以後再來做事情那我們現在先來做這個stringify x冒號5好了所以我這邊有一個json,比如說我letter,string,就是直接講string json然後呢,這裡面是什麼,有json.stringify然後我有一個物件,然後這個物件是x然後它冒號裡面有一個值是5然後我把這個物件stringify了以後,我看一下這個string json是什麼string json就是一個自串,然後這個是壓成自串了以後的json格式stringify以後變這樣如果前面那邊我們這樣子看是沒有問題的話那我們來看stringify這個function它還有哪些更複雜的用法它中間呢,後面這邊是可以省略的,就是它有一個replacer和space好的,我壓成文字,那我這個文字的編排是不是可以不同的排法第二個replacer呢,它就是所有要把物件序列化就是把它變成stringify,把它自串化的時候屬性會經過這個function轉化和處理那我們這邊不太細講這些東西所以我們在這個replacer的時候,我們就放no那我們到最後這邊呢,我們放數字比如說像這邊是數字或什麼的,這邊是有幾格空格那我們把這一段code拿來玩玩看就是它在stringify,a,我們這裡先清掉stringify,a是2,然後它就會得到一個自串,裡面是a,然後有一個2好,那我今天可以怎麼樣呢我們今天來做變化,就是我不要有任何的function,no然後我想要有一個space,有沒有,大家有沒有發現它就變成是有空白的那在這邊呢,假如我是四個space大家有發現嗎,這邊就變成是有四個空白所以這邊你可以去控制你要塞幾個空白給它當然你塞越多,你就越浪費空間嘛因為你就塞了很多攏資料好的,再來我們要來看Jason怎麼來做生複製那剛剛的生複製是怎麼做呢剛剛的生複製是,我在一個物件裡面,我還要進去那個物件把每一個key的值都讀出來然後到另外一個物件,比如說它有a,我就把它前面那個東西的a拿出來然後塞給它,而且我還要確保它是string或是boolean或是number我才可以這樣複製嘛,假如它今天很煩的它是object in object in object in object或是object in string in object或是object in object in string就像我們剛剛前面那個superhero的example哇它好多層啊,那我要複製,我要怎麼深度複製啊我是不是要每一個東西都一直進去進去進去然後把每一個東西再一個一個取單純的值記得單純的值嗎這邊複製,剛剛11-2淺層複製,這個基本類型假如它不是基本類型的話,我一定要基本類型我才可以讓它深複製啊我要一層一層的把它抓出來你看,我要把它抓到基本類型,這是基本類型,這是基本類型我要抓到它的基本類型才能把它放進去抓到基本類型,放進去哇,這太難太複雜了尤其我們的資料又有可能更複雜比如像這個object in object這裡面的name,name裡面又有first and last,object in object煩死了,怎麼可能做這種事情呢那我們今天學到了兩招就是我可以先把它壓成文字我先把json壓成文字把a這個東西,它原本是一個物件我把它壓成文字化了以後變json a那把它壓成文字,文字是什麼文字是基本類型,對不對我把它壓成文字基本類型以後,我再把它抓出來再把它給b那所以這個時候,文字化在json parse然後又變物件再給b的時候這個時候,我去改b裡面的內容就不會改到a的內容或是我這邊改a的內容就不會改到b的內容了ok這邊它原本有一個是什麼last name是喬布萊德ok,然後它是一個a對不對那我這邊呢,我把它文字化變json a,我們這邊還是可以看到json a有沒有把文字化是變一個字串了然後我再把它抓出來比如說json a,然後我是去json點parse然後它就變一個物件物件裡面有name然後name裡面有first和last好,再把它set到b這個時候,我去改a的值,a的name的first我把a都改掉了喔我把a改掉了,a現在是什麼a現在是a現在的name變許布萊德許布萊德對不對雖然布萊德不是first name好啦,許布萊德就是我已經把a的值是不是改了a的first name改成許了那這時候b呢,這時候b不會被改喔因為它是文字化用json已經重新在取了所以這是用json的深度複製就會其實是比較比較方便的用法好的,在本章我們學會了怎麼用json然後來了解到說以前用XML要傳輸資料又浪費空間又難念然後又不知道到底就是速度很慢那json其實比較像是js的物件所以就覺得json比較好用嘛,那大家也都是這樣覺得,所以大家後來都是轉到用json來用啦我們又理解到說深層複製只有基本類型才可以直接把值複製過去如果說是物件和字串的話和數列的話我們直接複製它其實是在記憶體是同一塊的所以我們必須要深層複製可是我們要深層複製的時候,我們要一直到一個就是array或是object裡面去找到它最基本的類型很困難,然後這樣複製會很麻煩所以後來我們學會了json parse和json stringify我們就可以用這種方法更方便的來深度複製這是第11章