4_对象转化为字符串 14:56

思维导图.png

序列化，指将 JavaScript 值转化为 JSON 字符串的过程。

JSON.stringify() 能够将 JavaScript 值转换成 JSON 字符串。JSON.stringify() 生成的字符串可以用 JSON.parse() 再还原成 JavaScript 值。

1. 参数的含义

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

• value：必选参数。被变换的 JavaScript 值，一般是对象或数组。

• replacer：可以省略。有两种选择：函数或数组。

  • 如果是函数，则每一组名称/值对都会调用此函数，该函数返回一个值，作为名称的值变换到结果字符串中，如果返回 undefined，则该成员被忽略。

  • 如果是数组，则只有数组中存在名称才能够被转换，且转换后顺序与数组中的值保持一致。

• space：可以省略。这是为了排版、方便阅读而存在的。可以在 JSON 字符串中添加空白或制表符等。

2. value 用法

示例1：stringify.html

stringify.gif

示例1源码：

<script type="text/javascript">
  
  var obj = {
    name: "Geoff Lui",
    age:26
  };
  console.log(obj);

  var jsonstr = JSON.stringify(obj);
  console.log(jsonstr);
</script>

示例2：stringify02.html

如果有不符合JSON语法规则的值

stringify02.gif

示例2源码：

<script type="text/javascript">
  
  var obj = {
    name: "Geoff Lui",
    age:26,
    // 如果有不符合JSON语法规则的值
    a:undefined,
    f:function(){
      alert(a);
    }
  };
  console.log(obj);

  var jsonstr = JSON.stringify(obj);
  console.log(jsonstr); //因为a和f不符合JSON语法规则,所以结果中看不到这两个值
</script>

示例3：stringify03.html

如果数组里面包含函数呢？

stringify03.gif

示例3源码：

<script type="text/javascript">
  
  var obj = {
    name: "Geoff Lui",
    age:26,
    // 如果有不符合JSON语法规则的值
    a:undefined,
    f:function(){
      alert(a);
    },
    // 如果数组中包含函数
    b:[function(){alert("hello");}]
  };
  console.log(obj);

  var jsonstr = JSON.stringify(obj);
  console.log(jsonstr); //因为a和f不符合JSON语法规则,
所以结果中看不到这两个值;数组里的函数被转换成了null
</script>

3. replacer 的用法

1）示例stringify04-第2个参数为函数.html

转换成JSON字符串的同时，对数值进行处理

stringify04-第二个参数为函数.gif

示例stringify04源码：

<script type="text/javascript">
  
  var obj = {
    name: "Geoff Lui",
    age:26,
  };
  console.log(obj);

  var jsonstr = JSON.stringify(obj,fun);
  function fun(name,value){
    if( name == "age" ){
      value = 14;
    }
    return value;
  }
  console.log(jsonstr); 
</script>

2)示例stringify05.html

如果第2个参数为数组，只有数组中存在名称才能够被转换

stringify05-第二个参数为数组.gif

示例stringify05源码：

<script type="text/javascript">
  
  var obj = {
    a:1,
    b:2,
    c:3,
    d:4
  };
  console.log(obj);

  var jsonstr = JSON.stringify(obj,["a","b","c"]);
  
  console.log(jsonstr); 
</script>

3）stringify06-第2个参数为数组 顺序.html

转换后顺序与数组中的值保持一致。

stringify06-第2个参数为数组 顺序.gif

示例stringify06源码：

<script type="text/javascript">
  
  var obj = {
    a:1,
    b:2,
    c:3,
    d:4
  };
  console.log(obj);

  var jsonstr = JSON.stringify(obj,["c","b","a"]);
  
  console.log(jsonstr); 
</script>

4. space 的用法

常见用法是添加制表符，使代码更可读："\t"

示例stringify07-space.html

stringify07-space.gif

示例stringify07代码：

<script type="text/javascript">
  
  var obj = {
    a:1,
    b:2,
    c:3,
    d:4
  };
  console.log(obj);

  // var jsonstr = JSON.stringify(obj,["c","b","a"]);
  var jsonstr = JSON.stringify(obj,["c","b","a"],"\t");
  
  console.log(jsonstr); 
</script>