JSON 对象
JavaScript基础 2022-04-25 01:54:11小码哥的IT人生shichen
JSON 对象
对象语法
示例代码：
{ "name":"Bill Gates", "age":62, "car":null }
JSON 对象被花括号 {} 包围。
JSON 对象以键/值对书写。
键必须是字符串，值必须是有效的 JSON 数据类型（字符串、数字、对象、数组、布尔或 null）。
键和值由冒号分隔。
每个键/值对由逗号分隔。
访问对象值
您可以通过使用点号（.）来访问对象值：
示例代码：
myObj = { "name":"Bill Gates", "age":62, "car":null };
x = myObj.name;
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>使用点号表示法访问 JSON 对象：</p>
<p id="demo"></p>
<script>
var myObj, x;
myObj = {"name":"Bill Gates", "age":62, "car":null};
x = myObj.name;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
运行结果：
JSON 对象 使用点号表示法访问 JSON 对象： Bill Gates
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
您也可以使用方括号（[]）来访问对象值：
示例代码：
myObj = { "name":"Bill Gates", "age":62, "car":null };
x = myObj["name"];
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>使用括号表示法访问 JSON 对象：</p>
<p id="demo"></p>
<script>
var myObj, x;
myObj = {"name":"Bill Gates", "age":62, "car":null};
x = myObj["name"];
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
运行结果：
JSON 对象 使用括号表示法访问 JSON 对象： Bill Gates
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
遍历对象
您能够通过使用 for-in 遍历对象属性：
示例代码：
myObj = { "name":"Bill Gates", "age":62, "car":null };
for (x in myObj) {
document.getElementById("demo").innerHTML += x;
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>如何遍历 JSON 对象中的所有属性。</p>
<p id="demo"></p>
<script>
var myObj, x;
myObj = {"name":"Bill Gates", "age":62, "car":null};
for (x in myObj) {
document.getElementById("demo").innerHTML += x + "<br>";
}
</script>
</body>
</html>
运行结果：
JSON 对象 如何遍历 JSON 对象中的所有属性。 name age car
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
在 for-in 循环中，请使用括号标记法来访问属性值：
示例代码：
myObj = { "name":"Bill Gates", "age":62, "car":null };
for (x in myObj) {
document.getElementById("demo").innerHTML += myObj[x];
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>使用括号表示法访问属性值。</p>
<p id="demo"></p>
<script>
var myObj, x;
myObj = {"name":"Bill Gates", "age":62, "car":null};
for (x in myObj) {
document.getElementById("demo").innerHTML += myObj[x] + "<br>";
}
</script>
</body>
</html>
运行结果：
JSON 对象 使用括号表示法访问属性值。 Bill Gates 62 null
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
嵌套的 JSON 对象
一个 JSON 对象中的值可以是另一个 JSON 对象。
示例代码：
myObj = {
"name":"Bill Gates",
"age":62,
"cars": {
"car1":"Porsche",
"car2":"BMW",
"car3":"Volvo"
}
}
您能够通过使用点号和括号访问嵌套的 JSON 对象：
示例代码：
x = myObj.cars.car2;
//或者：
x = myObj.cars["car2"];
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>如何访问嵌套的 JSON 对象。</p>
<p id="demo"></p>
<script>
var myObj = {
"name":"Bill Gates",
"age":62,
"cars": {
"car1":"Porsche",
"car2":"BMW",
"car3":"Volvo"
}
}
document.getElementById("demo").innerHTML += myObj.cars.car2 + "<br>";
//or:
document.getElementById("demo").innerHTML += myObj.cars["car2"];
</script>
</body>
</html>
运行结果：
JSON 对象 如何访问嵌套的 JSON 对象。 BMW BMW
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
修改值
您能够使用点号来修改 JSON 对象中的任何值：
示例代码：
myObj.cars.car3 = "Mercedes Benz";
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>如何修改 JSON 对象中的值。</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
"name":"Bill Gates",
"age":62,
"cars": {
"car1":"Porsche",
"car2":"BMW",
"car3":"Volvo"
}
}
myObj.cars.car2 = "Mercedes Benz";
for (i in myObj.cars) {
x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
运行结果：
JSON 对象 如何修改 JSON 对象中的值。 Porsche Mercedes Benz Volvo
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
您也可以使用括号来修改 JSON 对象中的值：
示例代码：
myObj.cars["car3"] = "Mercedes Benz";
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>如何使用括号表示法修改 JSON 对象中的值。</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
"name":"Bill Gates",
"age":62,
"cars": {
"car1":"Porsche",
"car2":"BMW",
"car3":"Volvo"
}
}
myObj.cars["car2"] = "Mercedes Benz";
for (i in myObj.cars) {
x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
运行结果：
JSON 对象 如何使用括号表示法修改 JSON 对象中的值。 Porsche Mercedes Benz Volvo
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
删除对象属性
使用 delete 关键词来删除 JSON 对象的属性：
示例代码：
delete myObj.cars.car1;
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JSON 对象</h1>
<p>如何删除 JSON 对象的属性。</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
"name":"Bill Gates",
"age":62,
"cars": {
"car1":"Porsche",
"car2":"BMW",
"car3":"Volvo"
}
}
delete myObj.cars.car3;
for (i in myObj.cars) {
x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
运行结果：
JSON 对象 如何删除 JSON 对象的属性。 Porsche BMW
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
