js中json字符串与json对象的相互转换
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>
版权声明：本文为bodom-zhao原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。