JSON.stringify 的作用意義

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

JSON.stringify(value,replacer,space)

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

場(chǎng)景一：localStorage 的存儲(chǔ)

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

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

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

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

場(chǎng)景二：對(duì)象的深拷貝

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

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

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

場(chǎng)景三：刪除對(duì)象屬性

如果我們需要?jiǎng)h除對(duì)象中某個(gè)屬性，也可以利用 JSON.stringify 去實(shí)現(xiàn)，比如說(shuō)下面這個(gè)對(duì)象我們要把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è)序列化的字符串，我們?cè)侔堰@個(gè)字符串給 JSON.parse 回來(lái)，就可以得到消除 b 之后的一個(gè)對(duì)象，這也是 JSON.stringify 的一個(gè)巧妙應(yīng)用。

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

最新評(píng)論