快捷導(dǎo)航

一文詳解JSON.parse和JSON.stringify的用法

更新時間：2023年01月06日 09:17:55 作者：Sfh_11

Json.stringify()和toString()兩者雖然都可以講目標(biāo)值轉(zhuǎn)為字符串,但是還是有本質(zhì)區(qū)別的,下面這篇文章主要給大家介紹了關(guān)于JSON.parse和JSON.stringify用法的相關(guān)資料,需要的朋友可以參考下

前言

平時我們在接收后端返回的json對象通常是一個字符串類型的object，所以一般我們要對這個object進(jìn)行類型轉(zhuǎn)化后，我們才能使用object里面的數(shù)據(jù)，而這其中涉及到兩個必不可少的方法就是JSON.parse和JSON.stringify

JSON.parse()

JSON.parse()方法將JSON格式字符串轉(zhuǎn)換為js對象(屬性名沒有雙引號)

解析前要保證數(shù)據(jù)是標(biāo)準(zhǔn)的JSON格式，否則會解析出錯

const user = '{"name": "Jack","gender": "男","age": 18,"major":"computer"}'
console.log(JSON.parse(user));
//user = { name:"Jack", gender:"男", age:18, major:"computer"}

輸出結(jié)果：

const users = '[{"id":101,"name":"計算機(jī)科學(xué)"},{"id":102,"name":"軟件工程"}]'
console.log(JSON.parse(users));
// 結(jié)果 users= [ {id:101,name:"計算機(jī)科學(xué)"}, {id:102,name:"軟件工程"} ]

JSON.stringify()

const user = {"name": "Jack","gender": "男","age": 18,"major":"computer"}
console.log(user);

console.log()沒有輸出我們想要的結(jié)果。它輸出了[Object]，因為從對象到字符串的默認(rèn)轉(zhuǎn)換是“[Object]”。因此，我們使用JSON.stringify()先將對象轉(zhuǎn)換為字符串

console.log(JSON.stringify(user));

但是，stringify（）其實還可以傳入其他的參數(shù)從而方便我們查找數(shù)據(jù)，讓我們接著往下看

第二個參數(shù)（數(shù)組）

假如存在這樣一個場景，一個學(xué)生擁有很多個手機(jī)號碼，我們想迅速定位到該學(xué)生的某個手機(jī)號，我們可以在stringify（）第二個位置以數(shù)組的形式加參數(shù)來進(jìn)行查找

const user = {"name": "Jack",
        "gender": "男",
        "age": 18,
        "major":"computer",
        "phonenumber":123,
        "phonenumber1":456,
        "phonenumber2":789,
        "phonenumber3":321,
        "phonenumber4":654,
        "phonenumber5":987
        }
        console.log(JSON.stringify(user,['phonenumber3']));

輸出結(jié)果：

第三個參數(shù)（數(shù)字）

第三個參數(shù)控制最終字符串里的間距。如果參數(shù)是一個數(shù)字，則字符串化中的每個級別，都將縮進(jìn)這個空格字符數(shù)。即不傳這個參數(shù)一行顯示，加了分行顯示。

const user = {"name": "Jack",
        "gender": "男",
        "age": 18,
        "major":"computer",
        "phonenumber":123,
        "phonenumber1":456,
        "phonenumber2":789,
        "phonenumber3":321,
        "phonenumber4":654,
        "phonenumber5":987
        }
console.log(user);
console.log(JSON.stringify(user,null,2));

輸出結(jié)果：

第三個參數(shù)（字符串）

如果第三個參數(shù)是字符串，則用它來代替上面顯示的空格字符。我這里傳入**

const user = {"name": "Jack",
        "gender": "男",
        "age": 18,
        "major":"computer",
        "phonenumber":123,
        "phonenumber1":456,
        "phonenumber2":789,
        "phonenumber3":321,
        "phonenumber4":654,
        "phonenumber5":987
        }
console.log(JSON.stringify(user,null,'**'));

輸出結(jié)果：

toJSON函數(shù)

我們有一個名為toJSON的類函數(shù)，它的屬性是可以作為任何對象的一部分。JSON.stringify返回這個函數(shù)的結(jié)果并對其進(jìn)行字符串化，而不是將全部對象轉(zhuǎn)換為字符串。

const user = {
        firstName : "Prateek",
        lastName : "Singh",
        age : 26,
        toJSON(){
            return {
                fullName: `${this.firstName}${this.lastName}`
            }
        }
    }
console.log(JSON.stringify(user));

輸出結(jié)果：

可以看到，它不是輸出全部對象，而是只有toJSON函數(shù)的結(jié)果。

此外，JS還有一個功能函數(shù)是parseInt，注意不要將它和JSON.parse( )混淆了，parseInt函數(shù)的功能是可解析一個字符串，返回一個整數(shù)。假如有一個字符串類型的數(shù)字，經(jīng)過轉(zhuǎn)化后就會變成一個數(shù)字類型的數(shù)字，如果是字母類型的字符串則返回NaN。
小技巧：直接加+也可以起到parseInt的作用。

參考的文章：https://baijiahao.baidu.com/s?id=1662484165706074595&wfr=spider&for=pc