JavaScript

核心啟奧-Web前端培訓(xùn)教程第2章授課目標(biāo)：對象的創(chuàng)建及操作數(shù)組的創(chuàng)建及操作

函數(shù)的定義及使用

JS內(nèi)部對象介紹復(fù)合型數(shù)據(jù)啟奧-Web前端培訓(xùn)教程對象和數(shù)組啟奧-Web前端培訓(xùn)教程對象和數(shù)組都不是單一的值，而是一組值的集合對象：一組已命名值的集合，對象的值可以是任意數(shù)據(jù)類型數(shù)組：一組值的有序集合，通過下標(biāo)定義數(shù)組的順序，數(shù)組的值可以是任意數(shù)據(jù)類型，包含數(shù)組。如果一個數(shù)組的值還是數(shù)組，這樣的數(shù)組就是多維數(shù)組對象啟奧-Web前端培訓(xùn)教程JS中的對象啟奧-Web前端培訓(xùn)教程JS語言是基于對象的（Object-Based），而不是面向?qū)ο蟮模╫bject-oriented）。之所以說它是一門基于對象的語言，主要是因為它沒有提供象抽象、繼承、重載等有關(guān)面向?qū)ο笳Z言的許多功能。而是把其它語言所創(chuàng)建的復(fù)雜對象統(tǒng)一起來，從而形成一個非常強大的對象系統(tǒng)。雖然JS語言是一門基于對象的語言，但它還是具有一些面向?qū)ο蟮幕咎卣?。它可以根?jù)需要創(chuàng)建自己的對象，從而進一步擴大JavaScript的應(yīng)用范圍，增強編寫功能強大的Web文檔。對象的結(jié)構(gòu)與用途啟奧-Web前端培訓(xùn)教程對象是由屬性(properties)和方法(methods)兩個基本的元素的構(gòu)成的。前者是對象在實施其所需要行為的過程中，實現(xiàn)信息的裝載單位，從而與變量相關(guān)聯(lián)；后者是指對象能夠按照設(shè)計者的意圖而被執(zhí)行，從而與特定的函數(shù)相聯(lián)一個對象要真正的被使用，可采用以下幾種方式：引用JavaScript內(nèi)部對象由瀏覽器環(huán)境中提供創(chuàng)建新對象這就是說一個對象在被引用之前，這個對象必須存在，否則引用將毫無意義，從而出現(xiàn)錯誤信息。從上面中我們可以看出JavaScript引用對象可通過三種方式獲取。要么創(chuàng)建新的對象，要么利用現(xiàn)存的對象。創(chuàng)建對象啟奧-Web前端培訓(xùn)教程使用new運算符來創(chuàng)建空對象varmyobj=newObject();//注意new后面的Object的大小寫Object是JS的內(nèi)置對象，但new后面的Object()

并不是這個對象本身，而是它的構(gòu)造函數(shù)直接量創(chuàng)建對象varmyobj={};//創(chuàng)建一個空對象varmyobj={name:"對象a"，job:"學(xué)生"};//創(chuàng)建帶有屬性的對象所有對象的值都包含在一對"

{}

"里，各個屬性之間以","分割，屬性名和屬性值之間，以":"連接注：對象中的"{}"，是一種值的表現(xiàn)形式，與語句中的代碼塊不同，因此在對象的"{}"后可以出現(xiàn)";"對象的屬性啟奧-Web前端培訓(xùn)教程通常我們使用"."運算符來存取對象的屬性值位于"."左側(cè)的是我們要訪問的對象右側(cè)是屬性或方法名，它必須是一個"標(biāo)識符

"，而不能是字符串或表達(dá)式特殊情況下，我們還可以使用"[]"，來訪問屬性，如：myobj["name"]，注意屬性名在[]中的表現(xiàn)形式varobj={name:"a"};vartmp="a";alert(obj.tmp);vartmp="name";alert(obj[tmp]);到這你蒙圈了沒有？對象屬性的操作啟奧-Web前端培訓(xùn)教程屬性的枚舉枚舉：列出有窮序列集的所有成員枚舉與遍歷的區(qū)別：從字面理解，遍歷是

對對象中的所有成員逐一訪問；而枚舉是

將對象中的成員逐一列舉。但是在此處，枚舉與遍歷所表達(dá)的意義相同判斷屬性是否存在：in當(dāng)屬性存在卻未賦值時，同樣返回false屬性的刪除：deletefor(vartmpinobj){alert(o[tmp]);}varobj={name:"a"};alert(nameinobj);varobj={name:"a"};alert("name"inobj);;alert("name"inobj);Object的基本屬性與方法啟奧-Web前端培訓(xùn)教程JS所有內(nèi)置對象都繼承自O(shè)bject類，它們都定義了自己的屬性和方法（如：Array，Date）。在以后的課程中，我們會單獨介紹不同對象的方法。但是，所有創(chuàng)建的對象也支持Object所定義的屬性和方法。這里，我們簡單列舉幾個所有對象都具備的，通用的屬性和方法，當(dāng)然，這些屬性和方法在短時間內(nèi)我們還用不到，僅作了解即可。[屬性]constructor：在JS中，每個對象都有一個constructor屬性，它引用了初始化這個對象的構(gòu)造函數(shù)[方法]toString()：該方法沒有參數(shù)，它返回一個某種程度上代表著對象的值的一個字符串[方法]valueOf()：和toString很像，但是它是當(dāng)JS需要把一個對象轉(zhuǎn)換為某種基本數(shù)據(jù)類型而并不僅僅是字符串的時候，才調(diào)用的方法數(shù)組啟奧-Web前端培訓(xùn)教程JS中的數(shù)組啟奧-Web前端培訓(xùn)教程數(shù)組是一組值的有序集合，數(shù)組中的這些值叫做元素（element）；每個元素在數(shù)組中的位置叫做下標(biāo)（index）同一數(shù)組中的不同元素可以是不同數(shù)據(jù)類型（JS屬于弱類型語言）創(chuàng)建數(shù)組空數(shù)組：vararr=new

Array();指定長度：vararr=newArray(

3

);指定元素：vararr=newArray("元素1","元素2","元素3");數(shù)組賦值：arr[0

]=“元素1”;//數(shù)組的下標(biāo)從0開始數(shù)組的直接量：vararr=["元素1","元素2","元素3"];數(shù)組的讀寫啟奧-Web前端培訓(xùn)教程通常情況下，我們使用[]來存取數(shù)組，[]的左邊是數(shù)組的名稱，[]內(nèi)是數(shù)組的下標(biāo)數(shù)組下標(biāo)是從

0開始的，最大值必須小于232-1如果使用的數(shù)字太大或者為負(fù)數(shù)，則JS會將這個下標(biāo)轉(zhuǎn)化為字符串，并且將這個字符串作為對象的屬性名添加數(shù)組元素：給數(shù)組指定下標(biāo)賦值JS的數(shù)組非常靈活，不必在創(chuàng)建數(shù)組時就制定數(shù)組長度，即使制定了數(shù)組長度，也可以隨意增加數(shù)組元素數(shù)組元素的下標(biāo)不必須落在一個連續(xù)的數(shù)字范圍內(nèi)a[-1]="新數(shù)組";//為對象a創(chuàng)建了一個名為"-1"的屬性a[0]="元素1";a[100]="元素2";基本操作啟奧-Web前端培訓(xùn)教程數(shù)組的長度length：數(shù)組的長度就是指數(shù)組中包含的元素個數(shù)vararr=[2,4,6];arr.length;//3由于數(shù)組的下標(biāo)從0開始，因此數(shù)組的長度會比數(shù)組的最大下標(biāo)大1vararr=[2,4,6];arr[arr.length-1];//6刪除數(shù)組delete：同對象操作中刪除屬性使用delete

刪除數(shù)組值后，會將該值置為undefined，但元素本身還存在，也就是說delete

操作并不減小數(shù)組長度要真正刪除一個元素，使該元素之后的所有元素下標(biāo)前移？答案在后面遍歷數(shù)組forin：同對象操作中的遍歷vararr=[2,4,6];

for(varainarr)

{

alert(arr[a]);

}如果已知數(shù)組下標(biāo)是連續(xù)的，并且從0開始，那么我們還可以通過數(shù)組長度進行for循環(huán)遍歷：for(vari=0;i<arr.length;i++){alert(arr[i]);}多維數(shù)組啟奧-Web前端培訓(xùn)教程我們之前所談?wù)摰臄?shù)組都是一維數(shù)組，在其他程序語言中，數(shù)組除了一維之外，還包括多維數(shù)組（二維或二維以上）多維數(shù)組從直觀的角度來理解，就是數(shù)組套數(shù)組的關(guān)系，JS雖然并不支持真正的多維數(shù)組，但是它允許數(shù)組的元素為數(shù)組，這就非常接近多維數(shù)組通常情況下，我們可以用for循環(huán)的方式來存取多維數(shù)組，在使用中，我們可以使用多個[]運算符來完成多維數(shù)組的操作vararr=[1,2,3,4,5,6];for(vari=0;i<arr.length;i++){arr[i]=[1,2,3,4,5];}alert(arr[3][3]);試試用多維數(shù)組實現(xiàn)一個班級信息管理表數(shù)組的方法啟奧-Web前端培訓(xùn)教程增加push(e1,e2,e3...)：在數(shù)組末尾追加元素，并返回數(shù)組的新長度unshift(e1,e2,e3...)：在數(shù)組頭部添加元素，并返回數(shù)組的新長度concat(arr1,arr2,arr3...)：合并兩個或多個數(shù)組并返回集合刪除pop()：刪除并返回數(shù)組的最后一個元素shift()：刪除并返回數(shù)組的第一個元素子數(shù)組splice(s,e,ele1,ele2,ele3...

)：在指定位置插入指定的項slice(s,e)：在數(shù)組中選擇一部分組成新數(shù)組數(shù)組的方法啟奧-Web前端培訓(xùn)教程數(shù)組排序reverse()：反轉(zhuǎn)數(shù)組sort()：根據(jù)元素對數(shù)組進行排序數(shù)組轉(zhuǎn)換toString()：將數(shù)組轉(zhuǎn)換為字符串并返回join()：用指定分隔符分割數(shù)組并返回字符串函數(shù)啟奧-Web前端培訓(xùn)教程函數(shù)的定義啟奧-Web前端培訓(xùn)教程定義函數(shù)的最常用方法就是調(diào)用function語句，該語句是由關(guān)鍵字function構(gòu)成的，它后面跟隨的是：函數(shù)名

包含在圓括號中的0個參數(shù)或多個參數(shù)，其中每個參數(shù)用逗號分開構(gòu)成函數(shù)主體的JavaScript語句，包含在花括號中函數(shù)的創(chuàng)建傳統(tǒng)函數(shù)：function

fn(x)

{

alert(

x

);

}

函數(shù)的直接量：varfn=function(){alert("測試");}vararr=newFunction("","alert('測試');");//注意函數(shù)體的雙引號函數(shù)的命名：函數(shù)的命名規(guī)則和標(biāo)識符是完全一樣，通常是動詞或者以動詞開頭函數(shù)的參數(shù)啟奧-Web前端培訓(xùn)教程參數(shù)類型形參：定義函數(shù)時使用的參數(shù)，如上面的x實參：調(diào)用函數(shù)時傳遞給函數(shù)的實際參數(shù)，如調(diào)用上面的函數(shù)jiayi(4)參數(shù)特性：JS中的函數(shù)屬于寬松類型對于參數(shù)的數(shù)據(jù)類型沒有限制對于參數(shù)的個數(shù)沒有限制（但是傳遞順序有嚴(yán)格限制），傳遞過程中，多余的參數(shù)會被忽略，當(dāng)傳遞的參數(shù)不足，被遺漏的參數(shù)將被默認(rèn)為undefined參數(shù)列表：Arguments

對象作用：Arguments對象是一個類似數(shù)組的對象，可以按照數(shù)目獲取傳遞給函數(shù)的參數(shù)（arguments[0]表示實際傳遞的第一個參數(shù)）屬性：callee

屬性，用于引用當(dāng)前正在執(zhí)行的函數(shù)函數(shù)的調(diào)用方法啟奧-Web前端培訓(xùn)教程直接調(diào)用函數(shù)名(參數(shù))在鏈接中調(diào)用<ahref="javascript:函數(shù)名(參數(shù));">鏈接</a>在事件中調(diào)用事件類型="函數(shù)名(參數(shù));"遞歸調(diào)用function函數(shù)名(參數(shù)){函數(shù)名(參數(shù));}作為數(shù)據(jù)的函數(shù)啟奧-Web前端培訓(xùn)教程在JS中，函數(shù)不只是一種語法，還可以是數(shù)據(jù)functionsquare(x){returnx*x;}這里的函數(shù)名沒有實質(zhì)意義，它只是用來引用函數(shù)的變量，我們可以將這個變量通過函數(shù)名再轉(zhuǎn)移給其他變量vara=square;varb=a(5);函數(shù)的返回值

return：在函數(shù)中使用return語句，即可向函數(shù)外部傳遞一個值出來默認(rèn)情況下，函數(shù)執(zhí)行完畢之后，都會返回一個undefined在函數(shù)的任意位置，都可以使用return語句，當(dāng)return語句執(zhí)行時，函數(shù)體將被終止除了賦給全局變量外，我們還可以將函數(shù)賦給對象的屬性，這時的函數(shù)叫做對象的方法方法中的指針標(biāo)識this：方法中被隱式傳遞的參數(shù)，表示當(dāng)前調(diào)用函數(shù)的對象內(nèi)部對象啟奧-Web前端培訓(xùn)教程JS中的內(nèi)部對象啟奧-Web前端培訓(xùn)教程我們說JS是基于對象的編程語言，也就是說，JS代碼中的所有內(nèi)容，都是以對象為基點開始的JS中的內(nèi)部對象Number、String、Boolean、Object、Array、FunctionArguments、Global、Date、Math、RegExp、ErrorJavaPackage、JavaObject、JavaClass、JavaArray在這部分內(nèi)容里，我們只針對幾個比較常用的對象進行了解StringGlobalMathDateString對象啟奧-Web前端培訓(xùn)教程String對象啟奧-Web前端培訓(xùn)教程屬性length：字符串中字符的個數(shù)，包含所有符號方法：JS中關(guān)于字符串的方法有很多，我們將對這些方法進行分類，再從中選擇一些比較實用的方法進行學(xué)習(xí)查找方法：字符查找、位置查找、匹配查找操作方法：拼接、截取、空格處理編碼方法：編碼與解碼轉(zhuǎn)換方法：大小寫轉(zhuǎn)換，數(shù)組轉(zhuǎn)換String對象查找方法啟奧-Web前端培訓(xùn)教程字符查找：chatAt(n)：返回字符串中的第n

個字符位置查找：indexOf("s")：從前向后查找"s"

在字符串中第一次出現(xiàn)的位置lastIndexOf("s")：從后向前查找"s"

在字符串中第一次出現(xiàn)的位置匹配查找match()：根據(jù)正則表達(dá)式匹配內(nèi)容search()：同上replace()：根據(jù)正則表達(dá)式替換內(nèi)容String對象操作方法啟奧-Web前端培訓(xùn)教程拼接：concat()：把一個或多個值連接到字符串上，等價于"+"連接符截?。簊lice(s,e)：截取一個子字符串，從索引s開始，到e結(jié)束，不包含esubstring(f,t)：與slice基本相同，不接受負(fù)參數(shù)substr(s,l)：截取一個子字符串，從索引s

開始，截取l

個字符空格處理trim()：去除字符串首尾空格String對象編碼方法與轉(zhuǎn)換方法啟奧-Web前端培訓(xùn)教程編碼與解碼：encodeURI()：將字符串轉(zhuǎn)為16進制序列decodeURI()：對encodeURI進行解碼注：以上兩個函數(shù)并非String對象的方法，而是全局函數(shù)（Global）轉(zhuǎn)換：toUpperCase()：全部轉(zhuǎn)換為大寫toLowerCase()：全部轉(zhuǎn)換為小寫split(

"分隔符")：通過分隔符將字符串轉(zhuǎn)換為數(shù)組Global對象啟奧-Web前端培訓(xùn)教程Global對象啟奧-Web前端培訓(xùn)教程Global是一個全局對象，但它并不是一個類，所以雖然所有全局變量都是Global的屬性，但并不可以在Global下去查找這些屬性：undefined是一個全局屬性，但是不可以通過Global.undefined使用它JS運行在什么環(huán)境下，這個環(huán)境就是Global，通常我們所操作的Global是WindowGlobal的屬性：Infinity：無窮大NaN：非數(shù)值undefined：未定義的值Global對象啟奧-Web前端培訓(xùn)教程Global的函數(shù)：eval()：計算JS字符串，并把它作為腳本代碼來執(zhí)行encodeURI()：將字符串轉(zhuǎn)為16進制序列decodeURI()：對encodeURI進行解碼Number()：將對象轉(zhuǎn)為數(shù)字parseFloat()：將字符串轉(zhuǎn)為浮點數(shù)值parseIn