JSON 对象

在JavaScript中,几乎所有的对象都是Object类型的实例,它们都会从Object.prototype继承属性和方法。Object 构造函数为给定值创建一个对象包装器。Object构造函数,会根据给定的参数创建对象,具体有以下情况:

  • 如果给定值是 null 或 undefined,将会创建并返回一个空对象
  • 如果传进去的是一个基本类型的值,则会构造其包装类型的对象
  • 如果传进去的是引用类型的值,仍然会返回这个值,经他们复制的变量保有和源对象相同的引用地址

当以非构造函数形式被调用时,Object 的行为等同于 new Object()。


对象语法

  1. { "name":"埃隆 马斯克", "age":50, "car":"保时捷 }

JSON 对象被花括号 {} 包围。

JSON 对象以键/值对书写。

键必须是字符串,值必须是有效的 JSON 数据类型(字符串、数字、对象、数组、布尔或 null)。

键和值由冒号分隔。

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


访问对象值

您可以通过使用点号(.)来访问对象值:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>JSON 对象</h1>
  5. <p>使用点号表示法访问 JSON 对象:</p>
  6. <p id="demo">
  7. <script>
  8. var myObj, x;
  9. myObj = { "name":"埃隆 马斯克", "age":50, "car":"保时捷 };
  10. x = myObj.name;
  11. document.getElementById("demo").innerHTML = x;
  12. </script>
  13. </body>
  14. </html>

您也可以使用方括号([])来访问对象值:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>JSON 对象</h1>
  5. <p>使用括号表示法访问 JSON 对象:</p>
  6. <p id="demo">
  7. <script>
  8. var myObj, x;
  9. myObj = { "name":"埃隆 马斯克", "age":50, "car":"保时捷 };
  10. x = myObj["name"];
  11. document.getElementById("demo").innerHTML = x;
  12. </script>
  13. </body>
  14. </html>

遍历对象

您能够通过使用 for-in 遍历对象属性:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>JSON 对象</h1>
  5. <p>如何遍历 JSON 对象中的所有属性。</p>
  6. <p id="demo">
  7. <script>
  8. var myObj, x;
  9. myObj = { "name":"埃隆 马斯克", "age":50, "car":"保时捷 };
  10. for (x in myObj) {
  11. document.getElementById("demo").innerHTML += x + "<br>";
  12. }
  13. </script>
  14. </body>
  15. </html>

在 for-in 循环中,请使用括号标记法来访问属性值:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>JSON 对象</h1>
  5. <p>使用括号表示法访问属性值。</p>
  6. <p id="demo">
  7. <script>
  8. var myObj, x;
  9. myObj = { "name":"埃隆 马斯克", "age":50, "car":"保时捷 };
  10. for (x in myObj) {
  11. document.getElementById("demo").innerHTML += myObj[x] + "<br>";
  12. }
  13. </script>
  14. </body>
  15. </html>

嵌套的 JSON 对象

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

  1. myObj = {
  2. "name":"埃隆 马斯克",
  3. "age":50,
  4. "cars": {
  5. "car1":"保时捷",
  6. "car2":"玛莎拉蒂",
  7. "car3":"兰博基尼"
  8. }
  9. }

您能够通过使用点号和括号访问嵌套的 JSON 对象:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>JSON 对象</h1>
  5. <p>如何访问嵌套的 JSON 对象。</p>
  6. <p id="demo">
  7. <script>
  8. var myObj = {
  9. "name":"埃隆 马斯克",
  10. "age":50,
  11. "cars": {
  12. "car1":"保时捷",
  13. "car2":"玛莎拉蒂",
  14. "car3":"兰博基尼"
  15. }
  16. }
  17. document.getElementById("demo").innerHTML += myObj.cars.car2 + "<br>";
  18. //or:
  19. document.getElementById("demo").innerHTML += myObj.cars["car2"];
  20. </script>
  21. </body>
  22. </html>

修改值

您能够使用点号来修改 JSON 对象中的任何值:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>JSON 对象</h1>
  5. <p>如何修改 JSON 对象中的值。</p>
  6. <p id="demo">
  7. <script>
  8. var myObj, i, x = "";
  9. myObj = {
  10. "name":"埃隆 马斯克",
  11. "age":50,
  12. "cars": {
  13. "car1":"保时捷",
  14. "car2":"玛莎拉蒂",
  15. "car3":"兰博基尼"
  16. }
  17. }
  18. myObj.cars.car2 = "梅赛德斯奔驰";
  19. for (i in myObj.cars) {
  20. x += myObj.cars[i] + "<br>";
  21. }
  22. document.getElementById("demo").innerHTML = x;
  23. </script>
  24. </body>
  25. </html>

您也可以使用括号来修改 JSON 对象中的值:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>JSON 对象</h1>
  5. <p>如何使用括号表示法修改 JSON 对象中的值。</p>
  6. <p id="demo">
  7. <script>
  8. var myObj, i, x = "";
  9. myObj = {
  10. "name":"埃隆 马斯克",
  11. "age":50,
  12. "cars": {
  13. "car1":"保时捷",
  14. "car2":"玛莎拉蒂",
  15. "car3":"兰博基尼"
  16. }
  17. }
  18. myObj.cars["car2"] = "梅赛德斯奔驰";
  19. for (i in myObj.cars) {
  20. x += myObj.cars[i] + "<br>";
  21. }
  22. document.getElementById("demo").innerHTML = x;
  23. </script>
  24. </body>
  25. </html>

删除对象属性

使用 delete 关键词来删除 JSON 对象的属性:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>JSON 对象</h1>
  5. <p>如何删除 JSON 对象的属性。</p>
  6. <p id="demo">
  7. <script>
  8. var myObj, i, x = "";
  9. myObj = {
  10. "name":"埃隆 马斯克",
  11. "age":50,
  12. "cars": {
  13. "car1":"保时捷",
  14. "car2":"玛莎拉蒂",
  15. "car3":"兰博基尼"
  16. }
  17. }
  18. delete myObj.cars.car3;
  19. for (i in myObj.cars) {
  20. x += myObj.cars[i] + "<br>";
  21. }
  22. document.getElementById("demo").innerHTML = x;
  23. </script>
  24. </body>
  25. </html>