理解JSON.stringify()高級用法


一: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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM