自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

一篇文章帶你了解 JavaScript json 數(shù)組

開(kāi)發(fā) 前端
簡(jiǎn)單說(shuō),所謂對(duì)象,就是一種無(wú)序的數(shù)據(jù)集合,由若干個(gè)“鍵值對(duì)”(key-value)構(gòu)成。

簡(jiǎn)單說(shuō),所謂對(duì)象,就是一種無(wú)序的數(shù)據(jù)集合,由若干個(gè)“鍵值對(duì)”(key-value)構(gòu)成。

一、數(shù)組作為JSON對(duì)象

[ "Ford", "BMW", "Fiat" ]

在JSON中的數(shù)組,幾乎和在JavaScript中數(shù)組相同。

在JSON中,數(shù)組的值必須是字符串,數(shù)字、對(duì)象、數(shù)組、布爾值或空.

JavaScript中,數(shù)組的值可以是以上所有,再加上其他任何有效的JavaScript表達(dá)式,包括函數(shù)、日期、和undefined。

二、JSON對(duì)象中的數(shù)組

數(shù)組可以是對(duì)象屬性的值:

{
"name":"John",
"age":30,
"cars":[ "Ford", "BMW", "Fiat" ]
}

1. 訪問(wèn)數(shù)組的值

使用索引號(hào)訪問(wèn)數(shù)組值:

x = myObj.cars[0];

完整代碼:

<!DOCTYPE html>
<html lang="en">


    <head>
        <meta charset="UTF-8">
        <title>項(xiàng)目</title>
    </head>


    <body style="background-color: aqua;">


        <p id="demo"></p>


        <script>
            myObj = {
                "name": "John",
                "age": 30,
                "cars": ["Ford", "BMW", "Fiat"]
            }
            x = myObj.cars[0];
            document.getElementById("demo").innerHTML = x;
</script>


    </body>


</html>

2. 遍歷數(shù)組

你可以使用for-in循環(huán)遍歷數(shù)組:

for (i in myObj.cars) {
    x += myObj.cars[i];
}

或者可以使用for循環(huán):

for (i = 0; i < myObj.cars.length; i++) {
    x += myObj.cars[i];
}

圖片

三、JSON對(duì)象中的嵌套數(shù)組

數(shù)組值也可以是另一個(gè)數(shù)組,甚至另一個(gè)JSON對(duì)象:

myObj = {
    "name":"John",
    "age":30,
    "cars": [
        { "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
        { "name":"BMW", "models":[ "320", "X3", "X5" ] },
        { "name":"Fiat", "models":[ "500", "Panda" ] }
    ]
 }

訪問(wèn)數(shù)組內(nèi)部的數(shù)組, 使用for-in loop循環(huán):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>項(xiàng)目</title>
</head>
<body style="background-color: aqua;">


  <p>Looping through arrays inside arrays.</p>


  <p id="demo"></p>
  <script>


    var myObj, i, j, x = "";
    myObj = {
        "name":"John",
        "age":30,
        "cars": [
            { "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
            { "name":"BMW", "models":[ "320", "X3", "X5" ] },
            { "name":"Fiat", "models":[ "500", "Panda" ] }
        ]
    }
/*訪問(wèn)數(shù)組內(nèi)部的數(shù)組, 使用for-in loop循環(huán)*/
    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] + "<br>";
        }
    }


    document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

1. 修改數(shù)組值

使用索引號(hào)修改數(shù)組:

myObj.cars[1] = "Mercedes";
完整代碼:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>項(xiàng)目</title>
</head>
<body>


  <p id="demo"></p>


<script>


    var myObj, i, x = "";
    myObj = {
        "name":"John",
        "age":30,
        "cars":[ "Ford", "BMW", "Fiat" ]
    };
    myObj.cars[1] = "Mercedes";


    for (i in myObj.cars) {
        x += myObj.cars[i] + "<br>";
    }


    document.getElementById("demo").innerHTML = x;
</script>




</body>
</html>

圖片

2. 刪除數(shù)組中的項(xiàng)目

使用delete關(guān)鍵字從數(shù)組中刪除:

delete myObj.cars[1];

圖片

四、總結(jié)

本文基于JavaScript基礎(chǔ),講解了JSON數(shù)組中,如何以數(shù)組作為JSON的對(duì)象 ,對(duì)象中如何去嵌套數(shù)組,常見(jiàn)的修改,刪除數(shù)組,都做了詳細(xì)的講解。

希望大家可以根據(jù)文章的內(nèi)容,積極嘗試,有時(shí)候看到別人實(shí)現(xiàn)起來(lái)很簡(jiǎn)單。但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候,總會(huì)有各種各樣的問(wèn)題,切勿眼高手低,勤動(dòng)手,才可以理解的更加深刻。

代碼很簡(jiǎn)單,希望能夠幫助你。

責(zé)任編輯:華軒 來(lái)源: 前端進(jìn)階學(xué)習(xí)交流
相關(guān)推薦

2021-01-08 09:03:01

JavaScript 數(shù)組數(shù)據(jù)

2023-07-25 16:06:57

JavaScript對(duì)象

2020-10-22 09:08:34

JavaScript

2020-10-27 10:05:32

JavaScript 數(shù)組迭代

2023-09-01 16:32:36

JavaScript

2020-11-10 10:48:10

JavaScript屬性對(duì)象

2021-01-29 18:41:16

JavaScript函數(shù)語(yǔ)法

2021-02-02 18:39:05

JavaScript

2021-06-04 09:56:01

JavaScript 前端switch

2023-07-30 15:18:54

JavaScript屬性

2021-01-26 23:46:32

JavaScript數(shù)據(jù)結(jié)構(gòu)前端

2021-03-09 14:04:01

JavaScriptCookie數(shù)據(jù)

2021-06-24 09:05:08

JavaScript日期前端

2023-09-06 14:57:46

JavaScript編程語(yǔ)言

2024-01-30 13:47:45

2024-04-19 14:23:52

SwitchJavaScript開(kāi)發(fā)

2021-03-05 18:04:15

JavaScript循環(huán)代碼

2021-05-18 08:30:42

JavaScript 前端JavaScript時(shí)

2023-08-27 15:18:17

JavaScriptRegExp

2024-07-02 14:14:18

點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)