一篇文章帶你了解JavaScript json 對象

作者：前端進階者 2020-10-22 09:08:34

本文基于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 對象。對象中如何去嵌套數組，常見的修改，刪除數組，都做了詳細的講解。

通過豐富的案例分析，效果圖的展示，能夠幫助你更好的理解。

責任編輯：姜華來源：前端進階學習交流

JavaScript json