JSON 文字


目录

    显示目录


这是一个 JSON 字符串:

'{"name":"John", "age":30, "car":null}'

JSON 字符串内部有一个 JSON 对象文字:

{"name":"John", "age":30, "car":null}

JSON 对象文字由大括号 {} 包围。

JSON 对象文字包含键/值对。

键和值由冒号分隔。

键必须是字符串, 并且值必须是有效的 JSON 数据类型:

  • 字符串
  • 数量
  • 对象
  • 数组
  • 布尔值

每个键/值对都用逗号分隔。

将 JSON 对象文字称为“JSON 对象”是一个常见的错误。

JSON 不能是对象。 JSON 是一种字符串格式。

当数据是字符串格式时,数据只是 JSON。 当它转换为 JavaScript 变量时,它就变成了 JavaScript 对象。


JavaScript 对象

您可以从 JSON 对象文字创建 JavaScript 对象:

例子

myObj = {"name":"John", "age":30, "car":null};

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Creating an Object from a JSON Literal</h2>
<p id="demo"></p>

<script>
const myObj = {"name":"John", "age":30, "car":null};
document.getElementById("demo").innerHTML = myObj.name;
</script>

</body>
</html>

通常,您通过解析 JSON 字符串来创建 JavaScript 对象:

例子

myJSON = '{"name":"John", "age":30, "car":null}';
myObj = JSON.parse(myJSON);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Creating an Object Parsing JSON</h2>
<p id="demo"></p>

<script>
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
</script>

</body>
</html>

访问对象值

您可以使用点 (.) 表示法访问对象值:

例子

const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
  x = myObj.name;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Access a JavaScript Object</h2>
<p id="demo"></p>

<script>
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
</script>

</body>
</html>

您还可以使用方括号 ([]) 表示法访问对象值:

例子

const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
  x = myObj["name"];

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Access a JavaScript Object</h2>
<p id="demo"></p>

<script>
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj["name"];
</script>

</body>
</html>


循环对象

您可以使用 for-in 循环遍历对象属性:

例子

const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);

let text = "";
for (const x in myObj) {
  text += x + ", ";
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Looping Object Properties</h2>
<p id="demo"></p>

<script>
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);

let text = "";
for (const x in myObj) {
  text += x + ", ";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

在 for-in 循环中,使用方括号表示法来访问属性 values

例子

const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);

let text = "";
for (const x in myObj) {
  text += myObj[x] + ", ";
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Looping JavaScript Object Values</h2>
<p id="demo"></p>

<script>
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);

let text = "";
for (const x in myObj) {
  text += myObj[x] + ", ";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>