JSON Object 对象文字

最新推荐文章于 2024-04-19 16:56:28 发布

Circle_Key

最新推荐文章于 2024-04-19 16:56:28 发布

阅读量141

点赞数

CC 4.0 BY-SA版权

文章标签： json javascript html

本文链接：https://blog.youkuaiyun.com/Circle_Key/article/details/130424664

本文介绍了JSON字符串如何表示对象字面量，以及如何通过JSON.parse()方法将其转化为JavaScript对象。同时，讨论了访问和遍历JavaScript对象的两种方式——点表示法和方括号表示法，以及使用for-in循环遍历对象属性的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是一个 JSON 字符串：

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

在 JSON 字符串中有一个 JSON 对象字面量：

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

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

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

键和值由冒号分隔。

键必须是字符串，值必须是有效的 JSON 数据类型：

string
number
object
array
boolean
null

每个键/值对由逗号分隔。

注意

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

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

当数据为字符串格式时，数据仅为 JSON。当它被转换为 JavaScript 变量时，它就变成了 JavaScript 对象。

JavaScript Objects 对象

从 JSON 对象字面量创建 JavaScript 对象：

<!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 对象：

<!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>

访问对象值

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

<!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>

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

<!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 循环遍历对象属性：

<!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 循环中，使用括号表示法访问属性值：

<!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>

参考地址:JSON Literals