一篇文章帶你了解JavaScript json 對象
作者：前端進階者
本文基于JavaScript基礎，介紹了json 對象中，語法的使用，如何去訪問對中的值，如何去循環對象。如何去嵌套JSON 對象。對象中如何去嵌套數組，常見的修改，刪除數組，都做了詳細的講解。
一、對象的語法
JSON 對象被大括號環繞 {}，JSON 對象被寫成key/value。
- { "name":"John", "age":30, "car":null }
key必須是字符串，并且value必須是一個有效的JSON數據類型（字符串、數字、對象、數組、布爾值或空），Keys 和 values 由冒號分隔，每個key/value對被逗號分隔。
二、訪問對象的值
可以使用點（.）訪問對象值。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>項目</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>
還可以使用方括號（[]）訪問對象值:
- <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 + "<br>";
- }
- </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] + "<br>";
- }
- 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] + "<br>";
- }
- document.getElementById("demo").innerHTML = x;
- </script>
2. 刪除對象的屬性
使用delete關鍵字從JSON對象刪除一個屬性:
- delete myObj.cars.car2;
完整代碼：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>項目</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; //通過語句刪除內容。
- for (i in myObj.cars) {
- x += myObj.cars[i] + "<br>";
- }
- document.getElementById("demo").innerHTML = x;
- </script>
- </body>
- </html>
五、總結
本文基于JavaScript基礎，介紹了json 對象中，語法的使用，如何去訪問對中的值，如何去循環對象。如何去嵌套JSON 對象。對象中如何去嵌套數組，常見的修改，刪除數組，都做了詳細的講解。
通過豐富的案例分析，效果圖的展示，能夠幫助你更好的理解。
責任編輯：姜華
來源：
前端進階學習交流
