视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
js中json字符串和json对象互相转化的方法实现
2020-11-27 19:33:22 责编:小采
文档


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

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

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

例:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// 创建一个示例数据
var session = {
 'screens' : [],
 'state' : 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('session', JSON.stringify(session));
 
// 然后是如何转换通过 JSON.stringify 生成的字符串,该字符串以 JSON 格式保存在 localStorage 里
var restoredSession = JSON.parse(localStorage.getItem('session'));
 
// 现在 restoredSession 包含了保存在 localStorage 里的对象
console.log(restoredSession);

四、对于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});
 // => '{"Hello":123}'
 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>

下载本文
显示全文
专题