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>

输出：

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>