js中json字符串和json对象互相转化的方法实现-tutorial js-php.cn

js中json字符串和json对象互相转化的方法实现

不言

Lepaskan： 2018-07-20 14:53:14

asal

1755 orang telah melayarinya

在利用js开发的过程中，json字符串和json对象是需要相互转化的，那么json字符串转json对象以及json对象转化为json字符串究竟是如何实现的呢？接下来就给大家看一下具体的示例。

一、JSON字符串转换为JSON对象

var obj = JSON.parse(str[, reviver]);

例：

JSON.parse(&#39;{}&#39;);              // {}
JSON.parse(&#39;true&#39;);            // true
JSON.parse(&#39;"foo"&#39;);           // "foo"
JSON.parse(&#39;[1, 5, "false"]&#39;); // [1, 5, "false"]
JSON.parse(&#39;null&#39;);            // null
JSON.parse(&#39;1&#39;);               //  1

Salin selepas log masuk

reviver:如果是一个函数，则在被返回之前对原始值执行其方法后返回。

解析JSON字符串并返回对应的值，可以额外传入一个转换函数，用来将生成的值和其属性, 在返回之前进行某些修改。函数的参数k、v、分别代表返回的属性名和属性值

JSON.parse(&#39;{"p": 5}&#39;, function (k, v) {
    if(k === &#39;&#39;) return v;     // 如果到了最顶层，则直接返回属性值，
    return v * 2;              // 否则将属性值变为原来的 2 倍。
});                            // { p: 10 }
 
JSON.parse(&#39;{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}&#39;, function (k, v) {
    console.log(k); // 输出当前的属性名，从而得知遍历顺序是从内向外的，
                    // 最后一个属性名会是个空字符串。
    return v;       // 返回原始属性值，相当于没有传递 reviver 参数。
});
 
// 1
// 2
// 4
// 6
// 5
// 3
// ""

Salin selepas log masuk

二、将JSON对象转化为JSON字符串。

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

value将要序列化成一个JSON 字符串的值。

replacer 可选如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理。

space 可选指定缩进用的空白字符串，用于美化输出（pretty-print）；如果参数是个数字，它代表有多少的空格；上限为10。该值若小于1，则意味着没有空格；如果该参数为字符串(字符串的前十个字母)，该字符串将被作为空格；如果该参数没有提供（或者为null）将没有空格。例：

JSON.stringify({});                        // &#39;{}&#39;
JSON.stringify(true);                      // &#39;true&#39;
JSON.stringify("foo");                     // &#39;"foo"&#39;
JSON.stringify([1, "false", false]);       // &#39;[1,"false",false]&#39;
JSON.stringify({ x: 5 });                  // &#39;{"x":5}&#39;
 
JSON.stringify({x: 5, y: 6});             
// "{"x":5,"y":6}"
 
JSON.stringify([new Number(1), new String("false"), new Boolean(false)]);
// &#39;[1,"false",false]&#39;
 
JSON.stringify({x: undefined, y: Object, z: Symbol("")});
// &#39;{}&#39;
 
JSON.stringify([undefined, Object, Symbol("")]);         
// &#39;[null,null,null]&#39;
 
JSON.stringify({[Symbol("foo")]: "foo"});                
// &#39;{}&#39;
 
JSON.stringify({[Symbol.for("foo")]: "foo"}, [Symbol.for("foo")]);
// &#39;{}&#39;
 
JSON.stringify(
    {[Symbol.for("foo")]: "foo"},
    function (k, v) {
        if (typeof k === "symbol"){
            return "a symbol";
        }
    }
);
 
 
// undefined
 
// 不可枚举的属性默认会被忽略：
JSON.stringify(
    Object.create(
        null,
        {
            x: { value: &#39;x&#39;, enumerable: false },
            y: { value: &#39;y&#39;, enumerable: true }
        }
    )
);
 
// "{"y":"y"}"

Salin selepas log masuk

如果replacer是一个数组，数组的值代表将被序列化成JSON字符串的属性名。

JSON.stringify(foo, [&#39;week&#39;, &#39;month&#39;]); 
// &#39;{"week":45,"month":7}&#39;, 只保留“week”和“month”属性值。

Salin selepas log masuk

三、使用 JSON.stringify 结合 localStorage本地存储

一些时候，你想存储用户创建的一个对象，并且，即使在浏览器被关闭后仍能恢复该对象。下面的例子是 JSON.stringify 适用于这种情形的一个样板：

// 创建一个示例数据
var session = {
    &#39;screens&#39; : [],
    &#39;state&#39; : true
};
session.screens.push({"name":"screenA", "width":450, "height":250});
session.screens.push({"name":"screenB", "width":650, "height":350});
session.screens.push({"name":"screenC", "width":750, "height":120});
session.screens.push({"name":"screenD", "width":250, "height":60});
session.screens.push({"name":"screenE", "width":390, "height":120});
session.screens.push({"name":"screenF", "width":1240, "height":650});
 
// 使用 JSON.stringify 转换为 JSON 字符串
// 然后使用 localStorage 保存在 session 名称里
localStorage.setItem(&#39;session&#39;, JSON.stringify(session));
 
// 然后是如何转换通过 JSON.stringify 生成的字符串，该字符串以 JSON 格式保存在 localStorage 里
var restoredSession = JSON.parse(localStorage.getItem(&#39;session&#39;));
 
// 现在 restoredSession 包含了保存在 localStorage 里的对象
console.log(restoredSession);

Salin selepas log masuk

四、对于IE8以下旧版本的支持Polyfill

JSON对象可能不被老版本的浏览器支持。可以将下面的代码放到JS脚本最开始的位置，这样就可以在没有原生支持 JSON 对象的浏览器（如IE6）中使用 JSON对象。

以下算法是对原生JSON对象的模仿：

也可以引入JSON3.js的cdn

<script src="//cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
<script>
  JSON.stringify({"Hello": 123});
  // => &#39;{"Hello":123}&#39;
  JSON.parse("[[1, 2, 3], 1, 2, 3, 4]", function (key, value) {
    if (typeof value == "number") {
      value = value % 2 ? "Odd" : "Even";
    }
    return value;
  });
  // => [["Odd", "Even", "Odd"], "Odd", "Even", "Odd", "Even"]
</script>

Salin selepas log masuk