JavaScript-06 陣列

阿新 • • 發佈：2020-08-16

一、陣列

　　陣列：儲存一組資料

二、定義陣列的語法

　　1.var 陣列名=[]; 僅僅定義了一個數組。

　　2.var 陣列名=new Array(長度);定了陣列，並且設定了長度；

　　3. var 陣列名=[值1，值2，……，值n];//定義了陣列，有初始值，還有陣列長度。

三、JavaScript陣列的特點

　　1.陣列元素的資料型別可以不同。

　　2.陣列的長度可以隨時改。

四、獲取陣列的長度：陣列名.length;

例項：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>陣列物件</title>
    </head>

    <body>
    </body>

    <script type="text/javascript">
        // 
定義陣列
        var arr = ["張名川", '二愣子', "二嘎子", "瓜娃子", "寶批龍"];

        // 陣列的 長度:陣列名.length;
        var len = arr.length;
        //         alert(len);
        //獲取陣列中的元素值：陣列名[下標]
        // 注意：下標是從0 開始 
        var mz = arr[0];
        // alert( arr[0]);

        //遍歷陣列中的元素：for , for in

        for(var i = 0; i < arr.length; i++) {
            console.log(arr[i]);
        }

         
//注意：item  是下標
        for(var item in arr) {
            console.log(arr[item]);
        }

        /*JavaScript 陣列的特點
         * 1.陣列元素的 資料型別可以不相同
         * 2.陣列的長度可以隨時改  
         * 
         * */
        var temp = [12, 3.14159, "9527", "狗剩", true, {
            s: "xx"
        }];
        document.write(temp);
        document.write( 
"<br>");
        temp[10] = "新增元素";
        document.write(temp);

        var l = temp.length;
        alert(l);
        alert(temp[15]);
    </script>
</html>

五、陣列的常用方法

　　1.join()。把陣列的所有元素拼接為一個字串。以指定的分割符來分割元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        // 定義一個長度為3的陣列
        // 陣列下標從0開始
        var arr=new Array(3);
        arr[0]="123";
        arr[1]="456";
        arr[2]="789";
        document.write(arr.join());
        // 輸出結果 123,456,789
    </script>
</html>

　　2.sort()。對陣列的元素進行排序。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        // 定義一個數組
        var arr = [1,9,2,3,7,5,4,8];
        var arr1 = ["ab","fba","sc2","d3","vhf5"];
        // 對陣列的元素進行排序
        document.write(arr.sort());
        document.write("<br>");
        // 按abcd..排序，且按照第一個字元排序
        document.write(arr1.sort());
        // 輸出 1,2,3,4,5,7,8,9
        //     ab,d3,fba,sc2,vhf5
    </script>
</html>

　　3.concat()。連線兩個或更多的陣列，並返回結果。並沒有修改陣列，只是返回一個新的陣列。　

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        // 定義一個數組
        var arr = [1,9,2,3,7,5,4,8];
        var arr1 = ["ab","fba","sc2","d3","vhf5"];
        // 連線兩個或更多的陣列，並返回結果。並沒有修改陣列，只是返回一個新的陣列
        var temp = arr.concat(arr1);
        document.write(temp);
        // 輸出結果：1,9,2,3,7,5,4,8,ab,fba,sc2,d3,vhf5

    </script>
</html>

　　4.slice(開始下標位置,結束下標位置)。擷取陣列，，返回擷取的陣列，原陣列不變。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        // 定義一個數組
        var arr = [1,9,2,3,7,5,4,8];
        // 返回陣列下標為1到4的字元，[1,4),包括1，不包括4.
        document.write(arr.slice(1,4));
        // 輸出結果：9,2,3

    </script>
</html>

　　5. toString()。將陣列物件轉換成字串。

    <script type="text/javascript">
        // 定義一個數組
        var arr = [1,9,2,3,7,5,4,8];
        document.write(arr.toString());
        // 輸出結果：1,9,2,3,7,5,4,8
    </script>

　　6. reverse()。顛倒陣列中元素的順序。

    <script type="text/javascript">
        // 定義一個數組
        var arr = [1,9,2,3,7,5,4,8];
        // 顛倒陣列中元素的順序。
        document.write(arr.reverse());
        // 輸出結果：8,4,5,7,3,2,9,1
    </script>

　　7. splice()。刪除元素，並向陣列新增新的元素。

　　　　7.1陣列名.splice(開始下標，長度)===>刪除元素，並返回刪除的元素。

    <script type="text/javascript">
        // 定義一個數組
        var arr = [1,9,2,3,7,5,4,8];
        // 刪除陣列從0開，長度為2。對於上面的陣列來說就是刪除1和9
        document.write(arr.splice(0,2)); // 返回1,9
        document.write("<br>");
        document.write(arr);// 2,3,7,5,4,8
        // 輸出結果：1,9
        //            2,3,7,5,4,8
    </script>

　　　　7.2陣列名.splice(開始下標，長度，新元素)===>替換

    <script type="text/javascript">
        // 定義一個數組
        var arr = [1,9,2,3,7,5,4,8];
        // 陣列名.splice(開始下標，長度，新元素)===>替換
        // 刪除陣列從0開，長度為2。對於上面的陣列來說就是刪除1和9，並替換
        document.write(arr.splice(0,2,8,8)); // 返回1,9，並用8,8替換1,9
        document.write("<br>");
        document.write(arr);// 返回新的陣列8,8,2,3,7,5,4,8
        // 輸出結果：1,9
        //            8,8,2,3,7,5,4,8
    </script>

　　　　7.3陣列名.splice(開始下標，0,新元素)===插入

    <script type="text/javascript">
        // 定義一個數組
        var arr = [1,9,2,3,7,5,4,8];
        // 陣列名.splice(開始下標，0,新元素)===插入
        // 在下標為1之前插入一個10的元素
        arr.splice(1,0,10); 
        document.write(arr);
        // 輸出結果：1,10,9,2,3,7,5,4,8
    </script>

　　8. push()。向陣列的末尾新增一個或更多的元素，並返回新長度。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        // 定義一個數組，長度為8
        var arr = [1,9,2,3,7,5,4,8];
        // 向陣列的末尾新增一個或更多的元素，並返回新長度。
        document.write(arr.push(20)); // 返回arr.leng，長度變為9；
        document.write("<br>");
        document.write(arr);
        // 1,9,2,3,7,5,4,8,20
    </script>
</html>

　　9. pop()。刪除陣列末尾元素並返回陣列的最後一個元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        // 定義一個數組，長度為8
        var arr = [1,9,2,3,7,5,4,10];
        //刪除陣列末尾元素並返回陣列的最後一個元素。
        document.write(arr.pop()); //刪除10，並返回10
        document.write("<br>");
        document.write(arr);// 1,9,2,3,7,5,4
    </script>
</html>

　　10. unshift()。向陣列的開頭新增一個或更多的元素，並返回新的長度。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        // 定義一個數組，長度為8
        var arr = [1,9,2,3,7,5,4,8];
        // 向陣列的開頭新增一個或更多的元素，並返回新的長度。。
        document.write(arr.unshift(10)); // 返回arr.leng，長度變為9；
        document.write("<br>");
        document.write(arr);// 10,1,9,2,3,7,5,4,8
    </script>
</html>

　　11. shift()。刪除並返回陣列的第一個元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        // 定義一個數組，長度為8
        var arr = [1,9,2,3,7,5,4,8];
        // 刪除並返回陣列的第一個元素。
        document.write(arr.shift()); // 返回1
        document.write("<br>");
        document.write(arr);// 9,2,3,7,5,4,8
    </script>
</html>