web前端开发过程中,数据传输json是以字符串的形式传递,而js操作的是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
对象的模仿:
if (!window.JSON) { window.JSON = { parse: function(sJSON) { return eval('(' + sJSON + ')'); }, stringify: (function () { var toString = Object.prototype.toString; var isArray = Array.isArray || function (a) { return toString.call(a) === '[object Array]'; }; var escMap = {'"': '\\"', '\\': '\\\\', '\b': '\\b', '\f': '\\f', '\n': '\\n', '\r': '\\r', '\t': '\\t'}; var escFunc = function (m) { return escMap[m] || '\\u' + (m.charCodeAt(0) + 0x10000).toString(16).substr(1); }; var escRE = /[\\"\u0000-\u001F\u2028\u2029]/g; return function stringify(value) { if (value == null) { return 'null'; } else if (typeof value === 'number') { return isFinite(value) ? value.toString() : 'null'; } else if (typeof value === 'boolean') { return value.toString(); } else if (typeof value === 'object') { if (typeof value.toJSON === 'function') { return stringify(value.toJSON()); } else if (isArray(value)) { var res = '['; for (var i = 0; i < value.length; i++) res += (i ? ', ' : '') + stringify(value[i]); return res + ']'; } else if (toString.call(value) === '[object Object]') { var tmp = []; for (var k in value) { if (value.hasOwnProperty(k)) tmp.push(stringify(k) + ': ' + stringify(value[k])); } return '{' + tmp.join(', ') + '}'; } } return '"' + value.toString().replace(escRE, escFunc) + '"'; }; })() }; }
也可以引入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>