JSON.parse()
JSON 的常见用途是与 Web 服务器交换数据。
从 Web 服务器接收数据时,数据始终是字符串。
使用 JSON.parse()
解析数据,数据将变成 JavaScript 对象。
示例 - 解析 JSON
假设我们从 Web 服务器收到以下文本
'{"name":"John", "age":30, "city":"New York"}'
使用 JavaScript 函数 JSON.parse()
将文本转换为 JavaScript 对象
const obj = JSON.parse('{"name":"John", "age":30, "city":"New York"}');
确保文本是 JSON 格式,否则会收到语法错误。
在您的页面中使用 JavaScript 对象
示例
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = obj.name;
</script>
自己动手试一试 »
JSON 数组
当对 JSON(派生自数组)使用 JSON.parse()
时,该方法将返回 JavaScript 数组,而不是 JavaScript 对象。
异常
解析日期
JSON 中不允许 Date 对象。
如果需要包含日期,请将其写为字符串。
您以后可以将其转换回 Date 对象
示例
将字符串转换为日期
const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
自己动手试一试 »
或者,您可以使用 JSON.parse()
函数的第二个参数,称为 reviver。
reviver 参数是一个函数,用于在返回值之前检查每个属性。
示例
使用 reviver 函数将字符串转换为日期
const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text, function (key, value) {
if (key == "birth") {
return new Date(value);
} else {
return value;
}
});
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
自己动手试一试 »
解析函数
JSON 中不允许函数。
如果需要包含函数,请将其写为字符串。
您以后可以将其转换回函数
示例
将字符串转换为函数
const text = '{"name":"John", "age":"function () {return 30;}", "city":"New York"}';
const obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age();
自己动手试一试 »
您应该避免在 JSON 中使用函数,因为函数会丢失其作用域,您必须使用 eval()
将它们转换回函数。