JavaScript 什么是JSON数组
JSON数组和JavaScript数组几乎相同。JSON数组可以存储字符串、数组、布尔值、数字、对象或null类型的值。在JSON数组中,值之间用逗号分隔。可以使用[]操作符访问数组元素。
JSON数组有不同的类型。让我们通过示例来理解它们。
字符串类型的JSON数组: JSON数组只包含字符串元素。例如,下面的数组有6个字符串元素: “Ram”、”Shyam”、”Radhika”、”Akshay”、”Prashant”和”Varun”,每个元素之间用逗号分隔。
["Ram", "Shyam", "Radhika", "Akshay", "Prashant", "Varun"]
示例: 在这里,我们将一个字符串的JSON数组分配给jsonStringArray对象中的students键。然后我们使用[ ]运算符访问数组的第一个元素。
HTML
<!DOCTYPE html>
<html>
<body>
<p id="para"></p>
<script>
var jsonStringArray = {
// Assigned a JSON array of strings
// to the key "students".
"students": ["Ram", "Shyam", "Radhika",
"Akshay", "Prashant", "Varun"],
};
// It returned an array. Then we accessed
// the first index of the array
// (which is "Ram") using [] syntax.
var x = jsonStringArray.students[0];
// Set the inner HTML of "para" paragraph
// to the value of variable "x".
document.getElementById("para").innerHTML = x;
</script>
</body>
</html>
输出:
Ram
数字的JSON数组:
JSON的数字数组只包含数字元素。例如,下面的数组有5个元素,分别是23、44、76、34、98。
[23, 44, 76, 34, 98]
示例: 在这里,我们将一个JSON数字数组分配给jsonNumberArray对象中的关键字marks。然后,我们使用[ ]运算符访问数组的第一个元素。
HTML
<!DOCTYPE html>
<html>
<body>
<p id="para"></p>
<script>
var jsonNumberArray = {
// Assigned a JSON array of numbers
// to the key "marks".
"marks": [23, 44, 76, 34, 98],
};
// It returned an number array.
// Then we accessed the first
// index of the array
// (which is 23) using [] syntax.
var x = jsonNumberArray.marks[0];
// Set the inner HTML of "para" paragraph
// to the value of variable "x".
document.getElementById("para").innerHTML = x;
</script>
</body>
</html>
输出:
23
JSON布尔值数组:
JSON布尔值数组只包含布尔元素(true或false)。例如,下面的数组中有5个元素,每个元素都是true或false。
[true, true, true, false, false, true]
示例: 在这里,我们将一个包含布尔值的JSON数组分配给jsonBooleanArray对象中的键boolean。然后,我们使用[ ]运算符访问数组的第一个元素。
HTML
<!DOCTYPE html>
<html>
<body>
<p id="para"></p>
<script>
var jsonBooleanArray = {
// Assigned a JSON array of boolean
// to the key "booleans".
"booleans": [true, true, true, false, false, true],
};
// Here we accessed the booleans property
// of jsonBooleanArray Object.
// It returned an boolean array. Then we accessed the
// first index of the array
// (which is true) using [] syntax.
var x = jsonBooleanArray.booleans[0];
// Set the inner HTML of "para" paragraph
// to the value of variable "x".
document.getElementById("para").innerHTML = x;
</script>
</body>
</html>
输出:
true
JSON对象数组: JSON对象与JavaScript对象相同。我们还可以创建一个包含多个JSON对象的JSON数组,然后可以迭代该数组或使用 [ ] 获取所需的对象。在下面的示例中,有三个JSON对象在关键字“books”中分配的数组中。每个对象都有“name”和“author”属性。
{
"books":[
{"name":"Let Us C", "author":"Yashavant Kanetkar"},
{"name":"Rich Dad Poor Dad", "author":"Robert Kiyosaki "},
{"name":"Introduction to Algorithms", "author":"Cormen"},
]
}
示例: 在这里,我们将一个JSON对象数组分配给jsonObjectArray对象中的key books。然后,我们使用[]运算符访问数组的第一个元素。
HTML
<!DOCTYPE html>
<html>
<body>
<p id="para"></p>
<script>
var jsonObjectArray = {
// Assigned a JSON array of objects
// to the key "books"
"books": [
{
"name": "Let Us C",
"author": "Yashavant Kanetkar"
},
{
"name": "Rich Dad Poor Dad",
"author": "Robert Kiyosaki "
},
{
"name": "Introduction to Algorithms",
"author": "Cormen"
},
]
};
// Here we accessed the books property of
// jsonObjectArray Object.
// It returned an object array. Then we
// accessed the first index of the array
// (which is an JSON object) using [] syntax
var x = jsonObjectArray.books[0];
// Set the inner HTML of "para" paragraph
// to the value of variable "x".
document.getElementById("para").innerHTML
= x.name + " by " + x.author;
</script>
</body>
</html>
输出结果:
Let Us C by Yashavant Kanetkar
5. JSON数组的数组或JSON多维数组: 也可以创建一个包含其他数组作为元素的JSON数组。在下面的示例中,我们有一个包含数组的JSON数组,[“a”, “b”, “c”] ,[“d”, “e”, “f”] ,[“g”, “h”, “i”] 。我们可以使用[ ]运算符来获取任何索引处的数组,并再次使用[ ]运算符来获取所选数组的元素。
{
"matrix": [
[ "a", "b", "c" ],
[ "d", "e", "f" ],
[ "g", "h", "i" ]
],
};
示例: 这里我们将一个JSON数组赋值给jsonMultiArray对象中的key matrix。然后我们使用[ ]运算符访问数组的第一个元素。
HTML
<!DOCTYPE html>
<html>
<body>
<p id="para"></p>
<script>
var jsonMultiArray = {
// Assigned a JSON array of
// Arrays to the key "matrix".
"matrix": [
["a", "b", "c"],
["d", "e", "f"],
["g", "h", "i"]
],
};
// Here we accessed the matrix property
// of jsonMultiArray Object.
// It returned an matrix(2D array). Then we
// accessed the first element of
// the first index of matrix using [] syntax.
var x = jsonMultiArray.matrix[0][0];
// Set the inner HTML of "para" paragraph
// to the value of variable "x".
document.getElementById("para").innerHTML = x;
</script>
</body>
</html>
输出:
a