一篇文章帶你了解 JavaScript json 對(duì)象
作者：前端進(jìn)階者
今天我們一起來帶你你了解一下JavaScript json 對(duì)象都有哪些吧。
一、對(duì)象的語法
JSON 對(duì)象被大括號(hào)環(huán)繞 {}，JSON 對(duì)象被寫成key/value。
{ "name":"John", "age":30, "car":null }key必須是字符串，并且value必須是一個(gè)有效的JSON數(shù)據(jù)類型（字符串、數(shù)字、對(duì)象、數(shù)組、布爾值或空），Keys 和 values 由冒號(hào)分隔，每個(gè)key/value對(duì)被逗號(hào)分隔。
二、訪問對(duì)象的值
可以使用點(diǎn)（.）訪問對(duì)象值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項(xiàng)目</title>
</head>
<body style="background-color: aqua;">
<p>Access a JSON object using dot notation:</p>
<p id="demo"></p>
<script>
var myObj, x;
myObj = {
"name": "John",
"age": 30,
"car": null
};
x = myObj.name;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>還可以使用方括號(hào)（[]）訪問對(duì)象值:
<script>
var myObj, x;
myObj = {
"name": "John",
"age": 30,
"car": null
};
x = myObj["name"];
document.getElementById("demo").innerHTML = x;
</script>
三、循環(huán)一個(gè)對(duì)象
可以使用for-in循環(huán)，遍歷一個(gè)對(duì)象。
<script>
var myObj = {
"name": "John",
"age": 30,
"car": null
};
for (x in myObj) {
document.getElementById("demo").innerHTML += x + "<br>";
}
</script>
使用括號(hào)表示法訪問屬性值:
<script>
var myObj, x;
myObj = {
"name": "John",
"age": 30,
"car": null
};
x = myObj["name"];
document.getElementById("demo").innerHTML = x;
</script>四、嵌套的 JSON 對(duì)象
JSON的值可以是另外一個(gè)JSON對(duì)象。
myObj = {
"name":"John",
"age":30,
"cars": {
"car1":"Ford",
"car2":"BMW",
"car3":"Fiat"
}
}您可以訪問嵌套的JSON對(duì)象使用點(diǎn)符號(hào)或括號(hào):
x = myObj.cars.car2;
//or:
x = myObj.cars["car2"];
1. 修改值
你可以使用點(diǎn)表示法修改JSON對(duì)象的任何值:
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] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
你也可以使用方括號(hào)來修改一個(gè)JSON對(duì)象值:
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] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
2. 刪除對(duì)象的屬性
使用delete關(guān)鍵字從JSON對(duì)象刪除一個(gè)屬性:
delete myObj.cars.car2;完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項(xiàng)目</title>
</head>
<body style="background-color: aqua;">
<p>How to delete properties of a JSON object.</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
"name": "John",
"age": 30,
"cars": {
"car1": "Ford",
"car2": "BMW",
"car3": "Fiat"
}
}
delete myObj.cars.car2; //通過語句刪除內(nèi)容。
for (i in myObj.cars) {
x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
五、總結(jié)
本文基于JavaScript基礎(chǔ)，介紹了json 對(duì)象中，語法的使用，如何去訪問對(duì)中的值，如何去循環(huán)對(duì)象。如何去嵌套JSON 對(duì)象。對(duì)象中如何去嵌套數(shù)組，常見的修改，刪除數(shù)組，都做了詳細(xì)的講解。
通過豐富的案例分析，效果圖的展示，能夠幫助你更好的理解。
責(zé)任編輯：華軒
來源：
前端進(jìn)階學(xué)習(xí)交流
