分享陣列概念、創建、賦值、長度與使用

3-1什么是陣列?變數用來存盤資料，一個變數只能存盤一個內容,如果要存盤多個資料怎么辦？此時就需要用到陣列，陣列是一個值的集合，每個值都有一個索引號，從0開始，每個索引都有一個相應的值，根據需要添加更多數值，

1 <script type="text/javascript">
2  var myarr=new Array(); //定義陣列
3  myarr[0]=80; 
4  myarr[1]=60;
5  myarr[2]=99;
6  document.write("第一個人的成績是:"+myarr[0]);
7  document.write("第二個人的成績是:"+myarr[1]);
8  document.write("第三個人的成績是:"+myarr[2]);
9 </script>

3-2如何創建陣列?使用陣列之前首先要創建，而且需要把陣列本身賦至一個變數；

var myarray=new Array();//創建陣列的語法

我們創建陣列的同時，還可以為陣列指定長度，長度可任意指定；

1 var myarray= new Array(8); //創建陣列，存盤8個資料， 

1 <script type="text/JavaScript">
2  document.write("陣列的第一個值："+myarr[0]);
3 </script>

1.創建的新陣列是空陣列，沒有值，如輸出，則顯示undefined，
2.雖然創建陣列時，指定了長度，但實際上陣列都是變長的，也就是說即使指定了長度為8，仍然可以將元素存盤在規定長度以外，

3-3陣列賦值：陣列創建好，接下來我們為陣列賦值，

1 第一步：創建陣列var myarr=new Array(); 
2 第二步：給陣列賦值
3         myarr[1]=" 張三";
4         myarr[2]=" 李四";

如上為陣列的表達方式，下面創建一個陣列，用于存盤5個人的數學成績，

1 var myarray=new Array(); //創建一個新的空陣列
2 myarray[0]=66; //存盤第1個人的成績
3 myarray[1]=80; //存盤第2個人的成績
4 myarray[2]=90; //存盤第3個人的成績
5 myarray[3]=77; //存盤第4個人的成績
6 myarray[4]=59; //存盤第5個人的成績

注意：陣列每個值有一個索引號，從0開始，/我們還可以用簡單的方法創建上面的陣列和賦值；

第一種方法：

1 var myarray = new Array(66,80,90,77,59);//創建陣列同時賦值

 第二種方法:

1  var myarray = [66,80,90,77,59];//直接輸入一個陣列（稱 “字面量陣列”）

注意：陣列存盤的資料可以是任何型別（數字、字符、布林值等）

1 <script language="javascript">
2     var myarr=new Array(3);
3     myarr[0]=88;
4     myarr[1]=90;
5     myarr[2]=68;
6   document.write("陣列第一個值是:"+myarr[0]+"<br>");
7   document.write("陣列第二個值是:"+myarr[1]+"<br>");
8   document.write("陣列第三個值是:"+myarr[2]+"<br>");
9 </script>

3-4向陣列增加一個新元素:之前使用myarray變數存盤了5個人的成績，現在多出一個人的成績，如何存盤呢？只需使用下一個未用的索引，任何時刻可以不斷向陣列增加新元素，

1 myarray[5]=88; //使用一個新索引，為陣列增加一個新元素

 1 <script language="javascript">
 2  var myarray=new Array();
 3  myarray[0]=88;
 4  myarray[1]=90;
 5  myarray[2]=68;
 6  myarray[3]=99;
 7  document.write("陣列第一個值是:"+myarray[0]+"<br>");
 8  document.write("陣列第二個值是:"+myarray[1]+"<br>");
 9  document.write("陣列第三個值是:"+myarray[2]+"<br>");
10  document.write("陣列第四個值是:"+myarray[3]+"<br>");
11 </script>

3-5使用陣列元素：陣列中的每個值有一個索引號，從0開始， myarray變數存盤6個人的成績，如下圖：

1 要得到一個陣列元素的值，只需參考陣列變數并提供一個索引，如：
2 第一個人的成績表示方法：myarray[0]
3 第三個人的成績表示方法: myarray[2]

1 <script language="javascript">
2  var myarr=new Array();
3  myarr[0]="小紅";
4  myarr[1]="第二個人的姓名是"
5  myarr[2]="小亮";
6  myarr[3]="小川";
7  document.write("第二人的姓名是:"+ myarr[1]);
8 </script>

3-6陣列屬性length：如果我們想知道陣列的大小，只需參考陣列的一個屬性length，Length屬性表示陣列的長度，即陣列中元素的個數，

myarray.length; //獲得陣列myarray的長度

注意：因為陣列的索引總是由0開始，所以一個陣列的上下限分別是：0和length-1，如陣列的長度是5，陣列的上下限分別是0和4，

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

JavaScript陣列的length屬性是可變的，這一點需要特別注意

1 arr.length=10; //增大陣列的長度
2 document.write(arr.length); //陣列長度已經變為10

陣列隨元素的增加，長度也會改變，如下:

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

1 <script language="javascript">
2  var mynum=new Array(65,90,88,98);
3  document.write("陣列的長度是:"+ mynum.length);
4 </script>

3-7二維陣列/一維陣列，我們看成一組盒子，每個盒子只能放一個內容

1 一維陣列的表示: myarray[ ]

二維陣列，我們看成一組盒子，不過每個盒子里還可以放多個盒子，

1 二維陣列的表示: myarray[ ][ ]

二維陣列的兩個維度的索引值也是從0開始，兩個維度的最后一個索引值為長度-1， 

 二維陣列的定義方法一

1 var myarr=new Array();  //先宣告一維 
2 for(var i=0;i<2;i++){   //一維長度為2
3    myarr[i]=new Array();  //再宣告二維 
4    for(var j=0;j<3;j++){   //二維長度為3
5    myarr[i][j]=i+j;   // 賦值，每個陣列元素的值為i+j
6    }
7  }

將上面二維陣列，用表格的方式表示:

 二維陣列的定義方法二,在賦值中，myarr[0][1] ,0 表示表的行，1表示表的列，

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

myarr[0][1]=5; //將5的值傳入到陣列中，覆寫原有值，//賦值

測驗:使用Javascript語言，把以下陣列 var  arr = ['*','##',"***","&&","****","##*"];arr[7] = "**";在頁面顯示圖案：

第一步：定義一個陣列，存盤要展示的圖形，提示:var arr = ['*','##',"***","&&","****","##*"]; arr[7] = "**";
第二步：預想一下arr 陣列的長度是多少？ 提示: 使用alert彈出陣列的長度，看看是否跟自己的答案一樣，
第三步：將陣列內容輸出，完成達到的效果，

 1 <script type="text/javascript">
 2  //創建陣列
 3  var  arr = ['*','##',"***","&&","****","##*"];
 4   arr[7] = "**";
 5  //顯示陣列長度
 6  alert(arr.length);
 7  //將陣列內容輸出，完成達到的效果，
 8 document.write(arr[0]+'<br />');
 9 document.write(arr[1]的值是：+'<br />');
10 document.write(arr[2]的值是：+'<br />');
11 document.write(arr[3]的值是：+'<br />');
12 document.write(arr[4]的值是：+'<br />');
13 document.write(arr[5]的值是：+'<br />');
14 document.write(arr[6]的值是：+'<br />');
15 document.write(arr[8]的值是：+'<br />');
16 </script>

標籤：JavaScript

上一篇：JS 實作計算器功能

下一篇：asap異步執行實作原理