理解JSON.stringify()高階用法

龍恩0707發表於2018-10-16
JSON

一：JSON.stringify()

該方法是把javascript物件轉換成json字串。

基本語法：JSON.stringify(value, [, replacer], [, space])

value: 必選欄位，指輸入的物件，比如陣列這些。
replacer，該引數是可選的，它可以有兩種型別，第一種是陣列，第二種是函式方法。

space: 該引數的含義是指使用什麼來做分隔符的。
1）如果該引數省略的話，那麼顯示出來的值是沒有分隔符的。
2）如果是一個數字的話，那麼它的含義是 縮排幾個字元的意思，最大值為10.
3）如果是一個轉義字元的話，比如 '\t', 表示回車，那麼它每行一個回車。
4）如果是字串的話，那麼每行輸出值的時候把這些字串附加上去，最大長度也是10個字元。

下面是一個簡單的json物件，如下程式碼：

var json = {
  "name": "kongzhi",
  "age": "30",
  "lists": [
    {"name": "xxx1", "age": "28"},
    {"name": "xxx2", "age": "29"},
    {"name": "xxx3", "age": "30"}
  ]
};

1) 只有一個引數值的情況下；如下程式碼：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      
    </style>
  </head>
  <body>
    <script type="text/javascript">
      var json = {
        "name": "kongzhi",
        "age": "30",
        "lists": [
          {"name": "xxx1", "age": "28"},
          {"name": "xxx2", "age": "29"},
          {"name": "xxx3", "age": "30"}
        ]
      };
      var result = JSON.stringify(json);
      // 輸出結果為 {"name":"kongzhi","age":"30","lists":[{"name":"xxx1","age":"28"},{"name":"xxx2","age":"29"},{"name":"xxx3","age":"30"}]}
      console.log(result);
    </script>
  </body>
</html>

2.1）第二個引數存在，且第二個引數是陣列。

如果第二個引數是陣列，並且第二個引數的值在第一個資料中存在的話，那麼它就會以第二個引數的值當做key，第一個引數的值為value表示。如果第二個引數陣列有多項的話，以此類推...，如果不匹配資料的話，則忽略。如下程式碼：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      
    </style>
  </head>
  <body>
    <script type="text/javascript">
      var json = {
        "name": "kongzhi",
        "age": "30",
        "lists": [
          {"name": "xxx1", "age": "28"},
          {"name": "xxx2", "age": "29"},
          {"name": "xxx3", "age": "30"}
        ]
      };
      var arrs = ['lists', 'name'];
      var result = JSON.stringify(json, arrs);
      // 輸出結果為 {"lists":[{"name":"xxx1"},{"name":"xxx2"},{"name":"xxx3"}],"name":"kongzhi"}
      console.log(result);
    </script>
  </body>
</html>

2.2）第二個引數存在，且第二個引數是方法

如果第二個引數是一個方法的話，那麼該函式會有兩個引數，key和value，我們可以在函式內部改變json資料的值，如下程式碼：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      
    </style>
  </head>
  <body>
    <script type="text/javascript">
      var json = {
        "name": "kongzhi",
        "age": "30",
        "lists": [
          {"name": "xxx1", "age": "28"},
          {"name": "xxx2", "age": "29"},
          {"name": "xxx3", "age": "30"}
        ]
      };
      var result = JSON.stringify(json, function(key, value) {
        switch(key) {
          case "name":
            return 'longen';
          case "age":
            return '31';
          default:
            return value;
        }
      });
      // 輸出結果為 {"name":"longen","age":"31","lists":[{"name":"longen","age":"31"},{"name":"longen","age":"31"},{"name":"longen","age":"31"}]}
      console.log(result);
    </script>
  </body>
</html>

3）第三個引數存在

第二個引數如果不傳的話，可以寫null, 第三個引數是控制json字串縮排的，它可以是數字或字串，數字最多可以縮排10個，如果傳入的是字串的話，則會使用這個字串當做縮排符來代替空格。

3.1 數字（控制json字串縮排的，幾個數字代表幾個縮排） 如下程式碼：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      
    </style>
  </head>
  <body>
    <script type="text/javascript">
      var json = {
        "name": "kongzhi",
        "age": "30",
        "lists": [
          {"name": "xxx1", "age": "28"},
          {"name": "xxx2", "age": "29"},
          {"name": "xxx3", "age": "30"}
        ]
      };
      var result = JSON.stringify(json, null, 4);
      /*  
        輸出結果為：
        {
            "name": "kongzhi",
            "age": "30",
            "lists": [
                {
                    "name": "xxx1",
                    "age": "28"
                },
                {
                    "name": "xxx2",
                    "age": "29"
                },
                {
                    "name": "xxx3",
                    "age": "30"
                }
            ]
        }
      */
      console.log(result);
    </script>
  </body>
</html>

3.2 字串（控制json字串縮排的，字串的話，則會使用這個字串當做縮排符來代替空格），如下程式碼：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      
    </style>
  </head>
  <body>
    <script type="text/javascript">
      var json = {
        "name": "kongzhi",
        "age": "30",
        "lists": [
          {"name": "xxx1", "age": "28"},
          {"name": "xxx2", "age": "29"},
          {"name": "xxx3", "age": "30"}
        ]
      };
      var result = JSON.stringify(json, null, 'aa');
      /*  
        輸出結果為：
        {
        aa"name": "kongzhi",
        aa"age": "30",
        aa"lists": [
        aaaa{
        aaaaaa"name": "xxx1",
        aaaaaa"age": "28"
        aaaa},
        aaaa{
        aaaaaa"name": "xxx2",
        aaaaaa"age": "29"
        aaaa},
        aaaa{
        aaaaaa"name": "xxx3",
        aaaaaa"age": "30"
        aaaa}
        aa]
        }
      */
      console.log(result);
    </script>
  </body>
</html>

 

相關文章