妙用JSON.stringify，區分JSON.parse和JSON.stringify的區別，論辯toString與JSON.stringify的異同點

一.JSON.stringify()和JSON.parse()的區別

最近在做項目，在需要用本地緩存對接口進行優化時，發現有頻繁地用到JSON.stringify()的場景，於是啟發了我的研究的興趣

首先都知道，JSON.stringify()是將JavaScript對象轉變成JSON字符串，JSON.parse()是將JSON字符串轉變成一個對象，前者在數據進行本地緩存時用得最多，

在拿數據時調用后者即可（但是需要只有JSON字符串才能進行轉換）；

 

let a = [1, 2, 3]
console.log(JSON.stringify(a));
console.log(a.toString());

let b = JSON.stringify(a); //'[1,2,3]'
console.log(JSON.parse(b)); // [1,2,3]

let b2 = a.toString(); //'1,2,3'
console.log(JSON.parse(b2)); //underfined:toString()得到的字符串並非JSON字符串

 

二.JSON.stringify與toString()的區別

a.二者雖然都可以將數據轉換成字符串，但二者所針對的受眾目標並不相同，前者不僅僅限於數組，更多的是進行對象的轉換；

后者只針對對數組的轉換，並不能對對象如之類的進行轉換得到你所想要的值，有着很大的局限性.

如：

let c = {
    time: Date.now(),
    data: {
        id: 1,
        name: 'mk',
        age: 20
    }
};
console.log(JSON.stringify(c)); //{"time":1596464272481,"data":{"id":1,"name":"mk","age":20}}
console.log(c.toString()); //[object Object]

b.JSON.stringify()將目標值轉成 JSON類型的字符串，toString()只是普通類型的字符串，如果在實際拿本地緩存中的數據時，如果調用JSON.parse()來轉換對象時，

如果不是JSON類型的字符串的話會報錯的。

 

三.JSON.stringify()的妙用

理解了以上要點，其妙用又有哪些呢？

 

a.利用localStorage/sessionStorage來本地存儲數據，其實這個在上面時已經略有提過：

    let a = {
        time: Date.now(),
        data: {
            id: 1,
            name: 'mk',
            age: 19
        }
    };
    localStorage.setItem('mk', JSON.stringify(a));
    console.log(JSON.parse(localStorage.getItem('mk')));

 

 

b.實現對象的深拷貝（出於安全性考慮）

在實際項目開發時，常需要對源數據進行任意操作，如果怕會影響到源數據，深拷貝倒是一種不錯的選擇

let a = [1, 2, 3]；
let b = {
    time: Date.now(),
    data: {
        id: 1,
        name: 'mk',
        age: 20
    }
};
let b = JSON.parse(JSON.stringify(b));
console.log(d); //{ time: 1596465414379, data: { id: 1, name: 'mk', age: 20 } }
console.log(JSON.parse(JSON.stringify(a)));//[1 , 2 , 3 ]

c.暫未發現，后續再續編輯