JSON.parse()

目录

    显示目录

JSON 的常见用途是与 Web 服务器交换数据。

从 Web 服务器接收数据时，数据始终是字符串。

使用 JSON.parse() 解析数据，数据变成 JavaScript 对象。

示例 - 解析 JSON

想象一下我们从网络服务器收到了这样的文本：

'{"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>

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Creating an Object from a JSON String</h2>

<p id="demo"></p>

<script>
const txt = '{"name":"John", "age":30, "city":"New York"}'
const obj = JSON.parse(txt);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>

</body>
</html>

数组为 JSON

当对从数组派生的 JSON 使用 JSON.parse() 时，该方法将 返回 JavaScript 数组，而不是 JavaScript 对象。

例子

const text = '["Ford", "BMW", "Audi", "Fiat"]';
const myArr = JSON.parse(text);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Parsing a JSON Array.</h2>
<p>Data written as an JSON array will be parsed into a JavaScript array.</p>
<p id="demo"></p>

<script>
const text = '[ "Ford", "BMW", "Audi", "Fiat" ]';
const myArr = JSON.parse(text);
document.getElementById("demo").innerHTML = myArr[0];
</script>

</body>
</html>

例外情况

解析日期

JSON 中不允许使用日期对象。

如果需要包含日期，请将其写为字符串。

您可以稍后将其转换回日期对象：

例子

将字符串转换为日期：

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;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Convert a string into a date object.</h2>
<p id="demo"></p>

<script>
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; 
</script>

</body>
</html>

或者，您可以使用 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;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Convert a string into a date object.</h2>

<p id="demo"></p>

<script>
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; 
</script>

</body>
</html>

解析函数

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();

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Convert a string into a function.</h2>
<p id="demo"></p>

<script>
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(); 
</script>

</body>
</html>

你应该避免在 JSON 中使用函数，函数将失去它们的作用域， 并且您必须使用 eval() 将它们转换回函数。