JSON 对象

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

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

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

对象语法

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

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

JSON 对象以键/值对书写。

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

键和值由冒号分隔。

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

访问对象值

您可以通过使用点号（.）来访问对象值：

<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>使用点号表示法访问 JSON 对象：</p>
<p id="demo">
<script>
var myObj, x;
myObj = { "name":"埃隆 马斯克", "age":50, "car":"保时捷 };
x = myObj.name;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

运行一下

您也可以使用方括号（[]）来访问对象值：

<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>使用括号表示法访问 JSON 对象：</p>
<p id="demo">
<script>
var myObj, x;
myObj = { "name":"埃隆 马斯克", "age":50, "car":"保时捷 };
x = myObj["name"];
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

运行一下

遍历对象

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

<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>如何遍历 JSON 对象中的所有属性。</p>
<p id="demo">
<script>
var myObj, x;
myObj = { "name":"埃隆 马斯克", "age":50, "car":"保时捷 };
for (x in myObj) {
  document.getElementById("demo").innerHTML += x + "<br>";
}
</script>
</body>
</html>

运行一下

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

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

运行一下

嵌套的 JSON 对象

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


myObj =  {
   "name":"埃隆 马斯克",
   "age":50,
   "cars": {
     "car1":"保时捷",
     "car2":"玛莎拉蒂",
     "car3":"兰博基尼"
   }
}

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

<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>如何访问嵌套的 JSON 对象。</p>
<p id="demo">
<script>
var myObj = {
  "name":"埃隆 马斯克",
  "age":50,
  "cars": {
     "car1":"保时捷",
     "car2":"玛莎拉蒂",
     "car3":"兰博基尼"
  }
}
document.getElementById("demo").innerHTML += myObj.cars.car2 + "<br>";
//or:
document.getElementById("demo").innerHTML += myObj.cars["car2"];
</script>
</body>
</html>

运行一下

修改值

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

<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>如何修改 JSON 对象中的值。</p>
<p id="demo">
<script>
var myObj, i, x = "";
myObj = {
  "name":"埃隆 马斯克",
  "age":50,
  "cars": {
     "car1":"保时捷",
     "car2":"玛莎拉蒂",
     "car3":"兰博基尼"
  }
}
myObj.cars.car2 = "梅赛德斯奔驰";
for (i in myObj.cars) {
  x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

运行一下

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

<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>如何使用括号表示法修改 JSON 对象中的值。</p>
<p id="demo">
<script>
var myObj, i, x = "";
myObj = {
  "name":"埃隆 马斯克",
  "age":50,
  "cars": {
     "car1":"保时捷",
     "car2":"玛莎拉蒂",
     "car3":"兰博基尼"
  }
}
myObj.cars["car2"] = "梅赛德斯奔驰";
for (i in myObj.cars) {
  x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

运行一下

删除对象属性

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

<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>如何删除 JSON 对象的属性。</p>
<p id="demo">
<script>
var myObj, i, x = "";
myObj = {
  "name":"埃隆 马斯克",
  "age":50,
  "cars": {
     "car1":"保时捷",
     "car2":"玛莎拉蒂",
     "car3":"兰博基尼"
  }
}
delete myObj.cars.car3;
for (i in myObj.cars) {
  x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

运行一下

JSON 对象

对象语法

访问对象值

遍历对象

嵌套的 JSON 对象

修改值

删除对象属性

分类导航