前端 JavaScript 中 JSON.stringify() 的基本用法

程式設計三昧發表於2021-06-29
前端JavaScriptJSON

前言

在開發工作中，我們可能會碰到這樣的需求：需要將某個物件內容彈窗顯示或者儲存在檔案中，這時候如果你直接彈窗的話，很可能就是下面這樣的：image-20210629184729132

因為很多介面它對引數有要求，比如只能是字串之類的。

這時候，就需要我們將物件轉換為字串進行輸出，JSON.stringify() 方法就可以幫我們實現將物件轉為字串的過程。

方法描述

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

語法

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

引數說明：

  • value 將要序列化成 一個 JSON 字串的值。
  • replacer(可選)
    • 如果該引數是一個函式，則在序列化過程中，被序列化的值的每個屬性都會經過該函式的轉換和處理；
    • 如果該引數是一個陣列，則只有包含在這個陣列中的屬性名才會被序列化到最終的 JSON 字串中；
    • 如果該引數為 null 或者未提供，則物件所有的屬性都會被序列化。
  • space(可選) 指定縮排用的空白字串，用於美化輸出（pretty-print）；如果引數是個數字，它代表有多少的空格；上限為10。
    • 如果省略space，則將生成返回值文字，而沒有任何額外空格。
    • 如果 space是一個數字，則返回值文字在每個級別縮排指定數目的空格。 如果 space 大於 10，則文字縮排 10 個空格。
    • 如果 space是一個非空字串（例如“\t”），則返回值文字在每個級別中縮排字串中的字元。
    • 如果 space 是長度大於 10個字元的字串，則使用前 10 個字元。

返回值

一個表示給定值的JSON字串。

常規用法

console.log(JSON.stringify({name: "obj"}))
// '{"name": "obj"}'

repalacer 引數

replacer 引數可以是一個函式或者一個陣列。作為函式，它有兩個引數，鍵（key）和值（value），它們都會被序列化。

在開始時, replacer 函式會被傳入一個空字串作為 key 值，代表著要被 stringify 的這個物件。隨後每個物件或陣列上的屬性會被依次傳入。

函式應當返回JSON字串中的value, 如下所示:

  • 如果返回一個 Number，轉換成相應的字串作為屬性值被新增入 JSON 字串。
  • 如果返回一個 String，該字串作為屬性值被新增入 JSON 字串。
  • 如果返回一個 Boolean， “true” 或者 “false” 作為屬性值被新增入 JSON 字串。
  • 如果返回任何其他物件，該物件遞迴地序列化成 JSON 字串，對每個屬性呼叫 replacer 方法。除非該物件是一個函式，這種情況將不會被序列化成 JSON 字串。
  • 如果返回 undefined，該屬性值不會在 JSON 字串中輸出。

有以下物件：

const data = [
    {
        name: "person1",
        sex: 0,
        age: 18,
        isStudent: true
    },
    {
        name: "person2",
        sex: 1,
        age: 25,
        isStudent: false
    },
    {
        name: "person3",
        sex: 0,
        age: 15,
        isStudent: true
    }
]

接下來我們針對這個物件做各種需求實現。

只輸出姓名和性別

const res = JSON.stringify(data, ["name", "sex"])
console.log(res);
// `[{"name":"person1","sex":0},{"name":"person2","sex":1},{"name":"person3","sex":0}]`

JSON.stringify() 提供了分離出自己需要的那部分資料。

將性別轉為中文字元

const res = JSON.stringify(data, (key, value) => {
    if (key == 'sex') {
        return ["女", '男'][value];
    }
    return value;
})
console.log(res);
// `[{"name":"person1","sex":"女","age":18,"isStudent":true},{"name":"person2","sex":"男","age":25,"isStudent":false},{"name":"person3","sex":"女","age":15,"isStudent":true}]`

JSON.stringify() 提供了回撥函式做一個對映關係。

space 引數

const res = JSON.stringify(data, ["name", "sex"],4)
console.log(res);

輸出如下：

image-20210629193959927

這裡使用了 4 個空格作為層級縮排。

注意：使用 “\t” 得到的結果和使用 4 個空格得到的結果看起來很像，但實際不是一回事。

總結

JSON.stringify() 方法可以通過引數控制輸出的資料和格式，靈活應用它會大大提高我們的工作效率。

學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！

我是〖程式設計三昧〗的作者 隱逸王，我的公眾號是『程式設計三昧』，歡迎關注，希望大家多多指教！

你來，懷揣期望，我有墨香相迎！ 你歸，無論得失，唯以餘韻相贈！

知識與技能並重，內力和外功兼修，理論和實踐兩手都要抓、兩手都要硬！

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章