首頁 > 軟體

JS JSON.stringify()的5個使用場景詳解

2023-01-24 14:01:33

前言

JSON.stringify() 方法將一個 JavaScript 物件或值轉換為 JSON 字串,如果指定了一個 replacer 函數,則可以選擇性地替換值,或者指定的 replacer 是陣列,則可選擇性地僅包含陣列指定的屬性。

語法如下:

JSON.stringify(value[, replacer [, space]])

  • 第一個引數 value:將要序列化成 一個 JSON 字串的值。
  • 第二個引數 replacer:可選引數,如果該引數是一個函數,則在序列化過程中,被序列化的值的每個屬性都會經過該函數的轉換和處理;如果該引數是一個陣列,則只有包含在這個陣列中的屬性名才會被序列化到最終的 JSON 字串中;如果該引數為 null 或者未提供,則物件所有的屬性都會被序列化。
  • 第三個引數 space:可選引數,指定縮排用的空白字串,用於美化輸出(pretty-print);如果引數是個數位,它代表有多少的空格;上限為 10。該值若小於 1,則意味著沒有空格;如果該引數為字串(當字串長度超過 10 個字母,取其前 10 個字母),該字串將被作為空格;如果該引數沒有提供(或者為 null),將沒有空格。

第二個引數replacer 為陣列

是的,JSON.stringify() 函數可以有第二個引數,它是要在控制檯中列印的物件的鍵陣列。下面來看看範例:

const arrayData = [
    {
        id: "0001",
        type: "donut",
        name: "Cake",
        ppu: 0.55,
        batters: {
            batter: [
                { id: "1001", type: "Regular" },
                { id: "1002", type: "Chocolate" },
                { id: "1003", type: "Blueberry" },
                { id: "1004", type: "Devil's Food" },
            ],
        },
        topping: [
            { id: "5001", type: "None" },
            { id: "5002", type: "Glazed" },
            { id: "5005", type: "Sugar" },
            { id: "5007", type: "Powdered Sugar" },
            { id: "5006", type: "Chocolate with Sprinkles" },
            { id: "5003", type: "Chocolate" },
            { id: "5004", type: "Maple" },
        ],
    },
];
console.log(JSON.stringify(arrayData, ["name"])); // [{"name":"Cake"}]

可以通過在第二個引數中將其作為陣列傳遞僅需要列印的鍵,而不需要列印整個 JSON 物件。

第二個引數replacer 為函數

還可以將第二個引數作為函數傳遞,根據函數中編寫的邏輯評估每個鍵值對。如果返回 undefined 鍵值對將不會列印。請看下面範例:

const user = {
    name: "DevPoint",
    age: 35,
};

const result = JSON.stringify(user, (key, value) =>
    typeof value === "string" ? undefined : value
);
console.log(result); // {"age":35}

上述程式碼的輸出,可以用來過濾 JSON 資料的屬性值。

第三個引數為 Number

第三個引數控制最終字串中的間距。如果引數是一個數位,則字串化中的每個級別都將縮排此數量的空格字元。

const user = {
    name: "DevPoint",
    age: 35,
    address: {
        city: "Shenzhen",
    },
};

console.log(JSON.stringify(user, null, 4));

輸出列印的字串格式如下:

{
    "name": "DevPoint",
    "age": 35,
    "address": {
        "city": "Shenzhen"
    }
}

第三個引數為 String

如果第三個引數是一個字串,它將被用來代替上面顯示的空格字元。

const user = {
    name: "DevPoint",
    age: 35,
    address: {
        city: "Shenzhen",
    },
};

console.log(JSON.stringify(user, null, "|---"));

輸出列印的字串格式如下:

{
|---"name": "DevPoint",
|---"age": 35,
|---"address": {
|---|---"city": "Shenzhen"
|---}
}

toJSON 方法

有一個名為 toJSON 的方法,它可以是任何物件的一部分作為其屬性。 JSON.stringify 返回此函數的結果並將其字串化,而不是將整個物件轉換為字串。

//Initialize a User object
const user = {
    name: "DevPoint",
    city: "Shenzhen",
    toJSON() {
        return `姓名:${this.name},所在城市:${this.city}`;
    },
};

console.log(JSON.stringify(user)); // "姓名:DevPoint,所在城市:Shenzhen"

總結

到此這篇關於JS JSON.stringify()使用場景詳解的文章就介紹到這了,更多相關JSON.stringify()使用場景內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com!


IT145.com E-mail:sddin#qq.com