JSON對象在所有現(xiàn)代瀏覽器中都可以使用，它有兩個非常有用的方法來處理JSON格式化的內(nèi)容：解析和字符串化。JSON.parse() 取一個JSON字符串并將其轉(zhuǎn)換為JavaScript對象。JSON.stringify() 取一個JSON對象，并將其轉(zhuǎn)換為JSON字符串。

代碼使用const myObj = {

name: 'Skip',

age: 2,

favoriteFood: 'Steak'

};

const myObjStr = JSON.stringify(myObj);

console.log(myObjStr);

// "{"name":"Skip","age":2,"favoriteFood":"Steak"}"

console.log(JSON.parse(myObjStr));

// Object {name:"Skip",age:2,favoriteFood:"Steak"}

而且雖然這些方法通常用于對象，但也可以用于數(shù)組。

const myArr = ['bacon', 'letuce', 'tomatoes'];

const myArrStr = JSON.stringify(myArr);

console.log(myArrStr);

// "["bacon","letuce","tomatoes"]"

console.log(JSON.parse(myArrStr));

// ["bacon","letuce","tomatoes"]

妙用功能

1.用來調(diào)試對象

我們先來看看下面這個代碼在控制臺中輸出什么

//Initialize a User object

const user = {

"name" : "蔡生",

"age" : 26

}

console.log(user);RESULT

// [object Object]

看！console.log()沒有輸出我們想要的結(jié)果。它輸出了[object Object]，因為從對象到字符串的默認轉(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)閉后仍能恢復該對象。下面的例子是?JSON.stringify?適用于這種情形的一個樣板：

3.數(shù)組去重

有人把這個用在數(shù)組對象去重上，下面我舉一個例子。

function unique(arr){

let unique = {};

arr.forEach(function(item){

unique[JSON.stringify(item)]=item;//鍵名不會重復

})

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字符串化值不同，但顯然他們是重復的對象。

看起來只要把里面的屬性排序一下，然后再進行下一步就可以了，我調(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; //鍵名不會重復

})

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)容，當然它還有第三個參數(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,a.sort()) === JSON.stringify(b,b.sort());//true

總結(jié)

以上是生活随笔為你收集整理的html5 json.stringify,JSON.stringify()妙用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。