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