您的位置：首页 >聚焦 >

一篇文章带你了解JavaScript json 对象

2022-04-20 20:48:03 来源：程序员客栈

点击上方“前端进阶学习交流”，进行关注

回复“前端”即可获赠前端相关学习资料

今

日

鸡

汤

将军角弓不得控，都护铁衣冷难着。一、对象的语法

JSON 对象被大括号环绕 {}，JSON 对象被写成key/value。

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

key必须是字符串，并且value必须是一个有效的JSON数据类型（字符串、数字、对象、数组、布尔值或空），Keys 和 values 由冒号分隔，每个key/value对被逗号分隔。

二、访问对象的值

可以使用点（.）访问对象值。

项目Access a JSON object using dot notation:
<script>var myObj, x;myObj = {"name": "John","age": 30,"car": null};x = myObj.name;document.getElementById("demo").innerHTML = x;</script>

还可以使用方括号（[]）访问对象值:

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

三、循环一个对象

可以使用for-in循环，遍历一个对象。

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

使用括号表示法访问属性值:

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

四、嵌套的 JSON 对象

JSON的值可以是另外一个JSON对象。

myObj = {"name":"John","age":30,"cars": {"car1":"Ford","car2":"BMW","car3":"Fiat"}}

您可以访问嵌套的JSON对象使用点符号或括号:

x = myObj.cars.car2;//or:x = myObj.cars["car2"];

1. 修改值

你可以使用点表示法修改JSON对象的任何值:

myObj.cars.car2 = "Mercedes";

js完整代码：

<script>var myObj, i, x = "";myObj = {"name":"John","age":30,"cars": {"car1":"Ford","car2":"BMW","car3":"Fiat"}}myObj.cars.car2 = "Mercedes";for (i in myObj.cars) {x += myObj.cars[i] + "
";}document.getElementById("demo").innerHTML = x;</script>

你也可以使用方括号来修改一个JSON对象值:

myObj.cars["car2"] = "Mercedes";

js完整代码：

<script>var myObj, i, x = "";myObj = {"name":"John","age":30,"cars": {"car1":"Ford","car2":"BMW","car3":"Fiat"}}myObj.cars["car2"] = "Mercedes";for (i in myObj.cars) {x += myObj.cars[i] + "
";}document.getElementById("demo").innerHTML = x;</script>

2. 删除对象的属性

使用delete关键字从JSON对象删除一个属性:

delete myObj.cars.car2;

完整代码：

项目How to delete properties of a JSON object.
<script>var myObj, i, x = "";myObj = {"name": "John","age": 30,"cars": {"car1": "Ford","car2": "BMW","car3": "Fiat"}}delete myObj.cars.car2; //通过语句删除内容。for (i in myObj.cars) {x += myObj.cars[i] + "
";}document.getElementById("demo").innerHTML = x;</script>

五、总结

本文基于JavaScript基础，介绍了json 对象中，语法的使用，如何去访问对中的值，如何去循环对象。如何去嵌套JSON 对象。对象中如何去嵌套数组，常见的修改，删除数组，都做了详细的讲解。

通过丰富的案例分析，效果图的展示，能够帮助你更好的理解。

代码很简单，希望能够帮助你。

-------------------End-------------------

往期精彩文章推荐：

一篇文章带你了解JavaScript作用域盘点JavaScript中数组遍历的全部方式（下篇）一篇文章带你了解JavaScript日期

欢迎大家点赞，留言，转发，转载，感谢大家的相伴与支持

想加入前端学习群请在后台回复【入群】

万水千山总是情，点个【在看】行不行

关键词：一篇文章带你了解可以使用