JSON 数组
JavaScript基础 2022-04-25 01:54:14小码哥的IT人生shichen
JSON 数组
作为 JSON 对象的数组
示例代码：
[ "Porsche", "BMW", "Volvo" ]
JSON 中的数组几乎与 JavaScript 中的数组相同。
在 JSON 中，数组值的类型必须属于字符串、数字、对象、数组、布尔或 null。
在 JavaScript 中，数组值可以是以上所有类型，外加任何其他有效的 JavaScript 表达式，包括函数、日期和 undefined。
JSON 对象中的数组
数组可以是对象属性的值：
示例代码：
{
"name":"Bill Gates",
"age":62,
"cars":[ "Porsche", "BMW", "Volvo" ]
}访问数组值
您可以通过使用索引号来访问数组值：
示例代码：
x = myObj.cars[0];
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JSON 数组</h1>
<p>访问 JSON 对象的数组值。</p>
<p id="demo"></p>
<script>
var myObj, x;
myObj = {
"name":"Bill Gates",
"age":62,
"cars":[ "Porsche", "BMW", "Volvo" ]
};
x = myObj.cars[0];
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
运行结果：
JSON 数组 访问 JSON 对象的数组值。 Porsche
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
遍历数组
您可以通过使用 for-in 循环来访问数组值：
示例代码：
for (i in myObj.cars) {
x += myObj.cars[i];
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JSON 数组</h1>
<p>使用 for in 循环遍历数组</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
"name":"Bill Gates",
"age":62,
"cars":[ "Porsche", "BMW", "Volvo" ]
};
for (i in myObj.cars) {
x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
运行结果：
JSON 数组 使用 for in 循环遍历数组 Porsche BMW Volvo
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
或者您可以使用 for 循环：
示例代码：
for (i = 0; i < myObj.cars.length; i++) {
x += myObj.cars[i];
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JSON 数组</h1>
<p>使用 for 循环遍历数组</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
"name":"Bill Gates",
"age":62,
"cars":[ "Porsche", "BMW", "Volvo" ]
};
for (i = 0; i < myObj.cars.length; i++) {
x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
运行结果：
JSON 数组 使用 for 循环遍历数组 Porsche BMW Volvo
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JSON 对象中的嵌套数组
数组中的值也可以另一个数组，或者甚至另一个 JSON 对象：
示例代码：
myObj = {
"name":"Bill Gates",
"age":62,
"cars": [
{ "name":"Porsche", "models":[ "911", "Taycan" ] },
{ "name":"BMW", "models":[ "M5", "M3", "X5" ] },
{ "name":"Volvo", "models":[ "XC60", "V60" ] }
]
}
如需访问数组内部的数组，请对每个数组使用 for-in 循环：
示例代码：
for (i in myObj.cars) {
x += "<h1>" + myObj.cars[i].name + "</h1>";
for (j in myObj.cars[i].models) {
x += myObj.cars[i].models[j];
}
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JSON 数组</h1>
<p>遍历数组内的数组。</p>
<p id="demo"></p>
<script>
var myObj, i, j, x = "";
myObj = {
"name":"Bill Gates",
"age":62,
"cars": [
{"name":"Porsche", "models":["911", "Taycan"]},
{"name":"BMW", "models":["M5", "M3", "X5"]},
{"name":"Volvo", "models":["XC90", "V60"] }
]
}
for (i in myObj.cars) {
x += "<h2>" + myObj.cars[i].name + "</h2>";
for (j in myObj.cars[i].models) {
x += myObj.cars[i].models[j] + "<br>";
}
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
运行结果：
JSON 数组 遍历数组内的数组。 Porsche 911 Taycan BMW M5 M3 X5 Volvo XC90 V60
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
修改数组值
请使用索引号来修改数组：
示例代码：
myObj.cars[1] = "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": ["Porsche","BMW","Volvo"]
}
myObj.cars[2] = "Mercedes Benz";
for (i in myObj.cars) {
x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
运行结果：
JSON 数组 如何修改 JSON 对象的数组值。 Porsche BMW Mercedes Benz
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
删除数组项目
请使用 delete 关键词来删除数组中的项目：
示例代码：
delete myObj.cars[1];
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JSON 数组</h1>
<p>如何删除数组的属性。</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
"name":"Bill Gates",
"age":62,
"cars": ["Porsche","BMW","Volvo"]
}
delete myObj.cars[2];
for (i in myObj.cars) {
x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
运行结果：
JSON 数组 如何删除数组的属性。 Porsche BMW
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
