JSON.stringify 的作用意義

你是否知道 JSON.stringify 的作用意義，當(dāng)面試被問到該如何回答。網(wǎng)上的八股文答案大概教你這樣回答：

JSON.stringify(value,replacer,space)

它是一個(gè)用于序列化對象的方法，接受三個(gè)參數(shù)，第一個(gè)參數(shù)是要被序列化的對象，接受對象或數(shù)組類型。第二個(gè)參數(shù)用于標(biāo)記需要序列化的屬性，接受數(shù)組和函數(shù)類型。第三個(gè)參數(shù)用于描述序列化后的縮進(jìn)字符數(shù)，用于美化格式。當(dāng)然這樣的回答也沒有錯，不過面試考察的更多是大家的實(shí)際應(yīng)用能力以及實(shí)戰(zhàn)場景，如果只回答八股文的內(nèi)容，更多的只能體現(xiàn)大家的背誦能力而已，所以今天給大家呈現(xiàn) JSON.stringify 的實(shí)際應(yīng)用場景。

場景一：localStorage 的存儲

前端 localStorage 中只能接受字符串的存儲類型，而且它是一個(gè) KV 的結(jié)構(gòu)，我們嘗試模擬存儲一個(gè)對象這種場景：

我們會發(fā)現(xiàn)是存儲失敗的，我們沒有辦法把整個(gè) obj 存儲到 localStorage 中，所以在這種場景下，我們就需要用到 JSON.stringify，把對象先序列化再進(jìn)行存儲：

我們發(fā)現(xiàn)這樣是可以存儲成功的，我們只需要把存進(jìn)去的對象再進(jìn)行一次 JSON.parse：

整個(gè)過程我們就可以把對象給存儲進(jìn)去，同時(shí)能提取出來，這樣就ok了。

場景二：對象的深拷貝

JS 中的對象它都是一個(gè)引用的類型。

如上圖把obj賦予給objA，當(dāng)改動objA里面的a屬性，本質(zhì)上其實(shí)在obj里面的a屬性它也被改動了，那怎么樣解決這個(gè)問題呢？這里可以利用 JSON.stringify 以及 JSON.parse 給做一次對象的深復(fù)制，具體應(yīng)用是這樣的：

我們用 JSON.stringify 序列化一次這個(gè)obj，再把它解析出來，最后的結(jié)果賦予給objB，這時(shí)候我改動objB里面的a屬性，但obj里面的屬性并沒有進(jìn)行變化，這樣的話我們就成功的做了一次深度復(fù)制，這也是 JSON.parse 一個(gè)巧妙的應(yīng)用。

場景三：刪除對象屬性

如果我們需要刪除對象中某個(gè)屬性，也可以利用 JSON.stringify 去實(shí)現(xiàn)，比如說下面這個(gè)對象我們要把b屬性刪掉，可以利用  JSON.stringify 的第二個(gè)參數(shù)去巧妙應(yīng)用：

第二個(gè)參數(shù)接受一個(gè)方法，方法接受兩個(gè)參數(shù)，一個(gè)是key，一個(gè)是value，我們可以在里面寫邏輯，如果key==='b'，這時(shí)候我們返回undefine，否則的話我們把 value 返回，這時(shí)候我們就可以得到一個(gè)沒有b屬性的一個(gè)序列化的字符串，我們再把這個(gè)字符串給 JSON.parse 回來，就可以得到消除 b 之后的一個(gè)對象，這也是 JSON.stringify 的一個(gè)巧妙應(yīng)用。

以上就是JS中JSON.stringify使用場景面試精講的詳細(xì)內(nèi)容，更多關(guān)于JS JSON.stringify使用場景的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論