# javascript快速入門5--數組與對象 ## 數組 數組,實際上就是將一大堆相似的數據有秩序的放在格子箱中,十分像藥房里的那些柜子. ``` | 數據1 | 數據2 | 數據3 | 數據4 | 數據5 | 數據6 | ``` 用代碼創建數組 ``` var arr = new Array();//Array和Date一樣,也是一個內置對象,需要使用new運算符創建 arr[0]="數據1";//向數組中添加一個元素,數組中的元素是有編號的,并且要注意的是,編號從0開始 //上面一行代碼就向數組中的第一個箱添加了一個元素 arr[1]="數據2";//方括號用以指定下標1 arr[2]="數據3"; arr[3]="數據4"; arr[5]="數據6"; arr[4]="數據5"; alert(arr);//將會輸出"數據1,數據2,數據3,數據4,數據5,數據6" 是以逗號分隔的字符串 //并且這些字符串的連接是按(下標)順序的 alert(arr[0]);//當然,我們也可以直接訪問其中第一個元素 alert(arr[1]);//第二個 alert(arr.length);//遇到的第一個數組對象的屬性,length屬性用以表示數組中元素的個數,輸出6 ``` 遍歷數組 for 循環 ``` for (var i=0;i< arr.length;i++) { arr[i]+=" ---changed";//將數組中每個元素(字符串)后面連上一個" ---changed" } alert(arr);//變了 ``` 創建數組的其它方式 ``` var arr; arr = new Array();//這樣創建了一個空數組 alert(arr);//輸出為空,因為沒有元素 arr = new Array(3);//在申明時只放一個正整數表示數組的長度 alert(arr.length);//輸出3 alert(arr);//輸出兩個逗號,它里面放了3個空元素 //申明時指定了數組的長度,然后修改指定位置的值 arr[2]="end";//將最后一位修改為"end" alert(arr); //并不是在數組申明時指定了長度就不能更改,更改長度很簡單 arr[8]="super";//數組長度將自動增長到8 //記住,JavaScript中數組長度會自動增長,并且length屬性會自動更新 alert(arr.length);//輸出9,JavaScript中數組下標是從0開始的 alert(arr[8]); //也可以在創建數組時就指定值 arr = new Array(1,2,3,4,5,6,7,8); alert(arr); //如果在創建數組時只指定一個值,并且是正整數 arr = new Array(6);//將得不到預期效果,因為這是在聲明一個長度為6的空數組 //需要這樣 arr = new Array(); arr[0]=6; //還可以使用數組字面量的方式 arr = [];//是的,一個空中括號 //與下面一句幾乎是等價的 arr = new Array(); //但更靈活和簡便 arr =[3];//將創建一個長度為1,第一個元素為3的數組 arr = [2,3,4,6];//多個元素以逗號分隔 alert(arr[0]);//輸出2,下標的順序與在中括號中出現的順序相關 //數組中可以混合存放字符串,數值,布爾值...,幾乎所以類型的值,包括數組 arr = new Array(1,0,true,"some string",new Array("a",3));//第五個元素放的是一個數組 alert(arr[4]);//輸出"a",3 alert(arr[4][0]);//輸出"a" ``` 數組的按引用傳值的特性 ``` var arr = [2,3,4] ; var arr2 =arr;//這相當于給arr取了個別名 arr2[0]=234; alert(arr[0]);//輸出234,因為arr與arr2是同一個對象 ``` 向數組中添加,刪除元素(push,delete) ``` var arr = [2,4]; arr.push(6);//push方法將元素添加到數組未尾 alert(arr.length);//輸出3 arr.push("a","b");//可以一次添加多個元素 alert(arr.length);//輸出5 alert(arr[5]);//輸出"b" alert(arr.push(123));//push方法執行后會返回數組的新長度值,輸出6 //事實上將元素添加到數組未尾的最簡單的方法是 arr = [4,5]; arr[arr.length]="new element";//利用數組長度自動增長的特性 alert(arr.length);//輸出3 //為了更明了的明白push的工作原理,我們可以使用一個簡單的自定義函數來完成這項工作 function array_push(element,arr) {//第一個參數為要添加的元素,第二個參數為該數組 arr[arr.length]=element; return arr.length; } arr = [1,2,3]; array_push(345,arr); alert(arr.length);//輸出4 alert(array_push("some string",arr));//輸出5 alert(arr); //刪除一個元素 arr = ["#","$","%"]; alert(arr); delete arr[2]; alert(arr); alert(arr.length);//元素被刪除了,但數組長度并沒有變化,因為這樣能使我們使用相同的下標訪問以前的元素 //使用delete與下面的語句效果一樣 arr = ["#","$","%"]; alert(arr); arr[2]=undefined;//undefined是一個值 alert(arr); ``` join方法,返回數組中的所有元素以指的分隔符間隔的字符串 ``` var arr = [2,3,4]; alert(arr.join("#")); //事實上當我們直接輸出數組時,系統會自動調用這樣的方法 alert(arr); alert(arr.join(","));//兩句的輸出效果是一樣的 ``` ## 對象 對象是一堆屬性的集合,其實它和數組是相通的 ``` var obj = new Object();//創建一個對象 obj.property = "value";//使用點語法給對象添加屬性 alert(obj);//只會輸出含糊的[object Object] alert(obj.property);//真正的數據全存儲在它的屬性上面 ``` 對象嗎?就當和現實中的對象一樣:一個"人"對象 ``` var person = new Object(); person.age = 18; person.weight = "123kg"; person.height = "170cm"; person.arm = 2;//兩個臂膀 person.leg = 2; ``` 上面創建的對象,描述了現實中的人的一些特性:年齡 18;重量 123kg;身高 170cm;不是殘疾(這個是我推斷的); 其實數組也能完成這樣的工作 ``` var person = new Array(); person[0] = 18; person[1] = "123kg"; person[2] = "170cm"; person[3] = 2; person[4] = 2; ``` 但是這樣的表達方式,沒人能看出這是一個"人"對象,使用數字下標沒有對象的屬性明了,代碼難于理解. 其實數組可以使用字符串下標的 ``` var person = new Array(); person["age"] = 18;//注意,中括號里的下標是一個字符串,所以需要使用引號 person["weight"] = "123kg"; person["height"] = "170cm"; person["arm"] = 2; person["leg"] = 2; ``` 我說過了,數組和對象是相通的 ``` var arr = new Array(); var obj = new Object(); alert(typeof arr);//object alert(typeof obj);//object ``` 所以,數組用字符串下標,事實上也是在給其添加屬性 ``` var arr =[1,2,3]; arr["property"]="some data"; alert(arr.property);//"some data" //但注意的是,數組的length屬性只能報告具有數字下標的元素的個數 alert(arr.length);//3 ``` 而對象也可以使用類似語法訪問它的屬性 ``` var obj = new Object(); obj.property = "some data"; alert(obj["property"]);//"some data" //當然也可以使用數字下標 obj[1]=123; alert(obj[1]);//123 alert(obj.property);//"some data" alert(obj.length);//但與數組不同的是,它沒有length屬性 ``` 與數組字面量相對應的,也有對象字面量的聲明方式 ``` var obj = { a:123,//這里的a,b等同樣是對象的屬性名 b:456 //注意,最后沒有逗號 }; alert(obj.a); alert(obj.b); //還可以這樣寫 obj = { "a":345, //雖然如果用引號引起來就可以使用空格等不符合變量命名規范的字符,但強烈不推薦 "b":333 }; alert(obj.a);//345 ``` 對于數組,我們可以使用for對其進行遍歷,但for循環只能遍歷具有數字下標的元素 ``` var arr =[1,2,3,4]; arr["stringIndex"]="some data";//這個不會被遍歷到 alert(arr.length);//arr.length屬性也不報告包含此元素 for (var i=0;i< arr.length;i++) { alert(arr[i]);//i只會是數字,所以不能遍歷字符串下標的元素 } ``` 我們之前看到,對數組使用字符串下標實際上是給這個數組對象添加屬性,這個時候我們會發現,對象的屬性還沒有什么好的方法列舉出來,for.. in...循環出現了 (對于研究對象,for in循環太有用了) ``` var obj={ age:12, height:170 }; for (var i in obj) {//i將會被列舉為鍵名,就是所說的字符串的下標 alert(i+"\n"+obj[i]);/*將會以類似 age 12 這樣的格式分別輸出它的鍵名鍵值對 */ } ``` for in 循環不但是用來遍歷對象屬性,它也可以遍歷出數組的具有數字下標的元素 ``` var arr = [1,2,3,4,5,6]; arr["property"]=78;//會被遍歷到,因為它是屬性 for (var i in arr) { alert(i+" : "+arr[i]); } ``` 了解這些之后,我們可以使用它們來存儲一些數據:一個班的學生的成績(該用數組還是對象呢?這確實是一個問題) ``` //該是對象就是對象,該是數組就是數組 var myClass=[];//創建一個數組,放置每個學生的信息,以學生的學號作為數組下標 myClass[1]={ "name":"HUXP", "Chinese":60, "English":70, "Math":80, "Grade":"C" }; myClass[2]={ "name":"發哥", "Chinese":80, "English":80, "Math":80, "Grade":"B" }; myClass[3]={ "name":"Per", "Chinese":66, "English":77, "Math":88, "Grade":"B" }; myClass[4]={ "name":"小虎子", "Chinese":60, "English":60, "Math":770, "Grade":"C" }; myClass[5]={ "name":"DBD", "Chinese":70, "English":70, "Math":70, "Grade":"B" }; myClass[6]={ "name":"○", "Chinese":77, "English":77, "Math":80, "Grade":"B" }; myClass[7]={ "name":"Me", "Chinese":100, "English":100, "Math":100, "Grade":"A", "Saying":"哇哈哈!" }; //當然,做了這些還沒什么意義 alert(myClass[5].Chinese)//如果有學號,輸出對應學號的學生的語文成績太簡單了 //更復雜的,搜索學生姓名,返回他的所有信息,是使用函數的時候了 function searchByName(name) { for (var i=1;i< myClass.length;i++) { if (myClass[i].name == name) { return myClass[i]; } } } alert(searchByName("○").Math); ``` ## String對象以及一些用于字符串的方法和屬性 創建String對象 ``` var str = new String(); alert(str);//輸出空字符串 str = new String("some string here"); alert(str);//輸出字符串"some string here" //表面上看,這和直接創建的字符串是一樣的效果 str = "some string here"; alert(str); ``` 但由于使用new String();所以創建出來的是對象 ``` var str = new String(); alert(typeof str);//object //因為是對象,所以自然有很多屬性和方法 //但字符串本身也存這樣的方法 ``` 有很多用于處理字符串的方法以及一些屬性 * length 屬性,返回字符串的長度 * indexOf 方法,返回字符串內第一次出現子字符串的字符位置 * lastIndexOf 方法,返回字符串中子字符串最后出現的位置 * charCodeAt 方法,返回一個整數，代表指定位置上字符的 Unicode 編碼 * fromCharCode 方法,從一些 Unicode 字符值中返回一個字符串 * replace 方法,進行文字替換,返回替換后的字符串的復制 * substr 方法,返回一個從指定位置開始的指定長度的子字符串 * substring 方法,返回位于 String 對象中指定位置的子字符串 * toLowerCase 方法,返回一個字符串，該字符串中的字母被轉換為小寫字母 * toUpperCase 方法,返回一個字符串，該字符串中的所有字母都被轉化為大寫字母 * split 方法,把字符串分割為字符串數組。 ``` var str ="some string here"; alert(str.length);//16 alert(str.indexOf("s"));//0,字符串的位置從0開始計數 alert(str.indexOf("o"));//1 alert(str.indexOf("k"));//沒有找到時返回-1 alert(str.lastIndexOf("e"));//15,從后往前查找 alert(str.charCodeAt(0));//115,小寫s的Unicode編碼 alert(String.fromCharCode(65,66,67,68));//返回ABCD,注意fromCharCode是String對象的靜態方法 alert(str.replace("some","much"));//"much string here" alert(str.substr(1,2));//uc,從下標1開始向后截取2個字符 alert(str.substring(1,2));//c,從下標1開始截取到下標2,不包括結束位置的字符 alert(str.toLowerCase()); alert(str.toUpperCase()); alert(str.split(" "));//some,string,here ```