JS數組玩法說明

字號+ 編輯: Snake 修訂: IT男在阿里 來源: 慕课网 2023-09-08 我要說兩句(0)

數組是一個值的集合,每個值都有一個索引號,從0開始,每個索引都有一個相應的值,根據需要添加更多數值。

變量用來存儲數據,一個變量只能存儲一個内容。

假設你想存儲10個人的姓名或者存儲20個人的數學成績,就需要10個或20個變量來存儲,如果需要存儲更多數據,會變的更麻煩。

我們用數組解決問題,一個數組變量可以存放多個數據。

好比一個團,團裡有很多人,如下我們使用數組存儲5個學生成績。

 圖片13.png

數組的概念

數組是一個值的集合每個值都有一個索引號,從0開始,每個索引都有一個相應的值,根據需要添加更多數值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTDxhtml1-transitional.dtd"> 
<html xmln="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>什麽是數組</title>
        <script type="text/javascript">
            var myarr = new Array();
            myarr[0] =80;
            myarr[1] =60;
            myarr[2] =99;
            document.write("第一個人的成績是:"+myarr[0]+"<br />");
            document.write("第二個人的成績是:"+myarr[1]+"<br />");
            document.write("第三個人的成績是:"+myarr[2]);
        </script>
    </head>
    <body>
    </body>
</html>

 執行結果:

第一個人的成績是:80
第二個人的成績是:60
第三個人的成績是:99

向數組追加新元素

現在我們使用myarray變量存儲了5個人的成績,那麽多出一個人的成績,如何存儲呢?

 圖片19.png

只需使用下一個未用的索引,任何時刻可以不斷向數組增加新元素。

myarray[5]=88; //使用一個新索引,爲數組增加一個新元素
<script language="javascript">
    var myarray = Array();
    myarray[0] = 88;
    myarray[1] = 77;
    myarray2[] = 99;
    myarray[3] = 66;
    document.write("數組第一個值是:"+myarray[0]+"<br />");
    document.write("數組第一個值是:"+myarray[1]+"<br />");
    document.write("數組第一個值是:"+myarray[2]+"<br />");
    document.write("最新增加的第四個值是:"+myarray[3]);
</script>

使用數組中的某一個元素

數組中的每個值有一個索引號,從0開始,如下圖, myarray變量存儲6個人的成績:

 圖片19.png

要得到一個數組元素的值,只需用中括號 [ ] 來引用數組變量並提供一個索引,如:

第一個人的成績表示方法:

myarray[0]

第三個人的成績表示方法: 

myarray[2]
<script language="javascript"">
var myarray = Arry();
myarray[0] = 88;
myarray[1] = 77;
myarray[2] = 99;
myarray[3] = 66;
document.write("數組第一個值是:"+myarray[0]+"<br />");
document.write("數組第二個值是:"+myarray[1]+"<br />");
document.write("數組第三個值是:"+myarray[2]+"<br />");
document.write("最新增加的第四個值是:"+myarray[3]+"<br />");
</script>

數組的屬性:length

如果想知道數組的大小,只需引用數組的一個屬性length。Length屬性表示數組的長度,即數組中元素的個數。

語法:

myarray.length; // 獲得數組myarray的長度

注意:因爲數組的索引總是由0開始,所以一個數組的上下限分別是:0和length-1。如數組的長度是5,數組的上下限分別是0和4。

var arr=[55,32,5,90,60,98,76,54];// 包含8個數值的數組arr
document.write(arr.length); // 顯示數組長度8
document.write(arr[7]); // 顯示第8個元素的值54

同時,JavaScript數組的length屬性是可變的,這一點需要特別注意。

arr.length=10; //增大數組的長度
document.write(arr.length); //數組長度已經變爲10

數組隨元素的增加,長度也會改變,如下:

var arr=[98,76,54,56,76]; // 包含5個數值的數組
document.write(arr.length); //顯示數組的長度5
arr[15]=34;  //增加元素,使用索引爲15,賦值爲34
alert(arr.length); //顯示數組的長度16

數組的維度

這裡我們只講述1維和2維數組。在實際開發中,我們會遇到N維,不過使用邏輯都大同小異,可以通過下述的基本常識推算。

一維數組,我們看成一組盒子,每個盒子只能放一個内容。

一維數組的表示:

myarray[ ]

二維數組,我們看成一組盒子,不過每個盒子裡還可以放多個盒子。

二維數組的表示:

myarray[][]

注意: 二維數組的兩個維度的索引值也是從0開始,兩個維度的最後一個索引值爲長度-1。

1. 二維數組的定義方法一

var myarr=new Array();  //先聲明一維
for(var i=0;i<2;i++){   //一維長度爲2
   myarr[i]=new Array();  //再聲明二維
   for(var j=0;j<3;j++){   //二維長度爲3
   myarr[i][j]=i+j;   // 賦值,每個數組元素的值爲i+j
   }
 }

注意: 關於for 循環語句,請看第四章4-5 。

將上面二維數組,用表格的方式表示:

012
0

myarr[]0[0]

值:0

myarr[0][1]

值:1

myarr[0][2]

值:2

1

myarr[1][0]

值:1

myarr[1][1]

值::2

myarr[1][2]

值:3

 2. 二維數組的定義方法二

var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]

3. 賦值

myarr[0][1]=5; //將5的值傳入到數組中,覆蓋原有值。

說明: myarr[0][1] ,0 表示表的行,1表示表的列。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>二維數組</title>
        <script type="text/javascript">
            var myarr = new Array();
            for(var i=0;i<3;i++){
                myarr[i] = new Array();
                for(var j=0;j<6;j++){
                myarr[i][j] = i*j;
                }
            }
        document.write(myarr[2][5]);
        </script>
    </head>
    <body>
    </body>
</html>

執行結果:

10

實例:

<!DOcTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>數組</title>
        <script type="text/javascript">
            //創建數組
            var arr['*','##','***','&&','****','##*'];
            arr[7]='**';
            //顯示數組長度
            alert(arr.length);
            //將數組内容輸出,完成達到的效果。
            document.wirte(arr[0]+"<br />");
            document.wirte(arr[7]+"<br />");
            document.wirte(arr[2]+"<br />");
            document.wirte(arr[4]+"<br />");
        </script>
    </head>
    <body>
    </body>
</html>

執行結果:

*
**
***
****


閲完此文,您的感想如何?
  • 有用

    0

  • 沒用

    0

  • 開心

    0

  • 憤怒

    0

  • 可憐

    0

1.如文章侵犯了您的版權,請發郵件通知本站,該文章將在24小時内刪除;
2.本站標注原創的文章,轉發時煩請注明來源;
3.交流群: 2702237 13835667

相關課文
  • JS如何防止父節點的事件運行

  • nodejs編寫一個簡單的http請求客戶耑代碼demo

  • 說一則爲什麽後耑開發人員不選擇node.js的原因

  • 使用Sublime Text3 開發React-Native的配置

我要說說
網上賓友點評