6個(gè)你不知道的JSON.stringify()妙用
本文主要介紹 6 個(gè)實(shí)用 JSON.stringify() 用法
1.用來調(diào)試對(duì)象
我們先來看看下面這個(gè)代碼在控制臺(tái)中輸出什么
//Initialize?a?User?objectconst?user?=?{"name"?:?"蔡生","age"?:?26}console.log(user);RESULT// [object Object]
看！console.log()沒有輸出我們想要的結(jié)果。它輸出了[object Object]，因?yàn)閺膶?duì)象到字符串的默認(rèn)轉(zhuǎn)換是“[objectObject]”。因此，我們使用 JSON.stringify()先將對(duì)象轉(zhuǎn)換為字符串，然后把結(jié)果輸入 console 控制臺(tái)，如下所示。
const?user?=?{"name"?:?"蔡生","age"?:?26}console.log(JSON.stringify(user));RESULT// "{ "name" : "蔡生", "age" :26 }"
通常，開發(fā)人員使用這個(gè) stringify 函數(shù)的方式很簡(jiǎn)單，像上面那樣操作就可以。
2.存儲(chǔ) localStorage 對(duì)象
一些時(shí)候，你想存儲(chǔ)用戶創(chuàng)建的一個(gè)對(duì)象，并且，即使在瀏覽器被關(guān)閉后仍能恢復(fù)該對(duì)象。下面的例子是 JSON.stringify? 適用于這種情形的一個(gè)樣板：
// 創(chuàng)建一個(gè)示例數(shù)據(jù)var session = {'screens' : [],'state' : true};session.screens.push({"name":"screenA", "width":450, "height":250});session.screens.push({"name":"screenB", "width":650, "height":350});session.screens.push({"name":"screenC", "width":750, "height":120});session.screens.push({"name":"screenD", "width":250, "height":60});session.screens.push({"name":"screenE", "width":390, "height":120});session.screens.push({"name":"screenF", "width":1240, "height":650});// 使用 JSON.stringify 轉(zhuǎn)換為 JSON 字符串// 然后使用 localStorage 保存在 session 名稱里localStorage.setItem('session', JSON.stringify(session));// 然后是如何轉(zhuǎn)換通過 JSON.stringify 生成的字符串，該字符串以 JSON 格式保存在 localStorage 里var restoredSession = JSON.parse(localStorage.getItem('session'));// 現(xiàn)在 restoredSession 包含了保存在 localStorage 里的對(duì)象console.log(restoredSession);
3.數(shù)組去重
有人把這個(gè)用在數(shù)組對(duì)象去重上，下面我舉一個(gè)例子。
function unique(arr){let unique = {};arr.forEach(function(item){unique[JSON.stringify(item)]=item;//鍵名不會(huì)重復(fù)})arr = Object.keys(unique).map(function(u){//Object.keys()返回對(duì)象的所有鍵值組成的數(shù)組，map方法是一個(gè)遍歷方法，返回遍歷結(jié)果組成的數(shù)組.將unique對(duì)象的鍵名還原成對(duì)象數(shù)組return JSON.parse(u);})return arr;}
存在的問題:{x:1,y:2}與{y:2,x:1}通過 JSON.stringify 字符串化值不同，但顯然他們是重復(fù)的對(duì)象。
看起來只要把里面的屬性排序一下，然后再進(jìn)行下一步就可以了，我調(diào)整了一下，代碼如下：
function unique(arr) {let unique = {};arr.forEach(function(item) {//調(diào)整屬性順序var newData = {};Object.keys(item).sort().map(key = >{newData[key] = item[key]})unique[JSON.stringify(newData)] = item; //鍵名不會(huì)重復(fù)})arr = Object.keys(unique).map(function(u) {//Object.keys()返回對(duì)象的所有鍵值組成的數(shù)組，map方法是一個(gè)遍歷方法，返回遍歷結(jié)果組成的數(shù)組.將unique對(duì)象的鍵名還原成對(duì)象數(shù)組return JSON.parse(u);})return arr;}
4.stringify 函數(shù)第二個(gè)參數(shù)的妙用
還是上面這道題，我們可以在第二個(gè)參數(shù)上解決對(duì)象屬性的順序問題，給它加上一個(gè)數(shù)組['name','author']，代碼改為下面這個(gè)就沒問題了。
function unique(arr) {let unique = {};arr.forEach(function(item) {unique[JSON.stringify(item,['name','author'])] = item;})arr = Object.keys(unique).map(function(u) {//Object.keys()返回對(duì)象的所有鍵值組成的數(shù)組，map方法是一個(gè)遍歷方法，返回遍歷結(jié)果組成的數(shù)組.將unique對(duì)象的鍵名還原成對(duì)象數(shù)組return JSON.parse(u);})return arr;}
正如你所知，第二個(gè)參數(shù)可以決定篩選出來的內(nèi)容，當(dāng)然它還有第三個(gè)參數(shù)，這里不展開了，有興趣看 MDN。
5.實(shí)現(xiàn)深拷貝
實(shí)際開發(fā)中，如果怕影響原數(shù)據(jù)，我們常深拷貝出一份數(shù)據(jù)做任意操作，其實(shí)使用 JSON.stringify()與 JSON.parse()來實(shí)現(xiàn)深拷貝是很不錯(cuò)的選擇。
//深拷貝function deepClone(data) {let _data = JSON.stringify(data),dataClone = JSON.parse(_data);return dataClone;};//測(cè)試let arr = [1,2,3],_arr = deepClone(arr);arr[0] = 2;console.log(arr,_arr)//[2,2,3] [1,2,3]
6.判斷數(shù)組是否包含某對(duì)象，或者判斷對(duì)象是否相等。
//判斷數(shù)組是否包含某對(duì)象let data = [{name:'echo'},{name:'前端開發(fā)博客'},{name:'蔡生'},],val = {name:'蔡生'};JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1;//true//判斷兩數(shù)組/對(duì)象是否相等let a = [1,2,3],b = [1,2,3];JSON.stringify(a) === JSON.stringify(b);//true
最后
如果你覺得這篇內(nèi)容對(duì)你挺有啟發(fā)，我想邀請(qǐng)你幫我三個(gè)小忙：
點(diǎn)個(gè)「在看」，讓更多的人也能看到這篇內(nèi)容（喜歡不點(diǎn)在看，都是耍流氓 -_-）
歡迎加我微信「qianyu443033099」拉你進(jìn)技術(shù)群，長(zhǎng)期交流學(xué)習(xí)...
關(guān)注公眾號(hào)「前端下午茶」，持續(xù)為你推送精選好文，也可以加我為好友，隨時(shí)聊騷。
